/* ===========================================
   STARVPN SPA - UNIFIED STYLES
   Ultima Theme
   =========================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */

:root {
    --page-max-width: 450px;

    /* Ultima Dark Theme - Forest Green */
    --bg-light: #010101;
    --bg-card: rgba(0, 0, 0, 0.6);
    --bg-card-elevated: rgba(0, 0, 0, 0.7);
    --bg-input: rgba(0, 0, 0, 0.4);
    --bg-hover: rgba(255, 255, 255, 0.05);

    /* Accent - Telegram Blue #0088CC */
    --accent: #0088CC;
    --accent-light: #00a0e6;
    --accent-dark: #006699;
    --accent-muted: rgba(0, 136, 204, 0.15);

    /* Compatibility aliases */
    --color-primary: #0088CC;
    --color-primary-50: rgba(0, 136, 204, 0.5);
    --color-primary-70: rgba(0, 136, 204, 0.7);
    --color-primary-30: rgba(0, 136, 204, 0.3);

    /* Gold for highlights */
    --gold: #d4a537;
    --gold-muted: rgba(212, 165, 55, 0.15);

    /* Legacy */
    --bg-dark: #010101;
    --accent-hover: #006699;
    --telegram-blue: #229ED9;
    --green: #0088CC;
    --red: #f87171;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #9ca89e;
    --text-muted: #5c6b5f;

    /* Borders */
    --border: rgba(0, 136, 204, 0.3);
    --border-light: rgba(0, 136, 204, 0.15);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Accent shadows */
    --accent-shadow: rgba(0, 136, 204, 0.3);
    --accent-shadow-hover: rgba(0, 136, 204, 0.4);
    --accent-shadow-strong: rgba(0, 136, 204, 0.45);

    /* Glassmorphism */
    --glass-bg: rgba(0, 0, 0, 0.5);
    --glass-bg-hover: rgba(0, 0, 0, 0.6);
    --glass-border-top: rgba(255, 255, 255, 0.25);
    --glass-border-side: rgba(255, 255, 255, 0.12);
    --glass-border-bottom: rgba(255, 255, 255, 0.05);
    --glass-highlight: rgba(255, 255, 255, 0.25);
    --glass-shine: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
    --glass-blur: blur(20px) saturate(180%);

    /* Ultima Primary Variants */
    --ultima-primary: #0088CC;
    --ultima-primary-50: rgba(0, 136, 204, 0.5);
    --ultima-primary-70: rgba(0, 136, 204, 0.7);
    --ultima-primary-20: rgba(0, 136, 204, 0.2);
    --ultima-primary-10: rgba(0, 136, 204, 0.1);
    --ultima-primary-05: rgba(0, 136, 204, 0.05);
}

/* ========================================
   RESET & BASE
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    background-color: #010101;
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    letter-spacing: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#root,
[data-overlay-container] {
    height: 100%;
    width: 100%;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.text-right {
    text-align: right;
}

.text-lg {
    font-size: 18px;
}

.text-sm {
    font-size: 14px;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 400;
}

.leading-4 {
    line-height: 1;
}

.text-default {
    color: rgba(255, 255, 255, 0.7);
}

.font-light {
    font-weight: 300;
}

.font-medium {
    font-weight: 500;
}

.mr-auto {
    margin-right: auto;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-2\.5 {
    margin-top: 10px;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mb-2\.5 {
    margin-bottom: 0.625rem;
}

.w-full {
    width: 100%;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shrink-0 {
    flex-shrink: 0;
}

.border {
    border-width: 1px !important;
    border-style: solid !important;
}

.rounded-xl {
    border-radius: 12px;
}

.rounded-2xl {
    border-radius: 1rem;
}

.h-54 {
    height: 54px !important;
}

.absolute {
    position: absolute;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

@keyframes popupBackdropIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@keyframes ultimaPulse {
    0% {
        box-shadow: 0 0 0 0 var(--ultima-primary-50);
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

@keyframes successSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stepAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulsed-border {
    0% {
        box-shadow: 0 0 0 0 var(--pulsed-border-color, var(--color-primary-50));
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

@keyframes button-lighted-before {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   GLASS OVERLAY BACKGROUND
   ======================================== */

.glass-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #010101;
    pointer-events: none;
    z-index: 1;
}

