/* =========================================================================
   MILKA EXCHANGE — PREMIUM DARK FINTECH DESIGN LAYER
   Loaded AFTER styles.css. Overrides visual layer without touching JS logic.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Palette — dark-first (default theme is dark) */
    --mx-bg:            #0A0A0A;
    --mx-bg-1:          #0F0F0F;
    --mx-bg-2:          #121212;
    --mx-bg-3:          #151515;
    --mx-bg-4:          #181818;
    --mx-surface:       #0F0F0F;
    --mx-surface-hi:    #151515;
    --mx-surface-hi-2:  #181818;

    --mx-text:          #FFFFFF;
    --mx-text-2:        #E5E5E5;
    --mx-text-3:        #A1A1A1;
    --mx-text-4:        #737373;

    --mx-border:        rgba(255,255,255,0.08);
    --mx-border-strong: rgba(255,255,255,0.12);
    --mx-border-soft:   rgba(255,255,255,0.05);
    --mx-border-focus:  rgba(57,255,136,0.55);

    --mx-accent:        #39FF88;
    --mx-accent-2:      #35F27F;
    --mx-accent-3:      #20E878;
    --mx-accent-ink:    #041D0E;                 /* text on green */
    --mx-accent-glow:   rgba(57,255,136,0.22);
    --mx-accent-glow-2: rgba(57,255,136,0.38);
    --mx-accent-soft:   rgba(57,255,136,0.12);
    --mx-accent-line:   rgba(57,255,136,0.35);

    --mx-danger:        #FF5F6D;
    --mx-danger-soft:   rgba(255,95,109,0.14);
    --mx-warn:          #F5B33B;
    --mx-info:          #6EA6FF;

    /* Radii */
    --mx-r-xs:  8px;
    --mx-r-sm:  12px;
    --mx-r-md:  16px;
    --mx-r-lg:  20px;
    --mx-r-xl:  24px;
    --mx-r-2xl: 28px;
    --mx-r-3xl: 32px;
    --mx-pill:  999px;

    /* Spacing scale (multiples of 4) */
    --mx-s-1: 4px;
    --mx-s-2: 8px;
    --mx-s-3: 12px;
    --mx-s-4: 16px;
    --mx-s-5: 20px;
    --mx-s-6: 24px;
    --mx-s-8: 32px;
    --mx-s-10: 40px;
    --mx-s-12: 48px;
    --mx-s-16: 64px;
    --mx-s-20: 80px;
    --mx-s-24: 96px;

    /* Shadows */
    --mx-shadow-1: 0 1px 0 0 rgba(255,255,255,0.03) inset,
                   0 1px 2px rgba(0,0,0,0.5);
    --mx-shadow-2: 0 8px 24px rgba(0,0,0,0.5),
                   0 1px 0 0 rgba(255,255,255,0.03) inset;
    --mx-shadow-3: 0 20px 60px rgba(0,0,0,0.65),
                   0 1px 0 0 rgba(255,255,255,0.04) inset;
    --mx-glow-cta:   0 0 32px rgba(57,255,136,0.20);
    --mx-glow-cta-h: 0 0 52px rgba(57,255,136,0.32);

    /* Motion */
    --mx-ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --mx-ease-2: cubic-bezier(0.4, 0, 0.2, 1);
    --mx-dur-1:  150ms;
    --mx-dur-2:  220ms;
    --mx-dur-3:  320ms;

    /* Container */
    --mx-container: 1200px;
    --mx-container-narrow: 720px;

    /* Fonts */
    --mx-font: 'Manrope', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --mx-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------------
   2. THEME OVERRIDE (dark = default)
   Remap legacy tokens used everywhere in styles.css to the premium palette
   ------------------------------------------------------------------------- */
[data-theme="dark"],
html[data-theme="dark"] {
    --bg:            #0A0A0A;
    --bg-card:       #101010;
    --bg-elevated:   #151515;
    --text:          #FFFFFF;
    --text-muted:    #A1A1A1;
    --accent:        #39FF88;
    --accent-hover:  #35F27F;
    --success:       #35F27F;
    --danger:        #FF5F6D;
    --border:        rgba(255,255,255,0.08);
    --border-soft:   rgba(255,255,255,0.05);
    --border-subtle: rgba(255,255,255,0.08);
    --gold:          #39FF88;
    --story-border:  #39FF88;
    --story-border-hover: #20E878;
}

/* -------------------------------------------------------------------------
   3. GLOBAL RESET / LAYOUT
   ------------------------------------------------------------------------- */
html,
body {
    background: var(--mx-bg) !important;
    color: var(--mx-text);
    font-family: var(--mx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

body {
    overflow-x: hidden;
}

#app {
    background: var(--mx-bg);
    min-height: 100vh;
    min-height: 100svh;
}

.app-main {
    background: var(--mx-bg);
}

.container,
.main-page-container,
.exchange-container,
.history-container,
.form-screen,
.order-detail-container,
.admin-panel-container {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
    width: 100%;
    box-sizing: border-box;
}

.form-screen {
    max-width: var(--mx-container-narrow);
}

/* Selection */
::selection {
    background: var(--mx-accent);
    color: var(--mx-accent-ink);
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.20);
    background-clip: padding-box;
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--mx-border-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* -------------------------------------------------------------------------
   4. LOADING OVERLAY
   ------------------------------------------------------------------------- */
.loading-overlay {
    background: radial-gradient(ellipse at top, rgba(57,255,136,0.06), transparent 55%),
                var(--mx-bg) !important;
    color: var(--mx-text);
    position: fixed;
    inset: 0;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    max-width: none !important;
    width: 100% !important;
    transform: none !important;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loading-overlay.active {
    display: flex !important;
}

.loading-overlay .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-overlay .loader {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.10);
    border-top-color: var(--mx-accent);
    animation: mx-spin 900ms linear infinite;
}

.loading-overlay p {
    color: var(--mx-text-3);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

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

/* -------------------------------------------------------------------------
   5. SUBSCRIPTION GATE
   ------------------------------------------------------------------------- */
.subscription-gate {
    background: rgba(10,10,10,0.85) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.subscription-gate-inner {
    background: linear-gradient(180deg, #101010, #0C0C0C);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    padding: 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--mx-shadow-3);
}

.subscription-gate-title {
    color: var(--mx-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.subscription-gate-text {
    color: var(--mx-text-3);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.subscription-gate-channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.subscription-gate-btn {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: var(--mx-pill);
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--mx-glow-cta);
    transition: transform var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
}
.subscription-gate-btn:hover { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h); }
.subscription-gate-btn:active { transform: translateY(0) scale(0.99); }

/* -------------------------------------------------------------------------
   6. HEADER
   ------------------------------------------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10,10,10,0.72) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--mx-border) !important;
    box-shadow: none !important;
}

.header-inner {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 12px clamp(14px, 4vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    box-sizing: border-box;
}

.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 10px; }

/* Profile card (left) */
.header-profile {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 6px !important;
    height: 52px;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    transition: background var(--mx-dur-2) var(--mx-ease),
                border-color var(--mx-dur-2) var(--mx-ease),
                transform var(--mx-dur-2) var(--mx-ease);
    max-width: 240px;
    min-width: 0;
    box-shadow: none !important;
}
.header-profile:hover,
.header-profile:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
    border-color: var(--mx-border-strong) !important;
}

.header-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(140deg, #1a1a1a, #0d0d0d) !important;
    border: 1px solid var(--mx-border-strong) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--mx-text);
    font-weight: 700;
    box-shadow: none !important;
}
.header-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.header-avatar-inner {
    color: var(--mx-text) !important;
    background: transparent !important;
    font-weight: 700;
    font-size: 15px;
    text-shadow: none !important;
}

.header-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.15;
}
.header-name {
    color: var(--mx-text) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-balance {
    color: var(--mx-text-3) !important;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0;
}
.header-profile::after { content: '⌄'; color: var(--mx-text-4); font-size: 14px; margin-left: 2px; }

/* Logo (non-home screens) */
.header-logo,
.header-logo--glass {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px !important;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
}
.header-logo-mark {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mx-accent);
}
.header-logo-svg { width: 20px; height: 20px; }
.header-logo-text {
    color: var(--mx-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 14px;
}

/* Icon buttons */
.header-icon-btn,
.header-notifications-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    transition: background var(--mx-dur-2) var(--mx-ease),
                border-color var(--mx-dur-2) var(--mx-ease),
                transform var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
    position: relative;
}
.header-icon-btn:hover,
.header-icon-btn:focus-visible,
.header-notifications-btn:hover,
.header-notifications-btn:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
    border-color: var(--mx-border-strong) !important;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.02) !important;
}
.header-icon-btn:active,
.header-notifications-btn:active {
    transform: scale(0.96);
}

.header-lang-icon,
.header-theme-icon,
.header-bell-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: transparent no-repeat center / 20px 20px;
    color: var(--mx-text);
}

.header-lang-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><ellipse cx='12' cy='12' rx='4' ry='9'/><path d='M3 12h18'/></svg>");
}
.header-theme-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.2'/><path d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4'/></svg>");
}
.header-theme-icon--light {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 0111.2 3a7 7 0 109.8 9.8z'/></svg>");
}
.header-bell-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z'/><path d='M10 20a2 2 0 004 0'/></svg>");
}

.header-notifications-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mx-accent) !important;
    color: var(--mx-accent-ink) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--mx-bg);
    border: none !important;
}

/* Notifications dropdown */
.header-notifications-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 320px;
    max-width: 92vw;
    background: linear-gradient(180deg, #121212, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-lg) !important;
    box-shadow: var(--mx-shadow-3) !important;
    padding: 8px !important;
    display: none;
    z-index: 200;
}
.header-notifications-dropdown.open,
.header-notifications-dropdown.visible,
.header-notifications-wrap.open .header-notifications-dropdown {
    display: block;
    animation: mx-fade-in var(--mx-dur-2) var(--mx-ease);
}
.header-notifications-header {
    padding: 10px 12px;
    color: var(--mx-text-3);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.header-notifications-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--mx-text-4);
    font-size: 13px;
}
.header-notifications-list > * {
    padding: 12px;
    border-radius: var(--mx-r-sm);
    color: var(--mx-text-2);
    background: transparent;
    transition: background var(--mx-dur-1) var(--mx-ease);
}
.header-notifications-list > *:hover {
    background: rgba(255,255,255,0.03);
}

@keyframes mx-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   7. BOTTOM NAV
   ------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(10,10,10,0.88) !important;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--mx-border) !important;
    padding: 10px clamp(8px, 3vw, 24px)
             calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    z-index: 90;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
.bottom-nav.visible {
    display: grid;
}
.app-main.has-nav {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.nav-item {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-text-3) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px !important;
    border-radius: var(--mx-r-md);
    cursor: pointer;
    min-height: 60px;
    transition: color var(--mx-dur-2) var(--mx-ease);
    font-family: inherit;
    box-shadow: none !important;
}
.nav-item:hover { color: var(--mx-text-2) !important; }
.nav-item.active { color: var(--mx-text) !important; }

.nav-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    transition: background var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
}
.nav-icon::before {
    content: '';
    width: 22px; height: 22px;
    display: block;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    color: currentColor;
}
.nav-item .nav-icon { color: var(--mx-text-3); }
.nav-item:hover .nav-icon { color: var(--mx-text-2); }
.nav-item.active .nav-icon {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    box-shadow: 0 0 24px rgba(57,255,136,0.35);
    color: var(--mx-accent-ink);
}
.nav-item.active .nav-icon::before { color: var(--mx-accent-ink); }

.nav-icon--home::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>");
}
.nav-icon--exchange::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h13l-3-3'/><path d='M17 17H4l3 3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h13l-3-3'/><path d='M17 17H4l3 3'/></svg>");
}
.nav-icon--history::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 109-9 9.7 9.7 0 00-7 3'/><path d='M3 3v6h6'/><path d='M12 7v5l3 2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 109-9 9.7 9.7 0 00-7 3'/><path d='M3 3v6h6'/><path d='M12 7v5l3 2'/></svg>");
}
.nav-icon--roulette::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='2'/><path d='M3 12h18'/><path d='M12 8v13'/><path d='M8 8a3 3 0 013-3h2a3 3 0 013 3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='2'/><path d='M3 12h18'/><path d='M12 8v13'/><path d='M8 8a3 3 0 013-3h2a3 3 0 013 3'/></svg>");
}
.nav-icon--info::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v0.5'/><path d='M12 11v6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v0.5'/><path d='M12 11v6'/></svg>");
}

.nav-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
    text-transform: none !important;
}
.nav-item.active .nav-label { font-weight: 600 !important; color: var(--mx-text) !important; }

/* -------------------------------------------------------------------------
   8. HOME SCREEN
   ------------------------------------------------------------------------- */
.home-screen { padding-top: 12px; }

.main-page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 12px;
    padding-bottom: 40px;
}

/* HERO — reuses .home-intro (title + subtitle + expandable body) */
.home-intro {
    position: relative;
    background:
        radial-gradient(circle at 78% 40%, rgba(57,255,136,0.10), transparent 45%),
        linear-gradient(135deg, #101010 0%, #0A0A0A 60%, #0F0F0F 100%) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-3xl) !important;
    padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 56px) !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--mx-shadow-3) !important;
    transition: border-color var(--mx-dur-3) var(--mx-ease);
    isolation: isolate;
    min-height: clamp(260px, 42vw, 480px);
    display: flex;
    flex-direction: column;
}
.home-intro::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: radial-gradient(ellipse at 100% 20%, rgba(57,255,136,0.06), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.home-intro::after {
    /* Decorative crypto visual on the right */
    content: '';
    position: absolute;
    right: -60px; top: 50%;
    transform: translateY(-50%);
    width: min(52%, 620px);
    aspect-ratio: 1 / 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%2339FF88' stop-opacity='0.28'/><stop offset='60%25' stop-color='%2339FF88' stop-opacity='0.05'/><stop offset='100%25' stop-color='%2339FF88' stop-opacity='0'/></radialGradient><linearGradient id='m' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23262626'/><stop offset='1' stop-color='%230e0e0e'/></linearGradient><linearGradient id='ring' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23404040' stop-opacity='0.7'/><stop offset='1' stop-color='%23111' stop-opacity='0'/></linearGradient></defs><circle cx='200' cy='200' r='180' fill='url(%23g)'/><g opacity='0.65'><ellipse cx='200' cy='200' rx='170' ry='58' stroke='url(%23ring)' stroke-width='1.2'/><ellipse cx='200' cy='200' rx='170' ry='58' stroke='url(%23ring)' stroke-width='1.2' transform='rotate(30 200 200)'/><ellipse cx='200' cy='200' rx='170' ry='58' stroke='url(%23ring)' stroke-width='1.2' transform='rotate(-30 200 200)'/></g><g><circle cx='200' cy='210' r='84' fill='url(%23m)' stroke='%23444' stroke-width='1.2'/><text x='200' y='232' text-anchor='middle' font-family='Manrope, Inter, sans-serif' font-size='84' font-weight='700' fill='%23bdbdbd'>&#8383;</text></g><g><circle cx='320' cy='140' r='46' fill='url(%23m)' stroke='%23444' stroke-width='1'/><text x='320' y='158' text-anchor='middle' font-family='Manrope, Inter, sans-serif' font-size='46' font-weight='700' fill='%23bdbdbd'>&#124;T</text></g><g><circle cx='330' cy='270' r='40' fill='url(%23m)' stroke='%23444' stroke-width='1'/><text x='330' y='286' text-anchor='middle' font-family='Manrope, Inter, sans-serif' font-size='38' font-weight='700' fill='%23bdbdbd'>&#9671;</text></g><g><circle cx='120' cy='300' r='34' fill='url(%23m)' stroke='%23444' stroke-width='1'/><text x='120' y='314' text-anchor='middle' font-family='Manrope, Inter, sans-serif' font-size='30' font-weight='700' fill='%23bdbdbd'>S</text></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.95;
    z-index: 0;
    pointer-events: none;
    animation: mx-float 6s ease-in-out infinite;
}

.home-intro:hover {
    border-color: var(--mx-border-strong) !important;
}

.home-intro-toggle {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 60%;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    align-items: flex-start;
    text-align: left;
}

.home-intro-eyebrow {
    color: var(--mx-text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.home-intro-title {
    color: var(--mx-text) !important;
    font-weight: 800 !important;
    line-height: 0.94 !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
    font-size: clamp(46px, 8vw, 96px) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.home-intro-title-word {
    display: block;
    color: var(--mx-text);
    text-transform: uppercase;
}
.home-intro-title-word--accent {
    color: var(--mx-accent);
    text-shadow: 0 0 40px rgba(57,255,136,0.28);
}

.home-intro-text {
    color: var(--mx-text-3) !important;
    font-size: clamp(14px, 1.4vw, 17px) !important;
    line-height: 1.5 !important;
    max-width: 44ch !important;
    margin: 0 !important;
}

.home-intro-chevron {
    display: none !important;
}

/* Expanded body */
.home-intro-body {
    position: relative;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--mx-dur-3) var(--mx-ease);
    margin-top: 0;
}
.home-intro.is-expanded .home-intro-body,
.home-intro.expanded .home-intro-body {
    max-height: 400px;
    margin-top: 20px;
}
.home-intro-body-inner {
    padding: 20px 0 0;
    border-top: 1px solid var(--mx-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 60%;
}
.home-intro-desc,
.home-intro-cta {
    color: var(--mx-text-3);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.home-intro-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.home-intro-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    height: 30px;
    border-radius: var(--mx-pill);
    background: rgba(57,255,136,0.08) !important;
    border: 1px solid rgba(57,255,136,0.2) !important;
    color: var(--mx-accent) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Fix hero flex order so the pseudo-generated title appears BEFORE the hidden legacy title */
.home-intro-toggle {
    flex-direction: column;
}

/* Coins float */
@keyframes mx-float {
    0%, 100% { transform: translateY(-50%) translate3d(0, 0, 0); }
    50%      { transform: translateY(-50%) translate3d(0, -8px, 0); }
}

/* CTA "Обменять валюту" */
.home-exchange-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 68px;
    padding: 0 22px 0 10px !important;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em;
    border: 0 !important;
    cursor: pointer;
    box-shadow: var(--mx-glow-cta), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: transform var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
    align-self: stretch;
    max-width: 560px;
    width: 100%;
    text-transform: none !important;
    font-family: inherit;
    text-shadow: none !important;
}
.home-exchange-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--mx-glow-cta-h), inset 0 1px 0 rgba(255,255,255,0.3);
}
.home-exchange-cta:active { transform: translateY(0) scale(0.99); }

.home-exchange-cta-icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.15);
    color: var(--mx-accent-ink);
    flex-shrink: 0;
}
.home-exchange-cta-icon::before {
    content: '';
    width: 22px; height: 22px;
    background: var(--mx-accent-ink);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v14M7 18l-3-3M7 18l3-3M17 20V6M17 6l-3 3M17 6l3 3'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v14M7 18l-3-3M7 18l3-3M17 20V6M17 6l-3 3M17 6l3 3'/></svg>") no-repeat center / contain;
    display: block;
}
.home-exchange-cta-text { flex: 1; text-align: left; }
.home-exchange-cta-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform var(--mx-dur-2) var(--mx-ease);
}
.home-exchange-cta:hover .home-exchange-cta-arrow { transform: translateX(4px); }

/* BENEFITS ("home-trust") */
.home-trust {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 4px 0 0 !important;
}

