@import url('https://lib.arvancloud.ir/vazir-font/33.003/Vazirmatn-font-face.css');


:root {
    /* Colors — Revolut X Dark Palette (pure black base) */
    --bg-color: #08080f;
    /* translucent: in-flow cards tint over the sunset/sea gradient instead of
       sitting as harsh opaque boxes */
    --paper-bg: rgba(16, 18, 32, 0.55);
    /* solid: overlays (sheets/modals/toasts) must stay readable over content */
    --overlay-bg: #13151f;
    --card-bg: rgba(22, 24, 36, 0.72);
    --card-border: rgba(255, 255, 255, 0.07);
    --glass-bg: rgba(255, 255, 255, 0.05);

    --primary: #0ea5e9;
    --primary-alt: #38bdf8;
    --primary-glow: rgba(14, 165, 233, 0.18);

    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);

    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);

    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.1);

    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    /* lifted from #52525b: must read on dark glass AND warm amber glass surfaces */
    --text-muted: rgba(255, 255, 255, 0.42);
    --text-white: #ffffff;
    --text: #f4f4f5;

    --gradient-gold: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

    /* Curvier radii (Revolut style) */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08) inset;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Aliases */
    --input-bg: rgba(255, 255, 255, 0.07);
    /* glass input surface */
    --border-color: var(--card-border);
}

/* UI/UX Utility Classes */
.hint-text {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.amount-positive {
    color: var(--success);
    font-weight: 600;
}

.amount-negative {
    color: var(--danger);
    font-weight: 600;
}

.section-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-glow);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}

.view-section-gap {
    margin-top: 24px;
}

.balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

/* ── Revolut-style circular action row ── */
.rev-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 20px;
}

.rev-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, transform 0.18s var(--ease-spring);
}

.rev-action-btn:active {
    opacity: 0.7;
    transform: scale(0.93);
}

.rev-action-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.18s var(--ease-spring);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rev-action-btn span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    letter-spacing: 0.1px;
}

/* ── Quick action chips ── */
.quick-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.quick-actions::-webkit-scrollbar {
    display: none;
}

/* Components */
.select-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    transition: var(--transition);
}

.select-input:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.10);
}

select option {
    background: #111;
    color: #fff;
}

.back-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.back-btn:active {
    transform: scale(0.9);
    background: var(--card-border);
}

.initials-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c 0%, #f59e0b 50%, #0ea5e9 100%);
    background-size: 200% 200%;
    animation: avatarGradient 6s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(233, 30, 140, 0.3);
    border: 3px solid var(--paper-bg);
    flex-shrink: 0;
}

@keyframes avatarGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Animations */
@keyframes copyFlash {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        color: var(--success);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.copy-success {
    animation: copyFlash 0.4s ease-out;
}

/* Skeleton Loaders */
@keyframes skeletonPulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s infinite linear;
    border-radius: 4px;
    display: inline-block;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-title {
    height: 24px;
    margin-bottom: 12px;
    width: 60%;
}

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    height: 100px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.skeleton-container {
    display: none;
}

.loading .skeleton-container {
    display: block;
}

.loading .real-content {
    display: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* fix: was `user-select: none` on *, which prevented selecting wallet
       addresses, referral links, etc. even when copy buttons fail.
       Now non-interactive elements are non-selectable, but inputs/code are fine. */
    user-select: none;
}

/* Allow text selection in form controls and copyable code blocks */
input,
textarea,
select,
code,
pre,
[data-selectable] {
    user-select: text;
    -webkit-user-select: text;
}

input,
button,
select,
textarea {
    font-family: inherit;
    color: inherit;
}

/* Keyboard accessibility: the global `outline: none` above hides focus for
   everyone — restore a visible ring only for keyboard navigation. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* html/body 100% chain: the only height pattern that is reliable across iOS
   Safari, Android Chrome, and Telegram/Bale webviews. -webkit-fill-available
   computed wrongly in some webviews, which broke inner scrolling entirely. */
html {
    height: 100%;
}

body {
    /* Mirrors the #app background scene so desktop side-strips match the app */
    background-color: #02040c;
    background-image:
        radial-gradient(ellipse 80% 40% at 50% 0%,
            rgba(190, 105, 30, 0.70) 0%,
            rgba(140, 75, 20, 0.40) 40%,
            transparent 100%),
        linear-gradient(to bottom,
            rgba(12, 18, 40, 0.95) 30%,
            rgba(6, 10, 22, 1) 65%,
            #02040c 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Background System — Revolut X atmosphere
   Positioned inside #app (the scroller) so it scrolls naturally with content.
   width: 100vw + left: 50% + translateX(-50%) breaks out of #app's max-width
   so the background fills the full viewport width on desktop too. */
.bg-effects {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 220vh;
    overflow: hidden;
    pointer-events: none;
    /* z-index: -1 keeps background behind all in-flow view content */
    z-index: -1;
}

.bg-warm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42vh;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            rgba(225, 165, 70, 0.60) 0%,
            rgba(205, 135, 50, 0.35) 45%,
            transparent 100%),
        linear-gradient(to bottom,
            rgba(190, 105, 30, 0.95) 0%,
            rgba(175, 110, 40, 0.82) 30%,
            rgba(150, 90, 40, 0.52) 62%,
            rgba(110, 70, 40, 0.15) 84%,
            transparent 100%);
}

.bg-cool {
    position: absolute;
    top: 36vh;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(5, 10, 24, 0.45) 12%,
            rgba(8, 14, 32, 0.88) 28%,
            rgba(4, 8, 18, 0.97) 52%,
            #02040c 100%);
}

/* ── Warm top: even orange-amber wash across the full width, golden center ── */
.glow-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 34vh;
    background:
        /* golden-tan brightening at top-center */
        radial-gradient(ellipse 75% 55% at 50% 0%,
            rgba(225, 165, 70, 0.55) 0%,
            rgba(205, 135, 50, 0.30) 45%,
            transparent 100%),
        /* even amber-orange wash, full width */
        linear-gradient(to bottom,
            rgba(190, 105, 30, 0.88) 0%,
            rgba(195, 125, 45, 0.72) 25%,
            rgba(175, 115, 55, 0.45) 55%,
            rgba(140, 95, 55, 0.18) 80%,
            transparent 100%);
    filter: blur(28px);
    /* static — only the blue sea moves */
}

/* ── Warm side wrap: orange-brown haze running down both edges ── */
.glow-2 {
    position: absolute;
    top: 10vh;
    left: 0;
    width: 100%;
    height: 44vh;
    background:
        radial-gradient(ellipse 30% 80% at 0% 20%,
            rgba(160, 95, 45, 0.40) 0%,
            rgba(120, 75, 45, 0.18) 50%,
            transparent 100%),
        radial-gradient(ellipse 30% 80% at 100% 20%,
            rgba(160, 95, 45, 0.40) 0%,
            rgba(120, 75, 45, 0.18) 50%,
            transparent 100%);
    filter: blur(40px);
}