.glass-overlay::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('./images/main-background-green.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.glass-card {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}

.glass-card-light {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010101;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   SCREEN SYSTEM
   ======================================== */

.screen {
    display: none;
    height: 100%;
    width: 100%;
}

.screen.active {
    display: block;
}

/* ========================================
   BUTTON BASE
   ======================================== */

.Button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    border-radius: 14px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.Button:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.Button svg {
    flex-shrink: 0;
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-20 {
    background-color: rgba(0, 136, 204, 0.2);
}

.text-primary {
    color: var(--color-primary);
}

.text-primary-foreground {
    color: #fff;
}

.text-white {
    color: #ffffff;
}

.border-primary-50 {
    border-color: var(--color-primary-50);
}

.border-primary-30 {
    border-color: var(--color-primary-30);
}

/* Button Lighted Effect */
.Button--variant_lighted {
    position: relative;
    background: transparent;
    color: #fff;
}

.Button--variant_lighted:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-position-y: -60px;
    background-position-x: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc2IiBoZWlnaHQ9IjIzNiIgdmlld0JveD0iMCAwIDM3NiAyMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTA0XzE3NSkiPgo8ZWxsaXBzZSBjeD0iMTg4IiBjeT0iMTE4IiByeD0iOTQiIHJ5PSIyNCIgZmlsbD0iIzAwODhDQyIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMTA0XzE3NSIgeD0iMCIgeT0iMCIgd2lkdGg9IjM3NiIgaGVpZ2h0PSIyMzYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNDciIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMDRfMTc1Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
}

.HomePageSetupButton--animated:before {
    animation: 3s button-lighted-before ease-in-out 5;
}

/* Button Lighted Right (for Profile/Support buttons) */
.Button--variant_lighted-right {
    position: relative;
    background: transparent;
    color: #fff;
    overflow: hidden;
}

.Button--variant_lighted-right:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-position-y: -50px;
    background-position-x: left;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc2IiBoZWlnaHQ9IjIzNiIgdmlld0JveD0iMCAwIDM3NiAyMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTA0XzE3NSkiPgo8ZWxsaXBzZSBjeD0iMTg4IiBjeT0iMTE4IiByeD0iOTQiIHJ5PSIyNCIgZmlsbD0iIzAwODhDQyIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMTA0XzE3NSIgeD0iMCIgeT0iMCIgd2lkdGg9IjM3NiIgaGVpZ2h0PSIyMzYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNDciIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMDRfMTc1Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
    animation: 3s button-lighted-before ease-in-out 5;
}

/* Button Pulsed Animation */
.Button--variant_pulsed {
    --pulsed-border-color: var(--color-primary-50);
    animation: pulsed-border 1.5s infinite ease;
}

.Button--variant_pulsed.bg-primary {
    --pulsed-border-color: var(--color-primary-70);
}

/* ========================================
   INFO POPUP (SHARED)
   ======================================== */

.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.info-popup-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    animation: popupBackdropIn 0.25s ease forwards;
}

.info-popup {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    position: relative;
    opacity: 0;
    transform: scale(0.92) translateY(10px);
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    will-change: transform, opacity;
    contain: layout style paint;
}

.info-popup-overlay:not(.hidden) .info-popup {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition:
        transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.25s ease;
    transition-delay: 0.05s;
}

/* Swipe-to-close hint */
.info-popup::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    opacity: 0.6;
}

.info-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
}

.info-popup-close:active {
    background: var(--bg-hover);
    transform: scale(0.92);
}

.info-popup-close svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.info-popup-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    padding-right: 32px;
    display: flex;
    align-items: center;
}

.info-popup-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.info-popup-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--ultima-primary);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 0 var(--ultima-primary-50);
    animation: ultimaPulse 1.5s infinite ease;
}

.info-popup-btn:active {
    animation: none;
    transform: scale(0.98);
}

.info-popup-btn-icon {
    width: 18px;
    height: 18px;
    color: #FFFFFF;
}

.popup-title-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    color: var(--accent);
}

.empty-list-message {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ========================================
   HOME SCREEN
   ======================================== */

.App {
    background-color: #010101;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 15px;
}

.App--scheme_ultima:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(images/main-background-green.png);
    background-size: 100% 100%;
    background-position: center;
}

@media screen and (min-width: 480px) {
    .App--scheme_ultima:before {
        width: calc(100% + 25px);
    }
}

.HomePage {
    color: #fff;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    width: 100%;
    max-width: var(--page-max-width);
    height: 100%;
    min-height: 0;
    transition: opacity 0.4s ease;
    margin: 0 auto;
}

.HomePage__top {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -15px;
    transition: opacity 0.4s ease;
}

.HomePage__logo {
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.HomePage__logo svg {
    width: 70px;
    will-change: transform;
}

/* Ring Animation */
.RingAnimation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    contain: layout style;
}

.RingAnimation div {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #5DADE2;
    opacity: 0;
    will-change: transform, opacity;
    animation: pulse 10s cubic-bezier(0, 0.35, 0.03, 0.17) infinite;
    animation-delay: 0.5s;
}

.RingAnimation div:nth-child(2) { animation-delay: 2.5s; }
.RingAnimation div:nth-child(3) { animation-delay: 4.5s; }
.RingAnimation div:nth-child(4) { animation-delay: 6.5s; }
.RingAnimation div:nth-child(5) { animation-delay: 8.5s; }

/* Bottom Card */
.HomePage__bottom {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: #0006;
    z-index: 1;
    padding: 30px;
    border-radius: 1rem;
    transition: opacity 0.4s ease;
    min-width: 0;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 375px) {
    .HomePage__bottom {
        padding: 25px;
    }
}

@media screen and (max-height: 700px) {
    .HomePage__top {
        margin-top: 0;
    }
    .HomePage__logo svg {
        width: 55px;
    }
    .HomePage__bottom {
        padding: 20px;
    }
    .HomePageBottom__body {
        margin-top: 20px;
    }
}