.home-trust-item {
    position: relative;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 22px 20px !important;
    color: var(--mx-text) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    min-height: 168px;
    justify-content: flex-start !important;
    text-align: left !important;
    transition: transform var(--mx-dur-3) var(--mx-ease),
                border-color var(--mx-dur-3) var(--mx-ease),
                background var(--mx-dur-3) var(--mx-ease);
    font-size: inherit !important;
    box-shadow: var(--mx-shadow-1) !important;
    overflow: hidden;
    isolation: isolate;
}
.home-trust-item:hover {
    transform: translateY(-2px);
    border-color: var(--mx-border-strong) !important;
    background: linear-gradient(180deg, #151515, #0F0F0F) !important;
}
.home-trust-title {
    color: var(--mx-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin-top: 4px;
    display: block;
}
.home-trust-desc {
    color: var(--mx-text-3) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    margin-top: auto !important;
    display: block;
    max-width: 24ch;
}
.home-trust-icon {
    width: 46px; height: 46px;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #1a1a1a, #0f0f0f) !important;
    border: 1px solid var(--mx-border-strong) !important;
    color: var(--mx-text) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
    transition: box-shadow var(--mx-dur-3) var(--mx-ease);
}
.home-trust-item:hover .home-trust-icon {
    box-shadow: 0 0 20px rgba(57,255,136,0.20);
}
.home-trust-icon::before {
    content: '';
    width: 22px; height: 22px;
    display: block;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
}
/* Icons per item — indexed nth-child */
.home-trust-item:nth-child(1) .home-trust-icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>");
}
.home-trust-item:nth-child(2) .home-trust-icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/></svg>");
}
.home-trust-item:nth-child(3) .home-trust-icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/></svg>");
}
.home-trust-item:nth-child(4) .home-trust-icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-6'/></svg>");
}

/* .home-trust-desc already styled above — no pseudo hack needed */

/* -------------------------------------------------------------------------
   9. POPULAR SECTION
   ------------------------------------------------------------------------- */
.home-popular {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.home-section-title {
    color: var(--mx-text) !important;
    font-size: clamp(22px, 2.4vw, 26px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 4px 0 !important;
}

.home-popular-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.home-popular-card {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 18px !important;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--mx-dur-3) var(--mx-ease),
                border-color var(--mx-dur-3) var(--mx-ease);
    min-height: 84px;
    box-shadow: var(--mx-shadow-1) !important;
    font-family: inherit;
}
.home-popular-card:hover {
    transform: translateY(-2px);
    border-color: var(--mx-border-strong) !important;
}
.home-popular-card--accent {
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.16), transparent 55%),
        linear-gradient(180deg, #141414, #0F0F0F) !important;
    border-color: rgba(57,255,136,0.28) !important;
}
.home-popular-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-text);
    flex-shrink: 0;
    font-size: 0;
}
.home-popular-icon::before {
    content: '';
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.home-service-icon--exchange::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h13l-3-3'/><path d='M17 17H4l3 3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h13l-3-3'/><path d='M17 17H4l3 3'/></svg>");
}
.home-service-icon--link::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
}
.home-service-icon--help::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4'/><path d='M12 17.5v0.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4'/><path d='M12 17.5v0.5'/></svg>");
}
.home-popular-card--accent .home-popular-icon {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    border-color: transparent;
    box-shadow: 0 0 24px rgba(57,255,136,0.32);
}
.home-popular-text {
    flex: 1;
    color: var(--mx-text) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
}
.home-popular-card::after {
    content: '→';
    color: var(--mx-text-3);
    font-size: 18px;
    line-height: 1;
    transition: transform var(--mx-dur-2) var(--mx-ease),
                color var(--mx-dur-2) var(--mx-ease);
    padding-left: 8px;
}
.home-popular-card:hover::after {
    color: var(--mx-text);
    transform: translateX(4px);
}
.home-popular-card--accent::after {
    color: var(--mx-accent);
}

/* -------------------------------------------------------------------------
   10. BANNER
   ------------------------------------------------------------------------- */
.home-banner {
    position: relative;
    border-radius: var(--mx-r-xl) !important;
    background:
        radial-gradient(circle at 100% 50%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: var(--mx-shadow-2) !important;
    transition: border-color var(--mx-dur-3) var(--mx-ease);
}
.home-banner:hover { border-color: var(--mx-border-strong) !important; }

.home-banner__link {
    display: block;
    text-decoration: none;
    padding: 22px 24px;
}
.home-banner__content {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.home-banner__text { display: flex; flex-direction: column; gap: 4px; }
.home-banner__title {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
}
.home-banner__desc {
    color: var(--mx-text-3) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.home-banner__brand {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--mx-accent);
    text-shadow: 0 0 24px rgba(57,255,136,0.35);
}
.home-banner__close {
    position: absolute;
    top: 10px; right: 12px;
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text-2) !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
    transition: background var(--mx-dur-2) var(--mx-ease);
}
.home-banner__close:hover { background: rgba(255,255,255,0.08) !important; color: var(--mx-text) !important; }

/* -------------------------------------------------------------------------
   11. STORIES (info section)
   ------------------------------------------------------------------------- */
.home-articles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.home-section-header { display: flex; align-items: baseline; justify-content: space-between; }
.home-articles-track,
.home-stories-track {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 !important;
}
.home-story-card {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 140px;
    border-radius: var(--mx-r-xl) !important;
    overflow: hidden;
    background: #101010 !important;
    border: 1px solid var(--mx-border) !important;
    cursor: pointer;
    transition: transform var(--mx-dur-3) var(--mx-ease),
                border-color var(--mx-dur-3) var(--mx-ease);
    padding: 0 !important;
    box-shadow: var(--mx-shadow-1) !important;
    display: block;
}
.home-story-card:hover {
    transform: translateY(-2px);
    border-color: var(--mx-border-strong) !important;
}
.home-story-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
}
.home-story-card-bg,
.home-story-card-preview {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0d0d0d;
    border-radius: inherit;
}
.home-story-card-icon {
    position: absolute;
    top: 10px; right: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--mx-border);
    z-index: 1;
}

/* -------------------------------------------------------------------------
   12. HOME ADMIN ENTRY
   ------------------------------------------------------------------------- */
.home-admin-entry {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-admin-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(57,255,136,0.10), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 18px !important;
    color: var(--mx-text) !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color var(--mx-dur-3) var(--mx-ease),
                transform var(--mx-dur-3) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
    font-family: inherit;
    width: 100%;
    text-align: left;
    min-height: 76px;
}
.home-admin-card:hover {
    transform: translateY(-2px);
    border-color: rgba(57,255,136,0.35) !important;
}
.home-service-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-text);
    flex-shrink: 0;
    font-size: 0;
}
.home-service-icon::before {
    content: '';
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.home-service-icon--settings::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 00.3 1.9l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.9-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.9.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.9 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.9l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.9.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.9-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.9V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 00.3 1.9l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.9-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.9.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.9 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.9l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.9.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.9-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.9V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z'/></svg>");
}
.home-admin-card-text {
    flex: 1;
    display: flex; flex-direction: column; gap: 3px;
}
.home-admin-card-title {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.home-admin-card-desc {
    color: var(--mx-text-3) !important;
    font-size: 12.5px !important;
}
.home-admin-card-arrow {
    font-size: 18px;
    color: var(--mx-text-3);
    transition: transform var(--mx-dur-2) var(--mx-ease), color var(--mx-dur-2) var(--mx-ease);
}
.home-admin-card:hover .home-admin-card-arrow { color: var(--mx-accent); transform: translateX(4px); }

/* -------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------- */
.main-footer {
    margin-top: 12px;
    padding: 20px 0 8px;
    text-align: center;
    border-top: 1px solid var(--mx-border);
}
.main-footer-logo {
    color: var(--mx-text-3);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 13px;
}
.main-footer-m {
    color: var(--mx-accent);
    text-shadow: 0 0 12px rgba(57,255,136,0.4);
}

/* -------------------------------------------------------------------------
   14. UNIVERSAL BUTTONS / INPUTS (shared across screens)
   ------------------------------------------------------------------------- */
.btn,
button.btn {
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--mx-pill) !important;
    transition: transform var(--mx-dur-2) var(--mx-ease),
                background var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease),
                border-color var(--mx-dur-2) var(--mx-ease);
    cursor: pointer;
    letter-spacing: -0.005em;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-gold,
.btn-primary {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    box-shadow: var(--mx-glow-cta), inset 0 1px 0 rgba(255,255,255,0.28) !important;
    text-shadow: none !important;
}
.btn-gold:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--mx-glow-cta-h), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.btn-gold:active,
.btn-primary:active { transform: translateY(0) scale(0.99); }

.btn-outline,
.btn-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    box-shadow: none !important;
}
.btn-outline:hover,
.btn-secondary:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    border-color: var(--mx-border-strong) !important;
    transform: translateY(-1px);
}

.btn-block {
    display: flex;
    width: 100%;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 15px;
}

/* Inputs */
.input-text,
input[type="text"].input-text,
input[type="number"].input-text,
input[type="email"].input-text,
textarea.input-text,
.select-input {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 18px !important;
    height: 56px;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease),
                background var(--mx-dur-2) var(--mx-ease);
    width: 100%;
    box-sizing: border-box;
    box-shadow: none !important;
}
textarea.input-text { padding: 14px 18px !important; height: auto; min-height: 100px; line-height: 1.5; resize: vertical; }
.input-text::placeholder,
.select-input::placeholder { color: var(--mx-text-4); }
.input-text:focus,
.select-input:focus {
    border-color: var(--mx-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(57,255,136,0.15) !important;
    background: #141414 !important;
}

.form-label {
    color: var(--mx-text-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 8px !important;
    display: block;
}
.form-hint {
    color: var(--mx-text-4) !important;
    font-size: 12px !important;
    line-height: 1.5;
}
.form-hint--warning { color: var(--mx-warn) !important; }

.form-group { margin-bottom: 16px; }

.select-wrap { position: relative; }
.select-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px !important;
}
.select-arrow {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--mx-text-3);
    pointer-events: none;
    font-size: 12px;
}

/* Amount chips (wizard) */
.amount-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.amount-chip {
    background: linear-gradient(180deg, #141414, #0F0F0F) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    padding: 10px 16px !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13.5px;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.amount-chip:hover {
    border-color: var(--mx-border-strong) !important;
    background: linear-gradient(180deg, #181818, #101010) !important;
}
.amount-chip.selected,
.amount-chip.active {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    border-color: transparent !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 24px rgba(57,255,136,0.28);
}

/* Universal back button */
.btn-back-unified,
.btn-back-top {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    height: 40px;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
}
.btn-back-unified:hover,
.btn-back-top:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
    border-color: var(--mx-border-strong) !important;
}
.btn-back-wrap { margin: 12px 0 20px; }

/* Page titles for wizard/back screens */
.page-title {
    color: var(--mx-text) !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 4px 0 8px !important;
}
.page-subtitle {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 20px !important;
}
.form-step {
    color: var(--mx-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}

/* -------------------------------------------------------------------------
   15. RESPONSIVE (mobile / tablet)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .home-trust,
    .home-popular-cards,
    .home-stories-track,
    .home-articles-track {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-intro { min-height: 340px; }
    .home-intro-toggle { max-width: 100%; }
    .home-intro::after {
        right: -80px;
        width: 60%;
        opacity: 0.55;
    }
}

@media (max-width: 640px) {
    .header-inner { min-height: 60px; padding: 8px 12px; }
    .header-profile { height: 44px; padding: 4px 12px 4px 4px !important; max-width: 200px; }
    .header-avatar { width: 36px !important; height: 36px !important; }
    .header-name { font-size: 13px; max-width: 120px; }
    .header-balance { font-size: 12px; }
    .header-icon-btn,
    .header-notifications-btn { width: 40px !important; height: 40px !important; }
    .header-logo { height: 40px; padding: 0 12px !important; }
    .header-logo-text { font-size: 13px; }

    .home-intro {
        padding: 24px !important;
        min-height: 380px;
        border-radius: var(--mx-r-2xl) !important;
    }
    .home-intro-toggle::after {
        font-size: clamp(40px, 12vw, 60px);
    }
    .home-intro::after {
        right: -100px;
        top: auto;
        bottom: -80px;
        transform: none;
        width: 320px;
        opacity: 0.35;
        animation: none;
    }
    .home-intro-toggle { gap: 14px; }
    .home-intro-text { font-size: 13.5px !important; }

    .home-exchange-cta {
        height: 60px;
        font-size: 15.5px !important;
        padding: 0 16px 0 6px !important;
    }
    .home-exchange-cta-icon { width: 44px; height: 44px; }

    .home-trust,
    .home-popular-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .home-trust-item { padding: 18px 16px !important; min-height: 150px; }
    .home-trust-title { font-size: 14.5px !important; }
    .home-trust-desc { font-size: 12px !important; }

    .home-stories-track,
    .home-articles-track {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .home-stories-track::-webkit-scrollbar,
    .home-articles-track::-webkit-scrollbar { display: none; }
    .home-story-card {
        flex: 0 0 160px;
        scroll-snap-align: start;
    }

    .home-section-title { font-size: 20px !important; }

    .home-banner__link { padding: 18px; }
    .home-banner__brand { font-size: 18px; }

    .bottom-nav { padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
    .app-main.has-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .nav-item { min-height: 54px; }
    .nav-icon { width: 32px; height: 32px; }
    .nav-icon::before { width: 20px; height: 20px; }
}

@media (max-width: 400px) {
    .home-intro { min-height: 340px; padding: 20px !important; }
    .home-intro-toggle::after { font-size: 42px; }
    .home-trust,
    .home-popular-cards { gap: 8px; }
    .home-trust-item { padding: 16px !important; min-height: 140px; }
}

/* -------------------------------------------------------------------------
   PHASE 2: EXCHANGE PAGE + WIZARD + ORDER DETAIL + HISTORY + COUPONS
   ------------------------------------------------------------------------- */

/* ---- Exchange screen: header ---- */
.exchange-screen { padding-top: 4px; }
.exchange-container {
    padding-top: 12px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.exchange-header,
.exchange-header--premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 44px;
}
.exchange-header-spacer { width: 44px; }
.exchange-title {
    color: var(--mx-text) !important;
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    text-align: center;
    flex: 1;
}
.exchange-back {
    /* Uses .btn-back-unified base */
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: var(--mx-pill) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.exchange-back:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
    border-color: var(--mx-border-strong) !important;
}
.exchange-back-icon { font-size: 16px; line-height: 1; }
.exchange-back-text { font-size: 13.5px; font-weight: 600; }

/* ---- Exchange form + cards ---- */
.exchange-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}
.exchange-card {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    box-shadow: var(--mx-shadow-1) !important;
    transition: border-color var(--mx-dur-2) var(--mx-ease);
}
.exchange-card:hover { border-color: var(--mx-border-strong) !important; }
.exchange-card-label {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    display: block;
}

/* Currency selector (wraps native <select>) */
.exchange-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 18px !important;
    height: 62px;
    cursor: pointer;
    transition: border-color var(--mx-dur-2) var(--mx-ease),
                background var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
}
.exchange-select-wrap:hover {
    border-color: var(--mx-border-strong) !important;
    background: linear-gradient(180deg, #191919, #101010) !important;
}
.exchange-select-value {
    color: var(--mx-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exchange-select-arrow {
    color: var(--mx-text-3);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    flex-shrink: 0;
}
.exchange-crypto-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px; /* prevent iOS zoom */
}
.exchange-crypto-select option {
    background: #101010;
    color: var(--mx-text);
}
.exchange-free-hint {
    color: var(--mx-accent) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 10px 0 0 !important;
    font-weight: 600;
}

/* Amount card */
.exchange-amount-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.exchange-amount-toggle {
    display: inline-flex;
    padding: 4px !important;
    border-radius: var(--mx-pill) !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--mx-border) !important;
    gap: 2px;
}
.exchange-toggle-btn {
    background: transparent !important;
    color: var(--mx-text-3) !important;
    border: 0 !important;
    padding: 8px 14px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
    line-height: 1;
    letter-spacing: 0.02em;
}
.exchange-toggle-btn.active {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 20px rgba(57,255,136,0.24);
}
.exchange-amount-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0 4px;
    border-bottom: 1px dashed var(--mx-border);
    margin-bottom: 12px;
}
.exchange-amount-input {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-text) !important;
    font-family: inherit;
    font-size: clamp(30px, 5vw, 44px) !important;
    font-weight: 700 !important;
    line-height: 1.1;
    padding: 4px 0 !important;
    flex: 1;
    min-width: 0;
    outline: none;
    -moz-appearance: textfield;
    letter-spacing: -0.02em;
    height: auto !important;
    box-shadow: none !important;
}
.exchange-amount-input::-webkit-outer-spin-button,
.exchange-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.exchange-amount-input::placeholder { color: var(--mx-text-4); }
.exchange-amount-input:focus { box-shadow: none !important; }
.exchange-amount-unit {
    color: var(--mx-text-3);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.exchange-amount-hint {
    color: var(--mx-text-4) !important;
    font-size: 12.5px !important;
    line-height: 1.4;
    margin: 0 0 12px !important;
}
.exchange-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--mx-r-md);
    background: rgba(57,255,136,0.06);
    border: 1px solid rgba(57,255,136,0.18);
}
.exchange-result-label {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.exchange-result-value {
    color: var(--mx-accent) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: -0.01em;
}

/* Wallet input inside exchange card */
.exchange-wallet-input {
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 18px !important;
    height: 56px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    transition: border-color var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
    outline: none;
    box-shadow: none !important;
}
.exchange-wallet-input::placeholder { color: var(--mx-text-4); }
.exchange-wallet-input:focus {
    border-color: var(--mx-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(57,255,136,0.15) !important;
}
.exchange-wallet-hint {
    color: var(--mx-text-4) !important;
    font-size: 12px !important;
    display: block;
    margin-top: 8px;
}
.form-hint--wallet-network {
    color: var(--mx-warn) !important;
    font-size: 12px !important;
    display: block;
    margin-top: 8px;
    line-height: 1.5;
}

/* Payment section + method chips */
.exchange-section-title {
    color: var(--mx-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.01em;
}
.exchange-method-grid,
.payment-method-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px !important;
}
.payment-method-chip,
.exchange-method-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px !important;
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
    min-height: 60px;
}
.payment-method-chip:hover,
.exchange-method-btn:hover {
    border-color: var(--mx-border-strong) !important;
    transform: translateY(-1px);
    background: linear-gradient(180deg, #1a1a1a, #101010) !important;
}
.payment-method-chip.selected,
.payment-method-chip.active,
.exchange-method-btn.selected,
.exchange-method-btn.active {
    background: rgba(57,255,136,0.08) !important;
    border-color: rgba(57,255,136,0.45) !important;
    box-shadow: 0 0 24px rgba(57,255,136,0.18) !important;
}
.payment-method-chip-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #222, #111);
    border: 1px solid var(--mx-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.payment-method-chip-label {
    color: var(--mx-text) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3;
}
.exchange-no-methods {
    color: var(--mx-text-4) !important;
    font-size: 13px !important;
    padding: 20px 0;
    text-align: center;
}

/* Main submit */
.exchange-submit-btn {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    height: 62px;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 800 !important;
    font-size: 16px !important;
    cursor: pointer;
    box-shadow: var(--mx-glow-cta), inset 0 1px 0 rgba(255,255,255,0.28) !important;
    transition: transform var(--mx-dur-2) var(--mx-ease),
                box-shadow var(--mx-dur-2) var(--mx-ease);
    width: 100%;
    letter-spacing: -0.01em;
    text-shadow: none !important;
}
.exchange-submit-btn:hover { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h), inset 0 1px 0 rgba(255,255,255,0.28) !important; }
.exchange-submit-btn:active { transform: translateY(0) scale(0.99); }
.exchange-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Rates <details> */
.exchange-rates-details {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 0 !important;
    overflow: hidden;
}
.exchange-rates-summary {
    color: var(--mx-text) !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.exchange-rates-summary::-webkit-details-marker { display: none; }
.exchange-rates-summary::after {
    content: '⌄';
    color: var(--mx-text-3);
    transition: transform var(--mx-dur-2) var(--mx-ease);
}
.exchange-rates-details[open] .exchange-rates-summary::after { transform: rotate(180deg); }
.exchange-rates-table {
    padding: 4px 12px 12px;
}
.exchange-rates-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 12px;
    color: var(--mx-text-3);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--mx-border);
}
.exchange-rates-body > * {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px;
    color: var(--mx-text);
    font-size: 13px;
    border-bottom: 1px solid var(--mx-border-soft);
}
.exchange-rates-body > *:last-child { border-bottom: 0; }

/* ---- Wizard steps (enter-amount, enter-payment, enter-wallet, confirm-order) ---- */
.form-screen {
    padding-top: 12px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-screen .form-step { margin-top: 8px; }
.form-screen .page-title { margin-top: 0 !important; }
.form-screen .page-subtitle { margin-bottom: 24px !important; }

/* Progress dots (added visually via ::before on .form-step) */
.form-step {
    position: relative;
    padding-left: 0;
}
/* Show dots above the step label */
.form-screen .form-step::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 320px;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--mx-pill);
    margin-bottom: 12px;
    background-image: linear-gradient(90deg, var(--mx-accent) 0%, var(--mx-accent) var(--mx-progress, 25%), transparent var(--mx-progress, 25%), transparent 100%);
    background-repeat: no-repeat;
}
#enter-amount   .form-step { --mx-progress: 40%; }
#enter-payment  .form-step { --mx-progress: 60%; }
#enter-wallet   .form-step { --mx-progress: 80%; }
#confirm-order  .form-step { --mx-progress: 100%; }