/* ═══ MAIN SEA WAVE — the large blue mass that rises and falls ═══ */
.glow-3 {
    position: absolute;
    /* anchored just below the warm zone (42vh) so it rises INTO the amber on surge */
    top: 36vh;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 130%;
    height: 90vh;
    /* tall enough that bottom never shows sky */
    /* dome-shaped: radial anchored below the viewport so the top edge is CURVED —
       blue bulges up in the center, warm wraps down the sides (like the image).
       Narrower ellipse = stronger curve */
    background: radial-gradient(ellipse 70% 100% at 50% 105%,
            rgba(5, 10, 24, 1) 0%,
            rgba(16, 30, 58, 0.97) 38%,
            rgba(30, 52, 88, 0.93) 56%,
            rgba(50, 80, 118, 0.82) 72%,
            rgba(75, 110, 145, 0.55) 84%,
            /* steel blue rim */
            rgba(110, 140, 165, 0.25) 92%,
            /* milky haze at the curved crest */
            transparent 100%);
    filter: blur(18px);
    animation: seaRise 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* ── Milky pale-blue crest haze (the soft foggy boundary in the image) ── */
.glow-4 {
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 130%;
    height: 22vh;
    /* curved milky band hugging the dome crest — wider in the middle */
    background: radial-gradient(ellipse 55% 65% at 50% 75%,
            rgba(165, 185, 205, 0.32) 0%,
            rgba(130, 155, 180, 0.16) 55%,
            transparent 100%);
    filter: blur(30px);
    animation: seaRise 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    /* same animation as glow-3 so the haze travels with the wave crest */
}

/* ── Second slower wave for depth (offset phase) ── */
.glow-5 {
    position: absolute;
    top: 42vh;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 130%;
    height: 80vh;
    /* same curved dome, slightly wider and behind the main swell */
    background: radial-gradient(ellipse 88% 95% at 50% 108%,
            rgba(8, 14, 32, 0.78) 0%,
            rgba(24, 42, 72, 0.55) 55%,
            rgba(45, 72, 105, 0.28) 80%,
            transparent 100%);
    filter: blur(28px);
    /* 0.8s delay = natural wave depth behind the main swell */
    animation: seaRise 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.8s infinite;
}

/* Subtle film grain — gives depth to the gradient */
.bg-effects::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.018) 1px, transparent 0);
    background-size: 3px 3px;
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Subtle vignette darkens corners for depth */
.bg-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.50) 100%);
    pointer-events: none;
}


/* Balance Card — transparent: floats directly on the warm sunset backdrop */
.balance-card {
    background: transparent;
    border: none;
    border-radius: var(--radius-xl);
    padding: 28px 24px 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: none;
    position: relative;
}

.balance-card .label {
    /* white with soft shadow — readable on the bright amber zone */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 10px rgba(40, 20, 0, 0.45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.balance-card .amount {
    font-family: 'Lexend', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(40, 20, 0, 0.50);
    margin-bottom: 24px;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.balance-card .amount small {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin-right: 4px;
    letter-spacing: 0;
}

/* Action chips inside the transparent card: dark glass so the colored
   icons stay readable on the light warm background (!important needed
   to beat the per-button inline tint backgrounds) */
.balance-card .rev-action-icon {
    background: rgba(10, 12, 22, 0.40) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.14);
}

.balance-card .rev-action-btn span {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(40, 20, 0, 0.45);
}


/* Profile Styles */
/* ─── Revolut-style Profile ─── */

/* Atmospheric gradient behind hero (mimics Revolut's colorful aura) */
.profile-atmosphere {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 360px;
    background:
        radial-gradient(ellipse 50% 60% at 30% 20%, rgba(233, 30, 140, 0.32) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 75% 10%, rgba(245, 158, 11, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 60%, rgba(14, 165, 233, 0.20) 0%, transparent 70%);
    filter: blur(50px);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* Close X button (top-left, like Revolut) */
.profile-close-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.profile-close-btn:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.92);
}

#view-profile {
    position: relative;
}

.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 24px 24px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.profile-avatar-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 18px;
}

.profile-hero-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.10);
    object-fit: cover;
}

.profile-hero-initials {
    width: 100px !important;
    height: 100px !important;
    font-size: 34px !important;
    border: 3px solid rgba(255, 255, 255, 0.10) !important;
    letter-spacing: 0 !important;
    box-shadow: 0 0 40px rgba(233, 30, 140, 0.35) !important;
}

.profile-avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    background: var(--text-primary);
    color: var(--bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 3px solid var(--bg-color);
}

.profile-hero-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.profile-hero-username {
    font-size: 12px;
    color: var(--text-muted);
    direction: ltr;
    min-height: 16px;
}

.profile-kyc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Revolut-style grouped menu (clean cards, separator-divided) */
.profile-menu-group {
    margin: 0 0 14px;
    background: rgba(28, 28, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    z-index: 1;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease;
    text-align: right;
    direction: rtl;
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-item:active {
    background: rgba(255, 255, 255, 0.05);
}

.pmi-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

/* Revolut light/uniform icon style (subtle white circle with mono icon) */
.pmi-icon.pmi-icon-light {
    background: transparent;
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 0;
}

/* Notification-style red badge (e.g. for KYC pending count) */
.pmi-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Inline state label (e.g. "Active" for sound) */
.pmi-state-text {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.pmi-text {
    flex: 1;
    min-width: 0;
}

.pmi-text span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pmi-text small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pmi-arrow {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pmi-detail-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--card-border);
}

.pmi-detail-row i {
    color: var(--text-muted);
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Keep legacy profile-actions for compatibility */
.profile-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--card-border);
}

.detail-row i {
    color: var(--primary);
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    mix-blend-mode: soft-light;
}

.grid-overlay {
    display: none;
    /* removed per user request */
}

/* Sea wave: blue mass rises from bottom toward top, then recedes — like a tide */
@keyframes seaRise {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    /* surge up fast */
    40% {
        transform: translateX(-50%) translateY(-14vh);
    }

    /* brief pause at crest */
    55% {
        transform: translateX(-50%) translateY(-14vh);
    }

    /* slow recession */
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Accessibility: reduce motion for users who have it enabled ───────────────
   Also benefits low-end Android phones where blur filters are GPU-expensive.  */
@media (prefers-reduced-motion: reduce) {

    .glow-3,
    .glow-4,
    .glow-5 {
        animation: none;
        transform: translateX(-50%) translateY(-7vh);
        /* resting at mid-point */
    }

    .noise-overlay {
        display: none;
    }

    /* Skip transitions that make the UI feel sluggish under reduced-motion */
    * {
        transition: none !important;
        animation-duration: 0.001ms !important;
    }

    /* Keep skeleton pulse readable — just make it static */
    .skeleton {
        background: rgba(255, 255, 255, 0.06) !important;
        animation: none !important;
    }
}

#app {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
    min-height: 0;
    /* #app is the scroll container so .bg-effects (its first child) scrolls
       naturally with content AND covers the full app including the header */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#app::-webkit-scrollbar {
    display: none;
}

/* Glassmorphism Utility */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
}