@media screen and (min-height: 700px) and (max-height: 850px) {
    .HomePage__top {
        margin-top: -10px;
    }
    .HomePage__logo svg {
        width: 65px;
    }
}

.HomePageBottom {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.HomePageBottom__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.HomePageBottom__headRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.user-name-display {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-traffic {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.home-traffic svg {
    opacity: 0.7;
}

.subscription-type {
    text-align: right;
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1;
}

.subscription-type.inactive {
    color: var(--red);
}

.HomePageBottom__body {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.HomePageBottom__body .Button {
    width: 100%;
}

@media screen and (max-width: 375px) {
    .HomePageBottom__body {
        margin-top: 25px;
    }
}

.HomePageBottom__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ========================================
   PROFILE SCREEN
   ======================================== */

.profile-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    padding: 0 20px 32px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    will-change: scroll-position;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.profile-fullscreen.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.profile-scroll-content {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 24px;
}

/* Custom scrollbar */
.profile-fullscreen::-webkit-scrollbar {
    width: 4px;
}

.profile-fullscreen::-webkit-scrollbar-track {
    background: transparent;
}

.profile-fullscreen::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.profile-fullscreen::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.profile-fullscreen {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Profile User Card */
.profile-user-card {
    padding: 24px 20px;
    margin-bottom: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 136, 204, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-muted) 0%, transparent 100%);
    border: 2px solid var(--accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--accent);
}

.profile-avatar svg {
    width: 32px;
    height: 32px;
    opacity: 0.9;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.profile-avatar-letter {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a0e6 0%, #0088CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
}

.profile-user-info {
    flex: 1;
    min-width: 0;
}

.profile-username {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.profile-user-info .profile-username {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
    text-align: left;
}

.profile-id {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.profile-user-info .profile-id {
    justify-content: flex-start;
}

.profile-id-label {
    opacity: 0.7;
}

.profile-copy-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.profile-copy-btn:active {
    color: var(--accent);
    background: var(--accent-muted);
}

.profile-member-since {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.profile-member-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ultima-primary);
    line-height: 1;
}

.profile-member-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.profile-status-badge.active {
    background: var(--ultima-primary-10);
    color: var(--ultima-primary);
    border: 1px solid var(--ultima-primary-20);
}

.profile-status-badge.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.profile-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Hide dot when active or StarPro badge */
.profile-status-badge.active .profile-status-dot,
.profile-status-badge.starpro-active .profile-status-dot {
    display: none;
}

/* StarPro badge for profile */
#profileStatusText .starpro-badge {
    font-size: 16px;
    gap: 6px;
    align-items: center;
}

#profileStatusText .starpro-badge-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: -1px;
}

.profile-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-status-row .profile-status-badge {
    margin-top: 0;
}

.profile-expiry-days {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.profile-expiry-days.warning {
    color: #F59E0B;
}

.profile-expiry-days.danger {
    color: var(--red);
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.profile-stat-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
}

.profile-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-stat-value.accent {
    color: var(--ultima-primary);
}

.profile-stat-unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 2px;
}

.profile-traffic-wrapper {
    margin-top: 6px;
}

.profile-traffic-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.profile-traffic-fill {
    height: 100%;
    background: linear-gradient(90deg, #0088CC 0%, #00a0e6 100%);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.profile-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.profile-info-row:active {
    background: rgba(0, 136, 204, 0.1);
    border-color: var(--ultima-primary-20);
}

.profile-info-row-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.profile-info-row-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-info-row-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.6;
}

/* Profile Balance Section */
.profile-balance-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.profile-balance-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-balance-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-balance-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-balance-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--ultima-primary);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 0 var(--ultima-primary-50);
    animation: ultimaPulse 1.5s infinite ease;
}

.profile-balance-btn:active {
    animation: none;
    transform: scale(0.96);
}

/* Section Title */
.profile-section-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 24px 0 10px 4px;
}

/* Profile Menu */
.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 16px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    position: relative;
}

.profile-menu-item:active {
    background: var(--ultima-primary-10);
}

.profile-menu-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 52px;
    right: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.profile-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--ultima-primary-10) !important;
    color: var(--ultima-primary) !important;
}

.profile-menu-content {
    flex: 1;
    min-width: 0;
}

.profile-menu-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
}

.profile-menu-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.profile-menu-arrow {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    opacity: 0.5;
}

/* Subscription Link Card */
.profile-subscription-card {
    padding: 18px;
    margin-top: 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 16px;
}

.profile-subscription-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.profile-subscription-url-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
}

.profile-subscription-url {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
}

/* Profile Action Buttons */
.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.profile-btn-primary {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 16px var(--accent-shadow);
}

.profile-btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px var(--accent-shadow);
}

.profile-btn-secondary {
    background: var(--ultima-primary-20);
    border: none;
    color: #ffffff;
}

.profile-btn-secondary:active {
    background: var(--ultima-primary-20);
    opacity: 0.8;
    transform: scale(0.98);
}

.profile-btn svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   WALLET POPUP
   ======================================== */