/* Order summary (both wizard and detail) */
.order-summary-card,
#order-summary,
.order-summary-card-inner {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    box-shadow: var(--mx-shadow-1) !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--mx-text) !important;
}
.order-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.order-summary-crypto {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
.order-summary-amount {
    color: var(--mx-accent) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.01em;
}
.order-summary-divider {
    height: 1px;
    background: var(--mx-border);
    margin: 4px 0;
}
.order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}
.order-summary-label { color: var(--mx-text-3) !important; font-weight: 500 !important; }
.order-summary-value { color: var(--mx-text) !important; font-weight: 600 !important; text-align: right; }
.order-summary-total {
    padding-top: 12px;
    border-top: 1px solid var(--mx-border);
    font-size: 16px !important;
    margin-top: 4px;
}
.order-summary-total .order-summary-label { color: var(--mx-text-2) !important; }
.order-summary-total .order-summary-value { color: var(--mx-accent) !important; font-size: 18px !important; font-weight: 800 !important; }
.order-summary-row--coupon .order-summary-value,
.order-summary-row--balance .order-summary-value {
    color: var(--mx-accent) !important;
    font-weight: 700 !important;
}
.order-summary-wallet {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: var(--mx-r-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    word-break: break-all;
}
.order-summary-wallet-label {
    color: var(--mx-text-3) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    font-weight: 600;
}
.order-summary-wallet-addr {
    color: var(--mx-text) !important;
    font-family: var(--mx-font-mono);
    font-size: 12.5px !important;
    line-height: 1.4;
}
.order-summary-balance-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-balance-apply { width: 100%; height: 46px; }
.order-summary-coupon-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.btn-small { height: 34px !important; padding: 0 14px !important; font-size: 12.5px !important; font-weight: 600 !important; }
.order-summary-coupons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* order-detail-summary uses .row / .label / .value markup */
.order-summary.order-detail-summary {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--mx-shadow-1) !important;
}
.order-detail-summary .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--mx-border);
    font-size: 14px;
}
.order-detail-summary .row:last-child { border-bottom: 0; }
.order-detail-summary .label { color: var(--mx-text-3) !important; font-weight: 500 !important; }
.order-detail-summary .value { color: var(--mx-text) !important; font-weight: 600 !important; text-align: right; }
.order-detail-summary .value.addr {
    font-family: var(--mx-font-mono);
    font-size: 12.5px !important;
    word-break: break-all;
    max-width: 60%;
    line-height: 1.4;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    height: 24px;
    border-radius: var(--mx-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    background: rgba(255,255,255,0.06);
    color: var(--mx-text-2);
    border: 1px solid var(--mx-border);
    white-space: nowrap;
}
.status-badge--completed {
    background: rgba(57,255,136,0.12);
    color: var(--mx-accent);
    border-color: rgba(57,255,136,0.3);
}
.status-badge--processing,
.status-badge--verification,
.status-badge--waiting-payment {
    background: rgba(110,166,255,0.10);
    color: var(--mx-info);
    border-color: rgba(110,166,255,0.28);
}
.status-badge--cancelled {
    background: rgba(255,95,109,0.10);
    color: var(--mx-danger);
    border-color: rgba(255,95,109,0.28);
}
.status-badge--pending {
    background: rgba(245,179,59,0.10);
    color: var(--mx-warn);
    border-color: rgba(245,179,59,0.28);
}

/* Order detail: requisites block */
.order-requisites-block {
    background: linear-gradient(180deg, #141414, #0F0F0F) !important;
    border: 1px solid rgba(57,255,136,0.20) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 24px rgba(57,255,136,0.06);
}
.order-requisites-title {
    color: var(--mx-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}
.order-requisites-name {
    color: var(--mx-text-3) !important;
    font-size: 13px !important;
    margin: 0 !important;
    font-weight: 500;
}
.order-requisites-data-wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.order-requisites-data {
    flex: 1;
    min-width: 0;
    background: rgba(0,0,0,0.4) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 14px 16px !important;
    font-family: var(--mx-font-mono);
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 !important;
    line-height: 1.5;
}
.btn-copy-req {
    height: 48px !important;
    padding: 0 20px !important;
    align-self: stretch;
}
.order-requisites-hint {
    color: var(--mx-text-4) !important;
    font-size: 12px !important;
    line-height: 1.5;
    margin: 0 !important;
}

.order-payment-deadline-hint {
    color: var(--mx-warn) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 12px 16px;
    background: rgba(245,179,59,0.06);
    border: 1px solid rgba(245,179,59,0.20);
    border-radius: var(--mx-r-md);
    margin: 0 !important;
}

.order-payment-proof-block {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order-section-title {
    color: var(--mx-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}
.input-file {
    padding: 12px !important;
    border: 1px dashed var(--mx-border-strong) !important;
    border-radius: var(--mx-r-md) !important;
    background: rgba(255,255,255,0.02) !important;
    color: var(--mx-text-2) !important;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.input-file::file-selector-button,
.input-file::-webkit-file-upload-button {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: var(--mx-text);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-pill);
    padding: 6px 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    margin-right: 10px;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.action-buttons .btn { flex: 1; min-width: 180px; height: 52px; }
.admin-btn-danger,
.btn.admin-btn-danger {
    background: linear-gradient(180deg, rgba(255,95,109,0.15), rgba(255,95,109,0.08)) !important;
    color: var(--mx-danger) !important;
    border: 1px solid rgba(255,95,109,0.35) !important;
}
.admin-btn-danger:hover {
    background: linear-gradient(180deg, rgba(255,95,109,0.22), rgba(255,95,109,0.10)) !important;
    border-color: rgba(255,95,109,0.55) !important;
}

/* ---- History screen ---- */
.history-screen { padding-top: 4px; }
.history-container {
    padding-top: 12px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.history-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.history-back {
    align-self: flex-start;
    margin-bottom: 6px;
}
.history-title {
    color: var(--mx-text) !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1.1;
}
.history-subtitle {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.history-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.history-order-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    padding: 16px 18px !important;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    cursor: pointer;
    text-decoration: none;
    color: var(--mx-text) !important;
    transition: transform var(--mx-dur-2) var(--mx-ease),
                border-color var(--mx-dur-2) var(--mx-ease);
    font-family: inherit;
    text-align: left;
    box-shadow: var(--mx-shadow-1) !important;
}
.history-order-card:hover {
    transform: translateY(-1px);
    border-color: var(--mx-border-strong) !important;
}
.history-order-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.history-order-card__id {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    font-family: var(--mx-font-mono);
    letter-spacing: 0.02em;
    font-weight: 500;
}
.history-order-card__status {
    /* Reuse .status-badge look via composed classes */
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--mx-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: var(--mx-text-2);
    border: 1px solid var(--mx-border);
    white-space: nowrap;
}
.history-order-card__status--completed { background: rgba(57,255,136,0.12); color: var(--mx-accent); border-color: rgba(57,255,136,0.3); }
.history-order-card__status--cancelled { background: rgba(255,95,109,0.10); color: var(--mx-danger); border-color: rgba(255,95,109,0.28); }
.history-order-card__status--processing,
.history-order-card__status--verification,
.history-order-card__status--waiting-payment { background: rgba(110,166,255,0.10); color: var(--mx-info); border-color: rgba(110,166,255,0.28); }
.history-order-card__status--pending { background: rgba(245,179,59,0.10); color: var(--mx-warn); border-color: rgba(245,179,59,0.28); }
.history-order-card__main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.history-order-card__crypto {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.005em;
}
.history-order-card__amount {
    color: var(--mx-text) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em;
}
.history-order-card__meta {
    color: var(--mx-text-4) !important;
    font-size: 12px !important;
}
.history-empty {
    padding: 48px 16px;
    text-align: center;
    background: linear-gradient(180deg, #121212, #0E0E0E);
    border: 1px dashed var(--mx-border-strong);
    border-radius: var(--mx-r-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.history-empty-icon { font-size: 42px; opacity: 0.6; }
.history-empty-title { color: var(--mx-text) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 !important; }
.history-empty-text { color: var(--mx-text-3) !important; font-size: 13.5px !important; margin: 0 !important; max-width: 340px; }
.history-empty-cta {
    margin-top: 8px !important;
    height: 52px;
    padding: 0 24px !important;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    font-family: inherit;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: var(--mx-glow-cta);
    text-shadow: none !important;
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease);
}
.history-empty-cta:hover { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h); }

/* ---- Coupons screen ---- */
.coupons-screen { padding-top: 4px; }
.coupons-tabs-wrap { margin-bottom: 4px; }
.user-profile-coupons-tabs {
    display: inline-flex;
    padding: 4px !important;
    border-radius: var(--mx-pill) !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--mx-border) !important;
    gap: 2px;
}
.user-profile-tab {
    background: transparent !important;
    color: var(--mx-text-3) !important;
    border: 0 !important;
    padding: 10px 18px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.user-profile-tab--active {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 20px rgba(57,255,136,0.22);
}
.coupons-tab-count {
    font-weight: 700;
    opacity: 0.75;
    margin-left: 4px;
}
.coupons-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.coupons-empty {
    padding: 48px 16px;
    text-align: center;
    background: linear-gradient(180deg, #121212, #0E0E0E);
    border: 1px dashed var(--mx-border-strong);
    border-radius: var(--mx-r-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.coupons-empty-icon { font-size: 42px; opacity: 0.6; }
.coupons-empty-title { color: var(--mx-text) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 !important; }
.coupons-empty-text { color: var(--mx-text-3) !important; font-size: 13.5px !important; margin: 0 !important; max-width: 340px; }
.coupons-list > * {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 16px !important;
    color: var(--mx-text) !important;
}

/* ---- Responsive tweaks for Phase 2 ---- */
@media (max-width: 640px) {
    .exchange-title { font-size: 20px !important; }
    .exchange-back { height: 40px !important; padding: 0 12px !important; }
    .exchange-back-text { display: none; }
    .exchange-header-spacer { width: 40px; }
    .exchange-card { padding: 16px !important; border-radius: var(--mx-r-lg) !important; }
    .exchange-amount-input { font-size: 30px !important; }
    .exchange-amount-unit { font-size: 18px; }
    .exchange-submit-btn { height: 56px; font-size: 15px !important; }
    .exchange-select-wrap { height: 58px; }
    .exchange-select-value { font-size: 14.5px !important; }
    .payment-method-chip,
    .exchange-method-btn { padding: 12px !important; min-height: 56px; }
    .payment-method-chip-label { font-size: 13px !important; }

    .form-screen { padding-top: 8px; padding-bottom: 32px; }
    .page-title { font-size: 22px !important; }
    .page-subtitle { font-size: 13.5px !important; margin-bottom: 16px !important; }

    .order-summary-card,
    .order-summary.order-detail-summary { padding: 16px !important; border-radius: var(--mx-r-lg) !important; }
    .order-summary-amount { font-size: 18px !important; }
    .order-summary-total .order-summary-value { font-size: 16px !important; }
    .order-detail-summary .value.addr { max-width: 55%; }
    .action-buttons .btn { min-width: 100%; }

    .history-header .history-title { font-size: 22px !important; }
    .history-order-card { padding: 14px 16px !important; }
    .history-order-card__amount { font-size: 15.5px !important; }
    .history-order-card__crypto { font-size: 14px !important; }

    .user-profile-tab { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* -------------------------------------------------------------------------
   PHASE 3: PROFILE + REFERRAL + COMPLAINT
   ------------------------------------------------------------------------- */

/* ---- Profile ---- */
.profile-screen { padding-top: 0; }
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px) 40px;
    box-sizing: border-box;
    width: 100%;
}

.profile-hero {
    position: relative;
    padding: 32px 24px 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(57,255,136,0.18), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    box-shadow: var(--mx-shadow-2) !important;
}
.profile-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 100%, rgba(57,255,136,0.10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.03), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.profile-hero-bg::after { display: none !important; }
.profile-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.profile-back-wrap--in-hero {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
}
.profile-back-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    padding: 0 14px !important;
    height: 40px;
    border-radius: var(--mx-pill) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer;
}
.profile-back-arrow { font-size: 16px; line-height: 1; }
.profile-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d) !important;
    border: 2px solid rgba(57,255,136,0.4) !important;
    box-shadow: 0 0 40px rgba(57,255,136,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--mx-text);
}
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-letter { font-size: 36px !important; font-weight: 700 !important; color: var(--mx-text) !important; }
.profile-display-name {
    color: var(--mx-text) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.profile-username {
    color: var(--mx-text-3) !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    font-family: var(--mx-font-mono);
}

.profile-wallet-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.12), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    padding: 22px !important;
    display: flex !important;
    gap: 16px;
    align-items: flex-start;
    box-shadow: var(--mx-shadow-1) !important;
}
.profile-wallet-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 0 30px rgba(57,255,136,0.28);
}
.profile-wallet-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-wallet-label {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.profile-wallet-value {
    color: var(--mx-text) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1;
    margin: 2px 0 !important;
}
.profile-wallet-hint {
    color: var(--mx-text-4) !important;
    font-size: 12px !important;
    margin: 0 0 12px !important;
    line-height: 1.5;
}
.profile-wallet-deposit {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-balance-input {
    flex: 1;
    min-width: 140px;
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 16px !important;
    height: 48px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
}
.profile-balance-input:focus { border-color: var(--mx-border-focus) !important; box-shadow: 0 0 0 3px rgba(57,255,136,0.15) !important; }
.profile-balance-input::placeholder { color: var(--mx-text-4); }
.profile-balance-deposit-btn {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    border-radius: var(--mx-pill) !important;
    box-shadow: var(--mx-glow-cta) !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease);
}
.profile-balance-deposit-btn:hover { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h) !important; }

.profile-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.profile-stat-card,
.profile-stat-card--link,
.profile-stat-card--total {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 18px !important;
    color: var(--mx-text) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
}
.profile-stat-card:hover { transform: translateY(-2px); border-color: var(--mx-border-strong) !important; }
.profile-stat-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-text);
    flex-shrink: 0;
    font-size: 0;
}
.profile-stat-icon::before {
    content: '';
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.profile-stat-icon--link::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
}
.profile-stat-icon--chart::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 15l4-4 3 3 5-6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 15l4-4 3 3 5-6'/></svg>");
}
.profile-stat-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.profile-stat-label { color: var(--mx-text-3) !important; font-size: 12px !important; font-weight: 500 !important; }
.profile-stat-value { color: var(--mx-text) !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -0.01em; }
.profile-stat-card--link { justify-content: space-between; }
.profile-stat-card--link .profile-stat-label { flex: 1; font-weight: 600 !important; font-size: 13.5px !important; color: var(--mx-text) !important; }
.profile-stat-arrow { color: var(--mx-text-3); font-size: 18px; transition: transform var(--mx-dur-2) var(--mx-ease), color var(--mx-dur-2) var(--mx-ease); }
.profile-stat-card--link:hover .profile-stat-arrow { color: var(--mx-accent); transform: translateX(4px); }

.profile-block {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--mx-shadow-1);
}
.profile-block-title {
    color: var(--mx-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-block-badge {
    background: rgba(57,255,136,0.12);
    color: var(--mx-accent);
    border-radius: var(--mx-pill);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(57,255,136,0.28);
}
.recent-deals-list,
.referral-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recent-deals-list > *,
.referral-list > * {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    padding: 12px 14px;
    color: var(--mx-text) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.profile-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--mx-pill);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--mx-border);
    gap: 2px;
    align-self: flex-start;
}
.profile-tab {
    background: transparent !important;
    color: var(--mx-text-3) !important;
    border: 0 !important;
    padding: 8px 16px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.profile-tab--active,
.profile-tab.active {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 20px rgba(57,255,136,0.22);
}
.profile-tab-content { margin-top: 4px; }
.profile-tab-content--hidden { display: none !important; }

/* ---- Referral program ---- */
.referral-program-screen { padding-top: 4px; }
.referral-program-container {
    max-width: var(--mx-container-narrow);
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 32px) 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
}
.referral-program-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 8px;
}
.referral-hero-circle {
    width: 108px; height: 108px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0%, rgba(57,255,136,0.35), transparent 65%),
        linear-gradient(180deg, #151515, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(57,255,136,0.22);
}
.referral-hero-icon {
    width: 44px; height: 44px;
    background: var(--mx-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 00-3-3.9'/><path d='M16 3.1a4 4 0 010 7.8'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 00-3-3.9'/><path d='M16 3.1a4 4 0 010 7.8'/></svg>") no-repeat center / contain;
}
.referral-program-title {
    color: var(--mx-text) !important;
    font-size: clamp(24px, 3vw, 30px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: center;
    margin: 0 !important;
    line-height: 1.15;
}
.referral-program-desc {
    color: var(--mx-text-3) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    text-align: center;
    margin: 0 auto !important;
    max-width: 46ch;
}
.referral-program-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.referral-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px !important;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
}
.referral-action-btn:hover { transform: translateY(-2px); border-color: var(--mx-border-strong) !important; }
.referral-action-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    color: var(--mx-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.referral-action-icon::before {
    content: '';
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.referral-action-icon--link::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
}
.referral-action-icon--qr::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM20 14v3M14 20h7'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM20 14v3M14 20h7'/></svg>");
}
.referral-action-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.referral-action-label { color: var(--mx-text) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.005em; }
.referral-action-sublabel { color: var(--mx-text-3) !important; font-size: 12.5px !important; line-height: 1.4; }
.referral-action-arrow { color: var(--mx-text-3); font-size: 18px; transition: transform var(--mx-dur-2) var(--mx-ease), color var(--mx-dur-2) var(--mx-ease); }
.referral-action-btn:hover .referral-action-arrow { color: var(--mx-accent); transform: translateX(4px); }

.referral-profile-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(57,255,136,0.10), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    padding: 22px !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--mx-shadow-2) !important;
}
.referral-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}
.referral-card-stat { display: flex; flex-direction: column; gap: 4px; }
.referral-card-stat-value {
    color: var(--mx-text) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.referral-card-stat-label {
    color: var(--mx-text-3) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.referral-card-divider {
    height: 1px;
    background: var(--mx-border);
}
.referral-card-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.referral-card-section-title {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.referral-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    color: var(--mx-text-3) !important;
    text-align: center;
    font-size: 13.5px;
}
.referral-stats-empty-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--mx-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.referral-stats-list > * {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    color: var(--mx-text-2);
    font-size: 13px;
    margin-bottom: 6px;
}

/* Referral subpages (link/qr) */
.referral-subpage { padding-top: 0; }
.referral-subpage-container {
    max-width: var(--mx-container-narrow);
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 32px) 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
}
.referral-subpage-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 20px 0 8px;
}
.referral-subpage-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0%, rgba(57,255,136,0.32), transparent 65%),
        linear-gradient(180deg, #151515, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-accent);
    box-shadow: 0 0 30px rgba(57,255,136,0.24);
}
.referral-subpage-icon::before {
    content: '';
    width: 32px; height: 32px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.referral-subpage-icon--link::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>");
}
.referral-subpage-icon--qr::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM20 14v3M14 20h7'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM20 14v3M14 20h7'/></svg>");
}
.referral-subpage-title {
    color: var(--mx-text) !important;
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.referral-subpage-desc {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 46ch;
}

.referral-link-premium-block {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--mx-shadow-1) !important;
}
.referral-link-premium-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.referral-link-premium-icon {
    width: 20px; height: 20px;
    background: var(--mx-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/><path d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/></svg>") no-repeat center / contain;
    display: inline-block;
}
.referral-link-premium-label {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.referral-link-premium-field-box {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: linear-gradient(180deg, #171717, #0F0F0F);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    padding: 6px;
}
.referral-link-premium-field {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-text) !important;
    padding: 0 12px !important;
    height: 44px;
    flex: 1;
    font-family: var(--mx-font-mono);
    font-size: 13px;
    outline: none;
    min-width: 0;
    width: 100%;
    box-shadow: none !important;
}
.referral-link-premium-copy-icon {
    width: 44px; height: 44px;
    border-radius: var(--mx-r-sm);
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(57,255,136,0.28);
    transition: transform var(--mx-dur-2) var(--mx-ease);
}
.referral-link-premium-copy-icon:hover { transform: translateY(-1px); }
.referral-link-copy-icon-svg {
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15V5a2 2 0 012-2h10'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15V5a2 2 0 012-2h10'/></svg>") no-repeat center / contain;
    display: inline-block;
}
.referral-link-hint {
    color: var(--mx-accent) !important;
    font-size: 12.5px !important;
    margin: 0 !important;
    font-weight: 600;
}
.referral-link-actions-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.referral-link-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px !important;
    padding: 0 20px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease);
    border: 0 !important;
    text-shadow: none !important;
}
.referral-link-action-btn--copy {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: var(--mx-glow-cta) !important;
}
.referral-link-action-btn--share {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    box-shadow: none !important;
}
.referral-link-action-btn:hover { transform: translateY(-1px); }
.referral-link-action-btn--copy:hover { box-shadow: var(--mx-glow-cta-h) !important; }
.referral-link-action-icon {
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: inline-block;
}
.referral-link-action-icon--copy {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15V5a2 2 0 012-2h10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15V5a2 2 0 012-2h10'/></svg>");
}
.referral-link-action-icon--share {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v14'/></svg>");
}