/* Loader */
.screen-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--glass-bg);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
    box-shadow: 0 0 20px var(--primary-glow);
}

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

/* Header — pure blur, no tint, no border, edges fade out */
.main-header {
    padding: 10px 16px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
    will-change: transform;
    /* Blur is applied via ::before so we can mask the edges */
}

/* Fading blur layer — full blur in centre, fades on left/right/bottom */
.main-header::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    -webkit-mask-image: linear-gradient(to left,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%),
        linear-gradient(to top,
            transparent 0%,
            black 30%);
    -webkit-mask-composite: intersect;
    mask-image: linear-gradient(to left,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%),
        linear-gradient(to top,
            transparent 0%,
            black 30%);
    mask-composite: intersect;
    pointer-events: none;
    z-index: -1;
}

.main-header.header-hidden {
    transform: translateY(-100%);
}

.header-profile {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    transition: transform 0.18s ease;
}

.header-profile:active {
    transform: scale(0.92);
}

.header-profile .initials-avatar {
    width: 50px;
    height: 50px;
    font-size: 17px;
    border-radius: 50%;
    border-width: 1.5px;
    box-shadow: 0 0 12px rgba(233, 30, 140, 0.25);
    letter-spacing: 0;
}

.header-profile img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Header search — Revolut pill */
.header-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    padding: 0 16px;
    height: 50px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-search:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.10);
}

.header-search:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

.header-search-icon {
    font-size: 13px;
    color: var(--text-white);
    flex-shrink: 0;
}

.header-search-placeholder {
    font-size: 13px;
    color: var(--text-white);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Icon buttons in header — Revolut style (subtle, no border) */
.main-header .icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.main-header .icon-btn:hover {
    background: rgba(255, 255, 255, 0.10);
}

.main-header .icon-btn:active {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(0.92);
}

/* Keep user-info for any legacy references */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Header status indicator (online dot) */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--success);
    font-weight: 500;
    text-transform: uppercase;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

.icon-btn {
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
}

.icon-btn:active {
    transform: scale(0.9);
    background: var(--card-border);
}

.icon-btn:hover {
    background: var(--card-border);
    color: var(--primary);
}

/* Notification bell wrapper + badge */
.notif-btn-wrap {
    position: relative;
}

.notif-alarm-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.22);
    color: var(--primary);
    flex-shrink: 0;
}

.notif-alarm-btn:hover {
    background: rgba(14, 165, 233, 0.18);
}

.notif-alarm-btn:active {
    background: rgba(14, 165, 233, 0.24);
    transform: scale(0.92);
}

.notif-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Lexend', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-color);
    pointer-events: none;
    line-height: 1;
}

/* Notification list wrapper */
.notif-list-wrap {
    min-height: 80px;
    margin-top: 4px;
}

/* Section heading inside notif panel */
.notif-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 4px 6px;
    margin-top: 4px;
}

/* Single notification row */
.notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    border-bottom: 1px solid var(--card-border);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:active {
    background: var(--glass-bg);
}

.notif-item.unread {
    background: rgba(14, 165, 233, 0.04);
}

/* Icon circle */
.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.notif-icon.ticket {
    background: rgba(14, 165, 233, 0.15);
    color: var(--primary);
}

.notif-icon.buy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.notif-icon.sell {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.notif-icon.default {
    background: var(--glass-bg);
    color: var(--text-secondary);
}

/* Text block */
.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 3px;
    overflow: hidden;
}

.notif-title>span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-amt {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.notif-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.notif-meta .success {
    color: var(--success);
}

.notif-meta .danger {
    color: var(--danger);
}

/* Unread dot */
.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

/* Mark-all button */
.notif-mark-all-btn {
    font-size: 11px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: var(--transition);
}

.notif-mark-all-btn:active {
    background: var(--primary-glow);
}

/* Empty / loading state */
.notif-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
}

.notif-empty i {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Main Container */
#main-container {
    /* Content wrapper only — #app is now the scroller */
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 12px 16px 120px;
}

.view {
    display: none;
}

.view.active {
    display: block;
    position: relative;
    z-index: 1;
    animation: viewEnter 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.view-slide-in.active {
    animation: viewSlideIn 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.view-slide-up.active {
    animation: viewSlideUpRich 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.view-zoom-in.active {
    animation: viewZoomIn 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.view-fade-up.active {
    animation: viewFadeUp 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewSlideUpRich {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes viewZoomIn {
    from {
        opacity: 0;
        transform: scale(1.04);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes viewFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes viewEnter {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes viewSlideIn {
    from {
        opacity: 0;
        transform: translateX(32px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.balance-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.action-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px 12px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s ease, transform 0.15s var(--ease-spring);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.action-btn i {
    font-size: 20px;
    color: var(--primary);
}

.action-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.04);
}

/* Icon Circle - used in home action buttons */
.icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
}

/* Quick Market */
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title h3 {
    font-size: 17px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
    color: var(--text-primary);
}

.section-title a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.section-title a:hover {
    color: var(--text-primary);
}

.ticket-title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 20px;
}

.ticket-title h3 {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
    padding-right: 1rem;
}

.market-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.market-item:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.04);
}

@media (hover: hover) {
    .market-item:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.10);
    }
}

.coin-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coin-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coin-name {
    min-width: 0;
}

.coin-name h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coin-name span {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.coin-price {
    text-align: left;
}

.coin-price h4 {
    font-family: 'Lexend', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
}

.price-change {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
}

.price-change.up {
    color: var(--success);
    background: rgba(16, 185, 129, 0.12);
}

.price-change.down {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.12);
}

/* Dual Price Display (IRT + USD) */
.price-usd {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    font-family: 'Lexend', sans-serif;
    margin-top: 2px;
    direction: ltr;
    text-align: inherit;
}

.price-irt {
    display: block;
    font-family: 'Lexend', sans-serif;
}

.price-dual {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Dual price in balance card */
.balance-card .amount .price-irt {
    display: block;
    font-size: inherit;
}

.balance-card .amount .price-usd {
    font-size: 16px;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    margin-top: 6px;
}

/* Dual price in trade info rows */
.trade-info .price-irt {
    display: inline;
    font-size: inherit;
}

.trade-info .price-usd {
    display: inline;
    margin-top: 0;
    margin-right: 6px;
    font-size: 11px;
}

/* Stats total balance dual price */
#stats-total-balance .price-irt {
    display: block;
}

#stats-total-balance .price-usd {
    font-size: 13px;
    margin-top: 4px;
}

/* Referral earnings dual price */
#ref-earnings .price-usd {
    font-size: 12px;
    margin-top: 4px;
}

/* Trade live price dual display */
.price-live .price-irt {
    display: inline;
    font-size: inherit;
}

.price-live .price-usd {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Trade Chart ─────────────────────────────────────────────────────────── */
.trade-chart-section {
    background: var(--paper-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    margin-bottom: 16px;
    overflow: hidden;
}

.chart-tf-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--card-border);
}

.chart-tf-btn {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: var(--transition);
    font-family: 'Lexend', sans-serif;
}

.chart-tf-btn:active {
    transform: scale(0.95);
}

.chart-tf-btn.active {
    background: var(--primary-glow);
    color: var(--primary);
    border-color: rgba(14, 165, 233, 0.3);
}

.chart-coin-badge {
    margin-right: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: 'Lexend', sans-serif;
    letter-spacing: 0.5px;
}

.chart-canvas-wrap {
    position: relative;
    height: 180px;
    padding: 8px 4px 0;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-bg);
    z-index: 2;
}

.chart-skeleton {
    width: 90%;
}

.sk-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
}