.wallet-popup {
    max-width: 340px;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wallet-popup-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wallet-balance-card {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    text-align: center;
    max-height: 120px;
    transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
    overflow: hidden;
}

.wallet-balance-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.wallet-balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.wallet-balance-currency {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.wallet-section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-amount-section {
    margin-bottom: 16px;
}

.wallet-amount-input-group {
    position: relative;
    margin-bottom: 10px;
}

.wallet-amount-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 40px 14px 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.wallet-amount-input:focus {
    border-color: var(--accent);
    transform: translateZ(0);
}

.wallet-amount-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.wallet-amount-currency {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.wallet-amount-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wallet-preset-btn {
    flex: 1;
    min-width: 60px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wallet-preset-btn:active,
.wallet-preset-btn.active {
    background: var(--ultima-primary-20);
    border-color: var(--ultima-primary);
    color: var(--ultima-primary);
}

.wallet-methods-section {
    margin-bottom: 16px;
}

.wallet-methods-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    contain: layout style;
}

.wallet-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wallet-method-item:active,
.wallet-method-item.selected {
    border-color: var(--ultima-primary);
    background: var(--ultima-primary-10);
}

.wallet-method-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 8px;
}

.wallet-method-info {
    flex: 1;
}

.wallet-method-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.wallet-method-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.wallet-method-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.wallet-method-item.selected .wallet-method-check {
    background: var(--accent);
    border-color: var(--accent);
}

.wallet-method-check svg {
    width: 12px;
    height: 12px;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wallet-method-item.selected .wallet-method-check svg {
    opacity: 1;
}

.wallet-pay-btn {
    margin-top: 12px;
    flex-shrink: 0;
}

.wallet-pay-btn:not(:disabled) {
    background: var(--ultima-primary);
    animation: ultimaPulse 1.5s infinite ease;
}

.wallet-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wallet-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ========================================
   TRANSACTIONS POPUP
   ======================================== */

.transactions-popup {
    max-width: 360px;
    max-height: 80vh;
}

.transactions-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 10px;
}

.transaction-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.transaction-icon.income {
    background: rgba(14, 203, 129, 0.15);
}

.transaction-icon.expense {
    background: rgba(234, 57, 67, 0.15);
}

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

.transaction-type {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-date {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.transaction-amount {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.transaction-amount.income {
    color: #0ECB81;
}

.transaction-amount.expense {
    color: #EA3943;
}

.transactions-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
}

.transactions-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    opacity: 0.5;
}

.transactions-empty-text {
    font-size: 14px;
}

/* ========================================
   DEVICES POPUP
   ======================================== */

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    max-height: 240px;
    overflow-y: auto;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.devices-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 10px;
}

.device-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-muted);
    color: var(--accent);
}

.device-icon svg {
    width: 16px;
    height: 16px;
}

.device-info {
    flex: 1;
}

.device-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.device-details {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.devices-limit-info {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px;
    background: var(--bg-input);
    border-radius: 8px;
}

/* ========================================
   REFERRAL SCREEN
   ======================================== */

.referral-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 101;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    will-change: scroll-position;
    touch-action: pan-y;
    overscroll-behavior: contain;
    display: none;
    padding: 0 20px 32px;
}

/* Custom scrollbar for referral */
.referral-fullscreen::-webkit-scrollbar {
    width: 4px;
}

.referral-fullscreen::-webkit-scrollbar-track {
    background: transparent;
}

.referral-fullscreen::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.referral-fullscreen::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.referral-fullscreen {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.referral-fullscreen.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.referral-scroll-content {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 20px;
}

.referral-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.referral-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 136, 204, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.referral-back-btn:active {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
}

.referral-back-btn svg {
    width: 20px;
    height: 20px;
}

.referral-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Referral Link Card */
.referral-link-card {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
}

.referral-link-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.referral-link-box {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.referral-link-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.referral-copy-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px var(--accent-shadow);
    flex-shrink: 0;
}

.referral-copy-btn:active {
    transform: scale(0.95);
}

.referral-copy-btn svg {
    width: 20px;
    height: 20px;
}

.referral-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 10px;
}

.referral-code-label {
    font-size: 12px;
    color: var(--text-muted);
}

.referral-code-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.05em;
}

/* Share Buttons */
.referral-share-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.referral-share-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.referral-share-btn.telegram {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.referral-share-btn.qr {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 136, 204, 0.2);
    color: var(--text-primary);
}

.referral-share-btn:active {
    transform: scale(0.97);
}

.referral-share-btn svg {
    width: 18px;
    height: 18px;
}

/* Stats Card */
.referral-stats-card {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
}

.referral-stats-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.referral-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.referral-stat-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.referral-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.referral-stat-value.accent {
    color: var(--accent);
}

.referral-stat-value.green {
    color: var(--green);
}

.referral-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Earnings Card */
.referral-earnings-card {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
}

.referral-earnings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.referral-earnings-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.referral-earnings-total {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

.referral-earnings-currency {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 4px;
}

.referral-earnings-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.referral-earnings-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.referral-earnings-value {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

/* How it works section */
.referral-how-card {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
}

.referral-how-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.referral-how-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.referral-how-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 136, 204, 0.1);
}