.referral-qr-card {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    box-shadow: var(--mx-shadow-2) !important;
}
.referral-qr-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.referral-qr-image-box {
    padding: 20px;
    background: #ffffff;
    border-radius: var(--mx-r-lg);
    box-shadow: 0 0 40px rgba(57,255,136,0.15);
}
.referral-qr-page-image { display: block; width: 220px; height: 220px; }
.referral-qr-page-hint {
    color: var(--mx-text-3) !important;
    font-size: 13px !important;
    text-align: center;
    margin: 0 !important;
}
.referral-share-btn {
    height: 56px;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.referral-share-btn-icon {
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v14'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7'/><path d='M16 6l-4-4-4 4'/><path d='M12 2v14'/></svg>") no-repeat center / contain;
    display: inline-block;
}

/* ---- Complaint (help form) ---- */
#complaint .form-screen { max-width: var(--mx-container-narrow); }

/* -------------------------------------------------------------------------
   PHASE 4: INFO + ROULETTE (VPN / WEEKLY / DAILY)
   ------------------------------------------------------------------------- */

/* ---- Info page ---- */
.info-screen { padding-top: 0; }
.info-page {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 32px) 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
}
.info-hero {
    padding: 32px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    box-shadow: var(--mx-shadow-2);
}
.info-hero-title {
    color: var(--mx-text) !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
    line-height: 1;
}
.info-hero-tagline {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
}

.info-blocks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.info-block-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 22px !important;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    color: var(--mx-text) !important;
    text-decoration: none;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
    min-height: 148px;
    overflow: hidden;
}
.info-block-card:hover {
    transform: translateY(-2px);
    border-color: var(--mx-border-strong) !important;
}
.info-block-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    color: var(--mx-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow var(--mx-dur-2) var(--mx-ease);
}
.info-block-card:hover .info-block-icon { box-shadow: 0 0 20px rgba(57,255,136,0.24); }
.info-block-icon::before {
    content: '';
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.info-block-icon--news::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>");
}
.info-block-icon--support::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 10-12 0v6a3 3 0 003 3'/><path d='M3 12v2a2 2 0 002 2h1v-6H5a2 2 0 00-2 2z'/><path d='M21 12v2a2 2 0 01-2 2h-1v-6h1a2 2 0 012 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 10-12 0v6a3 3 0 003 3'/><path d='M3 12v2a2 2 0 002 2h1v-6H5a2 2 0 00-2 2z'/><path d='M21 12v2a2 2 0 01-2 2h-1v-6h1a2 2 0 012 2z'/></svg>");
}
.info-block-icon--chat::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 01-11.6 7.2L4 21l1.8-5.4A8 8 0 1121 12z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 01-11.6 7.2L4 21l1.8-5.4A8 8 0 1121 12z'/></svg>");
}
.info-block-icon--help::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4'/><path d='M12 17.5v0.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4'/><path d='M12 17.5v0.5'/></svg>");
}
.info-block-title {
    color: var(--mx-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 4px 0 0 !important;
    line-height: 1.2;
}
.info-block-desc {
    color: var(--mx-text-3) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
}
.info-block-arrow {
    align-self: flex-end;
    color: var(--mx-text-3);
    font-size: 16px;
    transition: transform var(--mx-dur-2) var(--mx-ease), color var(--mx-dur-2) var(--mx-ease);
}
.info-block-card:hover .info-block-arrow { color: var(--mx-accent); transform: translateX(4px); }

.info-cta {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}
.info-cta-inner {
    padding: 24px;
    background:
        radial-gradient(circle at 100% 100%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: var(--mx-shadow-2);
}
.info-cta-text {
    color: var(--mx-text-2) !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
    min-width: 200px;
}
.info-cta-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 22px !important;
    height: 52px;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    text-decoration: none;
    font-family: inherit;
    font-weight: 800 !important;
    font-size: 14px !important;
    box-shadow: var(--mx-glow-cta);
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease);
    text-shadow: none !important;
}
.info-cta-btn:hover { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h); }
.info-cta-btn-icon {
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>") no-repeat center / contain;
    display: inline-block;
}

/* ---- Roulette hub ---- */
.roulette-screen { padding-top: 0; }
.roulette-page {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 32px) 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
}
.roulette-hero {
    padding: 28px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    box-shadow: var(--mx-shadow-2);
}
.roulette-hero-title {
    color: var(--mx-text) !important;
    font-size: clamp(24px, 3.4vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.roulette-hero-tagline {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.roulette-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.roulette-cards--vpn {
    grid-template-columns: 1fr;
}
.roulette-card {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px !important;
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
    min-height: 148px;
    position: relative;
    overflow: hidden;
}
.roulette-card:hover { transform: translateY(-2px); border-color: var(--mx-border-strong) !important; }
.roulette-card--vpn {
    background:
        radial-gradient(circle at 100% 50%, rgba(57,255,136,0.18), transparent 55%),
        linear-gradient(180deg, #131313, #0E0E0E) !important;
    border-color: rgba(57,255,136,0.28) !important;
}
.roulette-card-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--mx-border-strong);
    color: var(--mx-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(57,255,136,0.10);
}
.roulette-card-icon::before {
    content: '';
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.roulette-card-icon--coupons::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9a3 3 0 013-3h14a3 3 0 013 3v2a2 2 0 000 4v2a3 3 0 01-3 3H5a3 3 0 01-3-3v-2a2 2 0 000-4V9z'/><path d='M13 5v14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9a3 3 0 013-3h14a3 3 0 013 3v2a2 2 0 000 4v2a3 3 0 01-3 3H5a3 3 0 01-3-3v-2a2 2 0 000-4V9z'/><path d='M13 5v14'/></svg>");
}
.roulette-card-icon--roulette::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3'/><path d='M12 3v4M12 17v4M3 12h4M17 12h4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3'/><path d='M12 3v4M12 17v4M3 12h4M17 12h4'/></svg>");
}
.roulette-card-icon--lottery::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2 2 2 0 00-2 2v4a2 2 0 002 2h16a2 2 0 002-2v-4a2 2 0 00-2-2z'/><path d='M12 4v16'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2 2 2 0 00-2 2v4a2 2 0 002 2h16a2 2 0 002-2v-4a2 2 0 00-2-2z'/><path d='M12 4v16'/></svg>");
}
.roulette-card-icon--vpn::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/><path d='M9 12l2 2 4-4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/><path d='M9 12l2 2 4-4'/></svg>");
}
.roulette-card-label {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.005em !important;
    margin-top: 4px;
}
.roulette-card-cta {
    color: var(--mx-text-3) !important;
    font-size: 12.5px !important;
    letter-spacing: 0.02em;
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600 !important;
}
.roulette-card-cta::after {
    content: '→';
    color: var(--mx-accent);
    font-size: 15px;
    line-height: 1;
    transition: transform var(--mx-dur-2) var(--mx-ease);
}
.roulette-card:hover .roulette-card-cta::after { transform: translateX(3px); }

/* ---- VPN view ---- */
.vpn-view {
    max-width: var(--mx-container-narrow);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
}
.vpn-hero {
    padding: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--mx-shadow-2);
}
.vpn-kicker {
    color: var(--mx-accent) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 !important;
}
.vpn-title {
    color: var(--mx-text) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.vpn-sub { color: var(--mx-text-3) !important; font-size: 14px !important; margin: 0 !important; }
.vpn-card {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vpn-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--mx-pill);
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--mx-border);
    color: var(--mx-text-2);
}
.vpn-status-badge--active { background: rgba(57,255,136,0.14); color: var(--mx-accent); border-color: rgba(57,255,136,0.3); }
.vpn-status-badge--inactive { background: rgba(255,95,109,0.12); color: var(--mx-danger); border-color: rgba(255,95,109,0.3); }
.vpn-mute { color: var(--mx-text-3) !important; font-size: 13px !important; margin: 0 !important; line-height: 1.5; }
.vpn-expiry { color: var(--mx-text) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 !important; letter-spacing: -0.01em; }
.vpn-link-box {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    padding: 8px;
}
.vpn-link-box code {
    flex: 1;
    background: transparent;
    color: var(--mx-text) !important;
    font-family: var(--mx-font-mono);
    font-size: 12px !important;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
}
.vpn-copy-btn {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    border-radius: var(--mx-r-sm) !important;
    padding: 0 14px !important;
    height: 40px;
    font-family: inherit;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(57,255,136,0.22);
    flex-shrink: 0;
    text-shadow: none !important;
}
.vpn-guide-toggle {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: var(--mx-pill) !important;
    text-shadow: none !important;
}
.vpn-install-guide-panel {
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vpn-hint {
    color: var(--mx-warn) !important;
    font-size: 12.5px !important;
    margin: 4px 0 0 !important;
    padding: 10px 12px;
    background: rgba(245,179,59,0.06);
    border: 1px solid rgba(245,179,59,0.2);
    border-radius: var(--mx-r-md);
    line-height: 1.5;
}
.vpn-promo-text {
    color: var(--mx-text-2) !important;
    font-size: 14.5px !important;
    line-height: 1.5;
    margin: 0 !important;
}
.vpn-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vpn-benefits li {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
    color: var(--mx-text-2);
    font-size: 13px;
}

/* ---- Weekly lottery ---- */
.weekly-lottery-view {
    max-width: var(--mx-container-narrow);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
}
.weekly-lottery-hero {
    padding: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--mx-shadow-2);
}
.weekly-lottery-kicker {
    color: var(--mx-accent) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 !important;
}
.weekly-lottery-title {
    color: var(--mx-text) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.weekly-lottery-sub { color: var(--mx-text-3) !important; font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; }
.weekly-lottery-mute { color: var(--mx-text-3) !important; font-size: 12px !important; margin: 0 !important; letter-spacing: 0.02em; }
.weekly-lottery-bank-card,
.weekly-lottery-buy-card,
.weekly-lottery-tickets-card {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--mx-shadow-1);
}
.weekly-lottery-bank-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.weekly-lottery-bank-amount {
    color: var(--mx-accent) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 4px 0 !important;
    line-height: 1;
    text-shadow: 0 0 24px rgba(57,255,136,0.28);
}
.weekly-lottery-countdown { text-align: right; }
.weekly-lottery-countdown-value {
    color: var(--mx-text) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 4px 0 !important;
    font-family: var(--mx-font-mono);
}
.weekly-lottery-shares {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.weekly-lottery-buy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.weekly-lottery-buy-title { color: var(--mx-text) !important; font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; letter-spacing: -0.01em; }
.weekly-lottery-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--mx-pill);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--mx-border);
    color: var(--mx-text) !important;
    font-size: 13px !important;
    font-weight: 600;
    margin: 0 !important;
}
.weekly-lottery-counter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.weekly-lottery-counter-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.weekly-lottery-counter-btn:hover { border-color: var(--mx-border-strong) !important; background: linear-gradient(180deg, #1a1a1a, #101010) !important; }
.weekly-lottery-counter-input {
    flex: 1;
    text-align: center;
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 12px !important;
    height: 52px;
    font-family: inherit;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    outline: none;
    -moz-appearance: textfield;
    box-shadow: none !important;
}
.weekly-lottery-counter-input::-webkit-outer-spin-button,
.weekly-lottery-counter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.weekly-lottery-total {
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 90px;
}
.weekly-lottery-total-amount { color: var(--mx-accent) !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -0.01em; }
.weekly-lottery-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.weekly-lottery-quick-btn {
    background: rgba(255,255,255,0.03) !important;
    color: var(--mx-text-2) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    padding: 8px 14px !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.weekly-lottery-quick-btn:hover {
    background: rgba(57,255,136,0.08) !important;
    color: var(--mx-accent) !important;
    border-color: rgba(57,255,136,0.28) !important;
}
.weekly-lottery-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.weekly-lottery-action-btn { height: 52px !important; font-size: 14px !important; }
.weekly-lottery-msg {
    padding: 12px;
    background: rgba(57,255,136,0.06);
    border: 1px solid rgba(57,255,136,0.28);
    border-radius: var(--mx-r-md);
    color: var(--mx-accent) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin: 0 !important;
}
.weekly-lottery-tickets-list { display: flex; flex-wrap: wrap; gap: 6px; }
.weekly-lottery-tickets-list > * {
    padding: 6px 12px;
    background: rgba(57,255,136,0.08);
    border: 1px solid rgba(57,255,136,0.22);
    border-radius: var(--mx-pill);
    color: var(--mx-accent);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mx-font-mono);
}
.weekly-lottery-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.weekly-lottery-history > * {
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    color: var(--mx-text-2);
    font-size: 13px;
}
.weekly-lottery-legal {
    color: var(--mx-text-4) !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 !important;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
}

/* ---- Daily roulette ---- */
.daily-roulette-view {
    max-width: var(--mx-container-narrow);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px) 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    align-items: stretch;
}
.daily-roulette-hero {
    padding: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.14), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    align-items: center;
    box-shadow: var(--mx-shadow-2);
}
.daily-roulette-kicker {
    color: var(--mx-accent) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 !important;
}
.daily-roulette-title { color: var(--mx-text) !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 !important; }
.daily-roulette-sub { color: var(--mx-text-3) !important; font-size: 14px !important; margin: 0 !important; }
.daily-roulette-wheel-stage {
    position: relative;
    padding: 30px;
    background: radial-gradient(circle, rgba(57,255,136,0.1), transparent 65%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.daily-roulette-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(57,255,136,0.16), transparent 60%);
    pointer-events: none;
    filter: blur(20px);
}
.daily-roulette-wheel-outer {
    position: relative;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border: 6px solid #151515;
    box-shadow: 0 0 60px rgba(57,255,136,0.22),
                inset 0 0 40px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.daily-roulette-pointer {
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid var(--mx-accent);
    filter: drop-shadow(0 0 8px rgba(57,255,136,0.5));
    z-index: 3;
}
.daily-roulette-wheel { position: relative; width: 280px; height: 280px; }
.daily-roulette-canvas { width: 280px; height: 280px; }
.daily-roulette-hub-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.daily-roulette-wheel-hub {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(57,255,136,0.5), inset 0 -6px 12px rgba(0,0,0,0.15);
    border: 2px solid rgba(255,255,255,0.15);
}
.daily-roulette-wheel-hub-text { font-size: 24px; font-weight: 800; }
.daily-roulette-spin-btn {
    height: 60px;
    padding: 0 24px !important;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    border: 0 !important;
    font-family: inherit;
    font-weight: 800 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--mx-glow-cta), inset 0 1px 0 rgba(255,255,255,0.28);
    text-shadow: none !important;
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease);
    width: 100%;
}
.daily-roulette-spin-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--mx-glow-cta-h), inset 0 1px 0 rgba(255,255,255,0.28); }
.daily-roulette-spin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none !important;
    background: linear-gradient(180deg, #262626, #171717) !important;
    color: var(--mx-text-3) !important;
}
.daily-roulette-result {
    padding: 16px 20px;
    background: rgba(57,255,136,0.08);
    border: 1px solid rgba(57,255,136,0.28);
    border-radius: var(--mx-r-md);
    color: var(--mx-accent);
    font-weight: 700;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.5;
}
.daily-roulette-legal {
    color: var(--mx-text-4) !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 !important;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
    text-align: center;
}

/* ---- Phase 3/4 responsive tweaks ---- */
@media (max-width: 640px) {
    .profile-hero { padding: 28px 20px 24px; }
    .profile-avatar { width: 72px; height: 72px; border-width: 2px !important; }
    .profile-avatar-letter { font-size: 30px !important; }
    .profile-display-name { font-size: 20px !important; }
    .profile-wallet-card { padding: 18px !important; flex-direction: column; align-items: stretch; }
    .profile-wallet-icon { width: 44px; height: 44px; font-size: 20px; }
    .profile-wallet-value { font-size: 24px !important; }
    .profile-stats-row { grid-template-columns: 1fr; gap: 10px; }
    .profile-block { padding: 18px; }

    .referral-hero-circle { width: 92px; height: 92px; }
    .referral-hero-icon { width: 38px; height: 38px; }
    .referral-card-stats { grid-template-columns: 1fr; text-align: left; }
    .referral-card-stat { flex-direction: row; align-items: baseline; justify-content: space-between; }
    .referral-link-actions-premium { grid-template-columns: 1fr; }
    .referral-qr-image-box { padding: 14px; }
    .referral-qr-page-image { width: 180px; height: 180px; }

    .info-blocks-grid { grid-template-columns: 1fr; }
    .info-block-card { min-height: 120px; padding: 18px !important; }
    .info-hero { padding: 24px 20px; }
    .info-cta-inner { padding: 18px; flex-direction: column; align-items: flex-start; }
    .info-cta-btn { width: 100%; justify-content: center; }

    .roulette-cards { grid-template-columns: 1fr; gap: 10px; }
    .roulette-card { min-height: 120px; padding: 18px !important; flex-direction: row; align-items: center; }
    .roulette-card-label { margin-top: 0; }
    .roulette-card-cta { padding-top: 0; margin-left: auto; }
    .roulette-cards--vpn .roulette-card--vpn { flex-direction: row; }

    .weekly-lottery-bank-row { flex-direction: column; align-items: stretch; }
    .weekly-lottery-countdown { text-align: left; }
    .weekly-lottery-actions { grid-template-columns: 1fr; }
    .weekly-lottery-bank-amount { font-size: 26px !important; }

    .daily-roulette-wheel-outer { width: 260px; height: 260px; }
    .daily-roulette-wheel,
    .daily-roulette-canvas { width: 240px; height: 240px; }
}

/* -------------------------------------------------------------------------
   PHASE 5: ADMIN / OPERATOR / PROCESSOR + ALL MODALS
   ------------------------------------------------------------------------- */