.sk-wave span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: var(--card-border);
    animation: sk-wave-anim 1.4s ease-in-out infinite;
}

.sk-wave span:nth-child(1) {
    height: 40%;
    animation-delay: 0s;
}

.sk-wave span:nth-child(2) {
    height: 65%;
    animation-delay: 0.1s;
}

.sk-wave span:nth-child(3) {
    height: 50%;
    animation-delay: 0.2s;
}

.sk-wave span:nth-child(4) {
    height: 80%;
    animation-delay: 0.3s;
}

.sk-wave span:nth-child(5) {
    height: 55%;
    animation-delay: 0.4s;
}

.sk-wave span:nth-child(6) {
    height: 90%;
    animation-delay: 0.5s;
}

.sk-wave span:nth-child(7) {
    height: 70%;
    animation-delay: 0.6s;
}

.sk-wave span:nth-child(8) {
    height: 85%;
    animation-delay: 0.7s;
}

.sk-wave span:nth-child(9) {
    height: 60%;
    animation-delay: 0.8s;
}

.sk-wave span:nth-child(10) {
    height: 75%;
    animation-delay: 0.9s;
}

.sk-wave span:nth-child(11) {
    height: 45%;
    animation-delay: 1.0s;
}

.sk-wave span:nth-child(12) {
    height: 55%;
    animation-delay: 1.1s;
}

@keyframes sk-wave-anim {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.chart-no-data {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.chart-no-data i {
    font-size: 28px;
}

.chart-bottom-stats {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--card-border);
    gap: 0;
}

.chart-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.cs-lbl {
    font-size: 10px;
    color: var(--text-muted);
}

.cs-val {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
    color: var(--text-primary);
}

.cs-val.success {
    color: var(--success);
}

.cs-val.danger {
    color: var(--danger);
}

.chart-stat-sep {
    width: 1px;
    height: 28px;
    background: var(--card-border);
}

/* Chart type toggle (Line / Candle) */
.chart-type-group {
    display: flex;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    margin-right: 2px;
}

.chart-type-btn {
    padding: 5px 9px;
    font-size: 11px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    transition: var(--transition);
    line-height: 1;
}

.chart-type-btn+.chart-type-btn {
    border-right: 1px solid var(--card-border);
}

.chart-type-btn:active {
    transform: scale(0.9);
}

.chart-type-btn.active {
    background: var(--primary-glow);
    color: var(--primary);
}

/* Candlestick hover tooltip */
.chart-candle-tooltip {
    position: absolute;
    background: rgba(10, 10, 16, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11px;
    z-index: 10;
    min-width: 136px;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.ctt-time {
    color: var(--text-muted);
    font-size: 9.5px;
    text-align: center;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--card-border);
}

.ctt-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.ctt-row span:first-child {
    color: var(--text-muted);
}

.ctt-row span:last-child {
    font-family: 'Lexend', monospace;
    font-weight: 600;
}

/* Trade View */
.trade-container {
    padding-top: 10px;
}

.trade-header {
    background: var(--paper-bg);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coin-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-bg);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    border: 1px solid var(--card-border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: var(--transition);
}

.coin-selector:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
}

.trade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 4px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    gap: 4px;
}

.tab-btn {
    padding: 8px 6px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: opacity 0.14s ease, transform 0.14s ease, background 0.18s ease, color 0.18s ease;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.tab-btn .tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.tab-btn:not(.active):active {
    opacity: 0.7;
    transform: scale(0.96);
}

.tab-btn.active.green {
    color: #ffffff;
    background: var(--success);
    border-color: transparent;
    box-shadow: none;
}

.tab-btn.active.red {
    color: #ffffff;
    background: var(--danger);
    border-color: transparent;
    box-shadow: none;
}

.tab-btn.active .tab-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: white !important;
}

.input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
}

.input-label-row label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.input-group {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
    position: relative;
    transition: var(--transition);
}

.input-group:focus-within {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.10);
}

.input-group input {
    background: transparent;
    border: none;
    width: 100%;
    color: white;
    -webkit-text-fill-color: white;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    /* keep typed value clear of the unit label pinned at the left edge */
    padding-left: 64px;
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.30);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.30);
    opacity: 1;
}

.unit {
    position: absolute;
    left: 16px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.trade-info {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 16px 0;
}

.trade-info .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.trade-info .row:last-child {
    margin-bottom: 0;
}

.trade-info .row span:first-child {
    color: var(--text-secondary);
}

.trade-info .row span:last-child {
    color: var(--text-primary);
    font-weight: 600;
}

.main-btn {
    width: 100%;
    border-radius: var(--radius-pill);
    padding: 17px 20px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.14s ease, transform 0.14s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    letter-spacing: 0.2px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}

/* Revolut X: primary = white bg + black text */
.main-btn.primary {
    background: #ffffff;
    color: #000000;
}

/* Buy = solid green */
.main-btn.green {
    background: var(--success);
    color: #ffffff;
}

/* Sell = solid red */
.main-btn.red {
    background: var(--danger);
    color: #ffffff;
}

/* Ghost / secondary variant */
.main-btn.secondary {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
}

/* Danger alias → same as red */
.main-btn.danger {
    background: var(--danger);
    color: #ffffff;
}

.main-btn:active {
    opacity: 0.80;
    transform: scale(0.97);
}

.main-btn:disabled,
.main-btn.loading {
    opacity: 0.40;
    pointer-events: none;
}

.main-btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    margin-left: 8px;
}

.main-btn.green.loading::after,
.main-btn.red.loading::after,
.main-btn.danger.loading::after,
.main-btn.secondary.loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}


/* ── Bottom Navigation — Authentic iOS 26 Liquid Glass ──────── */
/* Apple "Liquid Glass" material approximated with layered effects:
   1) backdrop-filter: blur + saturate + brightness (lens effect)
   2) Light refraction gradient on the body
   3) Specular highlight at the top edge (light reflection)
   4) Inset shadows for depth (glass thickness)
   5) Outer drop shadow (lift from background)
   6) ::before / ::after pseudo-layers for refractive glow */