.referral-how-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.referral-how-icon svg {
    width: 16px;
    height: 16px;
}

.referral-how-content {
    flex: 1;
}

.referral-how-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.referral-how-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.referral-how-value {
    font-weight: 600;
    color: var(--accent);
}

/* Referrals List */
.referral-list-card {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 136, 204, 0.15);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
}

.referral-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.referral-list-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.referral-list-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.referral-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.referral-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 204, 0.1);
    border-radius: 10px;
}

.referral-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.referral-list-info {
    flex: 1;
    min-width: 0;
}

.referral-list-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.referral-list-earned {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
}

.referral-list-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.referral-list-status.active {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}

.referral-list-status.inactive {
    background: var(--text-muted);
}

.referral-list-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

.referral-list-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--text-muted);
    opacity: 0.5;
}

/* QR Modal */
.referral-qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.referral-qr-modal.active {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

.referral-qr-content {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 20px;
    padding: 24px;
    max-width: 300px;
    width: 100%;
    text-align: center;
    box-shadow: var(--glass-shadow);
}

.referral-qr-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.referral-qr-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    background: white;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.referral-qr-image canvas,
.referral-qr-image img {
    width: 100%;
    height: 100%;
}

.referral-qr-close {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 204, 0.2);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.referral-qr-close:active {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(0.98);
}

/* ========================================
   SUBSCRIPTION SCREEN
   ======================================== */

.promo-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: none;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    scroll-behavior: smooth;
    will-change: scroll-position;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.promo-fullscreen.active {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
}

.promo-fullscreen.keyboard-open {
    height: auto;
    min-height: 100%;
    padding-bottom: 320px;
}

/* Custom scrollbar */
.promo-fullscreen::-webkit-scrollbar {
    width: 4px;
}

.promo-fullscreen::-webkit-scrollbar-track {
    background: transparent;
}

.promo-fullscreen::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.promo-fullscreen::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.promo-fullscreen {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.promo-scroll-content {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

.promo-main-content {
    display: flex;
    flex-direction: column;
}

/* Promo Nav */
.promo-nav {
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.promo-nav-btn {
    flex: 1;
    padding: 15px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.promo-nav-btn.secondary {
    background: var(--ultima-primary-20);
    border: none;
    color: #ffffff;
}

.promo-nav-btn.secondary:active {
    opacity: 0.8;
}

.promo-nav-btn.primary {
    background: var(--ultima-primary);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 0 0 0 var(--ultima-primary-50);
    animation: ultimaPulse 1.5s infinite ease;
}

.promo-nav-btn.primary:active {
    animation: none;
    transform: scale(0.98);
}

.promo-nav-btn svg {
    width: 18px;
    height: 18px;
}

/* Promo Info Row (Servers) */
.promo-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.promo-info-row:active {
    background: var(--ultima-primary-10);
    border-color: var(--ultima-primary-20);
}

.promo-info-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.promo-info-row-icon {
    width: 20px;
    height: 20px;
    color: var(--ultima-primary);
}

.promo-info-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.promo-info-row-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.5;
}

.promo-info-row .promo-history-count {
    color: var(--ultima-primary);
}

/* Promo Input Section */
.promo-input-section {
    margin-bottom: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.promo-input-wrapper {
    position: relative;
    display: flex;
    gap: 8px;
}

.promo-input-container {
    flex: 1;
    position: relative;
}

.promo-input-field {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.08em;
    transition: all 0.25s ease;
}

.promo-input-field:focus {
    outline: none;
    border-color: var(--ultima-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--ultima-primary-20);
    transform: translateZ(0);
}

.promo-input-field::placeholder {
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 11px;
}

.promo-input-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-input);
}

.promo-input-field:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--ultima-primary);
    box-shadow: 0 0 0 1px var(--ultima-primary-20);
}

.promo-input-field.error {
    border-color: var(--red);
    background: rgba(248, 113, 113, 0.08);
}

.promo-input-error {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(248, 113, 113, 0.35);
    font-size: 14px;
    font-weight: 500;
    color: var(--red);
    box-shadow: var(--shadow-sm);
}

.promo-input-error.visible {
    display: flex;
    animation: errorSlideIn 0.3s ease;
}

.promo-input-error::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-size: contain;
}

.promo-submit-btn {
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--ultima-primary);
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 0 0 0 var(--ultima-primary-50);
    animation: ultimaPulse 1.5s infinite ease;
}

.promo-submit-btn:active:not(:disabled) {
    animation: none;
    transform: scale(0.96);
}

.promo-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--ultima-primary-20);
    box-shadow: none;
    animation: none;
}

.promo-submit-btn:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    box-shadow: 0 4px 14px var(--accent-shadow-hover);
}

.promo-submit-btn.channel-subscribed,
.promo-submit-btn.channel-subscribed:disabled {
    opacity: 1 !important;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%) !important;
    box-shadow: 0 4px 14px var(--accent-shadow) !important;
    color: #FFFFFF !important;
}

