:root {
            --primary-color: #082668;
            --secondary-color: #00D4AA;
            --accent-color: #8b85ff;
            --light-color: #f8fafc;
            --dark-color: #0f172a;
            --gray-color: #64748b;
            --medium-gray: #4A5164;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 6px 12px -3px rgba(0, 0, 0, 0.1);
            --radius-md: 10px;
            --radius-lg: 14px;
            --video-primary: #6f89d7;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--background);
            color: var(--dark);
            line-height: 1.4;
            font-size: 14px;
            padding: 0;
            padding-bottom: 70px;
        }
        .container {
            max-width: 100%;
            padding: 0;
        }
        
        .tg-floating {
	  position: fixed;
	  right: 25px;
	  bottom: 50%;
	  z-index: 9999;
	  text-decoration: none;
	}
	
	.tg-avatar-wrapper {
	  width: 64px;
	  height: 64px;
	  border-radius: 50%;
	  overflow: hidden;
	  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
	  position: relative;
	  transition: transform 0.25s ease, box-shadow 0.25s ease;
	  cursor: pointer;
	}
	
	.tg-avatar-wrapper:hover {
	  transform: scale(1.08);
	  box-shadow: 0 14px 28px rgba(0,0,0,0.3);
	}
	
	.tg-avatar-wrapper img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  display: block;
	}
	
	.tg-online-indicator {
	  position: absolute;
	  right: 5px;
	  bottom: 5px;
	  width: 14px;
	  height: 14px;
	  background-color: #2ecc71;
	  border: 2px solid white;
	  border-radius: 50%;
	  box-shadow: 0 0 6px rgba(46,204,113,0.6);
	  animation: tg-pulse 2s infinite;
	}
	
	@keyframes tg-pulse {
	  0% { transform: scale(0.8); opacity: 0.7; }
	  50% { transform: scale(1.2); opacity: 0.3; }
	  100% { transform: scale(0.8); opacity: 0.7; }
	}
	@media (max-width: 600px) {
	  .tg-avatar-wrapper {
	    width: 56px;
	    height: 56px;
	  }
	  .tg-online-indicator {
	    width: 12px;
	    height: 12px;
	  }
	}
        .app-header {
            position: relative;
            padding: 50px 20px 30px;
            background: linear-gradient(
                135deg,
                var(--video-primary) 0%,
                #5a76ce 20%,
                #4563c5 40%,
                #3050bc 60%,
                #1b3db3 80%,
                #062aaa 100%
            );
            z-index: 10;
            overflow: hidden;
            min-height: 160px;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 20px rgba(111, 137, 215, 0.3);
        }
        
        /* 视频背景容器 - 增强效果 */
        .video-background-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            opacity: 0.7;
          
		  }
        
        /* 视频元素优化 */
        .video-background-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: 
                brightness(1.4)
                contrast(1.25)
                saturate(1.3)
                hue-rotate(5deg);
            transform: scale(1.08);
            animation: videoPulse 15s ease-in-out infinite alternate;
            mix-blend-mode: screen;
        }
        
        /* 添加渐变叠加层 */
        .video-background-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                45deg,
                rgba(111, 137, 215, 0.9) 0%,
                rgba(86, 112, 200, 0.7) 50%,
                rgba(67, 94, 190, 0.5) 100%
            );
            z-index: 2;
            mix-blend-mode: multiply;
        }
        
        /* 添加科技感网格 */
        .video-background-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%),
                linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%);
            background-size: 60px 60px;
            z-index: 3;
            opacity: 0.2;
            animation: gridMove 20s linear infinite;
        }
        
        /* 动画效果 */
        @keyframes videoPulse {
            0%, 100% {
                transform: scale(1.08) rotate(0deg);
                filter: 
                    brightness(1.4)
                    contrast(1.25)
                    saturate(1.3)
                    hue-rotate(5deg);
            }
            50% {
                transform: scale(1.12) rotate(0.5deg);
                filter: 
                    brightness(1.6)
                    contrast(1.35)
                    saturate(1.4)
                    hue-rotate(8deg);
            }
        }
        
        @keyframes gridMove {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 60px 60px;
            }
        }
        
        /* 添加闪烁的光点 */
        .video-background-container .light-sparkles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 3%),
                radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 3%),
                radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 3%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 3%);
            background-size: 200px 200px;
            z-index: 4;
            opacity: 0.6;
            animation: sparkle 3s ease-in-out infinite alternate;
        }
        
        @keyframes sparkle {
            0%, 100% {
                opacity: 0.4;
                background-position: 0 0;
            }
            50% {
                opacity: 0.8;
                background-position: 100px 100px;
            }
        }
        
        /* ===================== */
        /* 头部内容优化 */
        /* ===================== */
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 5;
            margin: 1rem 0rem;
            width: 100%;
            text-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(111, 137, 215, 0.5);
        }
        
        .greeting {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .welcome-text {
            color: white;
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
            text-transform: uppercase;
            background: linear-gradient(135deg, #ffffff 0%, #e0f7ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            display: inline-block;
        }
        
        .welcome-text::after {
            content: 'Boost with Al';
            position: absolute;
            top: 1px;
            left: 1px;
            background: linear-gradient(135deg, var(--video-primary) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            z-index: -1;
            opacity: 0.8;
        }
        
        .welcome-name {
            color: rgba(255, 255, 255, 0.95);
            font-size: 16px;
            font-weight: 500;
            max-width: 90%;
            line-height: 1.4;
            padding: 8px 0;
            position: relative;
            display: inline-block;
        }
        
        .welcome-name::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, var(--secondary-color), rgba(255, 255, 255, 0.5));
            border-radius: 2px;
        }
        
        /* ===================== */
        /* 骨架屏样式 */
        /* ===================== */
        .product-skeleton {
            background-color: white;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 16px;
            position: relative;
            overflow: hidden;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
        }
        
        .skeleton-shimmer {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: shimmer 1.5s infinite;
        }
        
        .skeleton-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 60px;
            height: 20px;
            background-color: var(--border-color);
            border-radius: 3px;
        }
        
        .skeleton-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .skeleton-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: var(--border-color);
            margin-right: 12px;
        }
        
        .skeleton-title {
            flex: 1;
        }
        
        .skeleton-title-line {
            height: 16px;
            background-color: var(--border-color);
            border-radius: 4px;
            margin-bottom: 8px;
        }
        
        .skeleton-title-line.short {
            width: 70%;
        }
        
        .skeleton-subtitle {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        
        .skeleton-tag {
            width: 50px;
            height: 20px;
            background-color: var(--border-color);
            border-radius: 3px;
        }
        
        .skeleton-metrics {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .skeleton-metric {
            background-color: #f8fafc;
            border-radius: var(--radius-md);
            padding: 12px;
            border: 1px solid var(--border-color);
        }
        
        .skeleton-metric-label {
            height: 12px;
            width: 70%;
            background-color: var(--border-color);
            border-radius: 3px;
            margin-bottom: 8px;
        }
        
        .skeleton-metric-value {
            height: 20px;
            width: 50%;
            background-color: var(--border-color);
            border-radius: 4px;
        }
        
        .skeleton-profit {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid #bae6fd;
        }
        
        .skeleton-profit-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .skeleton-profit-label {
            height: 12px;
            width: 100px;
            background-color: #bae6fd;
            border-radius: 3px;
        }
        
        .skeleton-profit-content {
            display: flex;
            justify-content: space-between;
        }
        
        .skeleton-profit-amount {
            height: 24px;
            width: 120px;
            background-color: #bae6fd;
            border-radius: 4px;
        }
        
        .skeleton-daily-amount {
            height: 20px;
            width: 80px;
            background-color: #bae6fd;
            border-radius: 4px;
        }
        
        .skeleton-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .skeleton-detail {
            height: 40px;
            background-color: #f8fafc;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .skeleton-button {
            height: 44px;
            background-color: var(--border-color);
            border-radius: var(--radius-md);
            border: none;
            width: 100%;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        /* ===================== */
        /* 其他样式保持原样 */
        /* ===================== */
        .main-content {
			padding: 5px 10px;
        }
        
        /* Product Toggle - Two buttons only */
        .product-toggle {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            padding: 0 2px;
        }
        
        .toggle-btn {
            flex: 1;
            background-color: white;
            border: 1.5px solid var(--border-color);
            color: var(--gray-color);
            padding: 10px 12px;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .toggle-btn.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        /* Product Container */
        .products-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 24px;
        }
        
        /* Product Card - 缩小版本 */
        .product-card {
            background-color: white;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
            padding: 16px;
        }
        
        .product-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }
        
        .product-card.loading {
            opacity: 0.7;
        }
        
		.countdown-display {
			display: flex;
			align-items: center;
			gap: 8px;
			margin: 12px 0;
			padding: 8px 12px;
			background: #ff4d4d;
			border-radius: 30px;
		}
		
		.countdown-icon {
			color: white;
			font-size: 16px;
		}
		
		.countdown-timer {
			font-weight: 600;
			color: white;
			font-family: 'Monaco', 'Menlo', monospace;
			letter-spacing: 1px;
		}
		
		.countdown-timer.expired {
			color: #999;
		}
		.progress-container {
		    width: 100%;
		    height: 24px;
		    background-color: #ffe5e5;  /* 浅红色背景 */
		    border-radius: 12px;
		    overflow: hidden;
		    border: 1px solid #ffcccc;
		}
		
		.progress-bar {
		    height: 100%;
		    background-color: #d84260;  /* 红色进度条 */
		    color: white;
		    font-size: 13px;
		    font-weight: bold;
		    line-height: 24px;
		    text-align: center;
		    transition: width 0.3s ease;
		    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
		}
        /* Card Badge */
        .card-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background-color: var(--secondary-color);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 3px;
            letter-spacing: 0.3px;
        }
        
        /* Card Badge 变体样式 */
        .card-badge.active {
            background-color: var(--secondary-color);
        }
        
        .card-badge.ended {
            background-color: var(--gray-color);
        }
        
        .card-badge.new {
            background-color: #f59e0b;
        }
        
        .card-badge.popular {
            background-color: #ef4444;
        }
        
        /* Product Header */
        .product-header {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .product-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid var(--border-color);
        }
        
        .product-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-right {
            flex: 1;
            padding-left: 12px;
        }
        
        .product-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--dark-color);
        }
        
        .product-subtitle {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .product-subtitle-level {
            padding: 3px 8px;
            color: white;
            background-color: var(--secondary-color);
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .product-subtitle-vip {
            padding: 3px 8px;
            color: white;
            background-color: var(--accent-color);
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
        }
        
        /* Card Content */
        .card-content {
            padding: 0;
        }
        
        /* Main Metrics Grid */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .metric-card {
            background-color: #f8fafc;
            border-radius: var(--radius-md);
            padding: 12px;
            text-align: center;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        
        .metric-card:hover {
            background-color: #e8f4ff;
            border-color: var(--accent-color);
        }
        
        .metric-label {
            font-size: 11px;
            color: var(--gray-color);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
        }
        
        .metric-value {
            font-size: 18px;
            font-weight: 800;
            color: var(--primary-color);
        }
        
        .metric-value.roi {
            color: var(--accent-color);
        }
        
        /* Profit Section - 优化布局 */
        .profit-section {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid #bae6fd;
        }
        
        .profit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .profit-title {
            font-size: 12px;
            color: var(--gray-color);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .profit-daily-label {
            font-size: 12px;
            color: var(--gray-color);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
        }
        
        .profit-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .profit-estimated {
            display: flex;
            flex-direction: column;
        }
        
        .profit-amount {
            font-size: 22px;
            font-weight: 800;
            color: var(--primary-color);
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .profit-daily {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .daily-amount {
            font-size: 18px;
            font-weight: 800;
            color: var(--secondary-color);
            font-family: 'Space Grotesk', sans-serif;
        }
        
        /* Details Grid */
        .details-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .detail-item {
            display: flex;
            flex-direction: column;
        }
        
        .detail-label {
            font-size: 12px;
            color: var(--gray-color);
            margin-bottom: 4px;
        }
        
        .detail-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .detail-value.availability {
            color: var(--secondary-color);
        }
        
        /* Invest Button */
        .invest-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: linear-gradient(135deg, var(--accent-color), #6c63ff);
            color: white;
            border: none;
            padding: 14px;
            font-size: 14px;
            font-weight: 700;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(139, 133, 255, 0.2);
            position: relative;
        }
        
        .invest-btn:hover {
            background: linear-gradient(135deg, #6c63ff, var(--accent-color));
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 133, 255, 0.3);
        }
        
        .invest-btn:disabled {
            background: var(--gray-color);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .invest-btn.loading {
            opacity: 0.8;
        }
        
        /* Load More */
        .load-more-section {
            text-align: center;
            padding: 16px 0 32px;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1.5px solid var(--border-color);
            color: var(--primary-color);
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 600;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .load-more-btn:hover {
            border-color: var(--accent-color);
            background-color: #f8fafc;
        }
        
        .load-more-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .loading-indicator {
            display: none;
            margin-top: 12px;
            color: var(--gray-color);
            font-size: 13px;
        }
        
        .loading-indicator.active {
            display: block;
        }
        
        .loading-dots {
            display: inline-block;
            margin-left: 4px;
        }
        
        .loading-dots span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--accent-color);
            margin: 0 2px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1); }
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--gray-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
        }
        
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        
        .empty-state-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark-color);
        }
        
        .empty-state-description {
            font-size: 14px;
            max-width: 300px;
            line-height: 1.5;
        }
        
        /* Error State */
        .error-state {
            text-align: center;
            padding: 40px 20px;
            color: #ef4444;
        }
        
        .error-state-icon {
            font-size: 36px;
            margin-bottom: 12px;
        }
        
        .retry-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 16px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        /* Initial Loading */
        .initial-loading {
            text-align: center;
            padding: 40px 0;
            color: var(--gray-color);
        }
        
        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 3px solid rgba(139, 133, 255, 0.2);
            border-radius: 50%;
            border-top-color: var(--accent-color);
            animation: spin 1s ease-in-out infinite;
            margin-bottom: 16px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* End Message */
        .end-message {
            color: var(--gray-color);
            text-align: center;
            padding: 20px 0;
            font-size: 13px;
            border-top: 1px solid var(--border-color);
            margin-top: 10px;
        }
        
        /* Hidden class */
        .hidden {
            display: none !important;
        }
        
        /* Animation for new cards */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .product-card.new-card {
            animation: slideIn 0.3s ease-out;
        }
        
        /* 为产品卡片添加与视频背景呼应的效果 */
        .product-card {
            border-top: 3px solid transparent;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .app-header {
                padding: 40px 16px 25px;
                min-height: 140px;
            }
            
            .welcome-text {
                font-size: 24px;
            }
            
            .welcome-name {
                font-size: 14px;
            }
            
            .video-background-container video {
                transform: scale(1.15);
            }
        }
        
        @media (max-width: 480px) {
            .app-header {
                padding: 40px 14px 20px;
                min-height: 130px;
            }
            
            .welcome-text {
                font-size: 22px;
            }
            
            .welcome-name {
                font-size: 13px;
            }
            
            .video-background-container {
                opacity: 0.8;
            }
            
            .video-background-container::before {
                background: linear-gradient(
                    45deg,
                    rgba(111, 137, 215, 0.95) 0%,
                    rgba(86, 112, 200, 0.8) 100%
                );
            }
        }
        
        @media (max-width: 360px) {
            .app-header {
                padding: 40px 12px 15px;
                min-height: 120px;
            }
            
            .welcome-text {
                font-size: 20px;
            }
            
            .welcome-name {
                font-size: 12px;
            }
            
            .product-title {
                font-size: 14px;
            }
            
            .metric-value {
                font-size: 16px;
            }
            
            .profit-amount {
                font-size: 20px;
            }
            
            .daily-amount {
                font-size: 16px;
            }
            
            .invest-btn {
                padding: 12px;
                font-size: 13px;
            }
            
            .product-icon {
                width: 42px;
                height: 42px;
            }
            
            .main-content {
                padding: 5px 10px;
            }
            
            .empty-state {
                padding: 30px 16px;
                min-height: 250px;
            }
            
            .empty-state-icon {
                font-size: 36px;
            }
            
            .empty-state-title {
                font-size: 16px;
            }
        }