.bottom-nav {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 440px;


    /* Lens / refraction effect (Apple "Liquid Glass" core) */
    backdrop-filter: blur(20px) saturate(180%) brightness(1.15) contrast(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.15) contrast(1.05);

    border-radius: 36px;

    /* Edge "rim" — thin bright border like glass edge */
    border: 1px solid rgba(255, 255, 255, 0.14);

    /* Multi-layer shadow + inner highlights for thickness */
    box-shadow:
        /* Outer lift shadow */
        0 16px 50px rgba(0, 0, 0, 0.55),
        0 6px 20px rgba(0, 0, 0, 0.35),
        /* Inner top highlight (light from above) */
        0 1.5px 0 rgba(255, 255, 255, 0.22) inset,
        /* Inner bottom shadow (depth) */
        0 -1.5px 0 rgba(0, 0, 0, 0.35) inset,
        /* Subtle inner glow (refraction) */
        0 0 0 0.5px rgba(255, 255, 255, 0.05) inset;

    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 8px;
    z-index: 1000;
    transition: transform 0.45s var(--ease-out), opacity 0.3s ease;
    isolation: isolate;
    overflow: hidden;
}

/* Top specular highlight — the light reflection on the glass surface */
.bottom-nav::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.55) 35%,
            rgba(255, 255, 255, 0.70) 50%,
            rgba(255, 255, 255, 0.55) 65%,
            transparent 100%);
    pointer-events: none;
    z-index: 3;
    border-radius: 999px;
    filter: blur(0.4px);
}

/* Refractive interior gradient — gives that "lens" feel */
.bottom-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Top sheen — like light bending through glass */
        radial-gradient(ellipse 70% 55% at 50% 0%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 35%,
            transparent 75%),
        /* Side highlights — subtle */
        radial-gradient(ellipse 30% 100% at 0% 50%,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 70%),
        radial-gradient(ellipse 30% 100% at 100% 50%,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 70%),
        /* Bottom darkening — depth */
        radial-gradient(ellipse 80% 50% at 50% 100%,
            rgba(0, 0, 0, 0.18) 0%,
            transparent 65%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* iOS 26 Liquid Glass — interactive press response (subtle warp on tap) */
.bottom-nav:active {
    transform: translateX(-50%) scale(0.997);
}

/* True glass refraction layer using SVG turbulence + displacement.
   Behind the content, distorts the backdrop like light through glass. */
.bottom-nav-refraction {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    backdrop-filter: url(#liquid-glass-distort) blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0.55;
}

/* Ensure nav items stay above refraction layer */
.bottom-nav .nav-item {
    position: relative;
    z-index: 3;
}

/* ─── Revolut Analytics View ─── */
.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 4px 0;
}

.analytics-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.analytics-period-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 4px;
}

.apt-btn {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.apt-btn.active {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.apt-btn:not(.active):active {
    background: rgba(255, 255, 255, 0.04);
}

.analytics-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 10px;
    backdrop-filter: blur(16px);
}

.analytics-card-total {
    padding: 20px 18px 10px;
}

.analytics-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.analytics-card-half {
    margin-bottom: 0;
}

.ac-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.ac-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Lexend', sans-serif;
}

.ac-value-md {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Lexend', sans-serif;
    margin-bottom: 6px;
}

.ac-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.6;
}

.ac-sparkline {
    margin-top: 12px;
    height: 60px;
    position: relative;
}

.analytics-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 16px 0 10px;
}

/* Pull-to-refresh */
.ptr-zone {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.ptr-zone.ptr-pulling,
.ptr-zone.ptr-refreshing {
    height: 58px;
}

.ptr-spinner-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 50%;
}

.ptr-icon {
    font-size: 17px;
    color: var(--primary);
    display: block;
    transition: transform 0.15s ease;
}

.ptr-zone.ptr-refreshing .ptr-icon {
    animation: spin 0.8s linear infinite;
}

/* Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    min-height: 300px;
}

.empty-state i {
    opacity: 0.3;
}

.empty-state p {
    max-width: 280px;
}

.empty-state .main-btn {
    margin: 0 auto;
}

/* Input Validation */
.input-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 6px;
    min-height: 18px;
    display: block;
}

.input-group.error input,
.input-group.error select {
    border-color: var(--danger);
}

.input-group.success input,
.input-group.success select {
    border-color: var(--success);
}

.input-group.error {
    animation: shake 0.3s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}


.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    flex: 1;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s var(--ease-out);
    user-select: none;
    position: relative;
    z-index: 3;
}

.nav-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 16px 8px;
    border-radius: 999px;
    position: relative;
    transition: background 0.3s var(--ease-spring),
        transform 0.3s var(--ease-spring),
        box-shadow 0.3s var(--ease-out);
    min-width: 58px;
}

.nav-item i {
    font-size: 18px;
    transition: transform 0.3s var(--ease-spring), filter 0.25s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.nav-item span {
    font-size: 10px;
    font-weight: 600;
    transition: color 0.25s ease;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.nav-item.active {
    color: #ffffff;
}

.nav-item.active .nav-icon-wrap {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.10) 50%,
            rgba(255, 255, 255, 0.06) 100%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 1.5px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav-item.active i {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.45));
}

.nav-item:not(.active):active .nav-icon-wrap {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(0.92);
}

/* Legacy FAB — kept for CSS parse compatibility only */
.nav-item.center .fab {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0B0E11;
    font-size: 24px;
    transform: translateY(-20px);
    box-shadow: 0 8px 16px var(--primary-glow);
    transition: var(--transition);
}

.nav-item.center:active .fab {
    transform: translateY(-20px) scale(0.9);
}

/* Modal Sheet */
.modal-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-sheet.active {
    display: flex;
    opacity: 1;
}

.sheet-content {
    background: var(--overlay-bg);
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-xl);
    padding: 24px;
    max-height: 85vh;
    overflow-y: auto;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--card-border);
}

.modal-sheet.active .sheet-content {
    transform: scale(1);
    opacity: 1;
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.sheet-header span {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
}

.search-box {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 20px;
}

.search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.10);
}

.search-box i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    transition: var(--transition);
}

.search-box:focus-within i {
    color: var(--primary) !important;
}