/* Promo Loading */
.promo-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.promo-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Mini Subscription Card */
.sub-mini-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sub-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a0e6 0%, #0088CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
}

.sub-mini-info {
    flex: 1;
    min-width: 0;
}

.sub-mini-info .sub-status-badge {
    margin-top: 6px;
}

.sub-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sub-status-badge.active {
    background: var(--ultima-primary-10);
    border: 1px solid var(--ultima-primary-20);
    color: var(--ultima-primary);
}

.sub-status-badge.inactive {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--red);
}

.sub-status-badge.activating {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #FBBF24;
}

.sub-status-badge.activating .sub-status-dot {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-top-color: #FBBF24;
    animation: spin 0.8s linear infinite;
    box-shadow: none;
}

.sub-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.active .sub-status-dot {
    background: #0ECB81;
    box-shadow: 0 0 8px #0ECB81;
}

.inactive .sub-status-dot {
    background: #EF4444;
    box-shadow: 0 0 8px #EF4444;
}

.sub-mini-days-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 8px 12px;
    background: var(--ultima-primary-10);
    border: 1px solid var(--ultima-primary-20);
    border-radius: 10px;
    margin-left: auto;
}

/* Devices Card */
.sub-devices-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 16px;
    margin-bottom: 14px;
}

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

.sub-devices-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ultima-primary);
    background: var(--ultima-primary-10);
    border: 1px solid var(--ultima-primary-20);
    border-radius: 12px;
}

.sub-devices-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-devices-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.sub-devices-subtitle {
    font-size: 11px;
    color: var(--ultima-primary);
    font-weight: 500;
    line-height: 1.2;
}

.sub-devices-add-btn {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--ultima-primary-20);
    border: 1px solid var(--ultima-primary-30);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-devices-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sub-devices-add-btn:not(:disabled):active {
    transform: scale(0.96);
    background: var(--ultima-primary-30);
}

/* Upgrade button variant - subtle premium style */
.sub-devices-add-btn--upgrade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.08) 0%, rgba(0, 136, 204, 0.03) 100%);
    border: 1px solid rgba(0, 136, 204, 0.25);
    color: rgba(0, 136, 204, 0.9);
    overflow: hidden;
}

.sub-devices-add-btn--upgrade::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 136, 204, 0.12) 50%,
        transparent 100%
    );
    animation: upgrade-shimmer 3s ease-in-out infinite;
}

@keyframes upgrade-shimmer {
    0%, 100% { left: -100%; }
    50%, 60% { left: 100%; }
}

.sub-devices-add-btn--upgrade:not(:disabled):active {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.15) 0%, rgba(0, 136, 204, 0.08) 100%);
    border-color: rgba(0, 136, 204, 0.35);
}

.sub-mini-days-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ultima-primary);
    line-height: 1.1;
}

.sub-mini-days-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.sub-mini-days-block.warning .sub-mini-days-value {
    color: #F59E0B;
}

.sub-mini-days-block.danger .sub-mini-days-value {
    color: var(--red);
}

.sub-mini-days-block.expired .sub-mini-days-value {
    color: var(--red);
    font-size: 12px;
}

.sub-mini-days-block.expired .sub-mini-days-label {
    display: none;
}

/* Channel Section */
.channel-section {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 136, 204, 0.12);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}

.channel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.channel-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00a0e6 0%, #0088CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.25);
}

.channel-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.channel-info {
    flex: 1;
}

.channel-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.channel-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.channel-btn {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.channel-btn.subscribe {
    background: var(--ultima-primary);
    border: none;
    color: white;
    box-shadow: 0 0 0 0 var(--ultima-primary-50);
    animation: ultimaPulse 1.5s infinite ease;
}

.channel-btn.subscribe:active {
    animation: none;
    transform: scale(0.98);
}

.channel-btn.subscribed {
    background: var(--ultima-primary-10);
    border: 1px solid var(--ultima-primary-20);
    color: var(--ultima-primary);
}

.channel-btn:active {
    transform: scale(0.98);
}

.channel-btn svg {
    width: 16px;
    height: 16px;
}

/* Servers List */
.servers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    max-height: 240px;
    overflow-y: auto;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.servers-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

.server-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 10px;
}

.server-info {
    flex: 1;
}

.server-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.server-online-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--green);
    font-weight: 500;
}

.server-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}

/* Promo History */
.promo-history-popup .promo-history-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 0;
}

.promo-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.promo-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 12px;
    animation: slideIn 0.3s ease-out;
}

.promo-history-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-history-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
}

.promo-history-icon svg {
    width: 12px;
    height: 12px;
}

.promo-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-history-code {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.05em;
}

.promo-history-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.promo-history-bonus {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

.promo-history-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

/* Promo History Link Button */
.promo-history-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
}

.promo-history-link:active {
    background: var(--ultima-primary-10);
    border-color: var(--ultima-primary-20);
    transform: scale(0.98);
}

.promo-history-link > svg:first-child {
    width: 18px;
    height: 18px;
    color: var(--ultima-primary);
    flex-shrink: 0;
}

.promo-history-link > span:first-of-type {
    flex: 1;
}

