:root {
    --bg: #100318;
    --bg-2: #21063b;
    --panel: rgba(35, 13, 58, 0.82);
    --panel-solid: #25103f;
    --panel-light: #321456;
    --line: rgba(255, 255, 255, 0.14);
    --text: #fff9f2;
    --muted: #d6c7e9;
    --gold: #ffc83d;
    --gold-2: #ff8a00;
    --pink: #ff2f63;
    --red: #ff435f;
    --blue: #18c8ff;
    --green: #20df75;
    --violet: #9358ff;
    --shadow: 0 18px 44px rgba(17, 3, 31, 0.36);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.24), transparent 32%),
        linear-gradient(225deg, rgba(24, 200, 255, 0.22), transparent 30%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px),
        linear-gradient(60deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 52px);
    opacity: 0.55;
}

body.auth-mobile-screen {
    background: #9da2ad;
}

body.auth-mobile-screen::before {
    display: none;
}

a {
    color: var(--gold);
    text-decoration: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.auth-card {
    width: min(100%, 440px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(23, 6, 39, 0.88);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.auth-visual {
    min-height: 154px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(16, 3, 24, 0.34)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
}

.auth-inner {
    padding: 22px;
}

.content-panel {
    width: min(100%, 440px);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.app-main .content-panel {
    width: 100%;
}

.content-panel h2,
.section-title {
    font-size: 1.04rem;
    font-weight: 900;
    margin-bottom: 12px;
}

.brand-lockup,
.app-logo,
.wallet-strip,
.quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-lockup {
    justify-content: space-between;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.44);
    border-radius: 8px;
    color: #2d1200;
    font-weight: 1000;
    background: linear-gradient(135deg, #fff5a3 0%, var(--gold) 45%, var(--gold-2) 100%);
    box-shadow: 0 10px 24px rgba(255, 138, 0, 0.25);
}

.brand-mark.small {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.brand-title {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 1000;
    line-height: 0.95;
}

.brand-title-img {
    display: block;
    width: min(100%, 310px);
    height: auto;
    margin-top: 4px;
    object-fit: contain;
}

.auth-subtitle {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.eyebrow {
    margin: 0 0 3px;
    color: var(--gold);
    text-transform: uppercase;
    font-size: 0.74rem;
    font-weight: 900;
}

.stack-form {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.stack-form label span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

input,
select,
textarea {
    width: 100%;
    color: var(--text);
    background: rgba(9, 2, 17, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 13px 14px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(255, 200, 61, 0.8);
    box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.18);
}

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

.check-row input {
    width: auto;
}

.btn-primary,
.btn-soft,
.choice,
.game-card {
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.btn-primary,
.btn-soft {
    border: 0;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 900;
}

.btn-primary {
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d 0%, var(--gold) 42%, #ff7a21 100%);
    box-shadow: 0 10px 24px rgba(255, 138, 0, 0.28);
}

.btn-soft {
    color: var(--text);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.btn-primary:hover,
.btn-soft:hover,
.game-card:hover,
.choice:hover {
    transform: translateY(-1px);
}

.form-message {
    min-height: 24px;
    margin: 0;
    color: var(--muted);
}

.form-message.error {
    color: #ffd0d7;
}

.form-message.success {
    color: #bfffd7;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    font-size: 0.94rem;
    font-weight: 800;
}

.auth-mobile {
    width: min(100%, 400px);
    min-height: 100vh;
    margin: 0 auto;
    color: #ffffff;
    background: #232322;
}

.auth-mobile-topbar {
    display: grid;
    grid-template-columns: 42px 1fr 54px;
    align-items: center;
    min-height: 56px;
    padding: 7px 14px;
    background: #3a3a39;
}

.auth-mobile-topbar > a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1;
}

.auth-mobile-logo {
    display: grid;
    place-items: center;
    color: #ffd429;
    text-align: center;
}

.auth-mobile-logo strong {
    display: block;
    color: #ffd429;
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 1000;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.auth-mobile-logo span {
    display: block;
    width: 112px;
    height: 2px;
    margin: 3px 0;
    background: linear-gradient(90deg, transparent, #ffd429 18%, #ffd429 82%, transparent);
}

.auth-mobile-topbar > b {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 6px;
    color: #d5a23d;
    font-size: 0.8rem;
    font-weight: 650;
}

.auth-mobile-topbar i {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background:
        linear-gradient(#d82433 0 14%, #ffffff 14% 28%, #d82433 28% 42%, #ffffff 42% 56%, #d82433 56% 70%, #ffffff 70% 84%, #d82433 84%),
        #2f58a8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.auth-mobile-hero {
    min-height: 112px;
    padding: 13px 22px;
    background: #30302f;
}

.auth-mobile-hero.register {
    min-height: 106px;
}

.auth-mobile-hero h1,
.auth-mobile-hero p {
    margin: 0;
}

.auth-mobile-hero h1 {
    font-size: 1.08rem;
    font-weight: 850;
}

.auth-mobile-hero p {
    margin-top: 11px;
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1.14;
    font-weight: 650;
}

.auth-mobile-card {
    padding: 0 22px 36px;
}

.auth-tabs {
    display: grid;
    gap: 0;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.auth-tabs.two {
    grid-template-columns: repeat(2, 1fr);
}

.auth-tabs.one {
    grid-template-columns: 1fr;
}

.auth-tabs button {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 69px;
    color: #bdb7c3;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 900;
}

.auth-tabs button.active {
    color: #ffc83d;
    border-bottom-color: #d8a33e;
}

.auth-tab-icon,
.auth-field-icon {
    display: grid;
    place-items: center;
    color: currentColor;
    background: #d8a33e;
}

.auth-tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.auth-tab-icon.phone::before,
.auth-field-icon.phone::before { content: ""; width: 12px; height: 16px; border-radius: 3px; background: #232322; }
.auth-tab-icon.email::before { content: ""; width: 16px; height: 11px; border: 2px solid #77716e; border-radius: 2px; }

.auth-mobile-form {
    display: grid;
    gap: 18px;
}

.auth-mobile-form label {
    display: grid;
    gap: 9px;
}

.auth-mobile-form label > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.auth-field-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex: 0 0 auto;
}

.auth-field-icon.lock::before { content: ""; width: 13px; height: 10px; border-radius: 3px; background: #232322; }
.auth-field-icon.gift::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #232322; }

.phone-input-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
}

.phone-input-row button,
.auth-password-row,
.auth-mobile-form input:not([type="checkbox"]) {
    min-height: 47px;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    background: #30302f;
}

.phone-input-row button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #d8d4dc;
    font-size: 0.92rem;
}

.phone-input-row button em {
    color: #bcc5ce;
    font-style: normal;
}

.auth-mobile-form input:not([type="checkbox"]) {
    padding: 12px 14px;
    font-size: 0.88rem;
}

.auth-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
}

.auth-password-row input {
    min-height: 47px !important;
    background: transparent !important;
}

.auth-password-row button {
    display: grid;
    place-items: center;
    height: 100%;
    color: #ddd9df;
    border: 0;
    background: transparent;
    font-size: 1.1rem;
}

.auth-form-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-check {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    color: #c9c2d0;
    font-size: 0.72rem;
}

.auth-check input {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    accent-color: #d8a33e;
}

.auth-check span {
    color: #c9c2d0 !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
}

.auth-check a,
.auth-form-links a {
    color: #ffc83d;
    font-size: 0.72rem;
    font-weight: 750;
}

.auth-check.privacy {
    flex-wrap: wrap;
    margin-top: 12px;
}

.auth-gold-btn,
.auth-outline-btn {
    display: grid;
    place-items: center;
    min-height: 44px;
    width: 88%;
    margin: 6px auto 0;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 1000;
    letter-spacing: 3px;
}

.auth-gold-btn {
    color: #9b5c11;
    border: 0;
    background: linear-gradient(135deg, #fff2aa, #d69f3e);
}

.auth-outline-btn {
    color: #ffc83d;
    border: 1px solid #d8a33e;
    background: transparent;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    align-items: center;
    min-height: 64px;
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 10px 14px;
    background: rgba(47, 47, 46, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.app-logo {
    display: grid;
    place-items: center;
    color: #ffd429;
    text-align: center;
    font-weight: 1000;
}

.app-logo-img {
    display: block;
    width: min(190px, 62vw);
    height: 48px;
    object-fit: contain;
}

.app-logo strong {
    display: block;
    color: #ffd429;
    font-size: 1.28rem;
    line-height: 1;
    font-weight: 1000;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.26);
}

.app-logo-line {
    display: block;
    width: 112px;
    height: 2px;
    margin: 4px 0;
    background: linear-gradient(90deg, transparent, #ffd429 18%, #ffd429 82%, transparent);
}

.desktop-nav {
    grid-column: 3;
    display: flex;
    justify-content: end;
    gap: 6px;
}

.desktop-nav a {
    color: var(--muted);
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 800;
}

.desktop-nav a.active,
.btn-soft.active {
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d, var(--gold));
}

.app-main {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 18px 14px 96px;
}

.hero-band {
    display: grid;
    gap: 16px;
    padding: 20px;
    min-height: 212px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(90deg, rgba(19, 5, 32, 0.9) 0%, rgba(19, 5, 32, 0.72) 45%, rgba(19, 5, 32, 0.35) 100%),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
    box-shadow: var(--shadow);
}

.hero-band h1 {
    max-width: 620px;
    font-size: clamp(1.8rem, 7vw, 3.4rem);
    line-height: 0.98;
    font-weight: 1000;
}

.hero-band p {
    color: rgba(255, 249, 242, 0.82);
}

.notice-ticker {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
    padding: 10px 12px;
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d, var(--gold));
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 900;
    overflow: hidden;
}

.notice-ticker span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-strip {
    justify-content: space-between;
    flex-wrap: wrap;
}

.wallet-card {
    padding: 16px;
    margin-top: -38px;
    border-radius: 8px;
    color: #210311;
    background: linear-gradient(135deg, #fff7bc 0%, #ffc83d 44%, #ff7a21 100%);
    box-shadow: 0 16px 36px rgba(255, 122, 33, 0.28);
}

.wallet-card .eyebrow {
    color: rgba(33, 3, 17, 0.7);
}

.wallet-amount {
    font-size: clamp(1.7rem, 6vw, 2.8rem);
    font-weight: 1000;
}

.quick-actions {
    flex-wrap: wrap;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.game-card {
    position: relative;
    display: block;
    color: var(--text);
    min-height: 124px;
    padding: 16px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
        var(--panel-solid);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(12, 2, 22, 0.22);
}

.game-card::after {
    content: "";
    position: absolute;
    inset: auto -36px -42px auto;
    width: 132px;
    height: 132px;
    background: linear-gradient(135deg, var(--pink), var(--blue), var(--green));
    opacity: 0.28;
    transform: rotate(24deg);
}

.game-card.hot {
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.88), rgba(147, 88, 255, 0.78)),
        var(--panel-solid);
}

.game-card.blue {
    background:
        linear-gradient(135deg, rgba(24, 200, 255, 0.8), rgba(52, 101, 255, 0.82)),
        var(--panel-solid);
}

.game-card.green {
    background:
        linear-gradient(135deg, rgba(32, 223, 117, 0.78), rgba(0, 149, 116, 0.86)),
        var(--panel-solid);
}

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

.game-card strong {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.08rem;
    font-weight: 1000;
}

.game-card span {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 220px;
    color: rgba(255, 249, 242, 0.8);
    font-size: 0.88rem;
    font-weight: 700;
}

.mini-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.mini-stat {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.mini-stat strong {
    display: block;
    color: var(--gold);
    font-weight: 1000;
}

.mini-stat span {
    color: var(--muted);
    font-size: 0.78rem;
}

.choice-grid {
    display: grid;
    gap: 10px;
}

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

.choice-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.choice-grid.numbers {
    grid-template-columns: repeat(5, 1fr);
}

.choice {
    min-height: 50px;
    color: var(--text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-weight: 1000;
}

.choice:disabled {
    opacity: 0.42;
}

.color-green {
    background: linear-gradient(135deg, #20df75, #008b64);
}

.color-red {
    background: linear-gradient(135deg, #ff7047, #ff214f);
}

.color-violet {
    background: linear-gradient(135deg, #c05cff, #6e42ff);
}

.bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: end;
    background: rgba(10, 0, 19, 0.68);
}

.bottom-sheet.open {
    display: flex;
}

.sheet-panel {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px;
    background: #230d3a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28);
}

.bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 10px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(calc(100% - 20px), 400px);
    min-height: 66px;
    transform: translateX(-50%);
    overflow: visible;
    padding: 6px 8px 5px;
    background: rgba(47, 47, 46, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -13px 30px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.bottom-nav a {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    color: #bfc0c2;
    border-radius: 8px;
    font-size: 0.66rem;
    font-weight: 850;
    text-align: center;
}

.bottom-nav-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: currentColor;
    line-height: 1;
}

.bottom-nav a.active:not(.bottom-nav-center) {
    color: #f0bd45;
    background: rgba(255, 200, 61, 0.08);
}

.nav-home::before {
    content: "";
    width: 18px;
    height: 16px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 3px;
    transform: translateY(3px);
}

.nav-home::after {
    content: "";
    position: absolute;
    top: 2px;
    width: 17px;
    height: 17px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.nav-activity {
    border: 2px solid currentColor;
}

.nav-activity::before {
    content: "";
    width: 13px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 0 0 8px 8px;
    border-top: 0;
}

.nav-activity i {
    position: absolute;
    top: -4px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5454;
}

.nav-promotion::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.nav-promotion::after {
    content: "$";
    position: absolute;
    font-size: 0.9rem;
    font-weight: 1000;
}

.nav-account::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.nav-account::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0 9px 0 0;
    transform: rotate(45deg);
}

.bottom-nav-center {
    margin-top: -33px;
    color: #ffd86b;
    font-size: 0.7rem;
    font-weight: 1000;
}

.bottom-nav-go {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    color: #ffffff;
    border: 6px solid #ffd96a;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 47%, #ff6c26 0 28%, transparent 29%),
        conic-gradient(from 12deg, #fff199, #ffb522, #ff762b, #ffcc42, #fff199);
    box-shadow: 0 8px 22px rgba(255, 144, 25, 0.42);
    font-size: 0.66rem;
    line-height: 1;
}

.bottom-nav-center.active .bottom-nav-go {
    box-shadow: 0 0 0 5px rgba(255, 216, 107, 0.13), 0 8px 22px rgba(255, 144, 25, 0.48);
}

@media (min-width: 820px) {
    .app-main {
        padding-bottom: 104px;
    }
}

@media (max-width: 819px) {
    .desktop-nav {
        display: none;
    }

    .mini-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 430px) {
    .auth-shell {
        padding: 10px;
    }

    .auth-inner,
    .content-panel,
    .hero-band,
    .wallet-card {
        padding: 16px;
    }

    .choice-grid.numbers {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

body.home-screen {
    background:
        linear-gradient(180deg, rgba(13, 5, 24, 0.76), rgba(10, 4, 18, 0.98)),
        url("../images/gaming-texture-light.jpg") center top/cover fixed,
        #12051d;
}

body.home-screen .app-topbar {
    background: rgba(29, 16, 40, 0.9);
}

.home-lobby {
    width: min(100%, 430px);
    padding: 14px 12px 98px;
}

.home-hero {
    position: relative;
    min-height: 218px;
    overflow: hidden;
    border-radius: 8px;
    background: #17091f;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
}

.home-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 3, 16, 0.95) 0%, rgba(8, 3, 16, 0.7) 44%, rgba(8, 3, 16, 0.12) 100%),
        linear-gradient(180deg, transparent 50%, rgba(8, 3, 16, 0.72) 100%);
}

.home-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 9px;
    min-height: 218px;
    width: min(72%, 285px);
    padding: 18px;
}

.home-hero-copy p {
    margin: 0;
    color: #ffd86b;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 1000;
}

.home-hero-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: 2.42rem;
    line-height: 0.92;
    font-weight: 1000;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.home-hero-logo {
    display: block;
    width: min(100%, 260px);
    height: auto;
    margin: -8px 0 -2px;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.38));
}

.home-hero-copy span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.86rem;
    font-weight: 750;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 4px;
}

.home-hero-actions a {
    min-height: 36px;
    padding: 9px 13px;
    font-size: 0.82rem;
}

.home-notice {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 9px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 216, 107, 0.28);
    border-radius: 8px;
    background: rgba(20, 10, 31, 0.82);
}

.home-notice > span {
    display: grid;
    place-items: center;
    height: 24px;
    color: #3b2200;
    border-radius: 6px;
    background: linear-gradient(135deg, #fff4a5, #ffc43d);
    font-size: 0.75rem;
    font-weight: 1000;
}

.home-notice div {
    min-width: 0;
    overflow: hidden;
}

.home-notice p {
    width: max-content;
    min-width: 100%;
    margin: 0;
    color: #f8efe2;
    font-size: 0.78rem;
    font-weight: 800;
    animation: homeTicker 14s linear infinite;
}

@keyframes homeTicker {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

.home-wallet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 15px;
    border-radius: 8px;
    color: #2b1700;
    background:
        linear-gradient(135deg, rgba(255, 246, 176, 0.93), rgba(255, 194, 50, 0.9) 50%, rgba(245, 121, 22, 0.9)),
        url("../images/ui/timer-card.png") center/cover no-repeat,
        #ffc43d;
    box-shadow: 0 13px 26px rgba(255, 160, 31, 0.2);
}

.home-wallet span {
    display: block;
    font-size: 0.76rem;
    font-weight: 900;
    opacity: 0.75;
}

.home-wallet strong {
    display: block;
    font-size: 1.78rem;
    line-height: 1;
    font-weight: 1000;
}

.home-wallet button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #2b1700;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.36);
    font-size: 1.1rem;
    font-weight: 1000;
}

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

.home-quick-item {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 82px;
    padding: 10px 6px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
        rgba(38, 25, 54, 0.84);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.22);
}

.quick-img {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 7px 14px rgba(0, 0, 0, 0.24);
}

.wallet-img {
    background-image: url("../images/ui/wallet-card.png");
}

.cash-img {
    background-image: url("../images/home/promo-reward.jpg");
}

.ledger-img {
    background-image: url("../images/home/game-wingo.jpg");
}

.account-img {
    background-image: url("../images/home/vip-crown.jpg");
}

.home-quick-item strong {
    color: #f6eedf;
    font-size: 0.76rem;
    font-weight: 900;
}

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

.home-balance-grid div {
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(23, 16, 35, 0.8);
}

.home-balance-grid span {
    display: block;
    color: #cfc5d9;
    font-size: 0.68rem;
    font-weight: 850;
}

.home-balance-grid strong {
    display: block;
    overflow: hidden;
    color: #ffd86b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 1000;
}

.home-section {
    margin-top: 18px;
}

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

.home-section-title span {
    display: block;
    color: #ffd86b;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 1000;
}

.home-section-title h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 1000;
}

.home-section-title a {
    color: #ffd86b;
    font-size: 0.82rem;
    font-weight: 900;
}

.home-game-feature {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 54px;
    gap: 12px;
    align-items: center;
    min-height: 128px;
    padding: 10px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(27, 18, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.home-game-feature img {
    width: 112px;
    height: 108px;
    object-fit: cover;
    border-radius: 8px;
}

.home-game-feature div {
    min-width: 0;
}

.home-game-feature span {
    display: block;
    color: #ffd86b;
    font-size: 0.74rem;
    font-weight: 1000;
}

.home-game-feature strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.1;
    font-weight: 1000;
}

.home-game-feature small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 750;
}

.home-game-feature b {
    display: grid;
    place-items: center;
    height: 34px;
    color: #2b1700;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff4a5, #ffc43d);
    font-size: 0.82rem;
}

.home-mini-games {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.home-mini-games a {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 84px;
    color: #ffffff;
    border-radius: 8px;
    background: rgba(20, 14, 31, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-mini-games img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.home-mini-games span {
    font-size: 0.74rem;
    font-weight: 900;
}

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

.home-lottery-cards a {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 132px;
    overflow: hidden;
    padding: 11px;
    color: #ffffff;
    border-radius: 8px;
    background: #17101f;
}

.home-lottery-cards a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.05);
}

.home-lottery-cards a.trx::before {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.68)),
        url("../images/home/game-wingo.jpg");
}

.home-lottery-cards a.moto::before {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.68)),
        url("../images/home/home-hero.jpg");
}

.home-lottery-cards span,
.home-lottery-cards strong {
    position: relative;
    z-index: 1;
}

.home-lottery-cards span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    color: #ffffff;
    border: 3px solid rgba(255, 244, 175, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffffff, #ff4f58 42%, #aa091b 100%);
    font-size: 1.35rem;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.home-lottery-cards .moto span {
    margin-left: auto;
    background: radial-gradient(circle at 32% 28%, #ffffff, #28d676 42%, #08713f 100%);
}

.home-lottery-cards strong {
    color: #ffd86b;
    font-size: 0.82rem;
    line-height: 1.1;
    font-weight: 1000;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.44);
}

.home-title-accent {
    position: relative;
    padding-left: 10px;
}

.home-title-accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 4px;
    width: 4px;
    border-radius: 6px;
    background: var(--gold);
}

.home-winning-ticker {
    height: 276px;
    overflow: hidden;
}

.home-winning-track {
    display: grid;
    gap: 6px;
}

.home-winning-row {
    display: grid;
    grid-template-columns: 44px minmax(82px, 1fr) 72px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 8px 10px;
    color: #ffffff;
    border-radius: 6px;
    background: #343433;
}

.home-winner-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 1000;
}

.home-winner-avatar.avatar-1 { background: linear-gradient(135deg, #6c9dff, #2b2c67); }
.home-winner-avatar.avatar-2 { background: linear-gradient(135deg, #ff6f9c, #64285c); }
.home-winner-avatar.avatar-3 { background: linear-gradient(135deg, #ffd6a8, #5d334f); }
.home-winner-avatar.avatar-4 { background: linear-gradient(135deg, #f8c9d7, #5d405f); }
.home-winner-avatar.avatar-5 { background: linear-gradient(135deg, #c985ff, #34265f); }

.home-winning-row > strong {
    min-width: 0;
    overflow: hidden;
    color: #d9d5da;
    font-size: 0.74rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-winning-row img {
    width: 72px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
}

.home-winning-row b,
.home-winning-row small {
    display: block;
    min-width: 0;
}

.home-winning-row b {
    overflow: hidden;
    color: #ffe69a;
    font-size: 0.8rem;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-winning-row small {
    margin-top: 3px;
    color: #b9b4bc;
    font-size: 0.68rem;
    font-weight: 850;
}

.home-earnings-chart {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
    height: 160px;
    padding: 16px 12px 10px;
    border-radius: 8px;
    background: #343433;
}

.home-earnings-chart div {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    gap: 7px;
    height: 100%;
    min-width: 0;
}

.home-earnings-chart span {
    display: block;
    width: 100%;
    min-height: 18px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #fff0a1, #ffb833 48%, #f27024);
    box-shadow: 0 7px 14px rgba(255, 154, 26, 0.2);
}

.home-earnings-chart small {
    overflow: hidden;
    color: #bdb7c3;
    font-size: 0.56rem;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
}

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

.home-image-cards a {
    position: relative;
    min-height: 176px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 8px;
    background: #140e21;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

.home-image-cards img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-image-cards a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78));
}

.home-image-cards div {
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 12px;
}

.home-image-cards strong,
.home-image-cards span {
    display: block;
}

.home-image-cards strong {
    font-size: 1rem;
    font-weight: 1000;
}

.home-image-cards span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 800;
}

.home-service-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
}

.home-service-band a {
    display: grid;
    gap: 4px;
    min-height: 76px;
    padding: 11px 9px;
    color: #ffffff;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(22, 15, 34, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-service-band span {
    color: #cfc5d9;
    font-size: 0.67rem;
    font-weight: 850;
}

.home-service-band strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffd86b;
    font-size: 0.92rem;
    font-weight: 1000;
}

@media (min-width: 820px) {
    .home-lobby {
        padding-bottom: 34px;
    }
}

@media (max-width: 390px) {
    .home-hero-copy {
        width: 78%;
    }

    .home-quick-grid,
    .home-balance-grid {
        gap: 7px;
    }

    .home-game-feature {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .home-game-feature img {
        width: 96px;
        height: 96px;
    }

    .home-game-feature b {
        grid-column: 1 / -1;
    }
}

body.wingo-screen {
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.18), transparent 32%),
        linear-gradient(225deg, rgba(24, 200, 255, 0.16), transparent 30%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
    color: #ffffff;
}

body.wingo-screen::before {
    display: none;
}

.wingo-phone {
    width: min(100%, 400px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 12px 24px;
    background:
        linear-gradient(180deg, rgba(48, 48, 47, 0.88), rgba(37, 37, 37, 0.94)),
        url("../images/ui/phone-texture.png") center top/cover repeat-y,
        #30302f;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 18px 60px rgba(0, 0, 0, 0.3);
}

.wingo-topbar {
    height: 68px;
    display: grid;
    grid-template-columns: 46px 1fr 92px;
    align-items: center;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px;
    background:
        linear-gradient(180deg, rgba(68, 68, 66, 0.95), rgba(49, 49, 48, 0.96)),
        url("../images/ui/phone-texture.png") center top/cover no-repeat,
        #3a3a39;
}

.wingo-icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    font-weight: 500;
}

.wingo-icon-btn.small {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    font-weight: 900;
}

.wingo-actions {
    display: flex;
    justify-content: end;
    gap: 8px;
}

.wingo-brand {
    display: grid;
    place-items: center;
    color: #ffd429;
    text-align: center;
}

.wingo-brand-logo {
    display: block;
    width: min(156px, 42vw);
    height: 42px;
    object-fit: contain;
}

.wingo-brand strong {
    display: block;
    font-size: 1.28rem;
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.24);
}

.wingo-brand-line {
    width: 110px;
    height: 2px;
    margin: 4px 0;
    background: linear-gradient(90deg, transparent, #ffd429 20%, #ffd429 80%, transparent);
}

.wingo-balance-card {
    position: relative;
    overflow: hidden;
    margin: 24px 0 12px;
    padding: 18px 22px;
    min-height: 146px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(86, 86, 95, 0.86) 0%, rgba(70, 70, 68, 0.9) 52%, rgba(66, 66, 64, 0.92) 100%),
        url("../images/ui/wallet-card.png") center/cover no-repeat,
        #484847;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.balance-wave {
    position: absolute;
    inset: 0 auto 0 0;
    width: 62%;
    background: linear-gradient(135deg, rgba(101, 93, 145, 0.62), rgba(101, 93, 145, 0.08));
    clip-path: ellipse(76% 70% at 0% 52%);
}

.balance-refresh {
    position: absolute;
    top: 28px;
    right: 106px;
    color: rgba(255, 255, 255, 0.42);
    background: transparent;
    border: 0;
    font-size: 1.05rem;
}

.balance-main,
.balance-caption,
.balance-buttons {
    position: relative;
    z-index: 1;
}

.balance-main {
    display: block;
    text-align: center;
    font-size: 1.18rem;
    font-weight: 1000;
}

.balance-caption {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 800;
}

.balance-caption::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffd86e, #c99626);
}

.balance-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    margin-top: 22px;
}

.balance-buttons a {
    display: grid;
    place-items: center;
    min-height: 38px;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 1000;
}

.balance-buttons a:first-child {
    background: #ec3438;
}

.balance-buttons a:last-child {
    background: #17bb66;
}

.wingo-notice {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 8px;
    margin: 10px 2px 12px;
    color: #f7f2e8;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.35;
}

.notice-speaker {
    color: #f4c75a;
    font-size: 1.35rem;
    letter-spacing: -5px;
}

.wingo-notice a {
    display: grid;
    place-items: center;
    height: 24px;
    color: #593a00;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffe58d, #d7a33e);
    font-weight: 900;
}

.wingo-period-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 0;
    min-height: 96px;
    border-radius: 8px;
    background: #4a4a49;
}

.period-tab {
    display: grid;
    place-items: center;
    gap: 3px;
    color: #d7d7d7;
    background: transparent;
    border: 0;
    padding: 12px 4px 10px;
    font-size: 0.8rem;
}

.period-tab.active {
    color: #9b5e00;
    background: linear-gradient(180deg, #ffefaf, #dfad47);
}

.period-tab strong,
.period-tab small {
    display: block;
    line-height: 1.1;
}

.period-tab strong {
    font-weight: 850;
}

.period-tab small {
    font-size: 0.78rem;
}

.period-medal {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: url("../images/ui/medal-off.png") center/contain no-repeat;
    box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.18);
}

.period-tab.active .period-medal {
    background: url("../images/ui/medal-active.png") center/contain no-repeat;
}

.wingo-round-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 106px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 8px;
    color: #8d5300;
    background:
        linear-gradient(135deg, rgba(255, 240, 169, 0.9), rgba(231, 184, 86, 0.93)),
        url("../images/ui/timer-card.png") center/cover no-repeat,
        #e7b856;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 16px rgba(0, 0, 0, 0.14);
}

.wingo-round-card::before,
.wingo-round-card::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: #30302f;
}

.wingo-round-card::before {
    top: -7px;
}

.wingo-round-card::after {
    bottom: -7px;
}

.round-left,
.round-right {
    position: relative;
    z-index: 1;
    padding: 10px 12px;
}

.round-left {
    border-right: 1px dashed rgba(137, 87, 9, 0.35);
}

.how-play {
    min-width: 160px;
    height: 25px;
    color: #8b5200;
    border: 1px solid #8b5200;
    border-radius: 8px;
    background: transparent;
    font-size: 0.78rem;
}

.round-left small {
    display: block;
    margin: 8px 0 8px 6px;
    font-weight: 850;
}

.last-balls {
    display: flex;
    gap: 7px;
}

.round-right {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 8px;
    font-weight: 900;
}

.round-right span {
    font-size: 0.86rem;
}

.round-right > strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.timer-boxes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.timer-boxes b {
    display: grid;
    place-items: center;
    width: 23px;
    height: 32px;
    color: #ffffff;
    background: #232833;
    border-radius: 2px;
    font-size: 1.15rem;
}

.timer-boxes em {
    color: #232833;
    font-style: normal;
    font-weight: 1000;
}

.wingo-board {
    position: relative;
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(40, 40, 40, 0.9), rgba(25, 25, 25, 0.96)),
        url("../images/ui/phone-texture.png") center/cover no-repeat,
        #222222;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.color-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pick-btn {
    height: 38px;
    color: #ffffff;
    border: 0;
    border-radius: 6px 6px 0 0;
    font-size: 1rem;
    font-weight: 800;
}

.pick-green {
    background: #16bc67;
}

.pick-violet {
    background: #9947dc;
}

.pick-red {
    background: #db3739;
}

.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 13px;
    margin-top: 14px;
    padding: 8px 7px 10px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(26, 26, 26, 0.94), rgba(13, 13, 13, 0.96)),
        url("../images/ui/phone-texture.png") center/cover no-repeat,
        #191919;
}

.number-pick {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.number-ball {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #ffffff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 1.75rem;
    font-weight: 1000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.18);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24);
}

.number-ball::before {
    display: none;
}

.number-ball::after {
    display: none;
}

.number-ball {
    isolation: isolate;
}

.number-ball.small {
    width: 25px;
    height: 25px;
    font-size: 0.82rem;
    text-shadow: none;
}

.number-ball.small::after {
    border-width: 2px;
}

.number-ball.small::before {
    inset: 3px;
}

.ball-green {
    color: #2fbe76;
    background-image: url("../images/ui/ball-green.png");
}

.ball-red {
    color: #ef4650;
    background-image: url("../images/ui/ball-red.png");
}

.ball-violet {
    color: #9854ec;
    background-image: url("../images/ui/ball-violet.png");
}

.num-ball-0 {
    background-image: url("../images/ui/number/ball-0.png");
}

.num-ball-1 {
    background-image: url("../images/ui/number/ball-1.png");
}

.num-ball-2 {
    background-image: url("../images/ui/number/ball-2.png");
}

.num-ball-3 {
    background-image: url("../images/ui/number/ball-3.png");
}

.num-ball-4 {
    background-image: url("../images/ui/number/ball-4.png");
}

.num-ball-5 {
    background-image: url("../images/ui/number/ball-5.png");
}

.num-ball-6 {
    background-image: url("../images/ui/number/ball-6.png");
}

.num-ball-7 {
    background-image: url("../images/ui/number/ball-7.png");
}

.num-ball-8 {
    background-image: url("../images/ui/number/ball-8.png");
}

.num-ball-9 {
    background-image: url("../images/ui/number/ball-9.png");
}

.number-ball[class*="num-ball-"] {
    color: transparent;
    text-shadow: none;
    box-shadow: none;
}

.number-ball > *,
.number-ball {
    z-index: 1;
}

.multiplier-row {
    display: grid;
    grid-template-columns: 1.45fr repeat(6, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.multi-btn {
    height: 36px;
    color: #cfcfcf;
    border: 0;
    border-radius: 8px;
    background: #151515;
    font-weight: 800;
    font-size: 0.82rem;
}

.multi-btn.random {
    color: #ff4a4f;
    background: transparent;
    border: 1px solid #ff4a4f;
}

.multi-btn.active {
    color: #ffffff;
    background: #17bf6c;
}

.big-small-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    margin: 12px 12px 0;
    border-radius: 8px;
}

.big-small-row button {
    height: 40px;
    color: #ffffff;
    border: 0;
    font-size: 1rem;
    font-weight: 850;
}

.big-small-row button:first-child {
    background: #e99a34;
}

.big-small-row button:last-child {
    background: #5b93df;
}

.history-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.history-switch button {
    height: 40px;
    color: #bdbdbd;
    border: 0;
    border-radius: 8px;
    background: #242424;
    font-weight: 850;
}

.history-switch button.active {
    color: #9a5e00;
    background: linear-gradient(135deg, #fff0a3, #dfae49);
}

.history-switch button:hover,
.period-tab:hover,
.pick-btn:hover,
.multi-btn:hover,
.big-small-row button:hover {
    filter: brightness(1.08);
}

.history-panel[hidden] {
    display: none;
}

.result-panel {
    margin-top: 14px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(42, 42, 42, 0.95), rgba(29, 29, 29, 0.98)),
        url("../images/ui/phone-texture.png") center top/cover no-repeat,
        #292929;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.result-panel table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.result-panel thead {
    background: #413e55;
}

.result-panel th,
.result-panel td {
    height: 39px;
    padding: 7px 6px;
    color: #ffffff;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 850;
}

.result-panel th {
    color: #fff9e5;
    font-weight: 750;
}

.result-panel td:first-child {
    font-family: Arial, sans-serif;
    font-weight: 850;
    letter-spacing: 0;
}

.result-panel th:first-child,
.result-panel td:first-child {
    width: 48%;
}

.result-panel th:nth-child(2),
.result-panel td:nth-child(2) {
    width: 16%;
}

.result-panel th:nth-child(3),
.result-panel td:nth-child(3) {
    width: 20%;
}

.result-panel th:nth-child(4),
.result-panel td:nth-child(4) {
    width: 16%;
}

.result-panel tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.015);
}

.result-number {
    display: inline-block;
    min-width: 24px;
    font-size: 1.62rem;
    line-height: 1;
    font-weight: 1000;
    text-align: center;
}

.result-green {
    color: #31c879;
}

.result-red {
    color: #ff4e55;
}

.result-violet {
    color: #b05cff;
}

.result-green-violet,
.result-red-violet {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.result-green-violet {
    background-image: linear-gradient(180deg, #31c879 0 58%, #dd55ed 59% 100%);
}

.result-red-violet {
    background-image: linear-gradient(180deg, #ff4e55 0 58%, #b05cff 59% 100%);
}

.history-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    min-height: 72px;
    margin-top: 18px;
    padding: 15px 70px;
    background: #2d2d2c;
}

.history-pager button {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    color: #7a7a7a;
    border: 0;
    border-radius: 5px;
    background: #555554;
    font-size: 1.7rem;
    line-height: 1;
}

.history-pager button:not(:disabled) {
    color: #6a4300;
    background: #e7ad36;
}

.history-pager span {
    color: #cfd4d6;
    font-size: 0.82rem;
    font-weight: 850;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
}

.dot-green {
    background: #31c879;
}

.dot-red {
    background: #ff4e55;
}

.dot-violet {
    background: #d552ff;
}

.empty-result {
    color: #d7d7d7;
    height: 72px;
    font-weight: 500;
}

.chart-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.96), rgba(29, 29, 29, 0.98));
}