.search-box input {
    background: transparent;
    border: none;
    color: white;
    /* iOS WebKit ignores `color` on inputs — must set fill-color explicitly */
    -webkit-text-fill-color: white;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

.search-box .clear-search {
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    display: none;
}

.search-box.has-text .clear-search {
    display: block;
}

/* Wallet View */
.asset-item {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asset-balance {
    text-align: left;
}

.asset-balance .main-val {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.asset-balance .sub-val {
    font-size: 12px;
    color: var(--text-secondary);
}


.menu-item {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    padding: 16px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.menu-item:active {
    transform: scale(0.98);
    background: var(--card-bg);
}

.menu-item .m-icon {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
}

/* History Filters */
.history-filters {
    position: sticky;
    top: 0;
    z-index: 10;
    /* faint tint keeps filter labels readable when content scrolls underneath */
    background: rgba(8, 8, 15, 0.35);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding-bottom: 1px;
}

.filter-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.filter-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.filter-tab:hover:not(.active) {
    background: var(--paper-bg);
    color: var(--text-primary);
}

/* Enhanced Balance Actions */

/* Quick Chips */
.quick-chip {
    /* dark glass: readable on the bright warm zone near the top of home */
    background: rgba(10, 12, 22, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.18s ease, transform 0.15s var(--ease-spring);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.quick-chip i {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.quick-chip:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.95);
}

/* KYC Styles */
.kyc-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 16px;
    position: relative;
}

.kyc-progress .step {
    width: 32px;
    height: 32px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    z-index: 2;
    transition: var(--transition);
}

.kyc-progress .step.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 0 16px var(--primary-glow);
    border-color: var(--primary);
}

.kyc-progress .line {
    flex: 1;
    height: 2px;
    background: var(--card-border);
    margin: 0 8px;
    position: relative;
    z-index: 1;
}

.kyc-step {
    display: none;
    animation: viewEnter 0.3s ease;
}

.kyc-step.active {
    display: block;
}

/* Referral Styles */
.referral-hero {
    background: var(--gradient-gold);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.referral-hero i {
    color: white !important;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.referral-hero p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
}

.referral-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.stat-card span {
    font-size: 11px;
    color: var(--text-secondary);
}

.stat-card h2 {
    font-family: 'Lexend', sans-serif;
    font-size: 24px;
    color: var(--text-primary);
    margin: 8px 0;
}

.copy-box {
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.copy-box:active {
    background: var(--card-bg);
    transform: scale(0.98);
}

/* Stats View Styles */
.stats-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.pie-chart {
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.center-hole {
    position: absolute;
    inset: 16px;
    background: var(--bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.chart-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.performance-item {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.performance-item .coin {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.badge.success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* History View Styles */
.history-item {
    background: var(--paper-bg);
    border-bottom: 1px solid var(--card-border);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.history-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.history-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.history-item:active {
    background: var(--card-bg);
}

.h-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-left: 12px;
}

.h-icon.buy {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.h-icon.sell {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.h-icon.deposit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.h-icon.withdraw {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.h-details span {
    display: block;
}

.h-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.h-date {
    font-size: 11px;
    color: var(--text-muted);
}

.h-amount {
    text-align: left;
}

.h-val {
    font-family: 'Lexend';
    font-size: 14px;
    font-weight: 600;
}

/* Icon Box - used in history items */
.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-box.success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.icon-box.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.icon-box.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.icon-box.primary {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
}

/* History Detail Modal */
.hd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 20px;
}

.hd-hero .hd-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 28px;
}

.hd-type {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
}

.hd-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--card-bg);
}

.hd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border);
    gap: 12px;
}

.hd-row:last-child {
    border-bottom: none;
}

.hd-row-ref {
    border-top: 1px solid var(--card-border);
    margin-bottom: 4px;
}

.hd-label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.hd-val {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    direction: ltr;
}

.hd-copyable {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hd-mono-val {
    font-size: 12px;
    font-family: monospace;
    color: var(--text);
    direction: ltr;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-ref-val {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    color: var(--text);
    direction: ltr;
}

.hd-copy-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

.hd-copy-btn:active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.history-item {
    cursor: pointer;
}

/* Auth Modal Steps */
.auth-step {
    animation: viewEnter 0.3s ease;
}

/* Loader fade transition */
#loader {
    transition: opacity 0.3s ease;
}

.h-status {
    font-size: 10px;
    margin-top: 2px;
}

/* KYC progress completed step */
.kyc-progress .step.completed {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

/* Wallet balance hidden state */
.balance-hidden {
    filter: blur(8px);
    user-select: none;
}

/* News View */
.news-item {
    background: var(--paper-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    transition: var(--transition);
}

.news-item:active {
    transform: scale(0.99);
}

.news-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.news-item-body {
    padding: 16px;
}

.news-item-body h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.news-item-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.news-item-body .news-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* Deposit/Withdraw section labels */
.section-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 0 4px;
    display: block;
}

/* ─── Select Input ─── */
.select-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    padding: 4px 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2352525b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0 center;
}

/* Fix native option elements on dark backgrounds (Safari/iOS) */
select option {
    background: #18181b;
    color: #f4f4f5;
}

/* ─── Back Button ─── */
.back-btn {
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: var(--transition);
    cursor: pointer;
    flex-shrink: 0;
}

.back-btn:active {
    transform: scale(0.9);
    background: var(--card-border);
}


/* ─── Utility: Hint Text ─── */
.hint-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ─── Utility: Section gap ─── */
.mt-section {
    margin-top: 32px;
}

/* ─── Utility: Amount colors for history ─── */
.amount-positive {
    color: var(--success);
}

.amount-negative {
    color: var(--danger);
}

.amount-neutral {
    color: var(--primary);
}

/* ─── Copy flash animation ─── */
@keyframes copyFlash {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        color: var(--success);
    }

    100% {
        transform: scale(1);
    }
}

.copy-flash {
    animation: copyFlash 0.4s ease forwards;
}

/* ─── Hover improvements ─── */
@media (hover: hover) {
    .action-btn:hover {
        border-color: var(--primary);
        background: rgba(14, 165, 233, 0.07);
    }

    .market-item:hover {
        border-color: rgba(255, 255, 255, 0.12);
        background: #1a1a1f;
    }

    .menu-item:hover {
        background: var(--card-bg);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .main-btn.green:hover {
        opacity: 0.90;
    }

    .main-btn.red:hover {
        opacity: 0.90;
    }

    .main-btn.primary:hover {
        opacity: 0.90;
    }

    .quick-chip:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(14, 165, 233, 0.3);
        color: var(--text-primary);
    }
}

/* ─── Balance eye toggle on home card ─── */
.balance-eye-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.balance-eye-btn:hover,
.balance-eye-btn:active {
    color: var(--text-primary);
}

/* ─── Home balance card top row ─── */
.balance-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.balance-card-header .label {
    margin-bottom: 0;
}

/* ─── Nav center label ─── */
.nav-item.center {
    gap: 0;
}

.nav-item.center .nav-center-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 6px;
}

.nav-item.center.active .nav-center-label {
    color: var(--primary);
}

/* ─── Toast Notifications ─── */
.toast-container {
    position: fixed;
    bottom: 100px;
    /* Above floating nav bar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
    width: 90%;
    max-width: 400px;
}

.toast {
    background: var(--overlay-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.error {
    border-left: 4px solid var(--danger);
}

.toast.info {
    border-left: 4px solid var(--primary);
}

.toast.warning {
    border-left: 4px solid var(--warning);
}

.toast i {
    font-size: 16px;
}

.toast.success i {
    color: var(--success);
}

.toast.error i {
    color: var(--danger);
}

.toast.info i {
    color: var(--primary);
}

.toast.warning i {
    color: var(--warning);
}

/* ─── Refresh Button Animation ─── */
@keyframes spin {
    100% {
        transform: rotate(-360deg);
    }
}

.fa-spin-fast {
    animation: spin 0.6s linear infinite;
}

/* ─── Empty States ─── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--card-border);
}

.empty-state h4 {
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 16px;
}

.empty-state p {
    font-size: 12px;
    line-height: 1.5;
}

#app-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.app-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.app-confirm-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 320px;
    background: var(--overlay-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: confirmPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirmPop {
    from {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.app-confirm-message {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.8;
    font-family: 'Vazirmatn', sans-serif;
    white-space: pre-line;
}

.app-confirm-actions {
    display: flex;
    gap: 10px;
}

.app-confirm-actions button {
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 13px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
    transition: var(--transition);
}

.app-confirm-actions button:active {
    transform: scale(0.96);
}

.app-confirm-cancel {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--card-border) !important;
}

.app-confirm-cancel:hover {
    background: var(--card-border);
}

.app-confirm-ok {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.app-confirm-ok:hover {
    filter: brightness(1.1);
}

/* ========== PWA INSTALL BOTTOM SHEET ========== */
.pwa-install-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4000000000;
    display: none;
    animation: pwaSlideUp 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    direction: rtl;
}

@keyframes pwaSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pwa-sheet-container {
    background: var(--overlay-bg);
    border-radius: 32px 32px 0 0;
    border-top: 1px solid var(--card-border);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

/* drag handle */
.pwa-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
}

.pwa-drag-handle span {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 40px;
    opacity: 0.5;
}

/* header */
.pwa-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 20px 12px;
}

.pwa-icon-box {
    width: 44px;
    height: 44px;
    background: var(--primary-glow);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.pwa-icon-box i {
    font-size: 24px;
}

.pwa-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

/* scroll content */
.pwa-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 20px;
    max-height: calc(85vh - 120px);
}

.pwa-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* tab slider (similar to sample) */
.pwa-tabs {
    position: relative;
    background: var(--bg-color);
    border-radius: 60px;
    display: flex;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
}

.pwa-tab-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--primary);
    border-radius: 40px;
    transition: transform 0.25s ease;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.pwa-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 40px;
}

.pwa-tab-btn.active-tab {
    color: white;
}

/* installation steps */
.pwa-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.step-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.step-badge {
    width: 28px;
    height: 28px;
    background: var(--primary-glow);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--primary);
    flex-shrink: 0;
}

.step-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.step-text strong {
    color: var(--primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.step-text i {
    font-size: 0.9rem;
}

/* I understand button */
.pwa-understood-btn {
    width: 100%;
    background: var(--primary);
    border: none;
    color: white;
    font-weight: 700;
    padding: 14px;
    border-radius: 60px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    margin-bottom: 12px;
    font-family: inherit;
    box-shadow: 0 6px 14px var(--primary-glow);
}

.pwa-understood-btn:active {
    transform: scale(0.97);
    background: var(--primary-alt);
}

/* responsive for mobile */
@media (min-width: 500px) {
    .pwa-install-sheet {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 460px;
        border-radius: 32px 32px 0 0;
    }

    .pwa-sheet-container {
        border-radius: 28px 28px 0 0;
    }
}

/* inline icons */
.step-text i.fa,
.step-text i.far,
.step-text i.fas {
    margin: 0 2px;
}

/* Selfie preview styles */
#selfie-preview {
    position: relative;
}

#selfie-img {
    border: 2px solid var(--card-border);
    object-fit: cover;
}

/* Update KYC progress for 5 steps */
.kyc-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 10px;
}

.kyc-progress .step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 2;
}