.promo-history-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ultima-primary);
    background: var(--accent-muted);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.promo-history-count:empty {
    display: none;
}

.promo-history-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Confetti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}

/* ========================================
   SETUP SCREEN
   ======================================== */

.SetupPage {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    width: 100%;
    color: #fff;
    max-width: var(--page-max-width);
    --progress-size: 280px;
    --progress-ring-size: calc(var(--progress-size) - 2px);
    --rings-offset: 100px;
}

/* Setup screen needs gradient background override */
#setupScreen.active {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    display: flex;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
}

.SetupPage__top {
    width: 100%;
    height: 70%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Animated Rings */
.SetupPage__topRings {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.SetupPage__topRings:before {
    content: "";
    opacity: 0;
    width: 150px;
    height: 150px;
    background-color: var(--color-primary);
    position: absolute;
    border-radius: 100%;
}

.SetupPage__topRings--completed:before {
    width: calc(var(--progress-ring-size) - var(--rings-offset));
    height: calc(var(--progress-ring-size) - var(--rings-offset));
    opacity: 1;
    transition: ease .7s;
}

.SetupPage__topRings div {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    border: 1px solid var(--color-primary);
}

.SetupPage__topRings div.animated {
    transition: ease .55s;
}

/* Ring 1 - innermost */
.SetupPage__topRings div:nth-child(1) {
    opacity: .5;
    width: calc(var(--progress-ring-size) - var(--rings-offset));
    height: calc(var(--progress-ring-size) - var(--rings-offset));
}

.SetupPage__topRings div.animated:nth-child(1) {
    width: var(--progress-ring-size);
    height: var(--progress-ring-size);
    opacity: .3;
}

/* Ring 2 */
.SetupPage__topRings div:nth-child(2) {
    opacity: .3;
    width: var(--progress-ring-size);
    height: var(--progress-ring-size);
}

.SetupPage__topRings div.animated:nth-child(2) {
    width: calc(var(--progress-ring-size) + var(--rings-offset));
    height: calc(var(--progress-ring-size) + var(--rings-offset));
    opacity: .15;
}

/* Ring 3 */
.SetupPage__topRings div:nth-child(3) {
    opacity: .15;
    width: calc(var(--progress-ring-size) + var(--rings-offset));
    height: calc(var(--progress-ring-size) + var(--rings-offset));
}

.SetupPage__topRings div.animated:nth-child(3) {
    width: calc(var(--progress-ring-size) + var(--rings-offset) + var(--rings-offset));
    height: calc(var(--progress-ring-size) + var(--rings-offset) + var(--rings-offset));
    opacity: 0;
}

/* Ring 4 - starts hidden, expands in */
.SetupPage__topRings div:nth-child(4) {
    opacity: 0;
    width: calc(var(--progress-ring-size) - var(--rings-offset) - var(--rings-offset));
    height: calc(var(--progress-ring-size) - var(--rings-offset) - var(--rings-offset));
}

.SetupPage__topRings div.animated:nth-child(4) {
    opacity: .5;
    width: calc(var(--progress-ring-size) - var(--rings-offset));
    height: calc(var(--progress-ring-size) - var(--rings-offset));
}

/* Progress Ring */
.SetupPage__progress {
    position: relative;
}

.SetupPage__progress svg {
    display: block;
    width: var(--progress-size);
    height: var(--progress-size);
}

.SetupPage__progress .progress-bg {
    fill: none;
    stroke: transparent;
    stroke-width: 0.2;
}

.SetupPage__progress .progress-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 0.3;
    transition: stroke-dashoffset 0.7s ease;
    opacity: 0.6;
}

/* Center Icon */
.SetupPage__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.SetupPage__icon svg.step-icon {
    width: 84px;
    height: 84px;
    position: absolute;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: transform, opacity;
}

.SetupPage__icon svg.step-icon.active {
    opacity: 1;
    transform: scale(1);
}

/* Bottom Section */
.SetupPage__bottom {
    display: flex;
    align-items: center;
    margin-top: auto;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    height: 40%;
}

.SetupPage__bottom > div {
    width: 100%;
}

/* Step Content */
.SetupPage__step {
    display: none;
    width: 100%;
}

.SetupPage__step.active {
    display: block;
    animation: stepAppear 0.4s ease forwards;
}

/* Button Row - 2 columns */
.SetupPage__btnRow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
}

/* Setup arrow - visible only on pulsed button */
.SetupPage__btnRow .setup-arrow {
    display: none;
    margin-left: 4px;
}

.SetupPage__btnRow .Button--variant_pulsed .setup-arrow {
    display: inline;
}

/* Setup Device List (different from profile device list) */
.setup-device-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.setup-device-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.setup-device-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary);
}

.setup-device-item:active {
    transform: scale(0.98);
}