/* ---- Admin layout (dashboard shell) ---- */
.admin-layout,
.admin-layout--full {
    --admin-bg: #0A0A0A;
    --admin-bg-elevated: #131313;
    --admin-text: #FFFFFF;
    --admin-text-muted: #A1A1A1;
    --admin-accent: var(--mx-accent);
    --admin-accent-hover: var(--mx-accent-2);
    background: var(--mx-bg) !important;
    color: var(--mx-text) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-shell {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
}
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mx-border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(18px);
    z-index: 50;
    margin: 0 calc(-1 * clamp(16px, 4vw, 32px));
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}
.admin-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-topbar-back {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0 !important;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-topbar-back:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important; }
.admin-topbar-back-icon { font-size: 18px; line-height: 1; }
.admin-topbar-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-topbar-title {
    color: var(--mx-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    line-height: 1.2;
}
.admin-topbar-subtitle {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    margin: 0 !important;
    letter-spacing: 0.02em;
}
.admin-icon-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-icon-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important; }
.admin-icon-bell,
.admin-icon-theme {
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: inline-block;
}
.admin-icon-bell {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z'/><path d='M10 20a2 2 0 004 0'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z'/><path d='M10 20a2 2 0 004 0'/></svg>");
}
.admin-icon-theme {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 0111.2 3a7 7 0 109.8 9.8z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 0111.2 3a7 7 0 109.8 9.8z'/></svg>");
}
.admin-icon-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mx-accent);
    color: var(--mx-accent-ink);
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--mx-bg);
}
.admin-profile-wrap { position: relative; }
.admin-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px !important;
    border-radius: var(--mx-pill) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    font-family: inherit;
    max-width: 220px;
    height: 40px;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-profile-chip:hover { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important; }
.admin-profile-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(57,255,136,0.22);
}
.admin-profile-meta { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.admin-profile-name { color: var(--mx-text) !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-profile-role { color: var(--mx-text-3) !important; font-size: 10.5px !important; letter-spacing: 0.04em; }
.admin-profile-dropdown {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 200px;
    background: linear-gradient(180deg, #121212, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    box-shadow: var(--mx-shadow-3);
    padding: 6px;
    z-index: 200;
}
.admin-profile-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent !important;
    color: var(--mx-text) !important;
    border: 0 !important;
    padding: 10px 12px !important;
    border-radius: var(--mx-r-sm) !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    transition: background var(--mx-dur-1) var(--mx-ease);
}
.admin-profile-dropdown-item:hover { background: rgba(255,255,255,0.05) !important; }
.admin-profile-dropdown-item--danger { color: var(--mx-danger) !important; }

.admin-topbar-operator-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px !important;
    border-radius: var(--mx-pill) !important;
    background: rgba(57,255,136,0.08) !important;
    color: var(--mx-accent) !important;
    border: 1px solid rgba(57,255,136,0.28) !important;
    font-family: inherit;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-topbar-operator-btn:hover { background: rgba(57,255,136,0.14) !important; }
.admin-topbar-operator-btn-icon {
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") no-repeat center / contain;
    display: inline-block;
}

/* Admin notifications panel */
.admin-notif-wrap { position: relative; }
.admin-notifications-panel {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    width: 340px; max-width: 92vw;
    background: linear-gradient(180deg, #121212, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    box-shadow: var(--mx-shadow-3);
    padding: 6px;
    z-index: 200;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-notifications-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: var(--mx-text-3);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--mx-border);
}
.admin-notifications-mark-read {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-accent) !important;
    font-size: 11px !important;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.admin-notifications-mark-read:hover { color: var(--mx-accent-2) !important; }
.admin-notifications-list { overflow-y: auto; flex: 1; }
.admin-notifications-list > * {
    padding: 12px;
    border-bottom: 1px solid var(--mx-border-soft);
    color: var(--mx-text-2);
    font-size: 13px;
}
.admin-notifications-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--mx-text-4);
    font-size: 13px;
}

/* Admin content */
.admin-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}
.admin-role-switcher {
    display: inline-flex;
    padding: 4px !important;
    border-radius: var(--mx-pill) !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--mx-border) !important;
    gap: 2px;
    align-self: flex-start;
    flex-wrap: wrap;
}
.admin-role-chip {
    background: transparent !important;
    color: var(--mx-text-3) !important;
    border: 0 !important;
    padding: 8px 16px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-role-chip--active {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 16px rgba(57,255,136,0.24);
}
.admin-period-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-period-chip {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    color: var(--mx-text-2) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    padding: 8px 14px !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-period-chip:hover { border-color: var(--mx-border-strong) !important; }
.admin-period-chip--active {
    background: rgba(57,255,136,0.10) !important;
    color: var(--mx-accent) !important;
    border-color: rgba(57,255,136,0.36) !important;
}

.admin-section {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--mx-shadow-1);
}
.admin-section--overview,
.admin-section--cards { background: transparent; border: 0; padding: 0; box-shadow: none; }
.admin-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-section-header--premium {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mx-border);
}
.admin-section-title {
    color: var(--mx-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
.admin-section-subtitle {
    color: var(--mx-text-3) !important;
    font-size: 13px !important;
    margin: 4px 0 0 !important;
    line-height: 1.5;
}
.admin-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.admin-dashboard-cards > * {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 18px !important;
    color: var(--mx-text) !important;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: var(--mx-shadow-1) !important;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.admin-dashboard-cards > *:hover { transform: translateY(-2px); border-color: var(--mx-border-strong) !important; }
.admin-finance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.admin-finance-stats > * {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--mx-text) !important;
}
.admin-finance-loading { color: var(--mx-text-3); text-align: center; padding: 24px; grid-column: 1 / -1; }
.admin-finance-card--premium,
.admin-finance-card--highlight {
    background: linear-gradient(180deg, rgba(57,255,136,0.05), rgba(57,255,136,0.02)) !important;
    border-color: rgba(57,255,136,0.24) !important;
}
.admin-user-search-wrap { display: flex; flex-direction: column; gap: 12px; }
.admin-dashboard-settings-hint {
    color: var(--mx-text-3);
    font-size: 13.5px;
    line-height: 1.6;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
    margin: 0;
}
.admin-dashboard-settings-hint strong { color: var(--mx-text); font-weight: 700; }
.admin-table-placeholder {
    color: var(--mx-text-3);
    text-align: center;
    padding: 32px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--mx-border-strong);
    border-radius: var(--mx-r-md);
}

/* ---- VIP Modal (shared shell) ---- */
.vip-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: mx-fade-in var(--mx-dur-3) var(--mx-ease);
}
.vip-modal-card,
.operator-queue-card,
.operator-order-manage-card,
.operator-requisites-card,
.processor-profile-card,
.processor-orders-card,
.processor-confirmations-card,
.processor-amount-card,
.referral-qr-modal-card {
    background: linear-gradient(180deg, #131313, #0A0A0A) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-2xl) !important;
    padding: 24px !important;
    max-width: 560px;
    width: 100%;
    max-height: min(90vh, 800px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--mx-text);
    box-shadow: var(--mx-shadow-3) !important;
    animation: mx-modal-in var(--mx-dur-3) var(--mx-ease);
    overflow: hidden;
}
.vip-modal-card--stats,
.vip-modal-card--roulette-admin,
.processor-orders-card,
.processor-confirmations-card,
.operator-queue-card { max-width: 800px; }
.vip-modal-card--broadcast { max-width: 640px; }
@keyframes mx-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vip-modal-header,
.operator-queue-header,
.operator-order-manage-header,
.operator-requisites-header,
.processor-profile-header,
.processor-confirmations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mx-border);
}
.vip-modal-title,
.operator-queue-title,
.operator-order-manage-title,
.operator-requisites-title,
.processor-profile-title {
    color: var(--mx-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.vip-modal-close,
.processor-profile-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    line-height: 1;
    padding: 0 !important;
    font-family: inherit;
    transition: all var(--mx-dur-2) var(--mx-ease);
    flex-shrink: 0;
}
.vip-modal-close:hover,
.processor-profile-close:hover { background: rgba(255,255,255,0.10) !important; }
.vip-modal-body,
.operator-order-manage-body,
.operator-queue-list,
.operator-requisites-list,
.processor-profile-body,
.processor-confirmations-body,
.processor-deals-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 70vh;
    padding-right: 4px;
    margin-right: -4px;
}

/* Search overlay */
.admin-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    animation: mx-fade-in var(--mx-dur-3) var(--mx-ease);
}
.admin-search-overlay-inner {
    width: 100%;
    max-width: 640px;
    background: linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    padding: 8px;
    box-shadow: var(--mx-shadow-3);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
}
.admin-search-overlay-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.4);
    border-radius: var(--mx-r-lg);
    margin: 4px;
    border: 1px solid var(--mx-border-soft);
}
.admin-search-overlay-icon {
    width: 18px; height: 18px;
    background: var(--mx-text-3);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat center / contain;
    display: inline-block;
    flex-shrink: 0;
}
.admin-search-overlay-input {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-text) !important;
    font-family: inherit;
    font-size: 15px;
    padding: 8px 4px !important;
    height: auto;
    flex: 1;
    outline: none;
    box-shadow: none !important;
}
.admin-search-overlay-input::placeholder { color: var(--mx-text-4); }
.admin-search-overlay-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05) !important;
    color: var(--mx-text) !important;
    border: 0 !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 !important;
    font-family: inherit;
}
.admin-search-overlay-chips {
    display: flex;
    gap: 6px;
    padding: 8px 8px 4px;
    flex-wrap: wrap;
}
.admin-search-chip {
    background: transparent !important;
    color: var(--mx-text-3) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    padding: 6px 12px !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-search-chip--active {
    background: rgba(57,255,136,0.10) !important;
    color: var(--mx-accent) !important;
    border-color: rgba(57,255,136,0.36) !important;
}
.admin-search-overlay-results {
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}
.admin-search-hint { color: var(--mx-text-4); font-size: 13px; text-align: center; padding: 24px; margin: 0; }
.admin-search-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.admin-search-skeleton-line {
    height: 48px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    background-size: 200% 100%;
    border-radius: var(--mx-r-md);
    animation: mx-skeleton 1.4s linear infinite;
}
@keyframes mx-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.admin-search-sections { display: flex; flex-direction: column; gap: 12px; }
.admin-search-sections > * { color: var(--mx-text); }

/* Admin toast container */
.admin-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.admin-toast-container > * {
    background: linear-gradient(180deg, #151515, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 14px 18px !important;
    color: var(--mx-text) !important;
    font-size: 13.5px !important;
    box-shadow: var(--mx-shadow-3) !important;
    pointer-events: auto;
    min-width: 240px;
    max-width: 380px;
    backdrop-filter: blur(20px);
    animation: mx-toast-in var(--mx-dur-3) var(--mx-ease);
}
.admin-toast-container > *.success,
.admin-toast-container > *[data-type="success"] {
    border-color: rgba(57,255,136,0.36) !important;
    box-shadow: 0 0 24px rgba(57,255,136,0.14), var(--mx-shadow-3) !important;
}
.admin-toast-container > *.error,
.admin-toast-container > *[data-type="error"] {
    border-color: rgba(255,95,109,0.36) !important;
    box-shadow: 0 0 24px rgba(255,95,109,0.14), var(--mx-shadow-3) !important;
    color: var(--mx-danger) !important;
}
@keyframes mx-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Broadcast */
.admin-broadcast-hint {
    color: var(--mx-text-3);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
}
.admin-broadcast-textarea { min-height: 140px !important; font-family: inherit !important; font-size: 14px; }
.admin-broadcast-file { margin-top: 4px; }
.admin-broadcast-result {
    color: var(--mx-accent) !important;
    padding: 12px !important;
    background: rgba(57,255,136,0.06);
    border: 1px solid rgba(57,255,136,0.28);
    border-radius: var(--mx-r-md);
    margin: 8px 0 0 !important;
}

/* Processor profile header icon */
.processor-profile-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3));
    color: var(--mx-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(57,255,136,0.24);
}
.processor-profile-icon::before {
    content: '';
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.processor-profile-icon--doc::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><path d='M14 2v6h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><path d='M14 2v6h6'/></svg>");
}
.processor-profile-icon--dashboard::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>");
}
.processor-profile-loading { color: var(--mx-text-3); text-align: center; padding: 32px; }
.processor-confirmations-empty { color: var(--mx-text-4); text-align: center; padding: 32px; }
.admin-roulette-loading { color: var(--mx-text-3); text-align: center; padding: 32px; }

/* ---- Admin panel (operator/processor sections in #admin-panel) ---- */
.admin-panel-container { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.admin-panel-header { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 12px; }
.admin-panel-title { font-size: clamp(22px, 2.6vw, 28px) !important; margin: 0 !important; }
.admin-panel-subtitle { font-size: 14px !important; color: var(--mx-text-3) !important; margin: 0 !important; }
.admin-panel-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.admin-stat-card {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--mx-text) !important;
    box-shadow: var(--mx-shadow-1) !important;
    transition: transform var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2) var(--mx-ease);
}
.admin-stat-card--clickable { cursor: pointer; }
.admin-stat-card--clickable:hover { transform: translateY(-2px); border-color: var(--mx-border-strong) !important; }
.admin-stat-card--highlight {
    background: linear-gradient(180deg, rgba(57,255,136,0.06), rgba(57,255,136,0.02)) !important;
    border-color: rgba(57,255,136,0.28) !important;
}
.admin-stat-value {
    color: var(--mx-text) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1;
}
.admin-stat-value--gold { color: var(--mx-accent) !important; }
.admin-stat-label {
    color: var(--mx-text-3) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.admin-toggle-btn { height: 52px !important; }
.admin-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 4px;
}
.admin-section-divider::before,
.admin-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mx-border);
}
.admin-section-divider-text {
    color: var(--mx-text-3);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.admin-orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-orders-list > * {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 14px 16px !important;
    color: var(--mx-text) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.admin-orders-list > *:hover { border-color: var(--mx-border-strong) !important; }

/* Operator queue list */
.operator-queue-list > *,
.operator-requisites-list > *,
.processor-confirmations-body > *,
.processor-deals-body > *,
.processor-orders-card .vip-modal-body > * {
    padding: 14px 16px;
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    color: var(--mx-text);
    font-size: 13.5px;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.operator-queue-list > *:hover,
.operator-requisites-list > *:hover { border-color: var(--mx-border-strong); background: linear-gradient(180deg, #151515, #101010); }

.operator-order-manage-actions,
.operator-complete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--mx-border);
}
.operator-order-manage-actions .btn,
.operator-complete-actions .btn { flex: 1; min-width: 140px; height: 48px; }
.operator-complete-hint {
    color: var(--mx-text-3);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--mx-border-soft);
    border-radius: var(--mx-r-md);
}
.operator-complete-input { height: 52px !important; }

/* Processor buttons */
.proc-toggle-btn,
.proc-deposit-btn,
.proc-confirmations-btn,
.proc-deals-btn,
.proc-add-req-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 20px !important;
    text-align: left;
}
.proc-btn-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
}
.proc-btn-icon::before {
    content: '';
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.proc-btn-icon--wallet::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12V8H6a2 2 0 010-4h12v4'/><path d='M4 8v12h18v-8H4'/><circle cx='17' cy='14' r='1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12V8H6a2 2 0 010-4h12v4'/><path d='M4 8v12h18v-8H4'/><circle cx='17' cy='14' r='1'/></svg>");
}
.proc-btn-icon--list::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/></svg>");
}
.proc-btn-icon--plus::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}
.proc-confirmations-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--mx-pill);
    background: rgba(57,255,136,0.14);
    color: var(--mx-accent);
    font-weight: 800;
    font-size: 12px;
    margin-left: auto;
    border: 1px solid rgba(57,255,136,0.28);
}
.proc-confirmations-sep { color: var(--mx-text-4); margin: 0 4px; }
.proc-requisites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.proc-requisites-list > * {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    padding: 14px 16px;
    color: var(--mx-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.proc-form-wrap {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--mx-shadow-1);
    margin-top: 10px;
}
.proc-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mx-border);
}
.proc-form-title { color: var(--mx-text) !important; font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.proc-form-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05) !important;
    border: 0 !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    line-height: 1;
    font-family: inherit;
}

/* ---- Operator app (standalone) ---- */
.operator-app-container { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.operator-app-header {
    padding: 22px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,136,0.10), transparent 55%),
        linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-2xl);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--mx-shadow-2);
}
.operator-app-title { color: var(--mx-text) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 !important; }
.operator-app-subtitle { color: var(--mx-text-3) !important; font-size: 13.5px !important; margin: 0 !important; }
.operator-app-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.operator-app-stat {
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--mx-shadow-1);
}
.operator-app-stat-value { color: var(--mx-text) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.operator-app-stat-label { color: var(--mx-text-3) !important; font-size: 11.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 600 !important; }
.operator-app-toggle { height: 52px !important; }
.operator-app-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}
.operator-app-divider::before,
.operator-app-divider::after { content: ''; flex: 1; height: 1px; background: var(--mx-border); }
.operator-app-divider-text {
    color: var(--mx-text-3);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.operator-app-orders { display: flex; flex-direction: column; gap: 8px; }
.operator-app-orders > * {
    padding: 14px 16px;
    background: linear-gradient(180deg, #131313, #0E0E0E);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-md);
    color: var(--mx-text);
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
    font-size: 13.5px;
}
.operator-app-orders > *:hover { border-color: var(--mx-border-strong); }

.operator-detail-container { padding-bottom: 40px; }
.operator-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Phase 5 responsive tweaks ---- */
@media (max-width: 900px) {
    .admin-topbar { padding: 14px clamp(16px, 4vw, 32px); }
    .admin-topbar-title { font-size: 16px !important; }
    .admin-profile-meta { display: none; }
    .admin-profile-chip { padding: 4px !important; }
    .admin-topbar-operator-btn-label { display: none; }
    .admin-topbar-operator-btn { width: 40px; padding: 0 !important; justify-content: center; }
}
@media (max-width: 640px) {
    .admin-section { padding: 18px; border-radius: var(--mx-r-lg); }
    .admin-role-switcher { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .admin-period-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .admin-role-chip,
    .admin-period-chip { flex-shrink: 0; }
    .vip-modal-overlay { padding: 12px; align-items: flex-end; }
    .vip-modal-card,
    .operator-queue-card,
    .operator-order-manage-card,
    .operator-requisites-card,
    .processor-profile-card,
    .processor-orders-card,
    .processor-confirmations-card,
    .processor-amount-card,
    .referral-qr-modal-card {
        padding: 20px !important;
        max-height: 90vh;
        border-radius: var(--mx-r-2xl) var(--mx-r-2xl) 0 0 !important;
    }
    .admin-stats-row { grid-template-columns: 1fr 1fr; }
    .admin-toast-container { right: 12px; left: 12px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
    .admin-toast-container > * { min-width: 0; max-width: 100%; }
    .operator-app-stats { grid-template-columns: 1fr; }
    .admin-search-overlay { padding: 20px 12px; align-items: stretch; }
    .admin-search-overlay-inner { max-width: 100%; }
}

/* -------------------------------------------------------------------------
   PHASE 6: STORY VIEWER + ONBOARDING + FINAL POLISH
   ------------------------------------------------------------------------- */

/* ---- Story viewer (fullscreen) ---- */
.story-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    animation: mx-fade-in var(--mx-dur-3) var(--mx-ease);
}
.story-viewer-header {
    padding: 16px clamp(12px, 3vw, 32px) 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2;
}
.story-viewer-close {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    padding: 0 14px !important;
    height: 40px;
    border-radius: var(--mx-pill) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: background var(--mx-dur-2) var(--mx-ease);
}
.story-viewer-close:hover { background: rgba(255,255,255,0.10) !important; }
.story-viewer-close-x { font-size: 18px; line-height: 1; }
.story-viewer-progress {
    flex: 1;
    display: flex;
    gap: 6px;
    max-width: 640px;
    margin: 0 auto;
}
.story-viewer-progress-seg {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.14);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.story-viewer-progress-seg.completed { background: var(--mx-accent); }
.story-viewer-progress-seg.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mx-accent);
    transform-origin: left center;
    animation: mx-story-progress 6s linear forwards;
}
@keyframes mx-story-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.story-viewer-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 12px;
}
.story-viewer-tap {
    background: transparent !important;
    border: 0 !important;
    color: var(--mx-text) !important;
    cursor: pointer;
    padding: 0 !important;
    width: 20%;
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    align-items: center;
    z-index: 3;
    font-family: inherit;
    opacity: 0;
    transition: opacity var(--mx-dur-2) var(--mx-ease);
}
.story-viewer-tap--prev { left: 0; justify-content: flex-start; padding-left: 16px !important; }
.story-viewer-tap--next { right: 0; justify-content: flex-end; padding-right: 16px !important; }
.story-viewer-tap:hover { opacity: 1; }
.story-viewer-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--mx-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-text);
}
.story-viewer-arrow::before {
    content: '';
    width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
    display: block;
}
.story-viewer-arrow--prev::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
}
.story-viewer-arrow--next::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}
.story-viewer-content {
    position: relative;
    max-width: 480px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-viewer-media {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--mx-r-xl);
    object-fit: contain;
    box-shadow: var(--mx-shadow-3);
}