.kyc-progress .line {
    flex: 1;
    height: 2px;
    background: var(--card-border);
}

.kyc-progress .step.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.kyc-progress .step.completed {
    border-color: var(--success);
    background: var(--success);
    color: white;
}

.kyc-progress .step.completed i {
    font-size: 14px;
}

/* Card Entry Modal Styles */
.card-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-modal-backdrop.show {
    opacity: 1;
}

.card-modal-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--overlay-bg);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid var(--card-border);
    padding: 24px;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.1, 0.76, 0.55, 0.94);
    direction: rtl;
    max-width: 480px;
    margin: 0 auto;
}

.card-modal-container.show {
    transform: translateY(0);
}

/* Card Mockup */
.card-mockup {
    width: 100%;
    aspect-ratio: 1.586/1;
    background: linear-gradient(135deg, #1e1e24 0%, #111115 100%);
    border-radius: 18px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.card-mockup::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 60%);
}

.card-mockup-chip {
    width: 42px;
    height: 32px;
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    border-radius: 6px;
    margin-bottom: 32px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.card-mockup-chip::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.card-mockup-number {
    font-family: 'Lexend', monospace;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 28px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
    direction: ltr;
}

.card-mockup-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-mockup-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.card-mockup-logo {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
}

/* Card Input and Actions */
.card-input-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
    padding-right: 4px;
}

.card-input-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.card-input-field {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 20px;
    text-align: center;
    font-family: 'Lexend', monospace;
    letter-spacing: 2px;
    transition: var(--transition);
    box-sizing: border-box;
    direction: ltr;
}

.card-input-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}

/* Steps Screen */
.card-steps-container {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
}

.card-step-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.card-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.card-step-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Step active/success/failed states */
.card-step-row.active {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.card-step-row.active .card-step-icon {
    border-color: var(--primary);
    color: var(--primary);
}

.card-step-row.success {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.04);
}

.card-step-row.success .card-step-icon {
    border-color: var(--success);
    background: var(--success);
    color: white;
}

.card-step-row.success .card-step-text {
    color: var(--text-primary);
}

.card-step-row.failed {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.04);
}

.card-step-row.failed .card-step-icon {
    border-color: var(--danger);
    background: var(--danger);
    color: white;
}

.card-step-row.failed .card-step-text {
    color: var(--danger);
}

.card-error-msg {
    color: var(--danger);
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    line-height: 1.6;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
}

#box-widget-icon {
    left: -10px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENHANCEMENT PACK — UI/UX/Performance/Features
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Top Progress Bar ─── */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-alt));
    z-index: 99999;
    width: 0;
    display: none;
    box-shadow: 0 0 10px var(--primary-glow);
    border-radius: 0 2px 2px 0;
}

/* ─── Percentage Fill Buttons (trade & withdraw) ─── */
.pct-btn-row {
    display: flex;
    gap: 6px;
    margin: -4px 0 16px;
}

.pct-btn {
    flex: 1;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 4px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.pct-btn:hover {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}

.pct-btn:active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(0.94);
}

/* ─── Market Controls Bar (sort + favorites filter) ─── */
.market-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.market-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-filter-group {
    display: flex;
    gap: 6px;
}

.market-filter-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: inherit;
}

.market-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.market-filter-btn[data-filter="fav"].active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.market-filter-btn i {
    font-size: 10px;
}

.market-sort-select {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 6px 24px 6px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23a1a1aa'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 6px center;
}

.market-sort-select option {
    background: var(--overlay-bg);
    color: var(--text-primary);
}

.market-result-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 0 4px;
}