.setup-device-item svg {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

/* Setup Responsive */
@media screen and (max-height: 600px) {
    .SetupPage__top {
        height: 60%;
    }

    .SetupPage__bottom {
        height: 45%;
    }

    .SetupPage {
        --progress-size: 220px;
        --rings-offset: 80px;
    }

    .SetupPage__icon svg.step-icon {
        width: 64px;
        height: 64px;
    }
}

@media screen and (min-height: 800px) {
    .SetupPage__top {
        height: 65%;
    }

    .SetupPage__bottom {
        height: 38%;
    }
}

/* Safe area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .SetupPage__bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ========================================
   POPUP & KEYBOARD STATES
   ======================================== */

body.popup-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* iOS keyboard: reposition popup to top */
.keyboard-visible .info-popup-overlay {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 0;
}

.keyboard-visible .wallet-popup {
    max-height: calc(var(--viewport-height, 50vh) - 40px);
}

/* Compact mode: hide balance card when keyboard is open */
.keyboard-visible .wallet-balance-card {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

/* Reduce padding in keyboard mode */
.keyboard-visible .wallet-amount-section,
.keyboard-visible .wallet-methods-section {
    margin-bottom: 10px;
}

.keyboard-visible .wallet-section-label {
    margin-bottom: 4px;
}

/* When keyboard is visible, make button sticky at bottom of popup */
.keyboard-visible .wallet-pay-btn {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

/* iOS keyboard viewport adjustment */
.keyboard-visible .info-popup,
.keyboard-visible .wallet-popup {
    max-height: calc(var(--viewport-height, 85vh) - 20px);
    transition: none !important;
}

/* Re-enable transitions after keyboard settles */
.keyboard-visible.keyboard-settled .wallet-popup {
    transition: max-height 0.15s ease-out;
}

.keyboard-visible.keyboard-settled .info-popup {
    transition: max-height 0.15s ease-out;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.info-popup-close:focus-visible,
.wallet-method-item:focus-visible,
.wallet-preset-btn:focus-visible,
.info-popup-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

[data-focus-trap] *:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */

@media (pointer: coarse) {
    /* Disable backdrop-filter on mobile for performance (except overlay) */
    .glass-card,
    .profile-user-card,
    .profile-subscription-card,
    .profile-menu,
    .info-popup,
    .referral-link-card,
    .referral-stats-card,
    .referral-how-card,
    .referral-list-card,
    .referral-qr-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .info-popup,
    .info-popup-overlay,
    .RingAnimation div,
    .SetupPage__topRings div,
    .Button--variant_pulsed,
    .wallet-pay-btn,
    .profile-balance-btn,
    .info-popup-btn {
        animation: none !important;
        transition: opacity 0.1s ease !important;
    }
}

/* ========================================
   BODY STATE CLASSES
   ======================================== */

body.profile-active .rings-container,
body.profile-active .center-icon,
body.profile-active .progress-ring-container,
body.profile-active .bottom-content {
    display: none !important;
}

body.referral-active .rings-container,
body.referral-active .center-icon,
body.referral-active .progress-ring-container,
body.referral-active .bottom-content {
    display: none !important;
}

body.promo-active .rings-container,
body.promo-active .center-icon,
body.promo-active .progress-ring-container,
body.promo-active .bottom-content {
    display: none !important;
}

/* ========================================
   PAYWALL POPUP (Pro Subscription)
   ======================================== */

.paywall-popup {
    max-width: 340px;
    text-align: center;
}

.paywall-header {
    margin-bottom: 24px;
}

/* StarPro Branding (Blue Theme) */
.paywall-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.paywall-brand-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paywall-brand-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent);
    filter: drop-shadow(0 2px 8px var(--accent-shadow));
}

.paywall-brand-name {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.paywall-brand-pro {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Compact StarPro brand for inline use (header, profile) */
.starpro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.starpro-badge-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
    filter: drop-shadow(0 1px 3px var(--accent-shadow));
}

.starpro-badge-text {
    font-size: inherit;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.starpro-badge-pro {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* StarPro badge button for home page */
.home-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.home-status-badge.starpro-active {
    background: var(--ultima-primary-10);
    border: 1px solid var(--ultima-primary-20);
}

.home-status-badge .starpro-badge {
    font-size: 16px;
    gap: 6px;
    align-items: center;
}

.home-status-badge .starpro-badge-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: -1px;
}

.paywall-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.paywall-features {
    text-align: left;
    margin-bottom: 24px;
}

.paywall-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.3;
}

.paywall-check {
    width: 18px;
    height: 18px;
    color: #0ECB81;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Price Block - Improved Design */
.paywall-price {
    background: linear-gradient(135deg, var(--accent-muted) 0%, rgba(0, 136, 204, 0.08) 100%);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

.paywall-price-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.paywall-price-old {
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.paywall-price-badge {
    background: linear-gradient(135deg, #0ECB81 0%, #00A86B 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.paywall-price-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.paywall-price-amount {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paywall-price-currency {
    font-size: 28px;
    line-height: 1;
}

.paywall-price-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -2px;
}

.paywall-price-period-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}

.paywall-price-per {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.2;
}

.paywall-price-duration {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
}

.paywall-price-method {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.paywall-price-method-label {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

.paywall-price-method-value {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    font-weight: 500;
}

.paywall-cta {
    font-size: 16px;
    height: 52px;
}

.paywall-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.paywall-trust-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}