/* ---- Onboarding overlay ---- */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1600;
    pointer-events: auto;
    animation: mx-fade-in var(--mx-dur-3) var(--mx-ease);
}
.onboarding-spotlight {
    position: absolute;
    border-radius: var(--mx-r-lg);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 40px rgba(57,255,136,0.35);
    pointer-events: none;
    transition: all var(--mx-dur-3) var(--mx-ease);
}
.onboarding-tooltip {
    position: absolute;
    background: linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border-strong);
    border-radius: var(--mx-r-xl);
    padding: 20px 22px;
    max-width: 320px;
    color: var(--mx-text);
    box-shadow: var(--mx-shadow-3);
    z-index: 1;
}
.onboarding-tooltip-arrow {
    position: absolute;
    width: 14px; height: 14px;
    background: linear-gradient(180deg, #131313, #0A0A0A);
    border: 1px solid var(--mx-border-strong);
    transform: rotate(45deg);
}
.onboarding-tooltip-title {
    color: var(--mx-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.01em;
}
.onboarding-tooltip-text {
    color: var(--mx-text-3) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.onboarding-tooltip-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}
.onboarding-btn {
    background: transparent !important;
    color: var(--mx-text-2) !important;
    border: 0 !important;
    padding: 8px 16px !important;
    border-radius: var(--mx-pill) !important;
    font-family: inherit;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: all var(--mx-dur-2) var(--mx-ease);
}
.onboarding-btn--skip { color: var(--mx-text-3) !important; }
.onboarding-btn--skip:hover { color: var(--mx-text) !important; }
.onboarding-btn--primary {
    background: linear-gradient(180deg, var(--mx-accent), var(--mx-accent-3)) !important;
    color: var(--mx-accent-ink) !important;
    box-shadow: 0 0 20px rgba(57,255,136,0.24);
}
.onboarding-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(57,255,136,0.36); }

/* ---- Home banner close (final polish) ---- */
#home-banner[hidden] { display: none !important; }

/* ---- Empty state (JS-rendered fallback) ---- */
.empty-state {
    color: var(--mx-text-3);
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(180deg, #121212, #0E0E0E);
    border: 1px dashed var(--mx-border-strong);
    border-radius: var(--mx-r-xl);
    font-size: 14px;
}

/* ---- Fallback: any legacy button/card sitting on light background ---- */
[data-theme="dark"] .btn:not(.btn-gold):not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.exchange-submit-btn):not(.home-exchange-cta):not(.history-empty-cta):not(.subscription-gate-btn):not(.profile-balance-deposit-btn):not(.vpn-copy-btn):not(.daily-roulette-spin-btn):not(.info-cta-btn):not(.referral-link-action-btn):not(.referral-link-premium-copy-icon):not(.referral-action-btn):not(.referral-share-btn):not(.weekly-lottery-action-btn):not(.weekly-lottery-quick-btn):not(.weekly-lottery-counter-btn):not(.header-icon-btn):not(.header-notifications-btn):not(.header-profile):not(.nav-item):not(.subscription-gate-btn):not(.admin-icon-btn):not(.admin-topbar-back):not(.admin-topbar-operator-btn):not(.admin-role-chip):not(.admin-period-chip):not(.admin-profile-chip):not(.admin-profile-dropdown-item):not(.admin-search-chip):not(.admin-search-overlay-close):not(.admin-notifications-mark-read):not(.amount-chip):not(.payment-method-chip):not(.exchange-method-btn):not(.exchange-toggle-btn):not(.user-profile-tab):not(.profile-tab):not(.exchange-back):not(.btn-back-unified):not(.btn-back-top):not(.proc-form-close):not(.vip-modal-close):not(.processor-profile-close):not(.story-viewer-close):not(.story-viewer-tap):not(.onboarding-btn):not(.home-banner__close):not(.home-popular-card):not(.roulette-card):not(.info-block-card):not(.admin-orders-list > *):not(.operator-queue-list > *):not(.operator-app-orders > *) {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-pill) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Ensure buttons inside admin dashboard cards inherit dark theme */
.admin-section .btn,
.admin-panel-container .btn,
.operator-app-container .btn { font-family: inherit; }

/* Universal "select" (native) inside dark theme */
select:not(.exchange-crypto-select) {
    background: linear-gradient(180deg, #171717, #0F0F0F) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-md) !important;
    padding: 0 40px 0 16px !important;
    height: 48px;
    font-family: inherit;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--mx-dur-2) var(--mx-ease);
    box-shadow: none !important;
}
select:not(.exchange-crypto-select):focus { border-color: var(--mx-border-focus) !important; box-shadow: 0 0 0 3px rgba(57,255,136,0.15) !important; }
select option { background: #101010; color: var(--mx-text); }

/* ---- Universal card override for legacy .card / .list-item / etc ---- */
.card,
.panel,
.list-item {
    background: linear-gradient(180deg, #131313, #0E0E0E) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-r-xl) !important;
    color: var(--mx-text) !important;
}

/* ---- Force dark background even if legacy screen adds white bg ---- */
.screen { background: transparent !important; color: var(--mx-text); }
.screen:not(.active) { display: none; }

/* ---- Enhance links generally inside dark surfaces ---- */
a { color: var(--mx-accent); }
a:hover { color: var(--mx-accent-2); }

/* ---- Details/summary generic ---- */
details:not(.exchange-rates-details) summary {
    color: var(--mx-text-2);
    cursor: pointer;
}

/* ---- Hide legacy chevron on home-intro (we don't need it in premium hero) ---- */
.home-intro .home-intro-chevron { display: none !important; }

/* ---- iOS input zoom guard ---- */
@supports (-webkit-touch-callout: none) {
    input, textarea, select { font-size: 16px !important; }
    .exchange-toggle-btn,
    .amount-chip,
    .weekly-lottery-quick-btn,
    .admin-role-chip,
    .admin-period-chip,
    .user-profile-tab,
    .profile-tab,
    .admin-search-chip { font-size: 13px !important; }
    .nav-label,
    .header-name,
    .header-balance,
    .form-hint,
    .form-step,
    .admin-topbar-subtitle,
    .admin-profile-role,
    .admin-stat-label,
    .operator-app-stat-label,
    .home-intro-eyebrow,
    .home-trust-desc,
    .home-popular-text,
    .weekly-lottery-mute,
    .vpn-mute,
    .status-badge,
    .history-order-card__id,
    .history-order-card__status,
    .history-order-card__meta,
    .exchange-amount-hint,
    .exchange-card-label,
    .info-block-desc,
    .info-hero-tagline,
    .roulette-card-cta,
    .referral-card-stat-label,
    .referral-action-sublabel { font-size: 12.5px !important; }
    .exchange-amount-input { font-size: 32px !important; }
}

/* -------------------------------------------------------------------------
   END OF PREMIUM CSS / REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .home-intro::after { animation: none !important; }
}

/* =========================================================================
   RESPONSIVE PRODUCT SHELL
   One visual system for public web, mobile web and Telegram WebApp.
   Only composition changes with the viewport.
   ========================================================================= */

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--mx-bg);
    overflow-x: hidden;
}

body {
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

#app {
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}

.app-main {
    min-height: calc(100dvh - 68px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}

.app-header {
    padding-top: env(safe-area-inset-top, 0px);
}

.header-inner,
.main-page-container,
.exchange-container,
.history-container,
.form-screen,
.order-detail-container,
.admin-panel-container {
    width: min(100%, var(--mx-container));
}

/* Desktop: a real product shell, not a centered phone canvas. */
@media (min-width: 1025px) {
    :root {
        --mx-container: 1240px;
    }

    .screen {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #app {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body {
        background:
            radial-gradient(circle at 50% -15%, rgba(57,255,136,0.055), transparent 38%),
            var(--mx-bg);
    }

    .app-header {
        background: rgba(10,10,10,0.78) !important;
    }

    .header-inner {
        min-height: 76px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .app-main {
        min-height: calc(100dvh - 76px);
    }

    /* The existing five-item navigation becomes the shared desktop nav. */
    .bottom-nav,
    .bottom-nav.visible {
        position: fixed;
        z-index: 120;
        top: calc(76px + env(safe-area-inset-top, 0px) + 16px);
        right: max(24px, env(safe-area-inset-right, 0px));
        bottom: auto;
        left: auto;
        width: min(620px, calc(100vw - 48px));
        min-height: 58px;
        padding: 6px 8px !important;
        display: grid;
        grid-template-columns: repeat(5, minmax(86px, 1fr));
        gap: 4px;
        border: 1px solid var(--mx-border-strong) !important;
        border-radius: var(--mx-pill);
        background: rgba(15,15,15,0.78) !important;
        box-shadow: var(--mx-shadow-2);
    }

    .nav-item {
        min-height: 46px;
        flex-direction: row;
        gap: 8px;
        padding: 6px 12px !important;
        border-radius: var(--mx-pill);
        white-space: nowrap;
    }

    .nav-item.active {
        background: rgba(57,255,136,0.12) !important;
        color: var(--mx-accent) !important;
    }

    .nav-item.active .nav-icon {
        width: 28px;
        height: 28px;
        background: transparent;
        box-shadow: none;
        color: var(--mx-accent);
    }

    .nav-item.active .nav-icon::before {
        color: var(--mx-accent);
    }

    .nav-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .nav-icon::before {
        width: 18px;
        height: 18px;
    }

    .nav-label {
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .app-main.has-nav {
        padding-top: 96px;
        padding-bottom: 48px;
    }

    .home-screen {
        padding-top: 24px;
    }

    .main-page-container {
        gap: 28px;
        padding-top: 16px;
        padding-bottom: 72px;
    }

    /* Desktop hero: copy on the left, crypto visual on the right. */
    .home-intro {
        min-height: clamp(440px, 34vw, 540px);
        padding: clamp(48px, 5vw, 76px) clamp(44px, 6vw, 88px) !important;
        justify-content: center;
        border-radius: var(--mx-r-3xl) !important;
    }

    .home-intro-toggle {
        position: relative;
        z-index: 2;
        width: min(58%, 620px);
        max-width: 620px;
        gap: 20px;
    }

    .home-intro-title {
        font-size: clamp(68px, 7vw, 112px) !important;
        line-height: 0.9 !important;
    }

    .home-intro-text {
        max-width: 480px;
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    .home-intro-body {
        position: relative;
        z-index: 2;
        width: min(54%, 570px);
    }

    .home-intro::after {
        right: -2%;
        top: 50%;
        width: 52%;
        max-width: 640px;
        opacity: 1;
    }

    .home-exchange-cta {
        width: min(100%, 440px);
        height: 68px;
        align-self: flex-start;
    }

    .home-trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .home-trust-item {
        min-height: 176px;
        padding: 24px !important;
    }

    .home-popular-cards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .home-popular-card {
        min-height: 148px;
        padding: 24px !important;
    }

    .home-articles-track,
    .home-stories-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .home-story-card {
        min-height: 220px;
    }

    /* Shared pages use the same max-width rhythm as the home screen. */
    .exchange-container,
    .history-container,
    .order-detail-container,
    .form-screen,
    .admin-panel-container {
        padding-top: 28px;
        padding-bottom: 72px;
    }

    .exchange-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
    }

    .exchange-form > .exchange-submit-btn,
    .exchange-form > .exchange-rates-details,
    .exchange-form > .exchange-section:last-of-type {
        grid-column: 1 / -1;
    }

    .exchange-submit-btn {
        min-height: 64px;
    }

    .history-list,
    .coupons-list,
    .order-history-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .profile-main-grid,
    .referral-main-grid,
    .info-blocks,
    .roulette-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-sections-grid,
    .admin-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .modal-card,
    .vip-modal-card,
    .operator-modal-card,
    .processor-modal-card {
        max-width: 680px;
    }
}

/* Tablet: preserve the desktop rhythm while giving cards less width. */
@media (min-width: 641px) and (max-width: 1024px) {
    #app,
    .screen {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .home-intro {
        min-height: 400px;
    }

    .home-trust,
    .home-popular-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-intro-toggle {
        max-width: 68%;
    }

    .home-intro-title {
        font-size: clamp(54px, 8vw, 78px) !important;
    }

    .exchange-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .exchange-form > .exchange-submit-btn,
    .exchange-form > .exchange-rates-details {
        grid-column: 1 / -1;
    }
}

/* Mobile: same tokens and components, single-column composition. */
@media (max-width: 640px) {
    #app {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .app-main {
        min-height: calc(100dvh - 60px);
        padding-left: 0;
        padding-right: 0;
    }

    .main-page-container,
    .exchange-container,
    .history-container,
    .form-screen,
    .order-detail-container,
    .admin-panel-container {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .bottom-nav {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-main.has-nav {
        padding-bottom: calc(84px + max(8px, env(safe-area-inset-bottom, 0px)));
    }

    .home-intro {
        min-height: clamp(340px, 102vw, 420px);
    }

    .home-intro-toggle,
    .home-intro-body {
        max-width: 100%;
        width: 100%;
    }

    .home-intro-title {
        font-size: clamp(44px, 13vw, 64px) !important;
    }

    .home-popular-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exchange-form {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .header-right { gap: 5px; }
    .header-icon-btn,
    .header-notifications-btn { width: 36px !important; height: 36px !important; }
    .home-intro-title { font-size: 42px !important; }
    .home-popular-cards { grid-template-columns: 1fr; }
    .nav-label { font-size: 10px !important; }
}

/* =========================================================================
   HOMEPAGE COMPOSITION PASS
   Compact hero, real asset cards and live recent activity.
   ========================================================================= */

.home-intro::after {
    display: none !important;
}

.home-hero-visual {
    position: absolute;
    z-index: 1;
    right: 3%;
    top: 50%;
    width: min(47%, 560px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    pointer-events: none;
    filter: drop-shadow(0 0 28px rgba(57,255,136,0.12));
    animation: mx-hero-float 8s ease-in-out infinite;
}

.home-hero-orbit {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(57,255,136,0.36);
    border-radius: 50%;
    transform: rotate(-24deg) scaleY(0.42);
    box-shadow: 0 0 22px rgba(57,255,136,0.14);
}

.home-hero-orbit--two {
    inset: 4% 17%;
    transform: rotate(34deg) scaleY(0.58);
    border-color: rgba(57,255,136,0.22);
}

.home-hero-coin {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(220,235,236,0.52);
    border-radius: 50%;
    color: #e8eeee;
    font-family: Georgia, serif;
    font-weight: 700;
    line-height: 1;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.34), transparent 18%),
        linear-gradient(145deg, #596364 0%, #141a1a 42%, #303b3a 70%, #080b0b 100%);
    box-shadow:
        inset 0 0 0 5px rgba(0,0,0,0.35),
        inset 0 0 0 6px rgba(220,235,236,0.16),
        0 16px 26px rgba(0,0,0,0.62),
        0 0 18px rgba(57,255,136,0.16);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.home-hero-coin--btc {
    width: 34%;
    aspect-ratio: 1;
    left: 25%;
    top: 34%;
    z-index: 4;
    font-size: clamp(36px, 5vw, 72px);
}

.home-hero-coin--eth {
    width: 27%;
    aspect-ratio: 1;
    right: 10%;
    top: 12%;
    z-index: 3;
    font-size: clamp(30px, 4vw, 58px);
}

.home-hero-coin--usdt {
    width: 24%;
    aspect-ratio: 1;
    right: 2%;
    bottom: 17%;
    z-index: 2;
    color: #8ef8c2;
    font-size: clamp(28px, 3.5vw, 52px);
}

.home-hero-coin--sol {
    width: 22%;
    aspect-ratio: 1;
    left: 13%;
    bottom: 8%;
    z-index: 1;
    color: #bfe9ff;
    font-size: clamp(26px, 3.2vw, 48px);
}

@keyframes mx-hero-float {
    0%, 100% { transform: translateY(-50%) translate3d(0, 0, 0); }
    50% { transform: translateY(calc(-50% - 5px)) translate3d(0, -3px, 0); }
}

/* The reference banner already exists in the product: keep its referral action,
   but give it the same compact premium density as the rest of the home. */
.home-banner {
    min-height: 128px;
    background:
        radial-gradient(circle at 82% 50%, rgba(57,255,136,0.20), transparent 32%),
        linear-gradient(108deg, #0c251c 0%, #101b18 48%, #0e1111 100%) !important;
}

.home-banner::after {
    content: '₿  ◇  ₮';
    position: absolute;
    right: 7%;
    bottom: -16px;
    color: rgba(255,255,255,0.12);
    font: 800 64px/1 Georgia, serif;
    letter-spacing: 8px;
    transform: rotate(-8deg);
    pointer-events: none;
}

.home-banner__content {
    position: relative;
    z-index: 1;
}

.home-intro > .home-exchange-cta {
    position: absolute;
    z-index: 4;
    left: clamp(24px, 5vw, 56px);
    bottom: clamp(24px, 4vw, 44px);
    width: min(360px, calc(58% - 24px));
}

/* Asset cards */
.home-popular-card.home-asset-card {
    min-height: 116px;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
}

.home-asset-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 800 23px/1 Georgia, serif;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.35);
}

.home-asset-icon--btc { background: linear-gradient(145deg, #ffb629, #d86d00); }
.home-asset-icon--eth { background: linear-gradient(145deg, #8c9aff, #373d96); font-size: 22px; }
.home-asset-icon--usdt { background: linear-gradient(145deg, #42ddb2, #087a65); }
.home-asset-icon--sol { background: linear-gradient(145deg, #7d7aff, #7344d7); }

.home-asset-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.home-asset-copy strong {
    color: var(--mx-text);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.home-asset-copy small {
    color: var(--mx-text-3);
    font-size: 12px;
}

.home-asset-copy em {
    margin-top: 4px;
    color: var(--mx-text-4);
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

.home-asset-arrow {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--mx-text-2);
    background: rgba(255,255,255,0.06);
    font-size: 17px;
}

/* Recent activity */
.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.home-section-link {
    flex-shrink: 0;
    border: 0;
    padding: 4px 0;
    background: transparent;
    color: var(--mx-text-3);
    font: 600 12px/1.2 var(--mx-font);
    cursor: pointer;
}

.home-section-link:hover { color: var(--mx-accent); }

.home-recent {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-recent-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-r-xl);
    overflow: hidden;
    background: linear-gradient(180deg, #111313, #0d0f0f);
}

.home-recent-item {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto 20px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--mx-border);
    background: transparent;
    color: var(--mx-text);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--mx-dur-2) var(--mx-ease);
}

.home-recent-item:last-child { border-bottom: 0; }
.home-recent-item:hover { background: rgba(255,255,255,0.04); }

.home-recent-asset {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ffb629, #d86d00);
    font: 800 18px Georgia, serif;
}

.home-recent-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.home-recent-main strong {
    overflow: hidden;
    color: var(--mx-text-2);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-recent-main strong i {
    color: var(--mx-text-4);
    font-style: normal;
}

.home-recent-main small,
.home-recent-item time {
    color: var(--mx-text-4);
    font-size: 11px;
}

.home-recent-status {
    padding: 5px 9px;
    border-radius: var(--mx-pill);
    color: var(--mx-accent);
    background: var(--mx-accent-soft);
    font-size: 10px;
    white-space: nowrap;
}

.home-recent-arrow {
    color: var(--mx-text-3);
    font-size: 17px;
}

.home-recent-empty {
    padding: 18px 16px;
    color: var(--mx-text-4);
    font-size: 13px;
}

@media (min-width: 1025px) {
    .home-intro {
        min-height: 360px;
    }

    .home-hero-visual {
        width: 43%;
        max-width: 500px;
    }

    .home-recent-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-recent-item {
        border-right: 1px solid var(--mx-border);
        border-bottom: 0;
    }

    .home-recent-item:last-child { border-right: 0; }
}

@media (max-width: 640px) {
    .home-intro {
        min-height: 286px !important;
        padding: 22px 20px !important;
        border-radius: var(--mx-r-2xl) !important;
    }

    .home-intro-toggle {
        width: 100%;
        gap: 12px;
        z-index: 3;
    }

    .home-intro-eyebrow { font-size: 10px; }
    .home-intro-title { font-size: clamp(39px, 11vw, 52px) !important; }
    .home-intro-text { max-width: 270px !important; font-size: 12px !important; }
    .home-intro-body { display: none; }

    .home-hero-visual {
        right: -12%;
        top: 55%;
        width: 58%;
        opacity: 0.94;
        z-index: 1;
    }

    .home-intro > .home-exchange-cta {
        left: 20px;
        bottom: 16px;
        width: calc(100% - 40px);
        height: 56px;
        font-size: 14px !important;
    }

    .home-exchange-cta-icon {
        width: 42px;
        height: 42px;
    }

    .home-trust-item {
        min-height: 136px !important;
        padding: 14px !important;
        gap: 9px !important;
    }

    .home-trust-icon {
        width: 38px;
        height: 38px;
    }

    .home-trust-icon::before {
        width: 18px;
        height: 18px;
    }

    .home-trust-title { font-size: 13px !important; }
    .home-trust-desc { font-size: 11px !important; }

    .home-popular-cards {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none;
    }

    .home-popular-cards::-webkit-scrollbar { display: none; }

    .home-popular-card.home-asset-card {
        flex: 0 0 164px;
        min-height: 124px;
        grid-template-columns: auto 1fr;
        padding: 14px !important;
    }

    .home-asset-arrow {
        position: absolute;
        right: 12px;
        bottom: 12px;
    }

    .home-asset-copy strong { font-size: 13px; }
    .home-asset-copy em { font-size: 10px; }

    .home-banner { min-height: 112px; }
    .home-banner::after { font-size: 42px; right: 2%; }

    .home-recent-item {
        grid-template-columns: 34px minmax(0, 1fr) auto 18px;
        gap: 9px;
        padding: 11px 12px;
    }

    .home-recent-status { display: none; }
    .home-recent-item time { font-size: 10px; }
}

@media (max-width: 360px) {
    .home-intro { min-height: 270px !important; }
    .home-intro-title { font-size: 37px !important; }
    .home-hero-visual { opacity: 0.72; }
    .home-popular-card.home-asset-card { flex-basis: 152px; }
}

/* =========================================================================
   ATMOSPHERIC FINTECH COMPOSITION
   Inspired by premium exchange landing-page composition; no copied assets.
   ========================================================================= */

.home-screen {
    position: relative;
    isolation: isolate;
}

.home-screen::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 68px 0 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(57,255,136,0.08), transparent 34%),
        radial-gradient(ellipse at 0% 44%, rgba(20,88,67,0.12), transparent 30%),
        linear-gradient(180deg, rgba(11,19,20,0.75), transparent 42%);
}

.home-intro {
    background:
        linear-gradient(115deg, rgba(255,255,255,0.035), transparent 36%),
        radial-gradient(circle at 82% 56%, rgba(57,255,136,0.16), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(18,103,73,0.16), transparent 32%),
        linear-gradient(140deg, #131a1a 0%, #090d0d 56%, #0b1110 100%) !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,0.46),
        0 0 64px rgba(57,255,136,0.06),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.home-intro::before {
    inset: 0 !important;
    border-radius: inherit;
    opacity: 0.52;
    background:
        linear-gradient(120deg, transparent 0 52%, rgba(57,255,136,0.08) 52.2%, transparent 52.5%),
        linear-gradient(28deg, transparent 0 64%, rgba(255,255,255,0.035) 64.2%, transparent 64.5%),
        radial-gradient(ellipse at 76% 45%, transparent 0 28%, rgba(57,255,136,0.18) 28.3%, transparent 29%);
}

.home-intro-toggle {
    text-shadow: 0 2px 14px rgba(0,0,0,0.24);
}

.home-intro-eyebrow {
    color: rgba(220,235,230,0.72);
    letter-spacing: 0.19em;
}

.home-hero-visual {
    filter:
        drop-shadow(0 0 32px rgba(57,255,136,0.16))
        drop-shadow(0 24px 22px rgba(0,0,0,0.45));
}

.home-hero-orbit {
    border-color: rgba(57,255,136,0.44);
    box-shadow:
        0 0 24px rgba(57,255,136,0.22),
        0 0 72px rgba(57,255,136,0.08);
}

.home-hero-coin {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.42), transparent 16%),
        linear-gradient(140deg, #75807f 0%, #303b39 20%, #101615 52%, #44524e 78%, #111514 100%);
    border-color: rgba(238,255,249,0.64);
}

.home-exchange-cta {
    box-shadow:
        0 0 34px rgba(57,255,136,0.28),
        0 14px 28px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.38) !important;
}

.home-trust-item,
.home-popular-card,
.home-recent-list,
.home-banner {
    box-shadow:
        0 16px 36px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

@media (min-width: 1025px) {
    .home-screen::before {
        inset: 76px 0 0;
    }

    .home-intro {
        min-height: 400px;
    }

    .home-intro-toggle {
        width: min(54%, 600px);
    }

    .home-intro-title {
        font-size: clamp(62px, 6.2vw, 100px) !important;
    }

    .home-hero-visual {
        right: 1%;
        width: min(46%, 540px);
    }
}

@media (max-width: 640px) {
    .home-screen::before {
        inset: 60px 0 0;
    }

    .home-intro {
        background:
            radial-gradient(circle at 92% 58%, rgba(57,255,136,0.15), transparent 36%),
            linear-gradient(140deg, #131a1a 0%, #090d0d 62%, #0b1110 100%) !important;
    }

    .home-hero-visual {
        filter: drop-shadow(0 0 24px rgba(57,255,136,0.18));
    }
}

/* =========================================================================
   HEADER SHELL
   Brand, account and bot access share one coherent glass surface.
   ========================================================================= */

.header-left {
    flex: 0 1 auto;
    min-width: 0;
}

/* JS controls these three elements with inline display values. Do not let
   the visual layer resurrect an element that the screen router hid. */
.header-profile[style*="display: none"],
.header-logo[style*="display: none"],
.header-notifications-wrap[style*="display: none"] {
    display: none !important;
}

.header-bot-link {
    height: 44px;
    min-width: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 12px 4px 6px;
    border: 1px solid rgba(57,255,136,0.22);
    border-radius: var(--mx-pill);
    background:
        linear-gradient(180deg, rgba(57,255,136,0.12), rgba(57,255,136,0.045)),
        rgba(255,255,255,0.025);
    color: var(--mx-text-2);
    text-decoration: none;
    font: 700 12px/1 var(--mx-font);
    white-space: nowrap;
    transition:
        transform var(--mx-dur-2) var(--mx-ease),
        border-color var(--mx-dur-2) var(--mx-ease),
        background var(--mx-dur-2) var(--mx-ease),
        box-shadow var(--mx-dur-2) var(--mx-ease);
}

.header-bot-link:hover,
.header-bot-link:focus-visible {
    border-color: rgba(57,255,136,0.52);
    background:
        linear-gradient(180deg, rgba(57,255,136,0.18), rgba(57,255,136,0.07)),
        rgba(255,255,255,0.04);
    color: var(--mx-text);
    box-shadow: 0 0 24px rgba(57,255,136,0.14);
    transform: translateY(-1px);
}

.header-bot-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--mx-accent-ink);
    background: linear-gradient(145deg, var(--mx-accent), var(--mx-accent-3));
    font-size: 15px;
    line-height: 1;
    transform: rotate(-18deg);
    box-shadow: 0 0 16px rgba(57,255,136,0.22);
}

.header-bot-label {
    color: inherit;
}

.header-right {
    flex: 0 0 auto;
}

.header-support-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mx-border);
    border-radius: 50%;
    color: var(--mx-text-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    cursor: pointer;
    transition: border-color var(--mx-dur-2) var(--mx-ease), transform var(--mx-dur-2) var(--mx-ease);
}

.header-support-btn:hover,
.header-support-btn:focus-visible {
    border-color: var(--mx-border-strong);
    transform: translateY(-1px);
}

.header-support-icon {
    width: 19px;
    height: 19px;
    display: block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16v-3a8 8 0 0116 0v3'/><path d='M4 16a2 2 0 002 2h1v-6H6a2 2 0 00-2 2zM20 16a2 2 0 01-2 2h-1v-6h1a2 2 0 012 2z'/><path d='M15 20h1a2 2 0 002-2'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16v-3a8 8 0 0116 0v3'/><path d='M4 16a2 2 0 002 2h1v-6H6a2 2 0 00-2 2zM20 16a2 2 0 01-2 2h-1v-6h1a2 2 0 012 2z'/><path d='M15 20h1a2 2 0 002-2'/></svg>") no-repeat center / contain;
}

@media (min-width: 1025px) {
    .header-inner {
        gap: 18px;
    }

    .header-left {
        gap: 12px;
    }

    .header-bot-link {
        min-width: 88px;
        height: 46px;
        font-size: 13px;
    }

    .header-bot-link::after {
        content: '↗';
        margin-left: 1px;
        color: var(--mx-accent);
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .header-inner {
        gap: 7px;
    }

    .header-left {
        gap: 7px;
    }

    .header-profile {
        max-width: 138px;
        flex: 0 0 auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .header-profile-text {
        max-width: 82px;
    }

    .header-bot-link {
        min-width: 58px;
        width: 58px;
        height: 40px;
        padding: 4px 8px 4px 4px;
        gap: 5px;
    }

    .header-bot-icon {
        width: 30px;
        height: 30px;
    }

    .header-bot-label {
        display: inline;
        font-size: 11px;
    }

    .header-right {
        gap: 5px;
    }

    .header-support-btn {
        display: none;
    }
}

@media (max-width: 360px) {
    .header-profile {
        max-width: 132px;
    }

    .header-profile-text {
        max-width: 62px;
    }

    .header-bot-link {
        width: 42px;
        min-width: 42px;
        padding: 4px;
    }

    .header-bot-label {
        display: none;
    }
}

/* Ported from the PROJECT prototype: a compact safety status strip and
   support action, wired to the existing complaint flow. */
.home-trust-strip,
.home-support-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--mx-border);
    background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
    box-shadow: var(--mx-shadow-1);
}

.home-trust-strip {
    min-height: 64px;
    padding: 10px 14px;
    border-radius: var(--mx-r-lg);
}

.home-trust-strip-icon,
.home-support-symbol {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--mx-accent);
    background: var(--mx-accent-soft);
}

.home-trust-strip-icon {
    background: var(--mx-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10' width='14' height='10' rx='2'/><path d='M8 10V7a4 4 0 018 0v3'/></svg>") no-repeat center / 20px 20px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10' width='14' height='10' rx='2'/><path d='M8 10V7a4 4 0 018 0v3'/></svg>") no-repeat center / 20px 20px;
}

.home-trust-strip-copy,
.home-support-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.home-trust-strip-copy strong,
.home-support-copy strong {
    color: var(--mx-text-2);
    font-size: 12px;
}

.home-trust-strip-copy small,
.home-support-copy small {
    color: var(--mx-text-4);
    font-size: 11px;
}

.home-trust-strip-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--mx-accent);
    font-size: 11px;
    white-space: nowrap;
}

.home-trust-strip-status i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: var(--mx-accent);
    box-shadow: 0 0 10px var(--mx-accent);
}

.home-support-card {
    min-height: 68px;
    margin-top: -4px;
    padding: 12px 14px;
    border-radius: var(--mx-r-lg);
}

.home-support-symbol {
    font-size: 17px;
}

.home-support-card > button {
    margin-left: auto;
    border: 0;
    padding: 8px 0 8px 10px;
    color: var(--mx-accent);
    background: transparent;
    font: 700 12px/1 var(--mx-font);
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 360px) {
    .home-trust-strip-status {
        display: none;
    }

    .home-support-card > button {
        font-size: 11px;
    }
}

/* =========================================================================
   PROJECT DESIGN — exact visual port with production behavior preserved
   ========================================================================= */

html[data-theme],
html[data-theme] body {
    min-width: 320px;
    color: #f5f7f7;
    background: #070909;
    font-family: 'Manrope', sans-serif;
}

body { overflow-x: hidden; }
button, input, select { font: inherit; }

#app.app-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 48% 12%, #10251f 0, #070909 35%), #070909;
}

.ambient-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .18;
}
.ambient-glow-one { top: 160px; right: -220px; background: #1eef83; }
.ambient-glow-two { top: 620px; left: -320px; background: #1abf70; }

.app-header.topbar,
.home-screen .main-content,
.bottom-nav {
    width: min(100% - 40px, 1100px);
    margin-inline: auto;
}

.app-header.topbar {
    position: relative;
    inset: auto;
    z-index: 30;
    height: 77px;
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.app-header.topbar .header-inner {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app-header.topbar .account-chip,
.app-header.topbar .bot-button,
.app-header.topbar .round-action {
    border: 1px solid #222a29;
    background: #0c1010;
    color: #f3f5f5;
    box-shadow: none;
}

.app-header.topbar .account-chip {
    min-width: 142px;
    width: auto;
    height: 46px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 5px;
    text-align: left;
    transform: none;
}

.app-header.topbar .avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid #34403d;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
    color: #f3f5f5;
    font-size: 17px;
    font-weight: 700;
}

.app-header.topbar .header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-header.topbar .account-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.app-header.topbar .account-copy strong {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f3f5f5;
    font-size: 11px;
    font-weight: 700;
}

.app-header.topbar .account-copy small {
    color: #8b9593;
    font-size: 11px;
}

.app-header.topbar .chevron-down-icon {
    flex: 0 0 auto;
    color: #aab4b1;
}

.app-header.topbar .top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.app-header.topbar .bot-button {
    width: auto;
    height: 42px;
    padding: 0 13px 0 7px;
    display: flex;
    gap: 7px;
    align-items: center;
    border-radius: 23px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.app-header.topbar .telegram-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #26ed86;
    color: #06150e;
    transform: rotate(-18deg);
}

.app-header.topbar .round-action,
.app-header.topbar .header-notifications-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #aab4b1;
}

.app-header.topbar .header-notifications-wrap { position: relative; }
.app-main { min-height: calc(100vh - 77px); padding: 0 !important; background: transparent; }
.screen { min-height: auto; }

.home-screen .main-content {
    position: relative;
    z-index: 1;
    padding: 45px 0 120px;
}

.hero-card {
    min-height: 382px;
    border: 1px solid #25302d;
    border-radius: 31px;
    padding: 45px 52px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(120deg, #0d1716 20%, #0b1513 60%, #0d2019);
    box-shadow: inset 0 0 45px #0a1612, 0 20px 70px rgba(0,0,0,.2);
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background: linear-gradient(120deg, transparent 48%, rgba(43,232,128,.28) 49%, transparent 49.4%),
                linear-gradient(40deg, transparent 70%, rgba(43,232,128,.15) 70.5%, transparent 71%);
}

.hero-copy { position: relative; z-index: 2; }

.eyebrow,
.section-kicker {
    color: #94a19d;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 800;
    margin: 0 0 10px;
}

.eyebrow span { color: #35eb86; padding: 0 4px; }

.hero-card h1 {
    margin: 0;
    color: #f5f7f7;
    font-size: clamp(48px, 7vw, 82px);
    line-height: .98;
    letter-spacing: -.07em;
    font-weight: 800;
}
.hero-card h1 span { color: #2bec82; }

.hero-description {
    color: #a8b2af;
    line-height: 1.6;
    margin: 17px 0 23px;
    font-size: 14px;
}

.primary-button {
    border: 0;
    background: linear-gradient(110deg, #18d873, #31f58b);
    color: #04170d;
    font-weight: 800;
    box-shadow: 0 9px 30px rgba(28,238,124,.22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 35px rgba(28,238,124,.35);
    filter: saturate(1.08);
}

.hero-button {
    width: 338px;
    height: 57px;
    padding: 6px 16px 6px 7px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 32px;
    font-size: 15px;
}

.button-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.11);
    border: 1px solid rgba(2,41,23,.16);
    border-radius: 50%;
}
.button-arrow { margin-left: auto; }

.coin {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 1px solid #76817e;
    border-radius: 50%;
    color: #d4ddd9;
    background: radial-gradient(circle at 32% 25%, #606967, #151c1b 57%, #080b0b);
    box-shadow: inset 4px 5px 12px rgba(255,255,255,.23), 0 15px 25px rgba(0,0,0,.45);
}
.coin-bitcoin { width: 106px; height: 106px; right: 162px; bottom: 45px; color: #d3ddd9; }
.coin-dollar { width: 84px; height: 84px; right: 51px; top: 77px; }
.coin-small { width: 66px; height: 66px; right: -18px; bottom: 92px; font-size: 29px; font-weight: 800; }

.orbit {
    position: absolute;
    border: 1px solid rgba(36,235,130,.35);
    border-radius: 50%;
    transform: rotate(-22deg);
}
.orbit-one { width: 390px; height: 180px; right: -10px; bottom: 34px; }
.orbit-two { width: 340px; height: 150px; right: -18px; bottom: 55px; transform: rotate(17deg); }

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

.benefit-card {
    min-height: 168px;
    padding: 18px;
    border: 1px solid #242a29;
    border-radius: 23px;
    background: linear-gradient(145deg, #131615, #0d0f0f);
    transition: transform .2s ease, border-color .2s ease;
}
.benefit-card:hover { transform: translateY(-4px); border-color: #36bd79; }

.benefit-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #343b39;
    border-radius: 50%;
    color: #e2e9e6;
    margin-bottom: 19px;
}
.benefit-card h3 { color: #f5f7f7; font-size: 13px; margin: 0 0 8px; }
.benefit-card p { color: #8d9693; font-size: 11px; line-height: 1.55; margin: 0; }

.trust-strip,
.support-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #252e2b;
    background: #0e1211;
}
.trust-strip { margin-top: 22px; border-radius: 20px; padding: 14px 17px; }

.trust-icon,
.support-symbol {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #29ed86;
    background: rgba(37,226,124,.1);
}

.trust-strip strong,
.support-card strong { display: block; color: #f5f7f7; font-size: 12px; }
.trust-strip span:not(.online-status),
.support-card span { display: block; color: #86908d; font-size: 11px; margin-top: 3px; }

.online-status {
    margin-left: auto;
    color: #52d98e;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.online-status > span { color: inherit !important; margin: 0 !important; }
.online-status i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #35ea84; box-shadow: 0 0 9px #35ea84; }

.exchange-section { margin-top: 66px; scroll-margin-top: 30px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 17px; }
.section-kicker { color: #2bed84; margin-bottom: 8px; }
.section-heading h2 { margin: 0; color: #f5f7f7; font-size: 29px; letter-spacing: -.04em; }

.rate-badge {
    color: #83a28f;
    font-size: 11px;
    display: flex;
    gap: 7px;
    align-items: center;
}
.rate-badge > span { width: 6px; height: 6px; background: #28e981; border-radius: 50%; }

.home-screen .exchange-card {
    border: 1px solid #27312d;
    border-radius: 24px;
    background: linear-gradient(145deg, #111716, #0b0f0e);
    padding: 25px;
    max-width: 760px;
}

.amount-fields { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 12px; }
.currency-field { display: block; padding: 14px; border: 1px solid #29332f; border-radius: 16px; background: #0b0f0e; }
.field-label, .currency-name { color: #7f8c87; display: block; font-size: 11px; }
.currency-input-row { display: flex; align-items: center; gap: 9px; margin: 10px 0 4px; }

.currency-input-row input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #f7faf9;
    background: transparent;
    font-size: 22px;
    font-weight: 800;
    box-shadow: none;
}

.currency-input-row select {
    appearance: none;
    border: 0;
    outline: 0;
    color: #d8e1dd;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    width: 49px;
}

.currency-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--icon-color);
    border: 1px solid var(--icon-color);
    font-size: 15px;
}
.usdt-symbol, .rub-symbol { font-weight: 800; }

.swap-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #304139;
    color: #2bea84;
    background: #0c1812;
    border-radius: 50%;
}

.exchange-meta { display: flex; justify-content: space-between; color: #7e8b85; font-size: 11px; padding: 17px 3px; }
.exchange-button { width: 100%; height: 49px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.exchange-button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.support-card { max-width: 760px; margin-top: 22px; padding: 15px 17px; border-radius: 19px; }
.support-link {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    color: #2bea84;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}
.support-link > span { color: inherit !important; margin: 0 !important; }

.home-screen .home-recent,
.home-screen .home-admin-entry { max-width: 760px; margin-top: 34px; }
.home-screen .home-section-title { color: #f5f7f7; }
.home-screen .main-footer { width: min(100%, 760px); }

.bottom-nav {
    position: fixed;
    z-index: 50;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-height: 0;
    height: auto;
    display: none;
    justify-content: space-around;
    padding: 7px 10px;
    border: 1px solid #252d2a;
    border-radius: 22px;
    background: rgba(12,15,14,.92);
    box-shadow: 0 12px 45px rgba(0,0,0,.4);
    backdrop-filter: blur(18px);
}
.bottom-nav.visible { display: flex; }

.bottom-nav .nav-item {
    min-width: 95px;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #818b87;
    background: transparent;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
}

.bottom-nav .nav-icon {
    width: 35px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 15px;
}
.bottom-nav .nav-item.active { color: #f0f8f4; font-weight: 700; }
.bottom-nav .nav-item.active .nav-icon { color: #07170e; background: #29ec84; box-shadow: 0 3px 18px rgba(41,236,132,.35); }
.bottom-nav .nav-label { font-size: 10px; line-height: 1; }

/* Existing exchange, profile, history, bonus and info screens */
.exchange-screen .exchange-container {
    width: min(100% - 40px, 760px);
    max-width: 760px;
    padding: 42px 0 130px;
}
.exchange-screen .exchange-header { margin-bottom: 17px; }
.exchange-screen .exchange-title { color: #f5f7f7; font-size: 29px; letter-spacing: -.04em; }

.exchange-screen .exchange-form {
    display: grid;
    gap: 12px;
    padding: 25px;
    border: 1px solid #27312d;
    border-radius: 24px;
    background: linear-gradient(145deg, #111716, #0b0f0e);
}

.exchange-screen .exchange-card {
    max-width: none;
    margin: 0;
    padding: 14px;
    border: 1px solid #29332f;
    border-radius: 16px;
    background: #0b0f0e;
    box-shadow: none;
}

.exchange-screen .exchange-card-label,
.exchange-screen .exchange-section-title,
.exchange-screen .exchange-amount-hint,
.exchange-screen .exchange-wallet-hint,
.exchange-screen .form-hint { color: #7f8c87; }
.exchange-screen .exchange-select-wrap,
.exchange-screen .exchange-amount-row { border: 0; background: transparent; }
.exchange-screen .exchange-amount-input,
.exchange-screen .exchange-wallet-input { color: #f7faf9; background: transparent; border-color: #29332f; }

.exchange-screen .exchange-submit-btn {
    min-height: 49px;
    border: 0;
    border-radius: 13px;
    color: #04170d;
    background: linear-gradient(110deg, #18d873, #31f58b);
    box-shadow: 0 9px 30px rgba(28,238,124,.22);
    font-weight: 800;
}

.screen:not(.home-screen) { color: #f5f7f7; }
.screen:not(.home-screen) .container { position: relative; z-index: 1; }
.screen:not(.home-screen) .page-title,
.screen:not(.home-screen) h1,
.screen:not(.home-screen) h2,
.screen:not(.home-screen) h3 { color: #f5f7f7; }

.screen:not(.home-screen) .card,
.screen:not(.home-screen) .profile-card,
.screen:not(.home-screen) .history-item,
.screen:not(.home-screen) .info-card,
.screen:not(.home-screen) .roulette-card,
.screen:not(.home-screen) .form-group {
    border-color: #27312d;
    background: linear-gradient(145deg, #111716, #0b0f0e);
    box-shadow: none;
}

.screen:not(.home-screen) .btn-gold,
.screen:not(.home-screen) .btn-primary,
.screen:not(.home-screen) .subscription-gate-btn {
    color: #04170d;
    background: linear-gradient(110deg, #18d873, #31f58b);
    border-color: transparent;
    box-shadow: 0 9px 30px rgba(28,238,124,.22);
}

.screen:not(.home-screen) .btn-back-unified {
    color: #aab4b1;
    border-color: #222a29;
    background: #0c1010;
}

@media (max-width: 760px) {
    .app-header.topbar,
    .home-screen .main-content,
    .bottom-nav { width: min(100% - 28px, 540px); }

    .app-header.topbar {
        height: calc(70px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    .app-header.topbar .top-actions { gap: 6px; }
    .app-header.topbar .round-action,
    .app-header.topbar .header-notifications-btn { width: 38px; height: 38px; }
    .app-header.topbar .bot-button { height: 38px; padding-right: 10px; }
    .app-header.topbar .account-chip { min-width: 0; max-width: 164px; }
    .app-main { min-height: calc(100vh - 70px); }
    .home-screen .main-content { padding: 31px 0 calc(112px + env(safe-area-inset-bottom, 0px)); }

    .hero-card { min-height: 337px; border-radius: 27px; padding: 29px 22px; }
    .hero-card h1 { font-size: 48px; }
    .hero-description { font-size: 12px; margin: 13px 0 17px; max-width: 230px; }
    .hero-button { width: min(100%, 330px); height: 53px; font-size: 13px; }

    .coin-bitcoin { width: 83px; height: 83px; right: 89px; bottom: 35px; }
    .coin-bitcoin svg { width: 34px; }
    .coin-dollar { width: 65px; height: 65px; right: 12px; top: 73px; }
    .coin-small { width: 55px; height: 55px; right: -17px; bottom: 78px; }
    .orbit-one { width: 290px; right: -52px; bottom: 39px; }
    .orbit-two { width: 260px; right: -45px; }

    .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 20px; }
    .benefit-card { min-height: 141px; padding: 15px; border-radius: 20px; }
    .benefit-icon { width: 35px; height: 35px; margin-bottom: 14px; }
    .benefit-card h3 { font-size: 12px; }
    .benefit-card p { font-size: 10px; }

    .trust-strip { margin-top: 15px; }
    .trust-strip span:not(.online-status) { max-width: 190px; line-height: 1.4; }
    .exchange-section { margin-top: 48px; }
    .section-heading h2 { font-size: 24px; }
    .rate-badge { font-size: 9px; }
    .home-screen .exchange-card { padding: 17px; }
    .amount-fields { grid-template-columns: 1fr; gap: 8px; }
    .swap-button { margin: -1px auto; transform: rotate(90deg); }
    .currency-input-row input { font-size: 20px; }

    .bottom-nav {
        width: calc(100% - 20px);
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-radius: 19px;
    }
    .bottom-nav .nav-item { min-width: 0; flex: 1; }
    .bottom-nav .nav-label { font-size: 9px; }
    .support-card { margin-top: 16px; }
    .desktop-only { display: none; }

    .exchange-screen .exchange-container {
        width: min(100% - 28px, 540px);
        padding: 31px 0 calc(112px + env(safe-area-inset-bottom, 0px));
    }
    .exchange-screen .exchange-form { padding: 17px; }
}

@media (max-width: 420px) {
    .app-header.topbar .header-support-btn,
    .app-header.topbar .header-logo-text { display: none; }
    .app-header.topbar .account-chip { max-width: 154px; }
}

@media (max-width: 340px) {
    .app-header.topbar,
    .home-screen .main-content { width: calc(100% - 20px); }
    .app-header.topbar .account-chip { max-width: 132px; }
    .app-header.topbar .account-copy strong { max-width: 58px; }
    .hero-card { padding-inline: 17px; }
    .hero-card h1 { font-size: 43px; }
    .trust-strip { gap: 9px; padding-inline: 12px; }
}

/* Updated PROJECT reference (September 27) */
:root {
    --green: #2bec82;
    --green-bright: #36f58e;
    --green-dim: #1abf70;
    --amber: #f5a623;
    --card-border: #25302d;
    --card-bg: #0d1311;
    --card-bg2: #0a0e0d;
}

#app.app-shell {
    background:
        radial-gradient(ellipse at 50% 0%, #102a22 0, transparent 45%),
        radial-gradient(ellipse at 90% 50%, #0a1c17 0, transparent 40%),
        #080b0a;
}

.ambient-glow { filter: blur(90px); }
.ambient-glow-one { width: 420px; height: 420px; top: 120px; right: -180px; opacity: .13; }
.ambient-glow-two { width: 380px; height: 380px; top: 520px; left: -250px; opacity: .1; }

.app-header.topbar,
.home-screen .main-content,
.bottom-nav { width: min(100% - 40px, 1140px); }

.app-header.topbar {
    position: sticky;
    top: 0;
    height: 72px;
    background: #0b0d0c;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
}

.app-header.topbar .brand-chip {
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    color: #f5f7f6;
}
.app-header.topbar .brand-chip::after { display: none !important; content: none !important; }

.app-header.topbar .milka-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 0 !important;
    border-radius: 11px !important;
    color: #04170d !important;
    background: linear-gradient(135deg, #18d873, var(--green-bright)) !important;
    box-shadow: 0 4px 14px rgba(43, 232, 128, .3);
}
.app-header.topbar .milka-logo .header-avatar-inner {
    display: grid !important;
    place-items: center;
    color: inherit !important;
    line-height: 1;
}

.app-header.topbar .brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}
.app-header.topbar .brand-copy strong {
    max-width: none;
    color: #f5f7f6;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.03em;
}
.app-header.topbar .brand-copy small {
    color: var(--green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.app-header.topbar .bot-button { height: 42px; padding: 0 14px 0 6px; gap: 8px; font-size: 13px; }
.app-header.topbar .telegram-mark { width: 30px; height: 30px; font-size: 14px; }
.home-screen .main-content { padding: 32px 0 130px; }
.home-screen { padding-top: 0 !important; }

.hero-card {
    min-height: 400px;
    border-radius: 30px;
    padding: 48px 52px;
    background: linear-gradient(130deg, #0e1a16 10%, #0b1413 50%, #0e1f18 90%);
    box-shadow: inset 0 0 50px #0a1612, 0 20px 70px rgba(0,0,0,.25);
}
.hero-grid {
    opacity: .3;
    background:
        linear-gradient(120deg, transparent 48%, rgba(43,232,128,.22) 49%, transparent 49.5%),
        radial-gradient(circle at 80% 20%, rgba(43,232,128,.07), transparent 50%);
}
.hero-orb {
    display: block;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle at 35% 30%, rgba(43,232,128,.25), rgba(43,232,128,.05) 50%, transparent 70%);
    filter: blur(2px);
}
.hero-orb::before,
.hero-orb::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(43,232,128,.25);
}
.hero-orb::before { inset: 30px; }
.hero-orb::after { inset: 60px; border-color: rgba(43,232,128,.15); }
.hero-copy { max-width: 560px; z-index: 3; }

.eyebrow {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.eyebrow svg { color: var(--green); }
.hero-card h1 { font-size: clamp(46px, 7vw, 78px); line-height: .95; letter-spacing: -.06em; font-weight: 900; }
.hero-description { margin: 18px 0 26px; }
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-button { width: 320px; height: 56px; padding: 5px 16px 5px 5px; border-radius: 31px; }
.button-icon { width: 44px; height: 44px; flex-basis: 44px; }

.ghost-button {
    height: 56px;
    padding: 0 22px;
    border: 1px solid #2a3531;
    background: rgba(255,255,255,.03);
    color: #e2e9e6;
    border-radius: 31px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin,
.orbit { display: none; }

.benefit-card { min-height: 170px; padding: 20px; border-radius: 22px; background: linear-gradient(145deg, #131816, #0d0f0f); }
.benefit-icon {
    width: 42px;
    height: 42px;
    color: var(--green);
    background: rgba(43,232,128,.06);
    margin-bottom: 18px;
}
.benefit-card h3 { font-size: 14px; margin-bottom: 7px; font-weight: 700; }
.benefit-card p { font-size: 12px; margin: 0 0 10px; }
.benefit-sub { color: var(--green); font-size: 11px; font-weight: 700; }

.trust-strip { padding: 15px 18px; }
.trust-icon { width: 38px; height: 38px; border-radius: 12px; }
.trust-strip strong { font-size: 13px; }
.trust-strip span:not(.online-status) { font-size: 12px; }
.online-status { font-size: 12px; font-weight: 700; }
.online-status i { width: 7px; height: 7px; animation: project-pulse 2s ease-in-out infinite; }
@keyframes project-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* The updated reference keeps exchange/history/bonuses/info on separate tabs. */
.home-screen > .main-content > .exchange-section,
.home-screen > .main-content > .support-card,
.home-screen > .main-content > .home-recent,
.home-screen > .main-content > .main-footer { display: none; }

.bottom-nav {
    padding: 8px 12px;
    border-radius: 24px;
}
.bottom-nav .nav-item { min-width: 96px; font-weight: 600; }
.bottom-nav .nav-icon { width: 36px; height: 30px; }
.bottom-nav .nav-icon::before { display: none; }
.bottom-nav .nav-icon > svg { display: block; }
.bottom-nav .nav-item.active {
    color: #f0f8f4 !important;
    background: transparent !important;
}
.bottom-nav .nav-item.active .nav-icon {
    color: #07170e !important;
    background: var(--green) !important;
    box-shadow: 0 3px 18px rgba(43,232,128,.35) !important;
}

.exchange-screen .exchange-title { font-size: 30px; font-weight: 800; }
.exchange-screen .exchange-form { padding: 28px; }
.exchange-screen .exchange-form {
    min-width: 0;
    max-width: 760px;
}
.exchange-screen .exchange-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 15px;
}
.exchange-screen .exchange-select-wrap,
.exchange-screen .exchange-amount-header,
.exchange-screen .exchange-amount-row,
.exchange-screen .exchange-wallet-input,
.exchange-screen .exchange-rates-details {
    min-width: 0;
    max-width: 100%;
}
.exchange-screen .exchange-select-wrap,
.exchange-screen .exchange-wallet-input { width: 100%; }
.exchange-screen .exchange-rates-details { overflow: hidden; }
.exchange-screen .exchange-rates-table { max-width: 100%; overflow-x: auto; }
.exchange-screen .exchange-submit-btn { min-height: 52px; border-radius: 14px; font-size: 15px; }

@media (max-width: 920px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-orb { width: 170px; height: 170px; right: 30px; }
}

@media (max-width: 760px) {
    .app-header.topbar,
    .home-screen .main-content,
    .bottom-nav { width: min(100% - 28px, 540px); }

    .app-header.topbar {
        height: calc(64px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    .app-header.topbar .bot-button { height: 38px; padding-right: 11px; font-size: 12px; }
    .app-header.topbar .bot-button .header-bot-label { display: none; }
    .home-screen .main-content { padding: 24px 0 calc(116px + env(safe-area-inset-bottom, 0px)); }

    .hero-card { min-height: 360px; border-radius: 26px; padding: 30px 24px; }
    .hero-orb { width: 140px; height: 140px; right: 10px; bottom: 10px; top: auto; transform: none; opacity: .4; }
    .hero-card h1 { font-size: 44px; }
    .hero-description { font-size: 12px; margin: 14px 0 20px; max-width: none; }
    .hero-buttons { flex-direction: column; }
    .hero-button { width: 100%; height: 52px; font-size: 14px; }
    .ghost-button { height: 48px; font-size: 13px; }

    .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 20px; }
    .benefit-card { min-height: 140px; padding: 16px; border-radius: 19px; }
    .benefit-icon { width: 36px; height: 36px; margin-bottom: 14px; }
    .benefit-card h3 { font-size: 13px; }
    .benefit-card p { font-size: 11px; }
    .trust-strip { margin-top: 16px; padding: 14px 16px; }
    .trust-strip span:not(.online-status) { max-width: 180px; line-height: 1.4; }

    .bottom-nav { width: calc(100% - 20px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 20px; }
    .bottom-nav .nav-item {
        min-width: 0;
        flex: 1 1 0;
        flex-direction: column;
        gap: 5px;
        padding: 0 !important;
        white-space: normal;
    }
    .exchange-screen .exchange-form { padding: 18px; }
    .exchange-screen .exchange-amount-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .exchange-screen .exchange-amount-toggle {
        width: 100%;
        max-width: 100%;
    }
    .exchange-screen .exchange-toggle-btn { flex: 1; }
}

@media (max-width: 420px) {
    .app-header.topbar .header-support-btn { display: grid; }
}

@media (max-width: 380px) {
    .hero-card h1 { font-size: 38px; }
    .hero-button { font-size: 13px; }
    .benefits-grid { grid-template-columns: 1fr; }
}

/* Real tab content mapped to the same PROJECT component language. */
.history-container,
.info-page,
.roulette-page {
    width: min(100% - 40px, 1140px);
    max-width: 1140px;
    margin-inline: auto;
    padding: 32px 0 130px;
}

.history-header,
.info-hero,
.roulette-hero {
    max-width: 760px;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.history-header::before,
.info-hero::before,
.roulette-hero::before {
    display: block;
    margin-bottom: 8px;
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.history-header::before { content: 'История операций'; }
.info-hero::before { content: 'Полезная информация'; }
.roulette-hero::before { content: 'Программа лояльности'; }

.history-back { display: none !important; }
.history-title,
.info-hero-title,
.roulette-hero-title {
    margin: 0;
    color: #f5f7f6;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
}
.history-subtitle,
.info-hero-tagline,
.roulette-hero-tagline {
    margin: 6px 0 0;
    color: #8d9693;
    font-size: 13px;
}

.history-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
}
.history-order-card {
    padding: 16px 18px !important;
    border: 1px solid #242a29 !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #121816, #0d0f0f) !important;
    box-shadow: none !important;
}
.history-order-card__id,
.history-order-card__meta { color: #86908d; }
.history-order-card__crypto,
.history-order-card__amount { color: #f5f7f6; }
.history-empty {
    max-width: 760px;
    padding: 32px;
    border: 1px solid #27312d;
    border-radius: 24px;
    background: linear-gradient(145deg, #111716, #0b0f0e);
}
.history-empty-cta {
    border: 0;
    color: #04170d;
    background: linear-gradient(110deg, #18d873, var(--green-bright));
    box-shadow: 0 9px 30px rgba(28,238,124,.25);
}

.info-blocks { max-width: 760px; padding: 0; }
.info-blocks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.info-block-card {
    min-height: 180px;
    padding: 22px;
    border: 1px solid #242a29;
    border-radius: 20px;
    background: linear-gradient(145deg, #131816, #0d0f0f);
    box-shadow: none;
}
.info-block-card:hover { border-color: var(--green-dim); transform: translateY(-3px); }
.info-block-icon { color: var(--green); background-color: rgba(43,232,128,.08); }
.info-block-title { color: #f5f7f6; font-size: 15px; }
.info-block-desc { color: #8d9693; font-size: 13px; line-height: 1.6; }
.info-block-arrow { color: var(--green); }
.info-cta {
    max-width: 760px;
    margin-top: 24px;
    border: 1px solid #252e2b;
    border-radius: 19px;
    background: #0e1211;
}
.info-cta-btn {
    color: #04170d;
    background: linear-gradient(110deg, #18d873, var(--green-bright));
}

.roulette-cards {
    max-width: 760px;
    gap: 14px;
}
.roulette-card {
    border: 1px solid #242a29 !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #131816, #0d0f0f) !important;
    box-shadow: none !important;
}
.roulette-card:hover { border-color: var(--green-dim) !important; transform: translateY(-3px); }
.roulette-card-icon { color: var(--green); background-color: rgba(43,232,128,.08); }
.roulette-card-label { color: #f5f7f6; }
.roulette-card-cta { color: var(--green); }

.profile-page {
    background:
        radial-gradient(ellipse at 50% 0%, #102a22 0, transparent 42%),
        #080b0a;
}
.profile-wallet-card,
.profile-stat-card,
.profile-tab-card {
    border-color: #27312d !important;
    background: linear-gradient(145deg, #111716, #0b0f0e) !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    .history-container,
    .info-page,
    .roulette-page {
        width: min(100% - 28px, 540px);
        padding: 24px 0 calc(116px + env(safe-area-inset-bottom, 0px));
    }
    .history-title,
    .info-hero-title,
    .roulette-hero-title { font-size: 24px; }
    .info-blocks-grid { grid-template-columns: 1fr; }
    .history-order-card { padding: 14px 16px !important; }
}