.chart-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #f4d67d;
    font-size: 0.76rem;
    font-weight: 700;
}

.chart-list {
    display: grid;
    gap: 8px;
}

.chart-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 22px 42px;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    color: #eeeeee;
    font-size: 0.76rem;
}

.chart-row strong {
    color: #ffffff;
    text-align: right;
    font-weight: 650;
}

.chart-track {
    height: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
}

.chart-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--violet), var(--gold));
}

.chart-live {
    color: #7ce8ab;
    font-size: 0.64rem;
    font-weight: 650;
}

.number-ball.tiny {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    text-shadow: none;
}

.my-result-panel th:first-child,
.my-result-panel td:first-child {
    width: 31%;
}

.my-result-panel th:nth-child(2),
.my-result-panel td:nth-child(2) {
    width: 27%;
}

.my-result-panel th:nth-child(3),
.my-result-panel td:nth-child(3) {
    width: 19%;
}

.my-result-panel th:nth-child(4),
.my-result-panel td:nth-child(4) {
    width: 23%;
}

.entry-status {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 650;
}

.entry-status.win,
.entry-status.won {
    color: #66e6a0;
}

.entry-status.lose,
.entry-status.lost {
    color: #ff7278;
}

.entry-status.pending {
    color: #f5d271;
}

.bet-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    color: #cfcfcf;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.88rem;
}

