* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    background: #181C2A !important;
    color: #FFFFFF;
    scroll-behavior: smooth;
}

.badge-unofficial {
  font-size: 12px;
  color: #aaa;
  margin-left: 4px;
  cursor: help;
}

body {
    background: linear-gradient(180deg, #181C2A 0%, #23263A 100%) !important;
    color: #FFFFFF;
    font-family: 'Inter', Arial, sans-serif;
    min-height: 100vh;
}

.main, .container {
    background: none !important;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 8px;
}

/* Header Styles */
.header {
    background: #181C2A !important;
    border-bottom: 1px solid #22242A;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    height: auto;
}

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

.header-content {
    display: flex;
    flex-direction: column;
    padding: 16px 0 12px 0;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    min-height: 44px;
}

.logo-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 10px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-text {
    font-size: 36px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.5px;
    line-height: 1;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.logo-orange {
    color: #F7931A;
    position: relative;
    top: -8px;
    /* Можно скорректировать значение top для идеального эффекта */
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.nav-item {
    font-size: 16px;
    font-weight: 500;
    color: #B7BDC6;
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
}

.nav-item:hover {
    color: #F7931A;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.language-toggle {
    background: transparent;
    border: 1px solid rgba(183, 189, 198, 0.3);
    color: rgba(183, 189, 198, 0.85);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.language-toggle:hover {
    border-color: rgba(183, 189, 198, 0.5);
    color: #fff;
}

/* Main Content */
.main {
    padding-top: 0;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Header */
.hero-header {
    text-align: center;
    padding: 0 0 32px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-title {
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0;
    text-align: center;
    width: 100%;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #CCCCCC;
    margin-bottom: 0;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

/* Content Layout */
.content-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 24px auto !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* CTA Section */
.cta-section {
    text-align: center;
    padding: 24px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Invitation Banner */
.invitation-banner {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(180deg, rgba(30, 35, 41, 0.95) 0%, rgba(30, 35, 41, 0.95) 100%);
    border-radius: 16px;
    border: 1px solid rgba(43, 49, 57, 0.5);
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Number Animation Styles */
.stat-value-large,
.stat-value,
.perf-value {
    transition: all 0.3s ease;
}

.stat-value-large.animated,
.stat-value.animated,
.perf-value.animated {
    animation: numberPulse 0.5s ease-out;
}

@keyframes numberPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Currency formatting */
.currency {
    font-variant-numeric: tabular-nums;
}

.percentage {
    font-variant-numeric: tabular-nums;
}

.decimal {
    font-variant-numeric: tabular-nums;
}



/* Loading state for accept button */
.accept-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* Success state animation */
.accept-btn.success {
    animation: successPulse 0.5s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(2, 192, 118, 0.4);
    }
    100% {
        transform: scale(1);
    }
}

/* Enhanced shimmer effect */
.invitation-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #f7931a 25%, 
        #ffb946 50%, 
        #f7931a 75%, 
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

/* Improved bounce animation */
.banner-icon {
    font-size: 48px;
    margin-bottom: 24px;
    color: #f7931a;
    animation: bounce 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* Performance Section Styles */
.performance-section {
    background: #1e2329;
    border: 1px solid #2b3139;
    border-radius: 8px;
    padding: 20px;
    box-shadow: none;
    height: fit-content;
    min-height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

/* Ensure equal height in grid */
@media (min-width: 769px) {
    .content-layout {
        align-items: stretch;
        gap: 16px;
    }
    
    .performance-section {
        height: 100%;
        min-height: 600px;
        padding: 24px;
    }
}

/* Performance Section specific adjustments */
.performance-section {
    /* Убираем старые стили, которые могли конфликтовать */
    margin-bottom: 0;
    overflow: visible; /* Разрешаем содержимому выходить за границы при необходимости */
}

/* Trader Card specific adjustments */
/* Old trader card styles removed - replaced with new redesigned styles above */

.tabs {
    margin-bottom: 16px;
    flex-shrink: 0; /* Не сжимаем табы */
    border-bottom: 1px solid #2b3139; /* Темная линия под табами */
    padding-bottom: 12px;
}

.tab-content {
    flex: 1; /* Занимаем оставшееся место */
    display: flex;
    flex-direction: column;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

.invitation-title {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.invitation-subtitle {
    font-size: 18px;
    color: rgba(183, 189, 198, 0.85);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Old trader info/metrics styles removed - replaced with new redesigned styles above */

/* Main Stats */
.main-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
}

.stat-large {
    background: rgba(43, 49, 57, 0.3);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(43, 49, 57, 0.5);
}



.stat-value-large {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #fff;
}

.stat-value-large.green {
    color: #02c076;
}

.stat-label {
    font-size: 14px;
    color: rgba(183, 189, 198, 0.85);
}

/* Secondary Stats */
.secondary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
}

.stat-item {
    background: rgba(43, 49, 57, 0.3);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(43, 49, 57, 0.5);
}



.stat-item .stat-label {
    font-size: 12px;
    color: rgba(183, 189, 198, 0.85);
    margin-bottom: 8px;
    display: block;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.stat-value .rating {
    font-size: 14px;
    color: rgba(183, 189, 198, 0.85);
    margin-left: 2px;
}

/* Additional Info */
.additional-info {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid rgba(43, 49, 57, 0.5);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(183, 189, 198, 0.85);
    font-size: 14px;
    padding: 12px 0;
}

.info-row:not(:last-child) {
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
}

.info-row span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-row .green {
    color: #02c076;
}

/* Warning Notice */
.warning-notice {
    background: rgba(247, 147, 26, 0.1);
    border: 1px solid rgba(247, 147, 26, 0.2);
    color: #f7931a;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
    text-align: center;
}

/* Copy Link */
.copy-link {
    background: rgba(43, 49, 57, 0.3);
    border: 1px solid rgba(43, 49, 57, 0.5);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.copy-link span {
    display: block;
    color: rgba(183, 189, 198, 0.85);
    font-size: 14px;
    margin-bottom: 12px;
}

.link-text {
    color: #f7931a;
    font-size: 14px;
    font-family: monospace;
    background: rgba(247, 147, 26, 0.1);
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
}



/* CTA Button */
.cta-button {
    background: linear-gradient(135deg, #F7931A 0%, #EDB926 100%) !important;
    border: none;
    border-radius: 12px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 600;
    color: #181C2A !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.3);
    margin: 16px auto;
    min-width: 280px;
    display: block;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(247, 147, 26, 0.4);
    background: linear-gradient(135deg, #EDB926 0%, #F7931A 100%) !important;
    color: #181C2A !important;
}

.cta-button:active {
    transform: translateY(0);
}

/* Performance Section Updates */
.performance-section {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid rgba(43, 49, 57, 0.5);
    height: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Desktop specific styles for tab content */
@media (min-width: 769px) {
    .tabs {
        width: 100%;
        box-sizing: border-box;
    }
    
    .tab {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .tab-content {
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        order: 2;
        flex: 1;
    }
    
    .tab-content.active {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        order: 2;
        flex: 1;
    }
    
    .trade-item {
        grid-template-columns: minmax(120px, 1fr) 80px 100px 100px 100px 120px;
        gap: 12px;
        font-size: 14px;
        min-width: 600px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .trade-pair {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .trade-entry,
    .trade-exit,
    .trade-pnl {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .trades-summary {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        width: 100%;
    }
    
    .trades-list {
        width: 100%;
    }
    
    .perf-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        width: 100%;
    }
    
    .perf-item {
        padding: 10px 6px;
        min-height: 50px;
    }
    
    .perf-label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .perf-value {
        font-size: 13px;
    }
}

/* Medium screens adjustments */
@media (min-width: 769px) and (max-width: 1200px) {
    .trade-item {
        grid-template-columns: minmax(100px, 1fr) 70px 90px 90px 90px 100px;
        gap: 8px;
        font-size: 13px;
        padding: 14px 16px;
        width: 100%;
    }
    
    .trades-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }
    
    .trades-list {
        width: 100%;
    }
    
    .perf-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }
    
    .perf-item {
        padding: 8px 4px;
        min-height: 45px;
    }
    
    .perf-label {
        font-size: 9px;
        margin-bottom: 3px;
    }
    
    .perf-value {
        font-size: 12px;
    }
}

/* Wide screens adjustments */
@media (min-width: 1400px) {
    .main {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .content-layout {
        max-width: 1400px;
        margin: 0 auto 24px auto;
        gap: 48px;
    }
    
    .performance-section {
        max-width: 100%;
    }
    
    .trade-item {
        grid-template-columns: minmax(150px, 1fr) 100px 120px 120px 120px 140px;
        gap: 16px;
        font-size: 15px;
        padding: 16px 24px;
    }
    
    .trades-summary {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    .perf-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main {
        padding: 20px 24px;
    }
    
    .hero-title {
        font-size: 52px;
        padding: 0;
    }

    .hero-subtitle {
        padding: 0;
    }
    
    .content-layout {
        gap: 32px;
    }
    
    .trader-stats {
        gap: 24px;
    }
}

/* Промежуточный размер для планшетов и больших телефонов */
@media (max-width: 640px) {
    .hero-header {
        padding: 12px 0 16px 0;
        text-align: center;
    }

    .hero-title {
        font-size: 30px;
        padding: 0;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 14px;
        padding: 0;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    .main {
        padding: 0;
    }

    .content-layout {
        gap: 20px;
        justify-items: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Partners bar and header positioning */
    .partners-bar {
        height: 40px;
    }

    .partners-container {
        height: 40px;
        gap: 32px;
    }

    .announcement-item {
        font-size: 14px;
        line-height: 40px;
        margin: 0 24px;
    }

    .header {
        top: 0;
        height: auto;
        display: block !important;
    }

    .header-container {
        padding: 0 20px;
    }

    .header-content {
        padding: 4px 0;
    }

    .container {
        padding: 100px 20px 32px 20px;
    }

    /* Logo improvements */
    .logo-section {
        margin-bottom: 8px;
    }

    .logo-text {
        font-size: 28px;
    }



    /* Navigation */
    .nav {
        display: none;
    }

    .nav-item {
        font-size: 14px;
    }

    /* Main content */
    .main {
        padding: 0;
    }

    .content-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 8px;
        justify-items: center;
        width: 100%;
    }

    /* Hero section */
    .hero-header {
        padding: 8px 0 16px 0;
    }

    .hero-title {
        font-size: 32px;
        padding: 0;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 16px;
        padding: 0;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    /* Trader card */
    .trader-card {
        padding: 20px 16px;
        margin-bottom: 0;
        border-radius: 12px;
        width: 100%;
        max-width: 480px;
    }

    .trader-info {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        margin-bottom: 20px;
    }

    .trader-details {
        text-align: center;
    }

    .trader-stats {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .stat-item {
        text-align: center;
        min-width: 200px;
        padding: 0 12px;
    }

    .trader-metrics {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .metric-value {
        font-size: 24px;
    }

    /* CTA button */
    .cta-button {
        padding: 16px 32px;
        font-size: 16px;
        min-width: 240px;
    }
}

@media (max-width: 480px) {
    /* Partners bar for mobile */
    .partners-bar {
        height: 36px;
    }

    .partners-container {
        height: 36px;
        gap: 24px;
    }

    .announcement-item {
        font-size: 13px;
        line-height: 36px;
        margin: 0 16px;
    }

    .header {
        top: 0;
        height: auto;
        display: block !important;
    }
    
    /* Mobile header positioning for 480px */
    .mobile-header {
        top: 67px !important;
    }

    .header-container {
        padding: 0 16px;
    }

    .header-content {
        padding: 3px 0;
    }

    .container {
        padding: 95px 16px 24px 16px;
    }

    /* Logo for small mobile */
    .logo-text {
        font-size: 26px;
    }



    /* Main content */
    .main {
        padding: 0;
    }

    .nav {
        display: none;
    }

    /* Hero section for mobile */
    .hero-header {
        padding: 6px 0 12px 0;
    }

    .hero-title {
        font-size: 26px;
        padding: 0;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .hero-subtitle {
        font-size: 14px;
        padding: 0;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .content-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 6px;
        justify-items: center;
        width: 100%;
    }

    /* Trader card for mobile */
    .trader-card {
        padding: 16px 12px;
        margin: 0 auto;
        border-radius: 12px;
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
    }

    .trader-stats {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .trader-metrics {
        gap: 12px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .stat-value {
        font-size: 18px;
    }

    .metric-value {
        font-size: 18px;
    }

    /* CTA button for mobile */
    .cta-button {
        padding: 14px 24px;
        font-size: 15px;
        min-width: 200px;
    }

    .performance-section {
        width: 100%;
        max-width: 400px;
        padding: 16px 12px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 360px) {
    .header-container {
        padding: 0 12px;
    }

    .container {
        padding: 90px 12px 8px 12px;
    }

    .hero-title {
        font-size: 22px;
        padding: 0;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .hero-subtitle {
        font-size: 12px;
        padding: 0;
        line-height: 1.4;
    }

    .main {
        padding: 12px 12px 70px 12px; /* Уменьшенный нижний отступ для кнопки */
    }

    .content-layout {
        gap: 6px;
        margin-bottom: 6px;
        justify-items: center;
        width: 100%;
    }

    .trader-card {
        padding: 12px 10px;
        margin-bottom: 6px;
        width: 100%;
        max-width: 360px;
    }

    .stat-item {
        min-width: 120px;
        padding: 0 8px;
    }

    .cta-button {
        min-width: 160px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .performance-section {
        width: 100%;
        max-width: 360px;
        padding: 12px 10px;
        margin-bottom: 6px;
    }

    .footer {
        margin-top: 6px;
        padding: 12px 12px 8px;
    }

    .cta-section {
        padding: 8px 0;
    }
    
    .registration-banner {
        padding: 4px 8px;
    }
    
    .banner-content {
        gap: 12px;
    }
    
    .banner-btn {
        padding: 4px 8px;
        font-size: 10px;
        min-height: 32px;
    }
}



/* Performance Section - полная переработка */
.performance-section {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 0;
    border: 1px solid rgba(43, 49, 57, 0.5);
    overflow: hidden;
    height: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.performance-section .performance-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.perf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(43, 49, 57, 0.4);
}

.perf-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.period-selector {
    display: flex;
    align-items: center;
}

.period-dropdown {
    position: relative;
}

.period-btn {
    background: linear-gradient(135deg, rgba(43, 49, 57, 0.9) 0%, rgba(30, 35, 41, 0.95) 100%);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 100px;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.period-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(247, 147, 26, 0.1), 
        transparent);
    transition: left 0.5s ease;
}

.period-btn:hover {
    border-color: rgba(247, 147, 26, 0.6);
    box-shadow: 0 4px 16px rgba(247, 147, 26, 0.15);
    transform: translateY(-1px);
}

.period-btn:hover::before {
    left: 100%;
}

.period-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}



.period-btn svg {
    transition: transform 0.3s ease;
    color: #f7931a;
    width: 12px;
    height: 12px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.period-btn.active svg {
    transform: rotate(180deg);
    color: #ffb946;
}

.period-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(30, 35, 41, 0.98) 0%, rgba(20, 25, 31, 0.98) 100%);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 12px;
    padding: 8px;
    min-width: 120px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(247, 147, 26, 0.1);
}

.period-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.period-option {
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(183, 189, 198, 0.85);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    animation: optionSlideIn 0.2s ease-out;
}

.period-option:last-child {
    margin-bottom: 0;
}

.period-option:hover {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.2) 0%, rgba(247, 147, 26, 0.1) 100%);
    color: #f7931a;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(247, 147, 26, 0.15);
}

.period-option.selected {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.25) 0%, rgba(247, 147, 26, 0.15) 100%);
    color: #f7931a;
    border: 1px solid rgba(247, 147, 26, 0.4);
}

.period-option.selected::after {
    content: '✓';
    color: #f7931a;
    font-weight: 700;
    font-size: 12px;
}

/* Dropdown Animation Keyframes */
@keyframes dropdownSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes optionSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.period-options.show {
    animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



.period-option:nth-child(1) { animation-delay: 0.05s; }
.period-option:nth-child(2) { animation-delay: 0.1s; }
.period-option:nth-child(3) { animation-delay: 0.15s; }

/* Performance Summary */
.performance-summary {
    margin-bottom: 24px;
}

.performance-notice {
    background: rgba(43, 49, 57, 0.2);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(43, 49, 57, 0.3);
    text-align: center;
}

.performance-notice h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.performance-notice p {
    font-size: 14px;
    color: rgba(183, 189, 198, 0.8);
    margin: 0;
}

/* Additional Metrics - переработка */
.additional-metrics {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(43, 49, 57, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(43, 49, 57, 0.3);
    width: 100%;
    box-sizing: border-box;
}

.additional-metrics h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(43, 49, 57, 0.4);
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.additional-metrics .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(43, 49, 57, 0.2);
}

.additional-metrics .metric-item:last-child {
    border-bottom: none;
}

.additional-metrics .metric-label {
    font-size: 13px;
    color: rgba(183, 189, 198, 0.8);
    font-weight: 400;
    flex: 1;
    max-width: 60%;
    line-height: 1.3;
}

.additional-metrics .metric-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: right;
    flex-shrink: 0;
}

.additional-metrics .metric-value.green {
    color: #02c076;
}

.additional-metrics .metric-value.red {
    color: #f84960;
}

/* Progress Bar */
.trades-progress {
    width: 100%;
    margin-top: 16px;
}

.progress-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(43, 49, 57, 0.5);
}

.progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-fill.success {
    background: linear-gradient(90deg, #02c076, #00d086);
}

.progress-fill.loss {
    background: linear-gradient(90deg, #f84960, #ff6b7a);
}

/* Performance Stats Grid - Unified with Bybit Style */
.perf-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.perf-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 88px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.perf-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.perf-item:hover::before {
    opacity: 1;
}

.perf-item:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 147, 26, 0.3);
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.15);
}

.perf-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.perf-value {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.perf-value.green {
    color: #00D4AA;
    text-shadow: 0 0 8px rgba(0, 212, 170, 0.3);
}

/* Bottom Notice */
.bottom-notice {
    text-align: center;
    padding: 16px;
    font-size: 14px;
    color: rgba(183, 189, 198, 0.7);
    background: rgba(43, 49, 57, 0.3);
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid rgba(43, 49, 57, 0.4);
}

/* Finished Notice */
.finished-notice {
    background: rgba(247, 147, 26, 0.1);
    border: 1px solid rgba(247, 147, 26, 0.2);
    color: #f7931a;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 24px;
    text-align: center;
}

/* Banner Icon */
.banner-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #f7931a, #ffb946);
    border-radius: 50%;
    position: relative;
}

.banner-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.5 2.54l2.62 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

/* Animations */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

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

.trader-card {
    animation: fadeInUp 0.6s ease-out;
}

.performance-section {
    animation: fadeInUp 0.8s ease-out;
}

/* Dark mode enhancements */
.green {
    color: #02c076;
}

/* Notification styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #1e2329;
    border: 1px solid #2b3139;
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.notification.success {
    border-color: #02c076;
    color: #02c076;
}

.notification.error {
    border-color: #f6465d;
    color: #f6465d;
}

.notification.info {
    border-color: #f7931a;
    color: #f7931a;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .notification {
        top: auto;
        bottom: 20px;
        right: 16px;
        left: 16px;
        text-align: center;
        transform: translateY(20px);
    }

    .notification.show {
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .notification {
        bottom: 16px;
        right: 12px;
        left: 12px;
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1e2329;
}

::-webkit-scrollbar-thumb {
    background: #2b3139;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #363c45;
}

/* Partners Bar */
.partners-bar {
    display: none !important;
}

.partners-container {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: none;
    margin: 0;
    padding: 0;
    width: max-content;
    height: 48px;
}

.partners-container.marquee {
    animation: marquee 60s linear infinite;
}

.announcement-item {
    font-size: 16px;
    font-weight: 500;
    color: #121214;
    margin: 0 32px;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 48px;
    display: flex;
    align-items: center;
    height: 48px;
}

.announcement-item:hover {
    color: #8B4513;
    text-decoration: underline;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.partners-bar:hover .partners-container.marquee {
    animation-play-state: paused;
}

/* Mobile styles for partners bar - already handled in main @media block above */

/* Mobile styles for 480px - already handled in main @media block above */

/* Adjust main content padding for fixed header */

.main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}

/* Footer */
.footer {
    background: #23263A !important;
    border: none !important;
    box-shadow: 0 4px 32px 0 rgba(20, 20, 30, 0.18);
    border-radius: 18px 18px 0 0 !important;
    /* margin-bottom: 24px; */
    padding: 48px 0 24px 0 !important;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 24px !important;
    padding-bottom: 70px !important;
}

.footer-content {
    background: #23263A !important;
    border-radius: 18px !important;
    padding: 24px 32px 12px 32px !important;
    display: flex;
    gap: 32px;
    justify-content: center;
    padding-right: 24px !important;
    padding-left: 24px !important;
    width: 100% !important;
    box-sizing: border-box;
}

.footer-section {
    background: #181C2A !important;
    border-radius: 12px !important;
    padding: 0 24px 0 0;
    min-width: 180px;
}

.footer-section h3 {
    color: #EDB926 !important;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.footer-section a {
    color: #B7BDC6 !important;
    font-size: 15px;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-section a:hover {
    color: #F7931A !important;
}

.footer-bottom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 100px;
    padding: 0;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: none;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: none;
    padding: 0;
}

.social-link svg {
    width: 24px;
    height: 24px;
    display: block;
}

.social-link:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.04);
}

@media (max-width: 600px) {
  .social-links {
    gap: 10px;
  }
  .social-link {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  .social-link svg {
    width: 20px;
    height: 20px;
  }
}

/* Убираем лишние бордеры и делаем футер "плавающим" */
@media (max-width: 900px) {
    .footer, .footer-content {
        max-width: 100vw;
        padding-left: 8px !important;
        padding-right: 24px !important;
    }
    .footer-section {
        min-width: 140px;
        padding-right: 8px;
    }
}

/* Мобильная версия */
@media (max-width: 768px) {
    html, body {
        background: #181C2A !important;
    }
    .footer, .footer-content {
        max-width: 100vw;
        border-radius: 16px 16px 0 0 !important;
        padding: 24px 0 12px 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .footer-section {
        padding: 0 0 0 0;
        min-width: 140px;
    }
    .footer-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .footer-section a {
        font-size: 13px;
        margin-bottom: 6px;
    }
    .footer {
        padding-bottom: 90px !important;
    }
}

/* Registration Banner */
.registration-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e2329;
    border-top: none;
    padding: 10px 20px;
    z-index: 999;
}

/* Уменьшение отступов в registration-banner для мобильной версии */
@media (max-width: 480px) {
    .registration-banner {
        padding: 6px 12px;
    }
    
    .banner-content {
        gap: 16px;
    }
    
    .banner-content span {
        font-size: 11px;
    }
    
    .banner-btn {
        padding: 6px 12px;
        font-size: 11px;
        min-height: 36px;
    }
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

.gift-icon {
    width: 24px;
    height: 24px;
}

.banner-content span {
    color: #B7BDC6;
    font-size: 14px;
}

.banner-btn {
    background: linear-gradient(135deg, #F7931A 0%, #EDB926 100%) !important;
    color: #181C2A !important;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(247, 147, 26, 0.25);
    white-space: nowrap;
    min-width: fit-content;
    text-align: center;
}

.banner-btn:hover {
    background: linear-gradient(135deg, #EDB926 0%, #F7931A 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247, 147, 26, 0.35);
}

/* Tab Content Styles */
.tab-content {
    display: none;
    animation: fadeInUp 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    order: 2;
    flex: 1;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    position: relative;
    order: 2;
    flex: 1;
}

/* Trades Tab Styles */
.trades-header {
    margin-bottom: 24px;
    width: 100%;
}

.trades-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

.summary-item {
    background: rgba(43, 49, 57, 0.3);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(43, 49, 57, 0.5);
}

.summary-label {
    display: block;
    font-size: 12px;
    color: #B7BDC6;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.summary-value.red {
    color: #f84960;
}

.trades-list {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(43, 49, 57, 0.5);
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.trade-item {
    display: grid;
    grid-template-columns: 1fr 80px 100px 100px 100px 120px;
    gap: 16px;
    padding: 16px 20px;
    align-items: center;
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
    transition: background 0.2s ease;
    min-width: 600px;
    width: 100%;
    box-sizing: border-box;
}

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

.trade-item:hover {
    background: rgba(43, 49, 57, 0.5);
}

.trade-pair {
    font-weight: 600;
    color: #fff;
}

.trade-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.trade-type.long {
    background: rgba(2, 192, 118, 0.1);
    color: #02c076;
    border: 1px solid rgba(2, 192, 118, 0.2);
}

.trade-type.short {
    background: rgba(248, 73, 96, 0.1);
    color: #f84960;
    border: 1px solid rgba(248, 73, 96, 0.2);
}

.trade-entry,
.trade-exit {
    font-family: monospace;
    color: rgba(183, 189, 198, 0.85);
    font-size: 14px;
}

.trade-pnl {
    font-weight: 600;
    font-family: monospace;
}

.trade-pnl.green {
    color: #02c076;
}

.trade-pnl.red {
    color: #f84960;
}

.trade-time {
    font-size: 12px;
    color: rgba(183, 189, 198, 0.6);
}

/* Bots Tab Styles */
.bots-notice {
    text-align: center;
    padding: 48px 24px;
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(43, 49, 57, 0.5);
}

.notice-icon {
    font-size: 48px;
    margin-bottom: 24px;
    animation: bounce 2s ease-in-out infinite;
}

.bots-notice h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.bots-notice p {
    font-size: 16px;
    color: rgba(183, 189, 198, 0.85);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.bot-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.bot-stat {
    background: rgba(43, 49, 57, 0.5);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(43, 49, 57, 0.7);
}

.bot-label {
    display: block;
    font-size: 12px;
    color: rgba(183, 189, 198, 0.85);
    margin-bottom: 8px;
}

.bot-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.bot-value.green {
    color: #02c076;
}

/* Followers Tab Styles */
.followers-header {
    margin-bottom: 32px;
}

.followers-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.followers-chart {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid rgba(43, 49, 57, 0.5);
}

.followers-chart h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 24px;
    text-align: center;
}

.chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    gap: 8px;
    margin-bottom: 16px;
}

.chart-bar {
    background: linear-gradient(180deg, #f7931a, #ffb946);
    border-radius: 4px 4px 0 0;
    flex: 1;
    min-height: 20px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover {
    filter: brightness(1.2);
    transform: scaleY(1.05);
}

.bar-value {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: #f7931a;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(183, 189, 198, 0.85);
}

.top-followers {
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(43, 49, 57, 0.5);
}

.top-followers h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.follower-item {
    display: grid;
    grid-template-columns: 50px 1fr 120px 120px;
    gap: 16px;
    padding: 16px 0;
    align-items: center;
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
    transition: all 0.2s ease;
}

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

.follower-item:hover {
    background: rgba(43, 49, 57, 0.3);
    margin: 0 -16px;
    padding: 16px;
    border-radius: 8px;
}

.follower-rank {
    font-size: 18px;
    font-weight: 600;
    color: #f7931a;
    text-align: center;
}

.follower-name {
    font-weight: 500;
    color: #fff;
}

.follower-capital {
    font-family: monospace;
    color: rgba(183, 189, 198, 0.85);
    text-align: right;
}

.follower-profit {
    font-family: monospace;
    font-weight: 600;
    text-align: right;
}

.follower-profit.green {
    color: #02c076;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .header-main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    
    .logo-section {
        flex-shrink: 0;
    }
    
    .logo-text {
        font-size: 28px;
    }
    
    .nav {
        flex: 1;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .nav-item {
        font-size: 13px;
        padding: 6px 10px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .nav-item:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(247, 147, 26, 0.3);
    }
    
    .header-actions {
        flex-shrink: 0;
    }
    
    .language-toggle {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 36px;
        min-height: 36px;
    }
}

@media (max-width: 480px) {
    .header-main {
        flex-direction: column;
        gap: 12px;
    }
    
    .logo-section {
        align-self: flex-start;
    }
    
    .nav {
        justify-content: flex-start;
        gap: 8px;
    }
    
    .nav-item {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .header-actions {
        position: absolute;
        top: 8px;
        right: 0;
    }
}

/* Responsive styles for new tabs */
@media (max-width: 768px) {
    /* Performance section on mobile should contain mobile tabs */
    .performance-section {
        background: rgba(43, 49, 57, 0.3);
        border-radius: 12px;
        padding: 16px 20px;
        border: 1px solid rgba(43, 49, 57, 0.5);
        margin: 0 auto 24px auto;
        order: 2;
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
    }

    /* Mobile Tabs Styles - Beautiful like PC */
    .mobile-tabs {
        display: flex !important;
        gap: 20px;
        margin: 0 0 24px 0;
        border-bottom: 1px solid rgba(43, 49, 57, 0.5);
        padding: 0 8px 12px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        max-width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .mobile-tab {
        background: transparent;
        border: none;
        color: rgba(183, 189, 198, 0.85);
        font-size: 15px;
        font-weight: 500;
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        white-space: nowrap;
        flex-shrink: 0;
        text-align: center;
        text-overflow: ellipsis;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-tab.active {
        color: #f7931a;
    }

    .mobile-tab.active::after {
        content: '';
        position: absolute;
        bottom: -13px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #f7931a;
        transform: scaleX(1);
        transition: transform 0.2s ease;
    }

    .mobile-tab:not(.active)::after {
        content: '';
        position: absolute;
        bottom: -13px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #f7931a;
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }

    .mobile-tab:hover:not(.active) {
        color: #fff;
    }

    .mobile-tab:hover::after {
        transform: scaleX(1);
    }

    /* Mobile Tab Content */
    .mobile-tab-content {
        display: none !important;
        animation: fadeInUp 0.3s ease;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-tab-content.active {
        display: block !important;
    }

    /* Hide desktop tabs on mobile */
    .performance-section .tabs {
        display: none;
    }

    .performance-section .tab-content {
        display: none !important;
    }

    /* Mobile performance section - the gray container */
    .mobile-performance-section {
        background: rgba(43, 49, 57, 0.3);
        border-radius: 12px;
        padding: 16px 20px;
        border: 1px solid rgba(43, 49, 57, 0.5);
        margin-bottom: 24px;
        order: 2;
        display: block !important;
    }

    .trades-summary,
    .followers-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .trade-item {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
    }

    .trade-item > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .trade-item > div::before {
        content: attr(class);
        font-size: 12px;
        color: rgba(183, 189, 198, 0.6);
        text-transform: capitalize;
    }

    .bot-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chart-container {
        height: 150px;
    }

    .follower-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .trades-summary,
    .followers-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .summary-item {
        padding: 12px;
    }

    .bots-notice {
        padding: 32px 16px;
    }

    .bots-notice h3 {
        font-size: 18px;
    }

    .bots-notice p {
        font-size: 14px;
    }

    .chart-container {
        height: 120px;
    }

    .followers-chart,
    .top-followers {
        padding: 16px;
    }
} 

/* Responsive Styles */
@media (max-width: 1200px) {
    .main {
        padding: 16px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* Additional mobile styles for 768px */
@media (max-width: 768px) {
    .header-actions {
        gap: 8px;
    }

    .language-toggle {
        padding: 6px 10px;
        font-size: 13px;
    }

    .invitation-banner {
        padding: 32px 16px;
        margin-bottom: 24px;
    }

    .invitation-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .invitation-subtitle {
        font-size: 16px;
    }

    .trader-card {
        padding: 24px 16px;
        margin-bottom: 24px;
    }

    .trader-header {
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .trader-avatar {
        width: 64px;
        height: 64px;
    }

    .trader-name {
        font-size: 20px;
        margin-bottom: 8px;
    }

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

    .stat-large {
        padding: 16px;
    }

    .stat-value-large {
        font-size: 24px;
    }

    .secondary-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .stat-item {
        padding: 12px;
    }

    .stat-value {
        font-size: 16px;
    }

    .additional-info {
        padding: 16px;
        margin-bottom: 24px;
    }

    .info-row {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .warning-notice,
    .copy-link {
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    .accept-btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .performance-section {
        padding: 20px 16px;
        margin-bottom: 0;
        border-radius: 12px;
        width: 100%;
        max-width: 480px;
    }

    .performance-section .tabs {
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        padding-left: 4px;
        padding-right: 4px;
    }

    .performance-section .tab {
        font-size: 14px;
        padding: 6px 16px;
        white-space: nowrap;
        text-align: center;
    }

    .perf-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .perf-value {
        font-size: 16px;
    }

    .partners-bar {
        padding: 8px 0;
    }

    .partners-container {
        gap: 32px;
    }

    .partners-container img {
        height: 16px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-bottom: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

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

    .banner-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .banner-btn {
        width: 100%;
        padding: 6px 12px;
        font-size: 11px;
        white-space: normal;
        line-height: 1.3;
        word-wrap: break-word;
    }

    /* Tab-specific responsive styles */
    .trades-summary,
    .followers-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .trade-item {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
    }

    .trade-item > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .trade-item > div::before {
        content: attr(class);
        font-size: 12px;
        color: rgba(183, 189, 198, 0.6);
        text-transform: capitalize;
    }

    .bot-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chart-container {
        height: 150px;
    }

    .follower-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Additional mobile styles for 480px */
@media (max-width: 480px) {
    .header-actions {
        gap: 6px;
    }

    .language-toggle {
        padding: 4px 8px;
        font-size: 12px;
    }

    .invitation-banner {
        padding: 24px 12px;
        margin-bottom: 12px;
    }

    .invitation-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .invitation-subtitle {
        font-size: 14px;
    }

    .trader-card {
        padding: 20px 12px;
        margin-bottom: 12px;
    }

    .trader-header {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .trader-avatar {
        width: 56px;
        height: 56px;
    }

    .trader-name {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .stat-value-large {
        font-size: 20px;
    }

    .warning-notice,
    .copy-link {
        padding: 12px;
        font-size: 12px;
    }

    .accept-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Уменьшение отступов в footer для мобильной версии */
    .footer {
        margin-top: 8px;
        padding: 16px 20px 12px;
    }

    .footer-content {
        padding: 12px 0;
    }

    .footer-section h3 {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .footer-section a {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .banner-content span {
        font-size: 12px;
    }

    .banner-btn {
        padding: 6px 12px;
        font-size: 11px;
        white-space: normal;
        line-height: 1.2;
        word-wrap: break-word;
        height: auto;
        min-height: 36px;
    }

    /* Уменьшение отступов в основном контенте */
    .main {
        padding: 16px 12px 80px 12px; /* Добавляем нижний отступ для кнопки */
    }

    .content-layout {
        gap: 8px;
        margin-bottom: 8px;
    }

    .cta-section {
        padding: 12px 0;
    }

    .performance-section {
        margin-bottom: 8px;
    }

    /* Tab-specific responsive styles for mobile */
    .trades-summary,
    .followers-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .summary-item {
        padding: 12px;
    }

    .bots-notice {
        padding: 32px 16px;
    }

    .bots-notice h3 {
        font-size: 18px;
    }

    .bots-notice p {
        font-size: 14px;
    }

    .chart-container {
        height: 120px;
    }

    .followers-chart,
    .top-followers {
        padding: 16px;
    }
} 

/* Responsive Styles */
/* Desktop стили для больших экранов */
@media (min-width: 769px) {
    .performance-section {
        padding: 24px;
    }
    
    .perf-title {
        font-size: 20px;
    }
    
    .chart-container {
        padding: 28px;
    }
    
    .chart-legend {
        gap: 40px;
        margin-bottom: 24px;
    }
    
    .legend-item {
        font-size: 15px;
    }
    
    .chart-area {
        height: 220px;
        margin-bottom: 20px;
    }
    
    .chart-y-axis {
        width: 65px;
        padding: 10px 0;
    }
    
    .chart-content {
        margin-left: 65px;
        margin-right: 20px;
        height: 100%;
    }
    
    .chart-svg {
        height: 200px;
    }
    
    .chart-x-axis {
        margin-left: 65px;
        margin-right: 20px;
        margin-top: 16px;
    }
    
    .y-label {
        font-size: 12px;
        padding-right: 14px;
    }
    
    .x-label {
        font-size: 12px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .perf-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .additional-metrics {
        padding: 20px;
    }
    
    .additional-metrics h4 {
        font-size: 18px;
    }
}

/* Mobile стили */
@media (max-width: 768px) {
    .performance-section {
        padding: 16px;
        margin-bottom: 20px;
    }
    
    .perf-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 16px;
    }
    
    .period-selector {
        align-self: flex-end;
    }
    
    .perf-title {
        font-size: 16px;
    }
    
    .period-btn {
        font-size: 13px;
        padding: 6px 10px;
        min-width: 70px;
    }
    
    .period-option {
        font-size: 13px;
        padding: 5px 8px;
    }
    
         .chart-container {
         padding: 16px;
     }
     
     .chart-legend {
         justify-content: center;
         gap: 20px;
         margin-bottom: 16px;
     }
     
     .legend-item {
         font-size: 13px;
     }
     
     .chart-area {
         height: 180px;
         margin-bottom: 12px;
     }
     
     .chart-y-axis {
         width: 45px;
         padding: 6px 0;
     }
     
     .chart-content {
         margin-left: 45px;
         margin-right: 12px;
         height: 100%;
     }
     
     .chart-svg {
         height: 168px;
     }
     
     .chart-x-axis {
         margin-left: 45px;
         margin-right: 12px;
         margin-top: 10px;
         padding-top: 8px;
     }
     
     .y-label {
         font-size: 10px;
         padding-right: 8px;
     }
     
     .x-label {
         font-size: 10px;
     }
    
    .additional-metrics {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    .additional-metrics h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .metrics-grid {
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .additional-metrics .metric-item {
        padding: 8px 0;
    }
    
    .additional-metrics .metric-label {
        font-size: 12px;
        max-width: 65%;
    }
    
    .additional-metrics .metric-value {
        font-size: 13px;
    }
    
    .perf-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 16px;
    }
    
    .perf-item {
        padding: 8px 6px;
    }
    
    .perf-label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
         .perf-value {
         font-size: 12px;
     }
     
     /* Tab Navigation для мобильных */
     .tabs {
         gap: 16px;
         margin-bottom: 20px;
         padding-bottom: 10px;
         justify-content: center;
         padding-left: 2px;
         padding-right: 2px;
     }
     
     .tab {
         font-size: 14px;
         padding: 6px 10px;
         text-align: center;
     }
 } 

/* Tabs Navigation */
.performance-section .tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(43, 49, 57, 0.5);
    padding: 0 8px 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    order: 1;
}

.performance-section .tab {
    background: transparent;
    border: none;
    color: rgba(183, 189, 198, 0.85);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}

.performance-section .tab.active {
    color: #f7931a;
}

.performance-section .tab.active::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f7931a;
    transform: scaleX(1);
    transition: transform 0.2s ease;
}

.performance-section .tab:not(.active)::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f7931a;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.performance-section .tab:hover:not(.active) {
    color: #fff;
}

.performance-section .tab:hover::after {
    transform: scaleX(1);
}

/* Performance Grid for Statistics Tab */
.performance-grid {
    display: grid;
    gap: 24px;
}

.perf-card {
    background: rgba(43, 49, 57, 0.3);
    border: 1px solid rgba(43, 49, 57, 0.5);
    border-radius: 12px;
    padding: 24px;
}

.perf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.perf-item {
    text-align: center;
}

.perf-label {
    font-size: 12px;
    color: rgba(183, 189, 198, 0.85);
    margin-bottom: 8px;
    display: block;
}

.perf-value {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.perf-value.green {
    color: #02c076;
} 

/* MOBILE BYBIT DESIGN - EXACT COPY */
@media (max-width: 768px) {
    body {
        background: #000 !important;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .main {
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-layout {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .left-column,
    .right-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .right-column {
        display: block !important;
    }

    /* Hide desktop elements */
    .hero-header {
        display: none !important;
    }
    
    .trader-info,
    .trader-metrics {
        display: none !important;
    }
    
    .tabs:not(.mobile-tabs) {
        display: none !important;
    }

    /* Mobile Header - Fixed Top Bar */
    .mobile-header {
        position: fixed;
        top: 82px;
        left: 0;
        right: 0;
        height: 48px;
        background: #181C2A !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        z-index: 1002;
        border-bottom: 1px solid #333;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .mobile-back-button {
        font-size: 20px;
        color: #fff !important;
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }

    .mobile-trader-info {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #fff;
        flex-shrink: 0;
        position: relative;
    }

    .mobile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Mobile PRO Badge */
    .mobile-pro-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
        color: #000;
        font-size: 6px;
        font-weight: 700;
        padding: 1px 3px;
        border-radius: 4px;
        border: 1px solid #1e2329;
        z-index: 10;
        box-shadow: 0 1px 3px rgba(247, 147, 26, 0.4);
        letter-spacing: 0.2px;
    }

    .mobile-trader-name {
        font-size: 16px;
        font-weight: 600;
        color: #fff !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .mobile-actions {
        display: flex !important;
        align-items: center;
        gap: 12px;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }

    .mobile-icon {
        font-size: 18px;
        color: #fff !important;
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Mobile Content - With Top Padding */
    .trader-card {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background: #000 !important;
        border: none !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    /* Add padding to first mobile element */
    .mobile-trader-details {
        margin-top: 130px;
        padding-top: 8px;
    }

    /* Mobile Trader Details */
    .mobile-trader-details {
        padding: 12px 16px;
        border-bottom: 1px solid #333;
        margin-bottom: 4px;
    }

    .mobile-aum-info {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 12px;
        color: #888;
    }

    .mobile-aum-icon,
    .mobile-profit-icon {
        font-size: 12px;
    }

    .mobile-aum-text,
    .mobile-profit-text {
        margin-right: 16px;
    }

    /* Mobile Stats Row - Improved Alignment */
    .mobile-stats-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid #333;
        margin-bottom: 4px;
        align-items: stretch;
    }

    .mobile-stat {
        text-align: center;
        padding: 8px 12px;
        border-radius: 8px;
        background: rgba(43, 49, 57, 0.2);
        border: 1px solid rgba(43, 49, 57, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 70px;
        position: relative;
        overflow: hidden;
    }

    .mobile-stat-label {
        font-size: 12px;
        color: #888;
        font-weight: 400;
        margin-bottom: 6px;
        display: block;
        text-align: center;
        width: 100%;
        line-height: 1.3;
    }

    .mobile-stat-value {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        text-align: center;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-stat-max {
        font-size: 14px;
        color: #888;
        font-weight: 400;
    }

    /* Mobile Description Text */
    .mobile-description-text {
        padding: 12px 20px;
        border-bottom: 1px solid #333;
        margin-bottom: 4px;
        overflow: hidden;
        position: relative;
    }

    .mobile-description-text p {
        font-size: 13px;
        color: #888;
        margin: 4px 0;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }

    .mobile-more-link {
        color: #888 !important;
        font-size: 12px !important;
    }

    /* Mobile Tags */
    .mobile-tags {
        display: flex !important;
        gap: 12px;
        padding: 12px 0px;
        border-bottom: 1px solid #333;
        flex-wrap: wrap;
        margin-bottom: 8px;
        align-items: center;
        justify-content: flex-start;
    }

    .mobile-tag {
        padding: 8px 14px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 500;
        text-transform: capitalize;
        white-space: nowrap;
        text-align: center;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-tag.green {
        background: rgba(0, 196, 130, 0.15);
        color: #00c482;
        border: 1px solid rgba(0, 196, 130, 0.3);
    }

    .mobile-tag.blue {
        background: rgba(101, 101, 255, 0.15);
        color: #6565ff;
        border: 1px solid rgba(101, 101, 255, 0.3);
    }

    .mobile-tag.orange {
        background: rgba(255, 165, 0, 0.15);
        color: #ffa500;
        border: 1px solid rgba(255, 165, 0, 0.3);
    }



    /* Hide desktop tab content completely on mobile */
    .performance-section .tab-content {
        display: none !important;
    }

    .performance-section .tab-content.active {
        display: none !important;
    }

    /* Mobile Trades Styles */
    .mobile-trades-header {
        margin-bottom: 20px;
    }

    .mobile-trades-header h4 {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 16px;
    }

    .mobile-trades-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .mobile-summary-item {
        background: rgba(43, 49, 57, 0.3);
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        border: 1px solid rgba(43, 49, 57, 0.5);
    }

    .mobile-summary-label {
        display: block;
        font-size: 11px;
        color: rgba(183, 189, 198, 0.7);
        margin-bottom: 6px;
        font-weight: 500;
    }

    .mobile-summary-value {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
    }

    .mobile-summary-value.green {
        color: #02c076;
    }

    .mobile-summary-value.red {
        color: #f84960;
    }

    .mobile-trades-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-trade-item {
        background: rgba(43, 49, 57, 0.3);
        border-radius: 8px;
        padding: 16px;
        border: 1px solid rgba(43, 49, 57, 0.5);
    }

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

    .mobile-trade-pair {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
    }

    .mobile-trade-type {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
    }

    .mobile-trade-type.long {
        background: rgba(2, 192, 118, 0.1);
        color: #02c076;
        border: 1px solid rgba(2, 192, 118, 0.2);
    }

    .mobile-trade-type.short {
        background: rgba(248, 73, 96, 0.1);
        color: #f84960;
        border: 1px solid rgba(248, 73, 96, 0.2);
    }

    .mobile-trade-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-trade-price,
    .mobile-trade-pnl {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .mobile-trade-label {
        font-size: 11px;
        color: rgba(183, 189, 198, 0.7);
        font-weight: 500;
    }

    .mobile-trade-value {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        font-family: monospace;
    }

    .mobile-trade-value.green {
        color: #02c076;
    }

    .mobile-trade-value.red {
        color: #f84960;
    }



    /* Mobile Performance Section */
    .mobile-performance-section {
        padding: 8px 20px;
        display: block !important;
        margin: 0 auto 60px auto; /* Space for bottom actions */
        max-width: 400px;
        box-sizing: border-box;
    }

    .mobile-performance-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        margin-top: 0;
        padding: 8px 12px;
        background: rgba(43, 49, 57, 0.1);
        border-radius: 8px;
    }

    .mobile-performance-title {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    }

    .mobile-period-dropdown {
        background: #333;
        border: 1px solid #555;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        padding: 8px 12px;
        min-width: 80px;
        position: relative;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 32px;
    }

    .mobile-period-dropdown:focus {
        outline: none;
        border-color: #f7931a;
        box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.2);
    }

    .mobile-period-dropdown option {
        background: #333;
        color: #fff;
        padding: 8px 12px;
        border: none;
    }

    /* Mobile Performance Stats */
    .mobile-performance-stats {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .mobile-performance-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 12px;
        background: rgba(43, 49, 57, 0.2);
        border-radius: 8px;
    }

    .mobile-performance-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 4px;
    }

    .mobile-performance-label {
        font-size: 12px;
        color: #888;
        font-weight: 400;
    }

    .mobile-performance-value {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
    }

    .mobile-performance-value.green {
        color: #00c482;
    }

    .mobile-performance-value.red {
        color: #ff4747;
    }

    /* Mobile Additional Info */
    .mobile-additional-info {
        border-top: 1px solid #333;
        padding: 16px 12px;
        margin-bottom: 20px;
        background: rgba(43, 49, 57, 0.1);
        border-radius: 8px;
        margin-top: 0;
    }

    .mobile-additional-info h4 {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 12px;
    }

    .mobile-additional-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(43, 49, 57, 0.3);
    }

    .mobile-additional-label {
        font-size: 14px;
        color: #888;
        font-weight: 400;
    }

    .mobile-additional-value {
        font-size: 14px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .mobile-additional-stats {
        display: flex;
        justify-content: space-between;
        margin: 16px 0;
        padding: 8px;
        background: rgba(43, 49, 57, 0.2);
        border-radius: 6px;
    }

    .mobile-additional-text {
        font-size: 12px;
        color: #888;
    }

    .mobile-additional-text strong {
        color: #fff;
        font-weight: 700;
    }

    .mobile-progress-bar {
        width: 100%;
        height: 4px;
        background: #333;
        border-radius: 2px;
        margin: 12px 0;
        overflow: hidden;
    }

    .mobile-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #00c482 0%, #ff4747 90%);
        border-radius: 2px;
    }

    .mobile-disclaimer {
        font-size: 12px;
        color: #888;
        text-align: center;
        margin-top: 12px;
    }

    /* Mobile Bottom Actions - Inside Container */
    .mobile-bottom-actions {
        margin-top: 24px;
        padding: 16px 0 0 0;
        border-top: 1px solid rgba(43, 49, 57, 0.5);
        display: block !important;
    }

    .mobile-action-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
    }

    .mobile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: transparent;
        border: none;
        color: #888;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 60px;
    }

    .mobile-action-btn:hover {
        color: #fff;
    }

    .mobile-action-btn svg {
        width: 20px;
        height: 20px;
    }

    .mobile-main-cta-btn {
        flex: 1;
        background: linear-gradient(135deg, #f7931a 0%, #ff8c00 100%);
        border: none;
        border-radius: 12px;
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-left: 12px;
    }

    .mobile-main-cta-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(247, 147, 26, 0.5);
    }

    .mobile-waitlist-notice {
        text-align: center;
        font-size: 12px;
        color: #f7931a;
        font-weight: 500;
    }

    /* Hide old mobile elements */
    .mobile-trader-header,
    .mobile-stats-grid,
    .mobile-description,
    .mobile-badges,
    .mobile-performance-grid,
    .mobile-action-buttons,
    .mobile-cta-container,
    .mobile-finished-notice {
        display: none !important;
    }
}

/* Hide mobile elements on desktop */
/* Desktop styles */
@media (min-width: 769px) {
    body {
        background: #0F0F0F !important;
    }

    .container {
        padding: 90px 40px 16px 40px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .main {
        padding: 24px !important;
        max-width: 1440px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .content-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px !important;
        align-items: stretch !important;
        align-content: start !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
    }

    .left-column {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
    }
    
    .right-column {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        grid-column: 2 !important;
    }

    .hero-header {
        display: block !important;
        text-align: center !important;
        padding: 32px 20px !important;
        margin-bottom: 32px !important;
        grid-column: 1 / -1 !important;
        order: -1 !important;
    }

    /* Desktop Tabs - Override mobile styles */
    .tabs {
        display: flex !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
        border-bottom: 1px solid rgba(43, 49, 57, 0.5) !important;
        padding: 0 8px 12px 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .tab {
        background: transparent !important;
        border: none !important;
        color: rgba(183, 189, 198, 0.85) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 8px 16px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tab.active {
        color: #f7931a !important;
    }

    .tab.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: -17px !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background: #f7931a !important;
        transform: scaleX(1) !important;
        transition: transform 0.2s ease !important;
    }

    .tab:not(.active)::after {
        content: '' !important;
        position: absolute !important;
        bottom: -17px !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background: #f7931a !important;
        transform: scaleX(0) !important;
        transition: transform 0.2s ease !important;
    }

    .tab:hover:not(.active) {
        color: #fff !important;
    }

    .tab:hover::after {
        transform: scaleX(1) !important;
    }

    /* Desktop Tab Content */
    .tab-content {
        display: none !important;
        animation: fadeInUp 0.3s ease !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        order: 2 !important;
        flex: 1 !important;
    }

    .tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        order: 2 !important;
        flex: 1 !important;
    }

    /* Desktop Trader Card */
    .trader-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        padding: 20px !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        height: fit-content !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .trader-info,
    .trader-metrics {
        display: flex !important;
    }

    .trader-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .additional-metrics,
    .perf-stats {
        display: block !important;
    }

    .perf-stats {
        display: grid !important;
    }

    .performance-section {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 500px !important;
    }
    
    /* CTA Section - Desktop */
    .cta-section {
        text-align: center !important;
        padding: 24px 0 !important;
        margin-top: 24px !important;
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }
    
    .cta-button {
        background: linear-gradient(135deg, #F7931A 0%, #EDB926 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 16px 40px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #181C2A !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 20px rgba(247, 147, 26, 0.3) !important;
        margin: 16px 0 !important;
        min-width: 280px !important;
    }
    
    /* Hide all mobile elements on desktop - Максимальная специфичность */
    .main .trader-card .mobile-header,
    .main .trader-card .mobile-trader-details,
    .main .trader-card .mobile-stats-row,
    .main .trader-card .mobile-description-text,
    .main .trader-card .mobile-tags,
    .main .trader-card .mobile-tabs,
    .main .trader-card .mobile-tab-content,
    .main .trader-card .mobile-sub-tabs,
    .main .trader-card .mobile-performance-section,
    .main .trader-card .mobile-bottom-actions,
    .main .trader-card .mobile-trader-header,
    .main .trader-card .mobile-stats-grid,
    .main .trader-card .mobile-description,
    .main .trader-card .mobile-badges,
    .main .trader-card .mobile-performance-grid,
    .main .trader-card .mobile-action-buttons,
    .main .trader-card .mobile-cta-container,
    .main .trader-card .mobile-finished-notice,
    .mobile-header,
    .mobile-trader-details,
    .mobile-stats-row,
    .mobile-description-text,
    .mobile-tags,
    .mobile-tabs,
    .mobile-tab-content,
    .mobile-sub-tabs,
    .mobile-performance-section,
    .mobile-bottom-actions,
    .mobile-trader-header,
    .mobile-stats-grid,
    .mobile-description,
    .mobile-badges,
    .mobile-performance-grid,
    .mobile-action-buttons,
    .mobile-cta-container,
    .mobile-finished-notice {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
} 

/* Network Selection Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.modal-content {
    position: relative;
    margin: auto;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(247, 147, 26, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: modalSlideIn 0.3s ease-out;
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 24px 0 24px;
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: rgba(183, 189, 198, 0.7);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(43, 49, 57, 0.5);
    color: #fff;
}

.modal-body {
    padding: 24px;
}

.modal-layout {
    display: flex;
    gap: 32px;
    min-height: 400px;
}

.modal-left {
    flex: 1;
    padding-right: 16px;
}

.modal-right {
    flex: 1;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Quick Deposit Styles */
.deposit-title {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 32px;
    text-align: left;
}

.crypto-options {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.crypto-option {
    position: relative;
    width: 64px;
    height: 64px;
    border: 2px solid #3A3A3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.crypto-option:hover {
    border-color: #4A9EFF;
}

.crypto-option.active {
    border-color: #4A9EFF;
    background: rgba(74, 158, 255, 0.1);
}

.crypto-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crypto-icon.btc {
    background: #F7931A;
    border-radius: 50%;
}

.crypto-icon.eth {
    background: #627EEA;
    border-radius: 50%;
}

.crypto-icon.usdt {
    background: #26A17B;
    border-radius: 50%;
}

.selection-arrow {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    background: #FFFFFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-description {
    margin-bottom: 32px;
}

.deposit-description p {
    font-size: 14px;
    color: rgba(183, 189, 198, 0.8);
    line-height: 1.5;
}

.network-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.network-option {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(43, 49, 57, 0.3);
    border: 1px solid rgba(43, 49, 57, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.network-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(247, 147, 26, 0.1), 
        transparent);
    transition: left 0.5s ease;
}

.network-option:hover {
    border-color: rgba(247, 147, 26, 0.6);
    background: rgba(43, 49, 57, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 147, 26, 0.15);
}

.network-option:hover::before {
    left: 100%;
}

.network-option:active {
    transform: translateY(0);
}

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

.network-icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.network-icon-wrapper.trc20 {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.network-icon-wrapper.bep20 {
    background: linear-gradient(135deg, #f0b90b 0%, #f8d12f 100%);
    box-shadow: 0 4px 12px rgba(240, 185, 11, 0.3);
}

.network-symbol {
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.network-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-info {
    flex: 1;
}

.network-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.network-info p {
    font-size: 14px;
    color: rgba(183, 189, 198, 0.8);
    margin: 0 0 8px 0;
}

.network-fee {
    font-size: 12px;
    color: rgba(183, 189, 198, 0.6);
    background: rgba(43, 49, 57, 0.5);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.network-arrow {
    font-size: 18px;
    color: rgba(183, 189, 198, 0.5);
    transition: all 0.3s ease;
}

.network-option:hover .network-arrow {
    color: #f7931a;
    transform: translateX(4px);
}

.modal-note {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    align-items: flex-start;
}

.note-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.modal-note p {
    font-size: 13px;
    color: rgba(183, 189, 198, 0.8);
    margin: 0;
    line-height: 1.5;
}

/* QR Code Section */
.qr-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.qr-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    margin-bottom: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.qr-placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.qr-placeholder-text {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 1.4;
}

.qr-code-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.qr-code-display img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 10px;
}

.wallet-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wallet-address,
.network-name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.address-label,
.network-label {
    color: #CCCCCC;
    font-size: 14px;
    font-weight: 500;
}

.address-text,
.network-text {
    color: #FFFFFF;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    word-break: break-all;
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
    color: #FFFFFF;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.copy-btn:hover {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931a 100%);
    transform: translateY(-1px);
}

.copy-btn:active {
    transform: translateY(0);
}

.copy-icon {
    font-size: 16px;
}

/* Wallet Address Section */
.wallet-address-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.wallet-address-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    word-break: break-all;
    text-align: center;
    min-height: 20px;
}

.send-amount-btn {
    background: linear-gradient(135deg, #4A9EFF 0%, #6B73FF 100%);
    color: #FFFFFF;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
}

.send-amount-btn:hover {
    background: linear-gradient(135deg, #6B73FF 0%, #4A9EFF 100%);
    transform: translateY(-1px);
}

.send-amount-btn:active {
    transform: translateY(0);
}

/* Modal Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
}

/* Mobile Modal Styles */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 20px auto;
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 20px 20px 16px 20px;
    }
    
    .modal-header h3 {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-layout {
        flex-direction: column;
        gap: 24px;
        min-height: auto;
    }
    
    .modal-left,
    .modal-right {
        padding: 0;
        border: none;
    }
    
    .modal-right {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 24px;
    }
    
    .network-option {
        padding: 16px;
    }
    
    .network-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .network-symbol {
        font-size: 16px;
    }
    
    .network-badge {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
    
    .network-info h4 {
        font-size: 15px;
    }
    
    .network-info p {
        font-size: 13px;
    }
    
    .network-fee {
        font-size: 11px;
    }
    
    .qr-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .qr-code-container {
        min-height: 150px;
        margin-bottom: 16px;
    }
    
    .qr-placeholder {
        padding: 30px 15px;
    }
    
    .qr-placeholder-icon {
        font-size: 36px;
    }
    
    .qr-placeholder-text {
        font-size: 12px;
    }
    
    .qr-code-display img {
        max-width: 150px;
        max-height: 150px;
    }
    
    .wallet-info {
        gap: 12px;
    }
    
    .address-text,
    .network-text {
        font-size: 12px;
        padding: 10px;
    }
    
    .copy-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        margin: 10px auto;
    }
    
    .modal-header {
        padding: 16px 16px 12px 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .network-options {
        gap: 12px;
    }
    
    .network-option {
        padding: 14px;
        gap: 12px;
    }
    
    .network-icon-wrapper {
        width: 36px;
        height: 36px;
    }
    
    .modal-note {
        padding: 12px;
        gap: 8px;
    }
}

/* Desktop Layout - Cleaned up version */
@media (min-width: 769px) {
    .hero-header {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        order: -1 !important;
    }

    .cta-section {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        order: 999 !important;
    }
}

/* Desktop Layout - Максимальный приоритет */
@media (min-width: 769px) {
    /* Максимальная специфичность для десктопного grid layout */
    .main .content-layout {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 32px !important;
        align-items: stretch !important;
        align-content: start !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
    }
    
    .main .content-layout .left-column {
        display: flex !important;
        flex-direction: column !important;
        width: 48% !important;
        max-width: 48% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
    }
    
    .main .content-layout .right-column {
        display: flex !important;
        flex-direction: column !important;
        width: 48% !important;
        max-width: 48% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        grid-column: 2 !important;
    }
    
    /* Убедимся, что trader-card и performance-section не вылезают из grid */
    .main .content-layout .trader-card,
    .main .content-layout .performance-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* Обеспечим отображение десктопных элементов */
    .main .content-layout .trader-card .trader-info,
    .main .content-layout .trader-card .trader-metrics {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .main .content-layout .trader-card .trader-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

}

/* Ensure trader and stats cards are placed opposite each other on desktops */
@media (min-width: 1025px) {
    .content-layout {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* push cards to opposite edges */
        align-items: flex-start !important;
        gap: 40px !important; /* keep nice spacing */
    }

    .content-layout .left-column,
    .content-layout .right-column {
        flex: 1 1 0 !important;
        max-width: 48% !important; /* make sure both columns fit side-by-side */
    }
}

/* Fix for the right card content layout */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.perf-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px; /* Increased gap for better spacing */
    margin-top: 24px; /* Increased margin-top */
}

.metric-item, .perf-item {
    background-color: #2c2c2e;
    padding: 16px; /* Increased padding */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Increased gap */
}

.metric-label, .perf-label {
    font-size: 0.9em;
    color: #8a8a8e;
}

.metric-value, .perf-value {
    font-size: 1.4em; /* Increased font size for values */
    font-weight: bold;
}

/* Symmetrical layout inside Trader Card */
.trader-info {
    display: grid;
    grid-template-columns: 120px 1fr 1fr; /* Аватар + 2 статистических блока */
    gap: 24px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.trader-avatar {
    margin: 0 auto; /* Центрируем аватар */
}

.trader-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Два блока в строке */
    gap: 24px;
    justify-items: center;
}

/* Symmetrical grid for metrics */
.trader-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #2b3139;
}

/* Performance stats symmetrical grid */
.perf-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Tabs center alignment */
.tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* Ensure symmetrical buttons in metrics-grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Trader Card - Complete Redesign */
.trader-card {
    background: linear-gradient(135deg, #1e2329 0%, #262c35 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(43, 49, 57, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.trader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f7931a 0%, #ff6b35 100%);
}

.trader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(247, 147, 26, 0.3);
}

/* Trader Info Section */
.trader-info {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trader-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f7931a;
    background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
    padding: 2px;
    flex-shrink: 0;
    position: relative;
}

.trader-avatar::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
    z-index: -1;
    animation: pulse 2s infinite;
}

/* PRO Badge */
.pro-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid #1e2329;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(247, 147, 26, 0.4);
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.trader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #2b3139;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 24px;
}

.trader-details {
    flex: 1;
    min-width: 0;
}

.trader-name {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.trader-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(43, 49, 57, 0.3);
    padding: 20px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 88px;
    justify-content: center;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-item:hover::before {
    opacity: 1;
}

.stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 147, 26, 0.3);
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.15);
}

.stat-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    line-height: 1.2;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stat-value.capital {
    color: #00D4AA;
    text-shadow: 0 0 8px rgba(0, 212, 170, 0.3);
}

.stat-value.profit {
    color: #00D4AA;
    text-shadow: 0 0 8px rgba(0, 212, 170, 0.3);
}

/* Trader Metrics Grid */
.trader-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: auto;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 20px 16px;
    background: rgba(43, 49, 57, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-item:hover::before {
    opacity: 1;
}

.metric-item:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 147, 26, 0.3);
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.15);
}

.metric-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    line-height: 1.2;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .trader-card {
        padding: 24px;
        min-height: auto;
    }
    
    .trader-info {
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .trader-avatar {
        width: 60px;
        height: 60px;
    }
    
    .trader-name {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    .trader-stats {
        gap: 16px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 18px;
    }
    
    .trader-metrics {
        gap: 12px;
    }
    
    .metric-item {
        min-height: 75px;
        padding: 16px 12px;
    }
    
    .metric-value {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .trader-card {
        padding: 20px;
    }
    
    .trader-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .trader-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .metric-item {
        min-height: 65px;
        padding: 14px 10px;
    }
    
    .metric-value {
        font-size: 16px;
    }
    
    .metric-label {
        font-size: 11px;
    }
}

/* Unified Card Styles - Bybit Design System */
/* Ensure all card elements have consistent styling */
.stat-item, .metric-item, .perf-item {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.stat-item *, .metric-item *, .perf-item * {
    position: relative;
    z-index: 2;
}

/* Ensure consistent grid spacing across all sections */
.trader-metrics, .metrics-grid, .perf-stats {
    align-items: stretch;
}

/* Enhanced mobile statistics alignment */
@media (max-width: 768px) {
    .mobile-stats-row {
        align-items: stretch;
    }
    
    .mobile-stat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 80px;
    }
}

/* Ensure consistent sizing for desktop */
@media (min-width: 769px) {
    .stat-item, .metric-item {
        min-height: 88px;
    }
    
    .perf-item {
        min-height: 88px;
    }
    
    /* Ensure all grids have consistent alignment */
    .trader-stats, .trader-metrics, .metrics-grid, .perf-stats {
        align-items: stretch;
    }
}

/* Fix any responsive issues */
@media (max-width: 480px) {
    .stat-item, .metric-item, .perf-item {
        min-height: 75px;
        padding: 16px 12px;
    }
}

@media (max-width: 768px) {
  .performance-section {
    display: none !important;
  }
  .mobile-avatar {
    position: relative;
    display: inline-block;
  }
  .mobile-pro-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #f7931a, #ffb946);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
    padding: 2px 8px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
}

@media (max-width: 768px) {
  .container, .main {
    min-height: 100vh;
    box-sizing: border-box;
  }
}
@media (max-width: 480px) {
  .container, .main {
    min-height: 100vh;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .logo-section {
    align-items: center !important;
    justify-content: center !important;
    height: 44px;
    display: flex;
  }
  .logo {
    align-items: center !important;
    display: flex;
    height: 44px;
  }
  .logo-text {
    line-height: 44px !important;
    display: flex;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .footer {
    background: #181b20;
    padding: 0 0 32px 0;
    width: 100vw;
    min-width: 0;
    border-radius: 0;
    margin: 0;
  }
  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    max-height: 70vh;
    overflow-y: auto;
  }
  .footer-section {
    background: #23272f;
    margin: 0 0 12px 0;
    padding: 18px 16px 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid #222;
    box-sizing: border-box;
    width: 100%;
  }
  .footer-section:last-child {
    border-bottom: none;
  }
  .footer-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: #EDB926;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .footer-section a {
    display: block;
    color: #B7BDC6;
    font-size: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    line-height: 1.6;
    word-break: break-word;
    white-space: normal;
    padding-left: 2px;
  }
  .footer-section a:last-child {
    margin-bottom: 0;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    width: 100vw;
    padding: 0 0 12px 0;
    box-sizing: border-box;
    align-items: flex-start;
  }

  .footer-info a {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 2px;
    word-break: break-word;
    white-space: normal;
  }
  .social-links {
    justify-content: flex-start;
    gap: 14px;
    width: 100vw;
    padding: 0 0 8px 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .footer-content {
    max-height: 160px;
    font-size: 12px;
    margin-left: 16px;
    margin-right: 16px;
    width: auto;
    box-sizing: border-box;
  }
  .footer-section h3 {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .footer-section a {
    font-size: 12px;
    margin-bottom: 8px;
  }
}

/* --- Новый современный стиль для статистики и метрик --- */
.trader-stats, .trader-metrics, .main-stats, .secondary-stats, .perf-stats, .metrics-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}
.trader-stats {
  grid-template-columns: repeat(2, 1fr);
}
.trader-metrics {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .trader-stats, .trader-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.stat-item, .metric-item, .perf-item {
  background: rgba(43,49,57,0.85);
  border-radius: 14px;
  border: 1px solid rgba(43,49,57,0.5);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
  padding: 18px 12px 14px 12px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.stat-item:hover, .metric-item:hover, .perf-item:hover {
  box-shadow: 0 4px 24px 0 rgba(247,147,26,0.10);
  border-color: #f7931a;
}
.stat-label, .metric-label, .perf-label {
  font-size: 13px;
  color: #b7bdc6;
  margin-bottom: 6px;
  display: block;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.stat-value, .metric-value, .perf-value {
  font-size: 22px;
  font-weight: 700;
  color: #02c076;
  margin-top: 2px;
  word-break: break-all;
}
.stat-value.profit, .perf-value.green, .metric-value.green {
  color: #02c076;
}
.stat-value.capital, .perf-value.currency {
  color: #19e6c1;
}
.stat-value.red, .perf-value.red, .metric-value.red {
  color: #f84960;
}
@media (max-width: 600px) {
  .stat-item, .metric-item, .perf-item {
    padding: 12px 6px 10px 6px;
    font-size: 15px;
  }
  .stat-label, .metric-label, .perf-label {
    font-size: 11px;
    margin-bottom: 3px;
  }
  .stat-value, .metric-value, .perf-value {
    font-size: 16px;
  }
}
/* Убираем лишние margin у grid-контейнеров, если последний */
.trader-stats:last-child, .trader-metrics:last-child, .main-stats:last-child, .secondary-stats:last-child, .perf-stats:last-child, .metrics-grid:last-child {
  margin-bottom: 0;
}

/* --- Убираю свечение у всех шрифтов --- */
.stat-value, .stat-value-large, .perf-value, .metric-value, .main-stats .stat-value-large, .main-stats .stat-label, .stat-label, .perf-label, .perf-value.green, .perf-value.red {
  text-shadow: none !important;
}

/* --- Симметрия и строгий стиль для карточек статистики --- */
.trader-stats, .trader-metrics, .main-stats, .secondary-stats, .perf-stats, .metrics-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 24px;
  width: 100%;
}
.trader-stats, .trader-metrics, .main-stats {
  grid-template-columns: repeat(2, 1fr);
}
.secondary-stats, .metrics-grid, .perf-stats {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .trader-stats, .trader-metrics, .main-stats, .secondary-stats, .metrics-grid, .perf-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.stat-item, .metric-item, .perf-item {
  background: rgba(43,49,57,0.85);
  border-radius: 14px;
  border: 1px solid rgba(43,49,57,0.5);
  box-shadow: none;
  padding: 18px 12px 14px 12px;
  text-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stat-label, .metric-label, .perf-label {
  font-size: 13px;
  color: #b7bdc6;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.stat-value, .metric-value, .perf-value {
  font-size: 22px;
  font-weight: 700;
  color: #00d4aa;
  margin-bottom: 0;
  letter-spacing: 0.1px;
}
.stat-value.profit, .perf-value.green, .metric-value.green {
  color: #00d4aa;
}
.stat-value.capital {
  color: #00d4aa;
}
.stat-value.red, .perf-value.red, .metric-value.red {
  color: #f84960;
}
/* --- Строгий фон и убираем лишние эффекты --- */
.trader-card, .main-stats, .secondary-stats, .perf-stats, .metrics-grid {
  background: linear-gradient(135deg, #23272f 0%, #181b20 100%);
  border-radius: 18px;
  border: 1px solid #23272f;
  box-shadow: none;
}
/* --- Симметрия для заголовка и аватара --- */
.trader-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}
.trader-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  background: none !important;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: none;
  margin: 0 auto 18px auto;
  position: relative;
  padding: 0 !important;
}

#traderAvatarDesktop, .trader-avatar img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: none !important;
  border: none !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.trader-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.trader-name {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  margin-top: 0;
  letter-spacing: 0.2px;
  text-align: left;
}
@media (max-width: 600px) {
  .trader-info {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .trader-details {
    align-items: center;
    text-align: center;
  }
  .trader-name {
    font-size: 1.3rem;
    text-align: center;
  }
}

/* --- Убираю все лишние тени и делаю выравнивание --- */
.trader-card, .stat-item, .metric-item, .perf-item, .trader-avatar, .trader-info, .trader-name {
  box-shadow: none !important;
  text-shadow: none !important;
}
.trader-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.trader-avatar {
  margin-bottom: 0;
  margin-top: 18px;
}
.trader-details {
  align-items: center;
  text-align: center;
}
.trader-name {
  text-align: center;
  width: 100%;
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.trader-stats, .trader-metrics {
  width: 100%;
  justify-items: center;
  align-items: center;
}
.stat-item, .metric-item {
  margin: 0;
}
@media (max-width: 600px) {
  .trader-info {
    gap: 12px;
  }
  .trader-avatar {
    margin-top: 10px;
  }
}

.trader-card, .trader-card * {
  border-bottom: none !important;
}

@media (max-width: 768px) {
  .footer-content {
    max-height: none;
    overflow-y: visible;
  }
}

/* --- Bybit-style статистика и метрики --- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 32px;
  width: 100%;
}
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.stat-card {
  background: #23272f;
  border-radius: 16px;
  padding: 22px 18px 18px 18px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s, border 0.2s;
  border: 1px solid rgba(43,49,57,0.18);
  min-height: 90px;
  min-width: 0;
}
.stat-card:hover {
  box-shadow: 0 4px 24px 0 rgba(0,212,170,0.10);
  border: 1.5px solid #00d4aa;
}
.stat-title {
  color: #b7bdc6;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-align: center;
}
.stat-value {
  color: #00d4aa;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
}
.stat-value.red {
  color: #f84960;
}
.stat-value.green {
  color: #00d4aa;
}
.stat-value[data-value^="-"] {
  color: #f84960;
}
/* Удаляю старые стили для main-stats, perf-stats, metrics-grid */
.main-stats, .perf-stats, .metrics-grid, .secondary-stats {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  display: block !important;
}
.stat-item, .metric-item, .perf-item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 769px) {
  .performance-section {
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    width: 100% !important;
  }
}

.trader-card {
    background: rgba(28, 32, 44, 0.98);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 32px 16px 24px 16px;
    margin-top: 24px;
    text-align: center;
    position: relative;
}

.trader-card .trader-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid #fff;
    margin-bottom: 16px;
    background: #23263a;
}

.trader-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.trader-metrics {
    display: flex;
    justify-content: space-between;
    margin: 24px 0 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 12px 0;
}
.trader-metrics .metric-item {
    flex: 1;
    text-align: center;
    color: #fff;
}
.trader-metrics .metric-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.08);
}
.trader-metrics .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}
.trader-metrics .metric-label {
    font-size: 0.95rem;
    color: #b7bdc6;
    margin-top: 2px;
}

.trader-description {
    color: #b7bdc6;
    font-size: 1rem;
    margin: 12px 0 0 0;
    line-height: 1.5;
}
.trader-description a {
    color: #f7931a;
    text-decoration: underline;
}

.tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 18px 0 0 0;
}
.tag {
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    background: #23263a;
    letter-spacing: 0.01em;
}
.tag.green { background: #02c076; color: #fff; }
.tag.blue { background: #2d4bff; color: #fff; }
.tag.darkblue { background: #23263a; color: #b7bdc6; }

.tabs {
    display: flex;
    justify-content: space-between;
    background: transparent;
    border-bottom: 2px solid #23263a;
    margin: 32px 0 0 0;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 14px 0 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #b7bdc6;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.tab.active {
    color: #fff;
}
.tab.active::after {
    content: '';
    display: block;
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -2px;
    height: 3px;
    background: #f7931a;
    border-radius: 2px 2px 0 0;
}

/* Внутренние вкладки */
.inner-tabs {
    display: flex;
    gap: 12px;
    margin: 24px 0 0 0;
    justify-content: flex-start;
}
.inner-tab {
    padding: 7px 22px;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    background: #181c2a;
    color: #b7bdc6;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.inner-tab.active {
    background: #fff;
    color: #23263a;
    font-weight: 700;
}

/* Кнопка "Присоединиться" */
.main-action-btn {
    width: 100%;
    background: linear-gradient(90deg, #f7931a 0%, #ffb946 100%);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    border: none;
    border-radius: 16px;
    padding: 16px 0;
    margin: 18px 0 0 0;
    box-shadow: 0 4px 16px rgba(247,147,26,0.15);
    cursor: pointer;
    transition: background 0.2s;
}
.main-action-btn:active {
    background: linear-gradient(90deg, #ffb946 0%, #f7931a 100%);
}

/* Нижняя панель */
.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 32, 44, 0.98);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
    padding: 12px 8px 24px 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 100;
}
.bottom-bar .bottom-btn {
    flex: 1;
    background: none;
    border: none;
    color: #b7bdc6;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 12px;
    padding: 10px 0;
    transition: background 0.2s;
}
.bottom-bar .main-action-btn {
    flex: 2;
    margin: 0 0 0 0;
}
.bottom-bar .waitlist {
    color: #ffb946;
    font-size: 1rem;
    margin-left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile Bots Tab Buttons */
.mobile-bots-tab-btn {
    background: transparent;
    border: none;
    color: rgba(183, 189, 198, 0.85);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
    margin-right: 8px;
}

.mobile-bots-tab-btn.active {
    color: #f7931a;
    background: #23263a;
    box-shadow: 0 2px 8px rgba(247, 147, 26, 0.08);
}

.mobile-bots-tab-btn:not(.active):hover {
    color: #fff;
    background: rgba(247, 147, 26, 0.08);
}

.mobile-bots-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f7931a;
    border-radius: 2px;
}

.mobile-bots-tab-btn:not(.active)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
}

/* --- BYBIT DARK THEME REFINEMENT --- */

/* Фон для карточек и секций */
.trader-card,
.performance-section,
.footer,
.footer-content,
.footer-section,
.footer-bottom,
.tab-content,
.mobile-tab-content,
.banner-content,
.overview-section {
    background: #181C2A !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 16px 0 rgba(20, 20, 30, 0.12);
    border: 1px solid #23263A !important;
}

/* Фон для футера */
.footer, .footer-content {
    background: #181C2A !important;
}

/* Бордеры и разделители */
hr, .divider, .footer, .footer-content, .footer-section, .footer-bottom {
    border-color: #23263A !important;
}

/* Второстепенный текст */
.secondary, .footer-section a, .metric-label, .stat-label, .summary-label, .mobile-stat-label {
    color: #B7BDC6 !important;
}

/* Заголовки секций в футере */
.footer-section h3 {
    color: #EDB926 !important;
}

/* Скругления */
.trader-card, .performance-section, .footer, .footer-content, .tab-content, .mobile-tab-content, .banner-content {
    border-radius: 16px !important;
}

/* Кнопки */
.cta-button, .banner-btn {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(247, 147, 26, 0.15);
}

/* Мобильная версия */
@media (max-width: 768px) {
    .trader-card, .performance-section, .footer, .footer-content, .tab-content, .mobile-tab-content, .banner-content {
        background: #181C2A !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 16px 0 rgba(20, 20, 30, 0.12);
        border: 1px solid #23263A !important;
    }
    .footer-section h3 {
        color: #EDB926 !important;
    }
    .footer-section a {
        color: #B7BDC6 !important;
    }
    .footer-section a:hover {
        color: #F7931A !important;
    }
}

/* --- FOOTER FLAT STYLE --- */
.footer, .footer-content, .footer-section, .footer-bottom {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.footer {
    border-top: 1px solid #23263A !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
}

.footer-content {
    border: none !important;
}

.footer-section {
    border: none !important;
}

.footer-bottom {
    border: none !important;
}

@media (max-width: 600px) {
  .footer {
    margin-bottom: 24px !important;
  }
}

.footer, .footer-content, .footer-section {
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 600px) {
  .footer, .footer-content, .footer-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.footer-section {
  margin-bottom: 28px;
}
.footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.footer-section a, .footer-section h3 {
  display: block;
  text-align: left !important;
  margin-left: 0;
  margin-right: 0;
}

.mobile-tabs select, .bots-section select, .performance-section select {
  max-width: 120px;
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.mobile-tabs .dropdown-label, .bots-section .dropdown-label, .performance-section .dropdown-label {
  max-width: 90px;
  font-size: 13px;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.footer-section .institutional-link {
  font-weight: 400 !important;
}

.footer-padding-right {
    padding-right: 32px !important;
}

@media (max-width: 600px) {
  .main,
  .container,
  .content-layout,
  .performance-section {
    overflow: hidden !important;
    scrollbar-width: none !important;
  }
  .main::-webkit-scrollbar,
  .container::-webkit-scrollbar,
  .content-layout::-webkit-scrollbar,
  .performance-section::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .tabs,
  .mobile-tabs {
    overflow: hidden !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar,
  .mobile-tabs::-webkit-scrollbar {
    display: none !important;
  }
}

/* === MOBILE CHART BLOCKS === */
.mobile-chart-block, .mobile-histogram-block, .mobile-piechart-block {
  background: #23263A;
  border-radius: 14px;
  margin: 18px 0;
  padding: 16px 10px 10px 10px;
  box-shadow: 0 2px 8px rgba(20,20,30,0.08);
}
.mobile-chart-header, .mobile-histogram-header, .mobile-piechart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 16px;
}
.mobile-chart-title, .mobile-histogram-title, .mobile-piechart-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.mobile-chart-period, .mobile-histogram-period, .mobile-piechart-period {
  background: #181C2A;
  color: #fff;
  border: 1px solid #33374A;
  border-radius: 6px;
  font-size: 13px;
  padding: 3px 10px;
}
.mobile-chart-legend, .mobile-piechart-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: #B7BDC6;
  align-items: center;
  flex-wrap: wrap;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.legend-profit { background: #F7931A; }
.legend-roi { background: #2d4bff; }

.mobile-histogram-tooltip {
  background: #181C2A;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(20,20,30,0.15);
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.mobile-piechart-legend {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-piechart-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.mobile-piechart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 480px) {
  .mobile-chart-block, .mobile-histogram-block, .mobile-piechart-block {
    padding: 10px 2px 8px 2px;
    margin: 12px 0;
  }
  .mobile-chart-title, .mobile-histogram-title, .mobile-piechart-title {
    font-size: 15px;
  }
}

.footer, .footer-content {
  margin-top: 32px;
}
@media (max-width: 768px) {
  .footer, .footer-content {
    margin-top: 40px;
  }
}
.footer-section h3 {
  margin-top: 0;
}

/* Соцсети: белые по умолчанию, фирменные при наведении */
.social-link {
  color: #fff;
  transition: color 0.2s;
}
.social-icon {
  width: 32px;
  height: 32px;
  display: block;
  filter: none;
  transition: filter 0.2s;
}
.social-link[aria-label="LinkedIn"]:hover { color: #0077B5; }
.social-link[aria-label="X (Twitter)"]:hover { color: #1DA1F2; }
.social-link[aria-label="YouTube"]:hover { color: #FF0000; }
.social-link[aria-label="Telegram"]:hover { color: #0088CC; }
.social-link[aria-label="VK"]:hover { color: #4C75A3; }
.social-link[aria-label="Discord"]:hover { color: #5865F2; }
.social-link[aria-label="TikTok"]:hover { color: #000; }

/* Для мобильных — чуть меньше */
@media (max-width: 600px) {
  .social-icon { width: 24px; height: 24px; }
}

.footer-bottom .social-link {
  color: #fff !important;
  transition: color 0.2s;
}
.social-icon {
  width: 32px;
  height: 32px;
  display: block;
  filter: none;
  transition: filter 0.2s;
}
.social-link[aria-label="LinkedIn"]:hover { color: #0077B5 !important; }
.social-link[aria-label="X (Twitter)"]:hover { color: #1DA1F2 !important; }
.social-link[aria-label="YouTube"]:hover { color: #FF0000 !important; }
.social-link[aria-label="Telegram"]:hover { color: #0088CC !important; }
.social-link[aria-label="VK"]:hover { color: #4C75A3 !important; }
.social-link[aria-label="Discord"]:hover { color: #5865F2 !important; }
.social-link[aria-label="TikTok"]:hover { color: #000 !important; }
@media (max-width: 600px) {
  .social-icon { width: 24px; height: 24px; }
}

@media (max-width: 768px) {
  .content-layout {
    gap: 20px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    max-width: 100vw !important;
  }
}

.footer {
    /* ... существующие стили ... */
    padding-bottom: 0 !important;
}

.container, .main {
    padding-bottom: 70px !important;
}

@media (max-width: 768px) {
  .footer {
    padding-bottom: 0 !important;
  }
  .container, .main {
    padding-bottom: 85px !important;
  }
}

/* --- Исправление видимости селектора периода в мобильных табах --- */
.mobile-performance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-period-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
    min-width: 110px;
    background: #23263A;
    color: #fff;
    border: 1px solid #33374A;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
}

/* --- Исправление видимости и читаемости значения селектора периода --- */
.mobile-period-dropdown,
.mobile-period-dropdown option {
    color: #fff !important;
    background: #23263A !important;
}

.mobile-period-dropdown {
    min-width: 120px;
    width: 120px;
    font-size: 16px;
}

.mobile-piechart-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
}

.mobile-piechart-block > * {
    order:0 !important;
}

.mobile-piechart-block canvas {
    order:1 !important;
}

.mobile-piechart-block .mobile-piechart-legend {
    order:2 !important;
    margin-top:16px;
    width: 100%;
    text-align: center;
}

/******* Футер */
.footer-info {
    text-align: center;
    color: white;
    font-size: 12px;
    padding: 16px 12px;
}

.footer-info span:first-child {
    display: block;
    margin-bottom: 10px;
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: white;
    margin-top: 0;
}

.footer-legal span {
    color: white;
    text-decoration: none;
    cursor: default;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .footer-legal {
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 11px;
        gap: 10px;
    }

    .footer-legal span {
        white-space: nowrap;
    }
}

.footer-legal a {
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

/* При наведении можно сделать лёгкую прозрачность */
.footer-legal a:hover {
    opacity: 0.8;
}

/************************/