/* ─── Favorites Star Button ─── */
.fav-star {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: -4px;
}

.fav-star.active {
    color: #fbbf24;
}

.fav-star:active {
    transform: scale(1.3);
}

@media (hover: hover) {
    .fav-star:hover {
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.1);
    }
}

/* ─── Price Flash Animations ─── */
@keyframes priceFlashUp {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(16, 185, 129, 0.18);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes priceFlashDown {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(239, 68, 68, 0.14);
    }

    100% {
        background-color: transparent;
    }
}

.price-flash-up {
    animation: priceFlashUp 0.9s ease-out forwards;
}

.price-flash-down {
    animation: priceFlashDown 0.9s ease-out forwards;
}

/* ─── Coin price change highlight ─── */
.price-change.flash-up {
    animation: priceFlashUp 0.6s ease-out;
}

.price-change.flash-down {
    animation: priceFlashDown 0.6s ease-out;
}

/* ─── Balance Counter Animation ─── */
@keyframes balanceFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.balance-count-in {
    animation: balanceFadeIn 0.4s ease-out;
}

/* ─── Market item layout fix for 3-column (coin-info | price | star) ─── */
.market-item .coin-info {
    flex: 1;
    min-width: 0;
}

.market-item .coin-price {
    flex-shrink: 0;
    margin-left: 8px;
}

.market-item .fav-star {
    flex-shrink: 0;
}

/* ─── Empty state in market (search/fav) ─── */
.market-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.market-empty-state i {
    font-size: 40px;
    margin-bottom: 14px;
    display: block;
    opacity: 0.55;
}

.market-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.market-empty-state small {
    font-size: 11px;
    color: var(--text-muted);
}

/* ─── Withdraw IRT: percentage fill row ─── */
#withdraw-pct-btns {
    margin-top: -8px;
}

/* ─── Improved input group for trade view ─── */
.trade-form .input-group input {
    font-size: 22px;
}

/* ─── Section title back button alignment ─── */
.section-title {
    align-items: center;
}

/* ─── Scrollable filter tabs (no visible scrollbar) ─── */
.filter-tabs {
    padding-bottom: 4px;
}

/* ─── Referral link copy-box improvement ─── */
.copy-box:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
}

/* ─── Better news image lazy loading ─── */
.news-item img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

/* ─── PWA sheet inline with app width ─── */
@media (min-width: 500px) {
    .pwa-install-sheet {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Goftino live chat — visible only on profile page */
body:not(.goftino-visible) [id^="goftino"],
body:not(.goftino-visible) iframe[src*="goftino"] {
    display: none !important;
}

/* ─── Market view toggle (list / grid) ─────────────────────────────────── */
.market-view-toggle {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
}

.market-view-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 6px 9px;
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
    line-height: 1;
}

.market-view-btn.active {
    background: var(--primary);
    color: #fff;
}

.market-view-btn:not(.active):hover {
    color: var(--text-primary);
}

/* ─── Grid view container ───────────────────────────────────────────────── */
#full-market-list.grid-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#full-market-list.grid-view .market-empty-state {
    grid-column: 1 / -1;
}

/* ─── Grid card ─────────────────────────────────────────────────────────── */
.market-grid-card {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 14px 10px 12px;
    margin-bottom: 0;
    position: relative;
    gap: 0;
}

.market-grid-card .fav-star {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    background: none;
    border: none;
    padding: 0;
}

.gc-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    overflow: hidden;
}

.gc-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.gc-symbol {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.gc-name {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.gc-price {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
}

.gc-change {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ─── Full-Screen Search Overlay ─── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(28, 50, 150, 0.35) 0%, transparent 60%),
        rgba(0, 0, 5, 0.96);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
    opacity: 0;
    overscroll-behavior: contain;
}

.search-overlay.search-open {
    transform: translateY(0);
    opacity: 1;
}

.search-overlay-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    padding: env(safe-area-inset-top, 12px) 0 0;
}

.search-ol-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    flex-shrink: 0;
}

.search-ol-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 10px 16px;
}

.search-ol-icon {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-ol-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
    font-family: inherit;
    caret-color: var(--primary);
    direction: rtl;
}

.search-ol-input::placeholder {
    color: var(--text-muted);
}

.search-ol-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.search-ol-cancel {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    padding: 8px 4px;
}

.search-ol-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 100px;
    scrollbar-width: none;
}

.search-ol-body::-webkit-scrollbar {
    display: none;
}

.search-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
    padding: 0 2px;
}

.search-section-title:first-child {
    margin-top: 8px;
}

.search-results-group {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 8px;
    backdrop-filter: blur(16px);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--card-border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.99);
}

.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.search-result-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.search-result-icon.icon-section {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 17px;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.search-result-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.search-result-price {
    text-align: left;
    flex-shrink: 0;
}

.search-result-price .price-val {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    color: var(--text-primary);
    direction: ltr;
    display: block;
}

.search-result-price .price-change {
    font-size: 11px;
    font-weight: 600;
    direction: ltr;
    display: block;
    text-align: left;
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.search-no-results i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

/* ─── Revolut-style interaction enhancements ─── */

/* Button tap: quick scale-down + spring-back */
.main-btn:active,
.icon-btn:active,
.action-btn:active,
.quick-chip:active,
.pct-btn:active,
.filter-tab:active,
.menu-item:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* Smooth icon-btn transitions */
.icon-btn {
    transition: background 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

/* Card press effect */
.market-item:active,
.wallet-item:active,
.history-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Confirm modal pop animation */
@keyframes confirmPopRevolut {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(8px);
    }

    65% {
        transform: scale(1.03) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Nav tab transition highlight */
@keyframes navTabPop {
    0% {
        transform: scale(0.85);
    }

    60% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1.05);
    }
}

.nav-item.active .nav-icon-wrap {
    animation: navTabPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Performance list (Analytics view) ────────────────────── */
.perf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.perf-item:active {
    background: rgba(255, 255, 255, 0.07);
    transform: scale(0.98);
}

/* ── Price Alerts view ─────────────────────────────────────── */
.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

.alert-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.alert-item-info {
    flex: 1;
}

.alert-item-symbol {
    font-size: 14px;
    font-weight: 700;
}

.alert-item-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.alert-item-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.alert-status-active {
    background: var(--primary-glow);
    color: var(--primary);
}

.alert-status-triggered {
    background: var(--success-bg);
    color: var(--success);
}

.alert-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.alert-delete-btn:active {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Add Alert bottom sheet */
.add-alert-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.add-alert-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.add-alert-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--overlay-bg);
    border-top: 1px solid var(--card-border);
    border-radius: 32px 32px 0 0;
    padding: 24px 20px max(28px, env(safe-area-inset-bottom));
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.42s var(--ease-out);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}

.add-alert-sheet.open {
    transform: translateY(0);
}

.add-alert-sheet-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Profile modal views: slide up from bottom */
@keyframes viewSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view.view-profile-modal.active {
    animation: viewSlideUp 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}