.bet-total-row strong {
    color: var(--gold);
    font-size: 1.05rem;
    font-weight: 750;
}

.pick-btn:disabled,
.number-pick:disabled,
.big-small-row button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.wingo-screen .bottom-sheet {
    left: 50%;
    width: min(100%, 400px);
    transform: translateX(-50%);
}

.wingo-screen .sheet-panel {
    background: #2b2b2b;
}

.wingo-screen .bet-panel {
    --bet-accent: #5b9dea;
    --bet-accent-strong: #4f8edb;
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: #252524;
}

.bet-sheet-head {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 106px;
    padding: 18px 50px 34px;
    background: linear-gradient(180deg, #78b8fb, #4f8edb);
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
}

.bet-panel.bet-theme-green {
    --bet-accent: #18c76f;
    --bet-accent-strong: #0cae5d;
}

.bet-panel.bet-theme-green .bet-sheet-head {
    background: linear-gradient(180deg, #3ee48f, #0cae5d);
}

.bet-panel.bet-theme-red {
    --bet-accent: #f14a4f;
    --bet-accent-strong: #db3037;
}

.bet-panel.bet-theme-red .bet-sheet-head {
    background: linear-gradient(180deg, #ff7675, #db3037);
}

.bet-panel.bet-theme-violet {
    --bet-accent: #9d49e7;
    --bet-accent-strong: #7f35c9;
}

.bet-panel.bet-theme-violet .bet-sheet-head {
    background: linear-gradient(135deg, #7f35c9 0%, #b948e8 48%, #f34d8d 100%);
}

.bet-panel.bet-theme-big {
    --bet-accent: #efa034;
    --bet-accent-strong: #df8a22;
}

.bet-panel.bet-theme-big .bet-sheet-head {
    background: linear-gradient(180deg, #ffbd57, #df8a22);
}

.bet-panel.bet-theme-small {
    --bet-accent: #5b9dea;
    --bet-accent-strong: #4f8edb;
}

.bet-panel.bet-theme-small .bet-sheet-head {
    background: linear-gradient(180deg, #78b8fb, #4f8edb);
}

.bet-sheet-head small {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 850;
}

.bet-sheet-head h2 {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 28px;
    margin: 0;
    color: #090909;
    border-radius: 5px;
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 500;
}

.bet-sheet-body {
    display: grid;
    gap: 12px;
    padding: 28px 14px 14px;
}

.bet-control-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.bet-control-row > span {
    font-size: 0.92rem;
    font-weight: 850;
}

.bet-panel .quick-actions {
    gap: 7px;
}

.bet-panel .btn-soft {
    min-width: 46px;
    min-height: 29px;
    padding: 6px 10px;
    color: #ffffff;
    border: 0;
    border-radius: 5px;
    background: #4a4a49;
    font-size: 0.76rem;
    font-weight: 850;
    box-shadow: none;
}

.bet-panel .btn-soft.active,
.quantity-stepper .btn-soft {
    background: var(--bet-accent-strong);
}

.quantity-stepper {
    display: grid;
    grid-template-columns: 30px minmax(0, 84px) 30px;
    justify-content: end;
    gap: 12px;
}

.quantity-stepper input {
    height: 30px;
    padding: 4px 8px;
    color: #ffffff;
    border: 1px solid #464646;
    border-radius: 0;
    background: #252524;
    text-align: center;
}

.bet-panel #betAmount {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.bet-qty-actions {
    justify-content: end;
}

.agree-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    font-size: 0.78rem;
}

.agree-row input {
    width: 20px;
    height: 20px;
    accent-color: #e2ad43;
}

.agree-row b {
    color: #ff4040;
    font-weight: 900;
}

.bet-action-row {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    margin-top: 2px;
}

.bet-action-row .btn-soft,
.bet-action-row .btn-primary {
    display: grid;
    place-items: center;
    min-height: 38px;
    border-radius: 0;
    box-shadow: none;
}

.bet-action-row .btn-soft {
    background: #5c5c5b;
}

.bet-action-row .btn-primary {
    color: #ffffff;
    background: var(--bet-accent-strong);
    font-size: 0.8rem;
}

.bet-action-row .btn-primary span {
    font-weight: 950;
}

.bet-panel .form-message {
    min-height: 18px;
    font-size: 0.74rem;
}

.lock-countdown {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.68);
    backdrop-filter: blur(1px);
}

.lock-countdown[hidden] {
    display: none;
}

.lock-countdown span {
    display: grid;
    place-items: center;
    width: 112px;
    height: 172px;
    color: #efb944;
    border-radius: 8px;
    background: #4a4a49;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    font-size: 6.7rem;
    font-weight: 500;
    line-height: 1;
}

.my-history-panel {
    margin-top: 14px;
}

.my-history-list {
    display: grid;
    gap: 10px;
}

.my-history-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 102px;
    padding: 34px 12px 12px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: #2c2c2b;
    text-align: left;
}

.history-selection {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 7px;
    color: #ffffff;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7aa38, #e68120);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: capitalize;
}

.history-entry-main strong,
.history-entry-main small,
.history-entry-result b,
.history-entry-result small {
    display: block;
}

.history-entry-main strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    text-overflow: ellipsis;
}

.history-entry-main small {
    margin-top: 5px;
    color: #a9a9a9;
    font-size: 0.64rem;
}

.history-entry-result {
    min-width: 68px;
    text-align: right;
}

.history-entry-result small {
    margin-top: 6px;
    font-size: 0.67rem;
}

.history-entry-result small.win,
.entry-detail-summary .win,
.entry-detail-list dd.win {
    color: #47d68a;
}

.history-entry-result small.lose,
.entry-detail-summary .lose,
.entry-detail-list dd.lose {
    color: #ff4e55;
}

.history-entry-result small.pending,
.entry-detail-summary .pending,
.entry-detail-list dd.pending {
    color: #f4c75a;
}

.history-detail-link {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 5px 9px;
    color: #efbd43;
    border: 1px solid #c99218;
    border-radius: 14px;
    font-size: 0.62rem;
}

.game-result-modal,
.entry-detail-modal {
    position: fixed;
    inset: 0 auto 0 50%;
    z-index: 80;
    display: grid;
    width: min(100%, 400px);
    transform: translateX(-50%);
    background: rgba(8, 8, 8, 0.74);
}

.game-result-modal {
    place-items: center;
    padding: 42px 18px 18px;
}

.game-result-modal[hidden],
.entry-detail-modal[hidden] {
    display: none;
}

.game-result-card {
    position: relative;
    width: min(82vw, 326px);
    min-height: 0;
    aspect-ratio: 1186 / 1624;
    overflow: visible;
    padding: 0;
    color: #ffffff;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.result-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.game-result-card > * {
    position: relative;
    z-index: 1;
}

.game-result-card.win {
    color: #ffffff;
}

.game-result-card.lose {
    min-height: 0;
    color: #4c6383;
}

.result-modal-close {
    position: absolute;
    top: -15px;
    right: 7px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: rgba(22, 24, 28, 0.5);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    font-size: 1.5rem;
    line-height: 1;
}

.game-result-card h2 {
    position: absolute;
    top: 29.5%;
    left: 10%;
    right: 10%;
    z-index: 2;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.15rem, 5vw, 1.48rem);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 2px 8px rgba(190, 50, 25, 0.24);
}

.game-result-card.lose h2 {
    top: 30%;
    color: #48617f;
    text-shadow: none;
}

.result-outcome-wrap {
    position: absolute;
    top: 40.2%;
    left: 8.5%;
    right: 8.5%;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: auto;
    font-size: 0.68rem;
    font-weight: 800;
}

.game-result-card.lose .result-outcome-wrap {
    top: 40.6%;
    color: #6682a2;
}

.result-outcome {
    display: flex;
    gap: 6px;
}

.result-outcome span {
    min-width: 42px;
    padding: 7px 10px;
    color: #ffffff;
    border-radius: 13px;
    background: rgba(255, 67, 86, 0.78);
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.result-outcome span.result-chip-green {
    background: #38c77a;
}

.result-outcome span.result-chip-red {
    background: #ff4d5d;
}

.result-outcome span.result-chip-violet {
    background: linear-gradient(135deg, #9b59ff 0%, #d94ee9 100%);
}

.result-outcome span.result-chip-green-violet {
    background: linear-gradient(135deg, #38c77a 0 48%, #ce55e9 52% 100%);
}

.result-outcome span.result-chip-red-violet {
    background: linear-gradient(135deg, #ff4d5d 0 48%, #ce55e9 52% 100%);
}

.game-result-card.lose .result-outcome span {
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(72, 97, 127, 0.15);
}

.result-ticket {
    position: absolute;
    top: 61.8%;
    left: 14.5%;
    right: 14.5%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 12.8%;
    padding: 6px 8px 4px;
    color: #ec4058;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.result-ticket::before {
    display: none;
}

.game-result-card.lose .result-ticket {
    top: 61.8%;
    color: #547399;
}

.result-amount-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.result-payout {
    margin-top: 6px;
    font-size: 1.72rem;
    font-weight: 1000;
    line-height: 1;
}

.result-ticket small {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #787d8a;
    font-size: 0.62rem;
    font-weight: 750;
    text-align: center;
    line-height: 1.18;
    white-space: nowrap;
}

.wallet-updated {
    animation: walletPulse 0.55s ease;
}

@keyframes walletPulse {
    0% { transform: scale(1); color: #ffffff; }
    45% { transform: scale(1.08); color: #ffe58d; }
    100% { transform: scale(1); color: #ffffff; }
}

.entry-detail-modal {
    overflow-y: auto;
    background: #20201f;
}

.entry-detail-card {
    min-height: 100%;
    padding: 0 12px 28px;
}

.entry-detail-card > header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    margin: 0 -12px 14px;
    padding: 7px 12px;
    background: #333332;
}

.entry-detail-card > header button {
    width: 34px;
    height: 34px;
    color: #ffffff;
    border: 0;
    background: transparent;
    font-size: 1.8rem;
}

.entry-detail-card > header span,
.entry-detail-card > header h2 {
    display: block;
    margin: 0;
}

.entry-detail-card > header span {
    color: #e7bd51;
    font-size: 0.62rem;
}

.entry-detail-card > header h2 {
    color: #ffffff;
    font-size: 1rem;
}

.entry-detail-summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 94px;
    padding: 13px;
    border-radius: 8px;
    background: #2c2c2b;
}

.entry-detail-summary > div:last-child {
    text-align: right;
}

.entry-detail-summary strong,
.entry-detail-summary small {
    display: block;
}

.entry-detail-summary strong {
    color: #ffffff;
    font-size: 0.76rem;
}

.entry-detail-summary small {
    margin-top: 5px;
    color: #aaa4ae;
    font-size: 0.63rem;
}

.entry-detail-card h3 {
    margin: 18px 0 9px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 650;
}

.entry-detail-list {
    display: grid;
    gap: 7px;
    margin: 0;
}

.entry-detail-list > div {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    gap: 8px;
    min-height: 34px;
    padding: 8px 9px;
    border-radius: 5px;
    background: #454544;
}

.entry-detail-list dt,
.entry-detail-list dd {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.entry-detail-list dt {
    color: #ffffff;
}

.entry-detail-list dd {
    color: #d5d0d8;
    text-align: right;
}

.entry-detail-list .result-number {
    margin-right: 3px;
    font-size: 1rem;
}

.detail-color-green { color: #43d68a; }
.detail-color-red { color: #ff545c; }
.detail-color-violet { color: #be70ff; }

@media (max-width: 420px) {
    .wingo-phone {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .wingo-topbar {
        margin-left: -10px;
        margin-right: -10px;
    }

    .number-grid {
        gap: 10px 8px;
    }

    .number-ball {
        width: 50px;
        height: 50px;
    }

    .multiplier-row {
        gap: 6px;
    }

    .multi-btn {
        font-size: 0.76rem;
    }
}

body.account-screen {
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.18), transparent 32%),
        linear-gradient(225deg, rgba(24, 200, 255, 0.16), transparent 30%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
}

.account-page {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    min-height: calc(100vh - 68px);
    margin: 0 auto;
    padding: 0 12px 112px;
}

.account-hero {
    min-height: 218px;
    margin: 0 -12px;
    padding: 34px 18px 86px;
    border-radius: 0 0 30px 30px;
    background:
        linear-gradient(135deg, rgba(255, 247, 188, 0.95), rgba(255, 200, 61, 0.9) 52%, rgba(255, 138, 0, 0.9)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
    box-shadow: 0 18px 34px rgba(255, 138, 0, 0.18);
}

.account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2d1200;
}

.account-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #ff3d69, #7e43ff 55%, #21d98a);
    box-shadow: 0 8px 20px rgba(73, 25, 0, 0.22);
    font-size: 2rem;
    font-weight: 750;
}

.account-identity h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 600;
}

.account-identity p {
    margin: 7px 0 0;
    color: rgba(45, 18, 0, 0.78);
    font-size: 0.72rem;
    font-weight: 600;
}

.account-uid {
    padding: 4px 8px;
    color: #ffffff;
    border: 0;
    border-radius: 5px;
    background: rgba(213, 119, 0, 0.72);
    font-size: 0.72rem;
    font-weight: 650;
}

.account-uid.copied::after {
    content: " Copied";
    color: #fff5a3;
}

.account-wallet-card {
    position: relative;
    z-index: 2;
    margin-top: -60px;
    padding: 17px 15px 14px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(70, 70, 70, 0.98), rgba(41, 41, 41, 0.98));
    box-shadow: 0 16px 30px rgba(10, 2, 18, 0.3);
}

.account-wallet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-wallet-head span,
.account-wallet-head strong {
    display: block;
}

.account-wallet-head span {
    color: #c7c7c7;
    font-size: 0.78rem;
}

.account-wallet-head strong {
    margin-top: 5px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 650;
}

.account-wallet-head a {
    flex: 0 0 auto;
    padding: 9px 14px;
    color: #4b2c00;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffe99b, var(--gold));
    font-size: 0.82rem;
    font-weight: 650;
}

.account-wallet-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 14px;
}

.account-wallet-actions a {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 0.75rem;
}

.account-action-icon,
.account-tile-icon,
.menu-icon {
    display: grid;
    place-items: center;
    font-weight: 750;
}

.account-action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1.22rem;
}

.account-action-icon.red,
.account-tile-icon.red,
.menu-icon.red { background: rgba(255, 67, 95, 0.28); color: #ff6d76; }
.account-action-icon.orange,
.account-tile-icon.orange { background: rgba(255, 138, 0, 0.3); color: #ffa12e; }
.account-action-icon.blue,
.account-tile-icon.blue { background: rgba(24, 200, 255, 0.3); color: #66dfff; }
.account-action-icon.green,
.account-tile-icon.green,
.menu-icon.green { background: rgba(32, 223, 117, 0.28); color: #54e796; }

.account-history-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.account-history-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 78px;
    padding: 12px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(49, 49, 49, 0.86);
}

.account-history-grid b,
.account-history-grid small {
    display: block;
}

.account-history-grid b {
    font-size: 0.8rem;
    font-weight: 650;
}

.account-history-grid small {
    margin-top: 2px;
    color: #bcbcbc;
    font-size: 0.7rem;
}

.account-tile-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 1.1rem;
}

.account-menu-list {
    margin-top: 20px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(49, 49, 49, 0.86);
}

.account-menu-list a,
.account-menu-list button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 0;
    color: #ffffff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.82rem;
}

.account-menu-list a:last-child,
.account-menu-list button:last-child {
    border-bottom: 0;
}

.account-menu-list i {
    color: #929292;
    font-size: 1.35rem;
    font-style: normal;
    text-align: right;
}

.account-menu-list em {
    color: #efefef;
    font-size: 0.78rem;
    font-style: normal;
}

.menu-icon {
    width: 25px;
    height: 25px;
    border-radius: 6px;
    color: #f3c34c;
    background: rgba(255, 200, 61, 0.22);
    font-size: 1rem;
}

.menu-icon.yellow,
.menu-icon.gold { color: #f3c34c; background: rgba(255, 200, 61, 0.22); }

.account-prize {
    position: fixed;
    left: 50%;
    bottom: 86px;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    transform: translateX(-50%);
    color: #ffffff;
    border: 4px solid #ffe28b;
    border-radius: 50%;
    background: radial-gradient(circle, #ffed9e 0 28%, #ff9a17 29% 55%, #ed4c4c 56% 100%);
    box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.28), 0 8px 20px rgba(12, 2, 22, 0.35);
    text-align: center;
}

.account-prize span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #ffffff;
    border-radius: 50%;
    background: #ff6a2d;
    font-size: 0.56rem;
    font-weight: 900;
}

.account-prize b {
    position: absolute;
    top: 67px;
    width: 92px;
    color: #ffd65e;
    font-size: 0.68rem;
    font-weight: 750;
}

@media (min-width: 820px) {
    .account-page {
        min-height: calc(100vh - 68px);
    }

    .account-prize {
        bottom: 22px;
    }
}

body.admin-screen {
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.16), transparent 32%),
        linear-gradient(225deg, rgba(24, 200, 255, 0.14), transparent 30%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
}

.admin-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 22px 14px;
    background: rgba(24, 7, 40, 0.94);
    border-right: 1px solid var(--line);
    backdrop-filter: blur(18px);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 20px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.admin-brand-logo {
    display: block;
    flex: 0 0 auto;
    width: 92px;
    height: 46px;
    object-fit: contain;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 0.9rem;
    font-weight: 850;
}

.admin-brand small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.7rem;
}

.admin-nav {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    overflow-y: auto;
}

.admin-nav a {
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 0 12px;
    color: var(--muted);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 650;
}

.admin-nav a::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.admin-nav a:hover,
.admin-nav a.active {
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d, var(--gold));
}

.admin-nav a.active::before {
    background: #2d1200;
}

.admin-sidebar-footer {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding: 14px 8px 0;
    border-top: 1px solid var(--line);
}

.admin-sidebar-footer span {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-sidebar-footer small {
    color: var(--muted);
    font-size: 0.7rem;
}

.admin-sidebar-footer a {
    margin-top: 4px;
    color: var(--gold);
    font-size: 0.76rem;
}

.admin-content {
    min-width: 0;
}

.admin-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
    padding: 14px clamp(18px, 3vw, 36px);
    background: rgba(28, 5, 48, 0.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}

.admin-toolbar h1 {
    margin: 0;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 750;
}

.admin-toolbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.78rem;
}

.admin-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(32, 223, 117, 0.13);
}

.admin-main {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: 24px clamp(14px, 3vw, 36px) 50px;
}

.admin-welcome,
.admin-panel,
.admin-quick-grid a,
.admin-metric-card,
.admin-finance-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(35, 13, 58, 0.8);
    box-shadow: 0 14px 30px rgba(12, 2, 22, 0.2);
}

.admin-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    background:
        linear-gradient(105deg, rgba(255, 47, 99, 0.36), rgba(147, 88, 255, 0.18) 45%, rgba(24, 200, 255, 0.16)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
}

.admin-welcome h2,
.admin-panel-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 700;
}

.admin-welcome p:last-child {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-metric-grid,
.admin-finance-grid,
.admin-report-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-metric-card,
.admin-finance-card {
    display: grid;
    gap: 7px;
    min-height: 124px;
    padding: 16px;
    color: #ffffff;
}

.admin-metric-card span,
.admin-finance-card span {
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-metric-card strong,
.admin-finance-card strong {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-metric-card small {
    color: #d8d8d8;
    font-size: 0.72rem;
}

.admin-metric-card.blue,
.admin-finance-card.blue { border-top: 3px solid var(--blue); }
.admin-metric-card.green,
.admin-finance-card.green { border-top: 3px solid var(--green); }
.admin-metric-card.red,
.admin-finance-card.red { border-top: 3px solid var(--red); }
.admin-metric-card.gold,
.admin-finance-card.gold { border-top: 3px solid var(--gold); }
.admin-finance-card.violet { border-top: 3px solid var(--violet); }

.admin-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.admin-panel {
    min-width: 0;
    margin-top: 16px;
    padding: 18px;
}

.admin-section-grid > .admin-panel {
    margin-top: 0;
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-panel-head .eyebrow {
    margin-bottom: 4px;
}

.admin-panel-head > a {
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-count {
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-compact-list {
    display: grid;
}

.admin-compact-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-compact-list a:last-child {
    border-bottom: 0;
}

.admin-compact-list b,
.admin-compact-list small,
.admin-table strong,
.admin-table small {
    display: block;
}

.admin-compact-list b,
.admin-table strong {
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-compact-list small,
.admin-table small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.admin-compact-list > a > strong {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-empty {
    margin: 0;
    padding: 24px 8px;
    color: var(--muted);
    text-align: center;
    font-size: 0.78rem;
}

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

.admin-quick-grid a {
    display: grid;
    gap: 7px;
    padding: 15px;
    color: #ffffff;
}

.admin-quick-grid b {
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-quick-grid span {
    color: var(--muted);
    font-size: 0.72rem;
}

.admin-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 650;
}

.admin-alert.success {
    color: #c9ffdf;
    background: rgba(32, 223, 117, 0.14);
    border: 1px solid rgba(32, 223, 117, 0.3);
}

.admin-alert.error {
    color: #ffd1d7;
    background: rgba(255, 67, 95, 0.14);
    border: 1px solid rgba(255, 67, 95, 0.3);
}

.admin-filter,
.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px auto;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-filter.compact {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    margin: 0;
}

.admin-filter input,
.admin-filter select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-table input,
.admin-table select,
.admin-setting-row input,
.admin-setting-row select,
.admin-setting-row textarea {
    min-width: 0;
    padding: 9px 10px;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(9, 2, 17, 0.72);
    font-size: 0.75rem;
}

.admin-filter button {
    white-space: nowrap;
}

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

.admin-form label,
.admin-setting-row > div {
    display: grid;
    gap: 6px;
}

.admin-form label > span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.admin-form-grid {
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-note {
    padding: 12px 14px;
    color: var(--muted);
    border-left: 3px solid var(--gold);
    background: rgba(255, 200, 61, 0.07);
    font-size: 0.75rem;
}

.admin-note p {
    margin: 0;
}

.admin-note p + p {
    margin-top: 8px;
}

.admin-control-list {
    display: grid;
    gap: 10px;
}

.admin-control-card {
    display: grid;
    grid-template-columns: minmax(145px, 1.2fr) repeat(4, minmax(88px, 1fr)) auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(9, 2, 17, 0.22);
}

.payout-list .admin-control-card {
    grid-template-columns: minmax(145px, 1.2fr) minmax(110px, 1fr) minmax(110px, 1fr) auto;
}

.admin-control-card > div {
    align-self: center;
}

.admin-control-card strong,
.admin-control-card small,
.admin-control-card label {
    display: block;
}

.admin-control-card strong {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-control-card small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.68rem;
}

.admin-control-card label span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.66rem;
}

.admin-control-card .btn-soft {
    min-height: 36px;
    padding: 8px 12px;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 12px 10px;
    color: #f4f4f4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: middle;
    font-size: 0.74rem;
    font-weight: 550;
}

.admin-table th {
    color: #f5d774;
    background: rgba(65, 62, 85, 0.62);
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.inline-form .btn-soft,
.inline-form select,
.table-inputs input {
    width: auto;
    padding: 7px 9px;
    font-size: 0.68rem;
}

.table-inputs {
    display: flex;
    gap: 5px;
}

.table-link {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 0.68rem;
}

.success-btn {
    color: #bfffd7;
    border-color: rgba(32, 223, 117, 0.35);
}

.danger-btn {
    color: #ffd1d7;
    border-color: rgba(255, 67, 95, 0.35);
}

.admin-status {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 20px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.64rem;
    font-weight: 700;
}

.admin-status.active,
.admin-status.approved,
.admin-status.paid,
.admin-status.win,
.admin-status.success { color: #bfffd7; background: rgba(32, 223, 117, 0.16); }
.admin-status.pending,
.admin-status.processing,
.admin-status.result_declared { color: #ffe59a; background: rgba(255, 200, 61, 0.15); }
.admin-status.rejected,
.admin-status.suspended,
.admin-status.locked,
.admin-status.lose,
.admin-status.failed { color: #ffd1d7; background: rgba(255, 67, 95, 0.15); }
.admin-status.maintenance,
.admin-status.inactive { color: #cfe9ff; background: rgba(24, 200, 255, 0.14); }

.admin-settings-list {
    display: grid;
}

.admin-setting-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.admin-setting-row strong {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-setting-row small {
    color: var(--muted);
    font-size: 0.66rem;
}

.admin-setting-row textarea {
    min-height: 92px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    line-height: 1.35;
}

.admin-report-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.admin-result-number {
    display: block;
    font-size: 1.35rem;
    font-weight: 750;
}

@media (max-width: 980px) {
    .admin-frame {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .admin-metric-grid,
    .admin-finance-grid,
    .admin-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-frame {
        display: block;
    }

    .admin-sidebar {
        position: sticky;
        height: auto;
        padding: 12px;
    }

    .admin-brand {
        padding-bottom: 12px;
    }

    .admin-nav {
        display: flex;
        gap: 6px;
        margin-top: 12px;
        overflow-x: auto;
    }

    .admin-nav a {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.72rem;
    }

    .admin-nav a::before,
    .admin-sidebar-footer {
        display: none;
    }

    .admin-toolbar {
        min-height: 66px;
        padding: 12px 14px;
    }

    .admin-toolbar-user {
        display: none;
    }

    .admin-main {
        padding: 16px 12px 32px;
    }

    .admin-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .admin-welcome .btn-primary {
        width: 100%;
        text-align: center;
    }

    .admin-section-grid,
    .admin-report-grid {
        grid-template-columns: 1fr;
    }

    .admin-panel {
        padding: 14px;
    }

    .admin-filter,
    .admin-filter.compact {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .admin-filter button {
        width: 100%;
    }

    .admin-setting-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-control-card,
    .payout-list .admin-control-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-control-card > div,
    .admin-control-card .btn-soft {
        grid-column: 1 / -1;
    }

    .admin-setting-row .btn-soft {
        width: 100%;
    }
}

body.user-screen {
    background:
        linear-gradient(135deg, rgba(255, 47, 99, 0.16), transparent 32%),
        linear-gradient(225deg, rgba(24, 200, 255, 0.14), transparent 30%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
}

.app-main.user-page {
    width: min(100%, 430px);
    min-height: calc(100vh - 66px);
    padding: 14px 12px 104px;
    background: rgba(24, 18, 28, 0.72);
    box-shadow: 0 0 40px rgba(8, 2, 14, 0.25);
}

.mobile-page-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    margin: -14px -12px 14px;
    padding: 8px 12px;
    background: rgba(42, 34, 47, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-page-heading > a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.7rem;
    line-height: 1;
}

.mobile-page-heading span,
.mobile-page-heading h1 {
    display: block;
    margin: 0;
}

.mobile-page-heading span {
    color: var(--gold);
    font-size: 0.66rem;
    font-weight: 650;
}

.mobile-page-heading h1 {
    margin-top: 2px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

.page-text-btn {
    padding: 7px 9px;
    color: var(--gold);
    border: 0;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 650;
}

.mobile-page-hero {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 148px;
    overflow: hidden;
    padding: 20px;
    color: #2d1200;
    border-radius: 8px;
    background:
        linear-gradient(125deg, rgba(255, 247, 188, 0.96), rgba(255, 200, 61, 0.92) 55%, rgba(255, 138, 0, 0.9)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
    box-shadow: 0 14px 30px rgba(255, 138, 0, 0.18);
}

.mobile-page-hero > span,
.mobile-page-hero > strong,
.mobile-page-hero > small {
    display: block;
}

.mobile-page-hero > span {
    color: rgba(45, 18, 0, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.mobile-page-hero > strong {
    margin-top: 5px;
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.05;
}

.mobile-page-hero > small {
    margin-top: 7px;
    color: rgba(45, 18, 0, 0.72);
    font-size: 0.72rem;
}

.mobile-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.mobile-hero-actions a,
.promotion-page-hero button {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 0 15px;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    background: rgba(45, 18, 0, 0.76);
    font-size: 0.72rem;
    font-weight: 700;
}

.mobile-hero-actions a:last-child {
    color: #2d1200;
    border: 1px solid rgba(45, 18, 0, 0.32);
    background: transparent;
}

.deposit-page-hero,
.reward-page-hero {
    background:
        linear-gradient(125deg, rgba(188, 246, 255, 0.96), rgba(24, 200, 255, 0.86), rgba(147, 88, 255, 0.88)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
}

.withdraw-page-hero {
    background:
        linear-gradient(125deg, rgba(210, 255, 226, 0.96), rgba(32, 223, 117, 0.86), rgba(24, 200, 255, 0.84)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
}

.promotion-page-hero,
.vip-page-hero {
    background:
        linear-gradient(125deg, rgba(255, 244, 180, 0.97), rgba(255, 184, 50, 0.91), rgba(255, 67, 95, 0.82)),
        url("../images/gaming-texture-light.jpg") center/cover no-repeat;
}

.promotion-page-hero button {
    width: max-content;
    margin-top: 14px;
}

.mobile-section {
    margin-top: 18px;
}

.mobile-section.form-section {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.86);
}

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

.mobile-section-title span,
.mobile-section-title h2 {
    display: block;
    margin: 0;
}

.mobile-section-title span {
    color: var(--gold);
    font-size: 0.64rem;
    font-weight: 650;
}

.mobile-section-title h2 {
    margin-top: 2px;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 700;
}

.mobile-section-title > a {
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 650;
}

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

.wallet-bucket {
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.88);
}

.wallet-bucket:last-child {
    grid-column: 1 / -1;
}

.wallet-bucket span {
    color: var(--muted);
    font-size: 0.68rem;
}

.wallet-bucket strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.wallet-bucket.blue { border-left: 3px solid var(--blue); }
.wallet-bucket.green { border-left: 3px solid var(--green); }
.wallet-bucket.gold { border-left: 3px solid var(--gold); }
.wallet-bucket.violet { border-left: 3px solid var(--violet); }
.wallet-bucket.red { border-left: 3px solid var(--red); }

.mobile-list {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.82);
}

.mobile-list-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

.mobile-list-row strong,
.mobile-list-row small,
.mobile-list-row em {
    display: block;
    min-width: 0;
}

.mobile-list-row strong {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 650;
}

.mobile-list-row small,
.mobile-list-row em {
    margin-top: 3px;
    color: #bdb7c3;
    font-size: 0.64rem;
    font-style: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mobile-list-row em {
    color: #8f8797;
}

.mobile-list-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--gold);
    border-radius: 8px;
    background: rgba(255, 200, 61, 0.14);
    font-size: 1rem;
    font-weight: 750;
}

.mobile-list-icon.success,
.mobile-list-icon.approved,
.mobile-list-icon.paid { color: var(--green); background: rgba(32, 223, 117, 0.13); }
.mobile-list-icon.rejected,
.mobile-list-icon.failed { color: var(--red); background: rgba(255, 67, 95, 0.13); }
.mobile-list-icon.pending,
.mobile-list-icon.processing { color: var(--gold); background: rgba(255, 200, 61, 0.13); }
.mobile-list-icon.game { color: var(--violet); background: rgba(147, 88, 255, 0.13); }
.mobile-list-icon.system { color: var(--blue); background: rgba(24, 200, 255, 0.13); }

.mobile-list-value {
    min-width: 78px;
    text-align: right;
}

.mobile-list-value b {
    display: block;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
}

.user-status {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 6px;
    color: #e8e0ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.56rem;
    font-weight: 700;
}

.user-status.success,
.user-status.approved,
.user-status.paid,
.user-status.claimed,
.user-status.eligible { color: #9ff8c6; background: rgba(32, 223, 117, 0.13); }
.user-status.pending,
.user-status.processing,
.user-status.locked { color: #ffe69a; background: rgba(255, 200, 61, 0.13); }
.user-status.rejected,
.user-status.failed,
.user-status.expired { color: #ffadb8; background: rgba(255, 67, 95, 0.13); }

.mobile-empty {
    margin: 0;
    padding: 28px 14px;
    color: var(--muted);
    text-align: center;
    font-size: 0.74rem;
}

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

.amount-choice-grid button {
    min-height: 42px;
    color: #ffffff;
    border: 1px solid rgba(255, 200, 61, 0.26);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.88);
    font-size: 0.78rem;
    font-weight: 650;
}

.amount-choice-grid button:hover,
.amount-choice-grid button:focus {
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d, var(--gold));
}

.deposit-page {
    padding-top: 0;
    background: #232322;
}

.deposit-topbar {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    min-height: 64px;
    margin: 0 -12px 12px;
    padding: 8px 12px;
    color: #ffffff;
    background: #3a3a39;
}

.deposit-topbar a:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    border-radius: 8px;
    font-size: 1.8rem;
    line-height: 1;
}

.deposit-topbar h1 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 650;
    text-align: center;
}

.deposit-topbar a:last-child {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

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

.deposit-gold-card {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 111px;
    overflow: hidden;
    padding: 15px 18px;
    color: #8a5713;
    border-radius: 8px;
    background:
        radial-gradient(circle at 74% -8%, rgba(255, 248, 198, 0.56) 0 25%, transparent 26%),
        radial-gradient(circle at 88% -2%, rgba(255, 248, 198, 0.38) 0 34%, transparent 35%),
        linear-gradient(135deg, #e7b454, #ffe08f);
}

.deposit-gold-card span {
    font-size: 0.74rem;
    font-weight: 800;
}

.deposit-gold-card strong {
    margin-top: 6px;
    color: #9a5c0d;
    font-size: 1.48rem;
    line-height: 1;
    font-weight: 950;
}

.deposit-gold-card small,
.deposit-gold-card em {
    display: block;
    margin-top: 9px;
    color: rgba(114, 69, 8, 0.82);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 750;
}

.deposit-gold-card em {
    position: absolute;
    right: 16px;
    bottom: 13px;
}

.deposit-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.deposit-channel-grid button {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 76px;
    padding: 9px 5px;
    color: #d5d0d6;
    border: 0;
    border-radius: 5px;
    background: #30302f;
}

.deposit-channel-grid button.active {
    color: #8a5713;
    background: linear-gradient(135deg, #fff2ab, #d9a13d);
}

.deposit-channel-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: currentColor;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    font-weight: 1000;
}

.deposit-channel-icon.qr::before { content: "QR"; }
.deposit-channel-icon.upi::before { content: "UPI"; }
.deposit-channel-icon.app::before { content: "APP"; }
.deposit-channel-icon.usdt::before { content: "T"; }
.deposit-channel-icon.ar::before { content: "A"; }

.deposit-channel-grid b {
    min-height: 24px;
    color: inherit;
    font-size: 0.66rem;
    line-height: 1.12;
    font-weight: 650;
    text-align: center;
}

.deposit-panel {
    display: grid;
    gap: 12px;
    padding: 15px 13px;
    border-radius: 8px;
    background: #30302f;
}

.deposit-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 22px;
}

.deposit-panel-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 750;
}

.deposit-title-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #d7a43f;
    font-size: 1rem;
    font-weight: 900;
}

.deposit-selected-channel {
    width: min(100%, 136px);
    min-height: 54px;
    padding: 10px 12px;
    color: #8a520c;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2a7, #d99d3a);
}

.deposit-selected-channel span,
.deposit-selected-channel small {
    display: block;
}

.deposit-selected-channel span {
    font-size: 0.78rem;
    font-weight: 750;
}

.deposit-selected-channel small {
    margin-top: 3px;
    font-size: 0.68rem;
}

.deposit-pay-grid {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.deposit-qr-box,
.deposit-upi-box {
    min-height: 112px;
    border-radius: 8px;
    background: #222221;
}

.deposit-qr-box {
    display: grid;
    place-items: center;
    padding: 9px;
}

.deposit-qr-box img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: #ffffff;
}

.deposit-qr-box > span {
    width: 72px;
    height: 72px;
    border: 7px solid #ffffff;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #ffffff 14px, transparent 14px 22px, #ffffff 22px 36px, transparent 36px),
        linear-gradient(#ffffff 14px, transparent 14px 22px, #ffffff 22px 36px, transparent 36px),
        #111111;
}

.deposit-qr-box small {
    margin-top: -18px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}

.deposit-upi-box {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 14px;
}

.deposit-upi-box span {
    color: #b8b1bd;
    font-size: 0.7rem;
}

.deposit-upi-box strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.25;
}

.deposit-upi-box button {
    width: max-content;
    min-height: 30px;
    padding: 0 14px;
    color: #271300;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2a7, #d99d3a);
    font-size: 0.72rem;
    font-weight: 850;
}

.deposit-upi-box button:disabled {
    opacity: 0.45;
}

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

.deposit-amount-grid button {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 28px;
    padding: 4px 10px;
    color: #ffd46d;
    border: 1px solid #535064;
    border-radius: 4px;
    background: #30302f;
    font-size: 0.86rem;
    font-weight: 650;
}

.deposit-amount-grid button.active {
    color: #271300;
    border-color: transparent;
    background: linear-gradient(135deg, #fff2a7, #d99d3a);
}

.deposit-amount-grid span {
    color: #8f8996;
}

.deposit-money-input {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    color: #f4b431;
    border-radius: 20px;
    background: #20201f;
}

.deposit-money-input input {
    width: 100%;
    min-height: 36px;
    color: #ffffff;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.76rem;
}

.deposit-field,
.deposit-upload {
    display: grid;
    gap: 7px;
}

.deposit-upload {
    position: relative;
}

.deposit-field span,
.deposit-upload span {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 750;
}

.deposit-field input {
    min-height: 42px;
    padding: 10px 12px;
    color: #ffffff;
    border: 1px solid #535064;
    border-radius: 6px;
    outline: 0;
    background: #252524;
}

.deposit-upload {
    min-height: 78px;
    justify-items: center;
    align-content: center;
    padding: 12px;
    border: 1px dashed rgba(255, 212, 109, 0.52);
    border-radius: 8px;
    background: #252524;
    cursor: pointer;
}

.deposit-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.deposit-upload small {
    color: #b8b1bd;
    font-size: 0.68rem;
}

.deposit-submit-btn {
    min-height: 46px;
    color: #291300;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2a7, #f1b33d);
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(218, 157, 58, 0.22);
}

.withdraw-page {
    padding-top: 0;
    background: #232322;
}

.withdraw-gold-card {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 136px;
    overflow: hidden;
    padding: 18px 20px;
    color: #8a5713;
    border-radius: 8px;
    background:
        radial-gradient(circle at 76% -2%, rgba(255, 247, 187, 0.62) 0 26%, transparent 27%),
        radial-gradient(circle at 90% 2%, rgba(255, 247, 187, 0.35) 0 36%, transparent 37%),
        linear-gradient(135deg, #d49b37, #ffe39a);
}

.withdraw-gold-card span,
.withdraw-gold-card strong,
.withdraw-gold-card small {
    display: block;
    position: relative;
    z-index: 1;
}

.withdraw-gold-card span {
    font-size: 0.82rem;
    font-weight: 800;
}

.withdraw-gold-card strong {
    margin-top: 14px;
    color: #9a5c0d;
    font-size: 1.42rem;
    line-height: 1;
    font-weight: 950;
}

.withdraw-gold-card button {
    width: auto;
    margin-left: 4px;
    padding: 0;
    color: inherit;
    border: 0;
    background: transparent;
    font: inherit;
}

.withdraw-gold-card small {
    margin-top: auto;
    align-self: end;
    text-align: right;
    font-size: 0.8rem;
    letter-spacing: 4px;
}

.withdraw-highlight {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 70px;
    margin-top: 14px;
    padding: 11px 13px;
    color: #8a520c;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2aa, #d99d3a);
}

.withdraw-highlight > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #ffc83d;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 1000;
}

.withdraw-highlight strong,
.withdraw-highlight small {
    display: block;
}

.withdraw-highlight strong {
    color: #7b4808;
    font-size: 0.96rem;
    font-weight: 850;
}

.withdraw-highlight small {
    margin-top: 4px;
    color: #7b4808;
    font-size: 0.72rem;
    line-height: 1.35;
}

.withdraw-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.withdraw-method-grid button {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 86px;
    color: #e9e3ed;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #30302f;
}

.withdraw-method-grid button.active {
    color: #271300;
    border-color: rgba(255, 216, 107, 0.38);
    background: linear-gradient(135deg, #fff2aa, #d99d3a);
}

.withdraw-method-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.78rem;
    font-weight: 1000;
}

.withdraw-method-icon.bank::before { content: "CARD"; }
.withdraw-method-icon.usdt::before { content: "USDT"; }
.withdraw-method-icon.upi::before { content: "UPI"; }

.withdraw-method-grid b {
    font-size: 0.76rem;
    font-weight: 750;
}

.withdraw-rule-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 12px;
    color: #e9e3ed;
    border-radius: 6px;
    background: #30302f;
    font-size: 0.78rem;
    font-weight: 750;
}

.withdraw-rule-link > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #2b1700;
    border-radius: 6px;
    background: #d7a43f;
}

.withdraw-rule-link b {
    color: #f5d06b;
    font-size: 0.72rem;
}

.withdraw-panel,
.withdraw-history-section {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 15px 13px;
    border-radius: 8px;
    background: #30302f;
}

.withdraw-account-form,
.withdraw-request-form {
    display: grid;
    gap: 10px;
}

.withdraw-account-form label,
.withdraw-request-form label {
    display: grid;
    gap: 6px;
}

.withdraw-account-form label span,
.withdraw-request-form label > span {
    color: #d9d4dc;
    font-size: 0.72rem;
    font-weight: 750;
}

.withdraw-account-form input,
.withdraw-request-form select {
    min-height: 40px;
    padding: 9px 11px;
    color: #ffffff;
    border: 1px solid #565365;
    border-radius: 6px;
    background: #252524;
}

.withdraw-selected-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
}

.withdraw-selected-wallet span,
.withdraw-selected-wallet small,
.withdraw-selected-wallet strong {
    display: block;
}

.withdraw-selected-wallet span {
    color: #d9d4dc;
    font-size: 0.72rem;
}

.withdraw-selected-wallet strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
}

.withdraw-selected-wallet small {
    max-width: 190px;
    overflow: hidden;
    color: #f5d06b;
    font-size: 0.72rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.withdraw-money-input {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 50px;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 24px;
    background: #f2f2f2;
}

.withdraw-money-input span {
    color: #d09528 !important;
    font-size: 1.05rem !important;
}

.withdraw-money-input input {
    min-height: 44px;
    color: #7b4808;
    border: 0;
    outline: 0;
    background: transparent;
}

.withdraw-money-input button {
    color: #b07411;
    border: 0;
    background: transparent;
    font-size: 0.82rem;
}

.withdraw-red-note {
    color: #ff4757;
    font-size: 0.72rem;
    font-weight: 800;
}

.withdraw-received-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #cbc4d0;
    font-size: 0.78rem;
}

.withdraw-received-row b {
    color: #f6b23a;
}

.withdraw-submit-btn {
    min-height: 44px;
    margin-top: 10px;
    color: #ffffff;
    border: 0;
    border-radius: 22px;
    background: #838896;
    font-size: 0.86rem;
    font-weight: 850;
}

.withdraw-submit-btn:not(:disabled) {
    background: linear-gradient(135deg, #fff2aa, #d99d3a);
    color: #2b1700;
}

.withdraw-instruction-box {
    display: grid;
    gap: 12px;
    padding: 18px;
    color: #d9d4dc;
    border: 1px solid #565365;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.55;
}

.withdraw-instruction-box p {
    position: relative;
    margin: 0;
    padding-left: 14px;
}

.withdraw-instruction-box p::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #d7a43f;
    transform: rotate(45deg);
}

.withdraw-history-list {
    display: grid;
    gap: 12px;
}

.withdraw-history-list article {
    padding: 12px;
    border-radius: 6px;
    background: #30302f;
}

.withdraw-history-list header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.withdraw-history-list header span {
    padding: 5px 8px;
    color: #ffffff;
    border-radius: 5px;
    background: #ef3348;
    font-size: 0.82rem;
    font-weight: 900;
}

.withdraw-history-list header b {
    color: #20df75;
    font-size: 0.76rem;
}

.withdraw-history-list header b.pending,
.withdraw-history-list header b.processing,
.withdraw-history-list header b.approved {
    color: #ffd86b;
}

.withdraw-history-list header b.rejected {
    color: #ff8f9d;
}

.withdraw-history-list dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.withdraw-history-list dl div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
}

.withdraw-history-list dt,
.withdraw-history-list dd {
    margin: 0;
    font-size: 0.74rem;
}

.withdraw-history-list dt {
    color: #b8b1bd;
    font-weight: 750;
}

.withdraw-history-list dd {
    overflow: hidden;
    color: #f5d06b;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.withdraw-history-list p {
    margin: 10px 0 0;
    color: #ffadb8;
    font-size: 0.72rem;
}

.admin-deposit-table td {
    vertical-align: middle;
}

.admin-proof-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 190px;
    margin-top: 8px;
    padding: 6px 9px 6px 6px;
    color: #ffffff;
    border: 1px solid rgba(255, 200, 61, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.admin-proof-card img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.admin-proof-card span {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 750;
}

.admin-review-form {
    grid-template-columns: minmax(150px, 1fr) auto auto;
}

.admin-review-form input {
    min-height: 34px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.user-filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}

.user-filter-tabs button {
    min-height: 36px;
    padding: 5px;
    color: var(--muted);
    border: 0;
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.88);
    font-size: 0.68rem;
    font-weight: 650;
}

.user-filter-tabs button.active {
    color: #2d1200;
    background: linear-gradient(135deg, #fff58d, var(--gold));
}

.promo-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 12px;
}

.promo-stat-grid > div {
    padding: 13px;
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.promo-stat-grid span,
.promo-stat-grid strong {
    display: block;
}

.promo-stat-grid span {
    color: var(--muted);
    font-size: 0.66rem;
}

.promo-stat-grid strong {
    margin-top: 5px;
    color: var(--gold);
    font-size: 1.05rem;
    font-weight: 700;
}

.promotion-list,
.reward-plan-list,
.vip-level-list,
.referral-steps {
    display: grid;
    gap: 9px;
}

.promotion-list article,
.reward-plan-list article,
.vip-level-list article,
.referral-steps > div {
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.86);
}

.promotion-list article > div > span {
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 700;
}

.promotion-list strong,
.promotion-list p,
.promotion-list small {
    display: block;
}

.promotion-list strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 0.82rem;
}

.promotion-list p {
    margin: 6px 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.promotion-list small {
    color: #99919e;
    font-size: 0.62rem;
}

.referral-steps > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.73rem;
}

.referral-steps b {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #2d1200;
    border-radius: 50%;
    background: var(--gold);
}

.notification-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: start;
    gap: 10px;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

.notification-row.unread {
    background: rgba(255, 200, 61, 0.05);
}

.notification-row strong,
.notification-row p,
.notification-row small {
    display: block;
}

.notification-row strong {
    color: #ffffff;
    font-size: 0.77rem;
    font-weight: 700;
}

.notification-row p {
    margin: 5px 0;
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.45;
}

.notification-row small {
    color: #918a96;
    font-size: 0.61rem;
}

.notification-row form button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--green);
    border: 0;
    border-radius: 8px;
    background: rgba(32, 223, 117, 0.12);
}

.reward-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.reward-plan-top span {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.reward-plan-top strong {
    color: var(--gold);
    font-size: 0.9rem;
}

.reward-plan-list p {
    margin: 7px 0;
    color: var(--muted);
    font-size: 0.69rem;
}

.reward-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.reward-requirements span {
    padding: 4px 6px;
    color: #d9cfea;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.58rem;
}

.checkin-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.checkin-strip > div {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
}

.checkin-strip b {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    color: var(--muted);
    border-radius: 8px;
    background: rgba(48, 42, 52, 0.88);
    font-size: 0.68rem;
}

.checkin-strip .done b {
    color: #2d1200;
    background: var(--gold);
}

.checkin-strip span {
    color: #9f98a4;
    font-size: 0.52rem;
    white-space: nowrap;
}

.vip-level-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    opacity: 0.74;
}

.vip-level-list article.unlocked {
    opacity: 1;
    border-color: rgba(255, 200, 61, 0.28);
}

.vip-medal {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #2d1200;
    border: 3px solid #fff1a8;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe886, #ff9b20);
    font-size: 0.82rem;
    font-weight: 800;
}

.vip-level-list strong,
.vip-level-list small,
.vip-level-list em {
    display: block;
}

.vip-level-list strong {
    color: #ffffff;
    font-size: 0.78rem;
}

.vip-level-list small,
.vip-level-list em {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.61rem;
    font-style: normal;
}

.vip-level-list article > b {
    color: var(--gold);
    font-size: 0.72rem;
}

.vip-progress {
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.vip-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-2), var(--gold));
}

@media (max-width: 819px) {
    body.user-screen .app-topbar,
    body.home-screen .app-topbar,
    body.account-screen .app-topbar {
        width: min(100%, 430px);
        margin: 0 auto;
    }
}

@media (max-width: 360px) {
    .mobile-list-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .mobile-list-value {
        grid-column: 2;
        min-width: 0;
        text-align: left;
    }

    .amount-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}