html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
            -webkit-user-select: auto !important;
            user-select: auto !important;
        }

        body {
            background: radial-gradient(circle at top right, #1a1a2e, #16213e, #0f3460);
            background-attachment: fixed;
            color: white; 
            font-family: 'Outfit', sans-serif;
        }

        * { 
            -webkit-tap-highlight-color: transparent; 
            outline: none; 
            box-sizing: border-box; 
            -webkit-user-select: none;
            user-select: none;
        }

        img, .gallery-img, #lightbox-img, .message, .message *, textarea, input {
            -webkit-user-select: text !important;
            user-select: text !important;
            -webkit-touch-callout: default !important;
            pointer-events: auto !important;
            -webkit-user-drag: auto !important;
        }

        #lightbox-img {
            position: relative;
            z-index: 199;
        }
        
        .gallery-prompt {
            pointer-events: none;
        }
        
        :root { 
            --glass: rgba(255, 255, 255, 0.08); 
            --glass-border: rgba(255, 255, 255, 0.15);
            --accent: #FFD700; 
            --accent-glow: rgba(255, 215, 0, 0.4);
            --text-secondary: #a0a0a0;
            --bg-bot: rgba(30, 30, 40, 0.6);
            --bg-user: #FFD700;
        }

        .view {
            padding-top: 75px;
            display: none; 
            height: 100%; 
            
            overflow-y: auto; 
            
            padding-bottom: 125px; 
            position: relative; 
            z-index: 10; 
            
            scroll-behavior: smooth; 
            
            -webkit-overflow-scrolling: touch; 
            
            overscroll-behavior-y: contain; 
        }
        
        .view.active { display: block; animation: fadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        .chat-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.35); 
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 200;
        }
        
        .header-balance-node {
            background: rgba(255, 255, 255, 0.08); 
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 6px 12px; 
            border-radius: 12px; 
            font-size: 14px; 
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
            user-select: none;
        }

        .header-balance-node:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.12);
        }

        .header-balance-node:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .chat-messages {
            padding: 20px 15px; 
            display: flex; 
            flex-direction: column; 
            gap: 15px; 
        }

        .message {
            font-size: 16px;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            word-break: normal;
            position: relative;
            user-select: text !important;
            -webkit-user-select: text !important;
        }
        
        .chat-header, .tab-bar, .input-area, button {
            user-select: none !important;
            -webkit-user-select: none !important;
        }

        .msg-bot {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #eeeeee;
            width: 100%;
            max-width: 100%;
            padding: 0;
            align-self: flex-start;
            line-height: 1.75;
        }

        .msg-bot strong, .msg-bot b {
            color: var(--accent);
            font-weight: 700;
        }

        .msg-bot p { margin: 0 0 12px 0; }
        .msg-bot p:last-child { margin: 0; }

        .msg-user {
            background: var(--bg-user);
            color: #1a1a2e;
            align-self: flex-end;
            max-width: 85%;
            width: auto;
            white-space: pre-wrap;
            padding: 8px 14px;
            border-radius: 18px 18px 4px 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            font-weight: 500;
            margin-left: auto;
            
            display: flex;
            flex-direction: column;
            align-items: flex-start; 
            text-align: left;
        }
        
        .code-wrapper {
            background: #1e1e1e; 
            border-radius: 8px; 
            margin: 8px 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            display: block;
            max-width: 100%;
        }
        
        .code-header {
            display: flex; justify-content: space-between; align-items: center;
            background: rgba(255, 255, 255, 0.05); padding: 5px 10px;
            font-size: 12px; color: #aaa; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            user-select: none;
        }
        
        .copy-btn {
            background: transparent; border: none; color: var(--accent);
            cursor: pointer; font-size: 12px; display: flex; align-items: center;
            gap: 4px; padding: 4px 8px; border-radius: 4px; transition: 0.2s;
        }
        .copy-btn:active { transform: scale(0.95); opacity: 0.7; }
        
        .msg-bot pre { 
            margin: 0 !important; 
            padding: 12px 12px 18px 12px;
            
            overflow-x: scroll !important;
            white-space: pre !important;
            word-wrap: normal !important;  
            
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
        }

        .msg-bot pre::-webkit-scrollbar {
            height: 6px;
            display: block !important;
            background: transparent;
        }
        .msg-bot pre::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }
        .msg-bot pre::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            margin: 0 10px;
        }

        .msg-bot code.hljs {
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 16px !important;
            line-height: 1.5;
            display: inline-block;
            min-width: 100%;
        }

        .typing-indicator {
            display: none; 
            align-self: flex-start; 
            background: var(--glass); 
            padding: 10px 15px; 
            border-radius: 20px; 
            margin-left: 15px; 
            margin-bottom: 0px !important;
            gap: 4px; 
            width: fit-content;
        }
        .dot { width: 6px; height: 6px; background: #aaa; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
        .dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

        .input-area {
            width: 100%; 
            
            background: rgba(0, 0, 0, 0.35); 
            
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            
            padding: 8px 12px;
            display: flex;
            gap: 8px;
            align-items: flex-end;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        }

        .chat-input { 
            flex: 1; 
            background: transparent; 
            border: none; 
            color: white; 
            
            padding: 10px 10px; 
            
            font-size: 16px; 
            font-family: inherit;
            
            resize: none; 
            
            min-height: 40px; 
            max-height: 140px; 
            
            line-height: 20px;
            overflow-y: hidden;
            
            box-sizing: border-box;
        }

        .chat-input::placeholder {
            color: #aaa;
            opacity: 1;
        }
        
        .chat-input::-webkit-scrollbar {
            width: 4px;
        }
        .chat-input::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
            min-height: 35px !important;
        }
        .chat-input::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .tab-bar {
            position: absolute;
            bottom: 10px; 
            left: 50%; 
            transform: translateX(-50%);
            
            background: rgba(0, 0, 0, 0.35); 
            
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            border: 1px solid rgba(255, 255, 255, 0.1); 
            border-radius: 30px; 
            
            display: flex; 
            padding: 5px 15px; 
            gap: 15px;
            z-index: 150;
            
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .tab-btn { 
            background: none; 
            border: none; 
            padding: 12px 15px; 
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: none;
        }

        .tab-btn svg {
            width: 24px;
            height: 24px;
            stroke: #ffffff;
            stroke-width: 2;
            fill: none;
            opacity: 1;
            transition: stroke 0.3s ease;
        }

        .tab-btn.active svg {
            stroke: var(--accent);
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 20%;
            right: 20%;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
            box-shadow: 0 0 8px var(--accent-glow);
            animation: lineWidth 0.3s ease-out;
        }

        @keyframes lineWidth {
            from { left: 50%; right: 50%; opacity: 0; }
            to { left: 20%; right: 20%; opacity: 1; }
        }

        .send-btn {
            width: 38px; height: 38px; 
            border-radius: 50%; 
            background: var(--accent);
            border: none; 
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; 
            flex-shrink: 0;
            transition: transform 0.1s;
            padding: 0;
        }

        .send-btn svg {
            width: 20px;
            height: 20px;
            fill: #1a1a2e;
            transform: translateX(1px);
        }

        [dir="rtl"] .send-btn svg {
            transform: translateX(-1px) scaleX(-1);
        }

        .send-btn:active { transform: scale(0.9); }
        
        .attach-btn {
            background: transparent;
            border: none;
            width: 38px; height: 38px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            transition: transform 0.1s;
        }

        .attach-btn svg {
            width: 22px;
            height: 22px;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
        }

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

        .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
        .gallery-item {
            position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; 
            background: #000; border: 1px solid var(--glass-border); cursor: pointer;
        }
        .gallery-img { width: 100%; height: 100%; object-fit: cover; }
        .gallery-prompt {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            padding: 20px 8px 8px; font-size: 11px; color: #ddd;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .tab-btn { background: none; border: none; font-size: 26px; padding: 10px; opacity: 0.4; filter: grayscale(100%); transition: 0.3s; }
        .tab-btn.active { opacity: 1; transform: translateY(-5px) scale(1.1); filter: grayscale(0%); }

        .lightbox {
            display: none; 
            position: fixed; 
            top: 0; left: 0; 
            width: 100%; height: 100%;
            
            background: rgba(10, 10, 20, 0.8); 
            
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            
            z-index: 200; 
            flex-direction: column;
            animation: fadeIn 0.2s;
        }

        .lightbox-scroll {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 70px 20px 40px 20px;
            -webkit-overflow-scrolling: touch;
        }

        .lightbox img { 
            max-width: 100%; 
            height: auto;
            border-radius: 12px; 
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            flex-shrink: 0;
        }

        #lightbox-caption {
            margin-top: 20px;
            color: #eeeeee;
            text-align: left;
            line-height: 1.6;
            font-size: 15px;
            width: 100%;
            max-width: 500px;
            word-wrap: break-word;
            padding-bottom: 20px;
        }
        
        .lightbox-controls {
            position: absolute; 
            top: 15px; right: 15px;
            display: flex; 
            gap: 5px;
            z-index: 201;
            background: none;
            padding: 0;
            backdrop-filter: none;
        }

        .lightbox-btn {
            width: 44px; height: 44px; 
            
            background: rgba(0, 0, 0, 0.35); 
            
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%; 
            
            padding: 0;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; 
            transition: all 0.2s;
        }

        .lightbox-btn svg { 
            width: 24px; height: 24px; 
            stroke: white; 
        }

        .lightbox-btn:active { 
            transform: scale(0.9); 
            background: rgba(0, 0, 0, 0.6);
        }
        
        .shop-grid { 
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 15px; 
            padding: 0 10px; 
        }

        .shop-card {
            background: rgba(255, 255, 255, 0.05); 
            
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 16px 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
            user-select: none;
        }

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

        .shop-card.highlight {
            border: 1px solid var(--accent);
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.05); 
            
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .card-info h3 {
            margin: 0;
            color: white;
            font-size: 18px;
            font-weight: 700;
        }

        .save-badge {
            display: inline-block;
            margin-left: 4px;
            padding: 2px 8px;
            border-radius: 20px;
            background: rgba(0, 229, 255, 0.15);
            border: 1px solid rgba(0, 229, 255, 0.35);
            color: #00E5FF;
            font-size: 11px;
            font-weight: 700;
            vertical-align: middle;
            box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
        }

        .card-info .credits-box {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
            color: #00E5FF;
            font-weight: 600;
            font-size: 15px;
        }

        .buy-btn {
            background: var(--accent);
            color: #1a1a2e;
            border: none;
            width: 90px; 
            height: 38px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .buy-btn:active {
            transform: scale(0.9);
        }
        
        .goto-shop-btn {
            pointer-events: auto !important;
            cursor: pointer !important;
            transition: transform 0.15s ease-out !important; 
        }
        .goto-shop-btn:active {
            transform: scale(0.9) !important;
        }

        .modal-overlay {
            display: none; 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            z-index: 999; 
            justify-content: center; align-items: center;
            opacity: 0; animation: fadeInModal 0.2s forwards;
        }
        
        .modal-overlay.force-hidden {
            display: none !important;
            animation: none !important;
            pointer-events: none !important;
        }

        body.invoice-active #view-shop,
        body.invoice-active .chat-header,
        body.invoice-active #bottom-section,
        body.invoice-active .tab-bar {
            pointer-events: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }

        body.invoice-active {
            background: transparent !important;
        }

        .invoice-loading-overlay {
            display: none;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 100003;
            flex-direction: column; align-items: center; justify-content: center;
            gap: 18px;
            background: radial-gradient(circle at top right, #1a1a2e, #16213e, #0f3460);
        }

        body.invoice-loading .invoice-loading-overlay {
            display: flex;
        }

        .invoice-loading-spinner {
            width: 48px; height: 48px;
            border: 4px solid rgba(255, 215, 0, 0.2);
            border-top-color: #FFD700;
            border-radius: 50%;
            animation: invoiceSpin 0.9s linear infinite;
        }

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

        .invoice-loading-overlay p {
            color: rgba(255, 255, 255, 0.75);
            font-size: 14px;
            text-align: center;
            max-width: 260px;
        }

        @keyframes fadeInModal { to { opacity: 1; } }

        .modal-card {
            background: rgba(20, 20, 30, 0.85); 
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            
            border-radius: 35px;
            padding: 30px 20px; 
            width: 90%; 
            max-width: 360px; 
            text-align: center;
            transform: scale(0.95); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        @keyframes popIn { to { transform: scale(1); } }

        .modal-card h3 {
            margin: 0 0 25px 0;
            font-size: 22px;
            color: white;
            font-weight: 700;
        }

        .pay-method-card {
            background: rgba(255, 255, 255, 0.05); 
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            
            padding: 15px 20px;
            margin-bottom: 12px;
            
            display: flex; 
            align-items: center; 
            justify-content: space-between;
            
            cursor: pointer; 
            transition: transform 0.1s, background 0.1s;
        }

        .pay-method-card:active {
            transform: scale(0.97);
            background: rgba(255, 255, 255, 0.1);
        }

        .pay-method-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .pay-icon-circle {
            width: 42px; height: 42px;
            flex-shrink: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .pay-info h4 { margin: 0; font-size: 16px; color: white; font-weight: 600; text-align: left; }
        .pay-info p { margin: 2px 0 0 0; font-size: 12px; color: #aaa; text-align: left; }

        .pay-price-tag {
            background: var(--accent);
            color: #1a1a2e;
            padding: 8px 14px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 14px;
            min-width: 80px;
            text-align: center;
        }
        
        .modal-close-btn {
            background: transparent;
            border: none;
            color: #888;
            font-size: 16px;
            margin-top: 15px;
            padding: 10px;
            width: 100%;
            cursor: pointer;
        }
        .modal-close-btn:active { color: white; }
        
        .file-preview-area {
            display: none; 
            
            background: rgba(0, 0, 0, 0.35); 
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            border: 1px solid rgba(255, 255, 255, 0.1); 
            border-radius: 30px;
            padding: 10px;
            align-items: center;
            gap: 10px;
            
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        .file-icon { 
            width: 40px; 
            height: 40px; 
            background: rgba(255,255,255,0.1); 
            border-radius: 8px; 
            position: relative;
            
            display: flex;
            align-items: center;
            justify-content: center;
            
            background-size: cover;
            background-position: center;
            overflow: hidden;
            border: 1px solid var(--glass-border);
        }
        
        .file-icon svg {
            width: 24px;
            height: 24px;
            stroke: #ffffff;
            stroke-width: 1.5;
        }
        
        .file-info { flex: 1; overflow: hidden; }
        .file-name { font-size: 13px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .file-size { font-size: 11px; color: #aaa; }
        .file-close { 
            background: none; 
            border: none; 
            color: #ffffff;
            cursor: pointer; 
            padding: 8px; 
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, opacity 0.2s;
            flex-shrink: 0;
        }

        .file-close svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2.5;
        }

        .file-close:active { 
            transform: scale(0.9); 
            opacity: 0.7; 
        }
        
        .reply-bar {
            display: none; position: fixed; bottom: 85px; left: 15px; right: 15px;
            background: rgba(30, 30, 40, 0.95); border-left: 3px solid var(--accent);
            border-radius: 8px; padding: 8px 12px; z-index: 60;
            align-items: center; justify-content: space-between;
            animation: fadeUp 0.2s;
        }
        .reply-text { font-size: 13px; color: #fff; }
        .reply-sub { font-size: 11px; color: var(--accent); }
        .reply-close { background: none; border: none; color: #aaa; font-size: 18px; cursor: pointer; }

        .msg-reply-btn {
            display: inline-block; margin-left: 8px; cursor: pointer;
            font-size: 14px; opacity: 0.7; transition: 0.2s;
        }
        .msg-reply-btn:active { transform: scale(0.9); opacity: 1; color: var(--accent); }
        
        .scroll-down-btn {
            position: absolute;
            
            bottom: 100%; 
            right: 0;
            
            margin-bottom: 10px;
            
            width: 45px; height: 45px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            
            display: none;
            align-items: center; justify-content: center;
            cursor: pointer;
            z-index: 90;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            
            transition: transform 0.2s, background 0.2s, opacity 0.2s;
            animation: fadeUp 0.3s;
        }

        .scroll-down-btn:active {
            transform: scale(0.9);
            background: rgba(0, 0, 0, 0.5);
        }

        .scroll-down-btn svg { 
            width: 24px; 
            height: 24px; 
            stroke: #ffffff; 
            stroke-width: 2.5px;
        }
        
        #scroll-up-btn {
            position: fixed !important;
            bottom: 140px !important;
            right: 20px !important;
            margin-bottom: 0 !important;
            
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        body.keyboard-active #scroll-up-btn {
            bottom: 10px !important;
        }
        
        body.keyboard-active #landscape-overlay {
            display: none !important;
        }
        
        .msg-bot code:not(.hljs) {
            cursor: pointer;
            color: #FFAB40;
            background: rgba(255, 171, 64, 0.1);
            border: 1px solid rgba(255, 171, 64, 0.2);
            padding: 2px 6px;
            border-radius: 6px;
            font-size: 14px;
            font-family: 'Consolas', monospace;
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .msg-bot code:not(.hljs):active {
            background: rgba(255, 171, 64, 0.3);
            transform: scale(0.95);
        }
        
        #copy-toast {
            position: fixed; 
            bottom: 120px; 
            left: 50%; 
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.35); 
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            color: #fff; 
            padding: 14px 22px; 
            border-radius: 30px; 
            font-size: 14px; 
            font-weight: 500;
            z-index: 9999; 
            display: none; 
            align-items: center; 
            gap: 10px;
            white-space: normal;
            text-align: center;
            width: 280px;
            max-width: 85vw;
            line-height: 1.3;
        }

        .toast-visible {
            display: flex !important;
            animation: fadeUpToast 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
        }

        @keyframes fadeUpToast {
            from { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, 0) scale(1); }
        }
        
        .file-icon { 
            width: 40px; height: 40px; 
            background: rgba(255,255,255,0.1); 
            border-radius: 8px; 
            position: relative; 
            display: flex; 
            align-items: center; justify-content: center;
            background-size: cover; background-position: center;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            flex-shrink: 0;
        }
        
        .file-icon svg.file-type-icon {
            width: 24px; height: 24px;
            stroke: #ffffff;
            stroke-width: 1.5;
            display: block;
        }

        .file-loading-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(2px);
            display: none;
            justify-content: center; align-items: center;
            z-index: 10;
        }

        .progress-ring {
            display: block;
            width: 32px; height: 32px;
            transform: rotate(-90deg);
        }
        
        .progress-ring__circle {
            transition: stroke-dashoffset 0.1s linear;
            transform-origin: 50% 50%;
        }

        .progress-text {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 8px; 
            font-weight: 700;
            font-family: monospace;
            z-index: 2;
            pointer-events: none;
        }
        
        .input-container {
            position: fixed;
            bottom: 75px;
            left: 15px;
            right: 15px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 5px;
            transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .msg-user-attachment {
            display: flex;
            align-items: center;
            gap: 8px;
            
            background: rgba(0, 0, 0, 0.12); 
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            
            border: 1px solid rgba(0, 0, 0, 0.05);
            
            padding: 6px 12px;
            border-radius: 10px;
            margin-bottom: 8px;
            font-size: 13px;
            width: fit-content;
            color: #1a1a2e;
        }
        .msg-user-attachment svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            opacity: 0.8;
        }
        
        .balance-plus-icon {
            width: 14px;
            height: 14px;
            color: var(--accent);
            margin-right: 4px;
            transition: transform 0.2s ease;
        }

        .header-balance-node:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.12);
        }

        .header-balance-node:active .balance-plus-icon {
            transform: rotate(90deg);
        }
        
        .studio-input {
            width: 100% !important;
            height: 120px !important; 
            min-height: 120px !important;
            max-height: 120px !important;
            
            background: rgba(0, 0, 0, 0.35) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            
            border-radius: 30px; 
            padding: 12px 20px 12px 15px !important;
            resize: none !important;
            overflow-y: auto !important;
            color: white;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.4;
        }

        .studio-btn-divider {
            width: 3px;
            height: 24px;
            background: rgba(0, 0, 0, 1);
            border-radius: 10px;
            margin: 0 12px;
            display: inline-block;
            flex-shrink: 0;
        }

        .studio-input::-webkit-scrollbar {
            width: 4px;
        }
        .studio-input::-webkit-scrollbar-track {
            background: transparent;
            margin-top: 15px; 
            margin-bottom: 15px;
            margin-right: 5px;
        }
        .studio-input::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
            min-height: 35px !important;
        }

        .studio-btn {
            width: 100%;
            padding: 15px;
            background: var(--accent);
            border: none;
            border-radius: 30px;
            font-weight: 700;
            font-size: 18px;
            margin-top: 12px;
            color: #1a1a2e;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.1s ease-out; 
            -webkit-tap-highlight-color: transparent;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
        }

        .studio-btn:active { 
            transform: scale(0.9) !important; 
        }

        .studio-btn-divider {
            width: 3px;
            height: 24px;
            background: rgba(26, 26, 46); 
            border-radius: 10px;
            margin: 0 12px;
            display: inline-block;
            flex-shrink: 0;
        }

        .price-tag {
            font-weight: 750;
            color: #1a1a2e; 
        }
        
        .loading-dots {
            display: inline-flex;
            align-items: center;
            margin-left: 2px;
            width: auto; 
        }
        .loading-dots span {
            animation: dot-wave 1.4s infinite ease-in-out;
            display: inline-block;
            font-size: 24px;
            line-height: 0;
            color: #1a1a2e;
        }
        
        .studio-divider {
            border: none;
            height: 2px;
            background: linear-gradient(to right, 
                transparent 0%, 
                rgba(255, 255, 255, 0.3) 20%, 
                rgba(255, 255, 255, 0.9) 50%, 
                rgba(255, 255, 255, 0.3) 80%, 
                transparent 100%);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            width: 100%;
            display: block;
            margin: 0;
        }
        
        .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .loading-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes dot-wave {
            0%, 100% { opacity: 0.2; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-3px); }
        }
        
        .view::-webkit-scrollbar {
            width: 4px;
            display: block;
        }
        
        .view::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
            margin-top: 75px;
            margin-bottom: 80px;
        }
        
        .view::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
            min-height: 50px !important;
        }

        .view::-webkit-scrollbar-thumb:active {
            background: #FFC107;
        }
        
        #view-shop::-webkit-scrollbar,
        #view-profile::-webkit-scrollbar,
        #view-settings::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            background: transparent !important;
        }
        
        .custom-placeholder-wrapper {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
        }

        .custom-placeholder {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            
            display: flex;
            align-items: center;
            gap: 8px;
            
            color: #aaa;
            font-size: 16px;
            pointer-events: none;
            transition: opacity 0.1s;
            white-space: nowrap;
        }

        .ph-price {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 13px;
            margin-top: 1.5px;
            
            background: none; 
            padding: 0;
            
            color: #00E5FF;
            font-weight: 600;
        }
        
        #desktop-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at top right, #1a1a2e, #16213e, #0f3460);
            z-index: 9999; display: none; overflow-y: auto;
            overflow-x: hidden;
            backdrop-filter: blur(20px); -webkit-overflow-scrolling: touch;
            padding: 20px 10px;
        }
        
        /* Золотой скроллбар для лендинга: страница может скроллиться и самим
           body (когда overlay растягивает документ), и внутри overlay */
        body::-webkit-scrollbar,
        html::-webkit-scrollbar {
            width: 4px;
        }

        body::-webkit-scrollbar-track,
        html::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
        }

        body::-webkit-scrollbar-thumb,
        html::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        }

        body::-webkit-scrollbar-thumb:active,
        html::-webkit-scrollbar-thumb:active {
            background: #FFC107;
        }

        #desktop-overlay::-webkit-scrollbar {
            width: 4px;
            display: block;
        }

        #desktop-overlay::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
            margin: 10px 0; 
        }

        #desktop-overlay::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        }

        #desktop-overlay::-webkit-scrollbar-thumb:active {
            background: #FFC107;
        }

        .desktop-content {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 40px;
            padding: 25px 40px;
            max-width: 1250px;
            height: 700px;
            margin: 0 auto;
            box-shadow: 0 30px 60px rgba(0,0,0,0.4);
            text-align: center;
        }

        .desktop-content h1 { margin: 0 0 15px; font-size: 42px; color: #fff; font-weight: 800; }
        .desktop-content h1 span { color: #FFD700; }
        
        .desktop-desc { 
            color: #aaa; 
            margin: 0 auto 30px;
            font-size: 17px; 
            line-height: 1.7; 
            max-width: 900px; 
            display: block !important;
        }

        .tg-btn {
            display: inline-flex; align-items: center; gap: 14px;
            background: linear-gradient(135deg, #2481cc, #40b3e0);
            color: white; text-decoration: none;
            padding: 20px 50px; border-radius: 50px;
            font-weight: 700; font-size: 20px;
            transition: all 0.3s ease-out; 
            box-shadow: 0 10px 30px rgba(36, 129, 204, 0.4), inset 0 1px 1px rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 35px;
        }

        .tg-btn:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 15px 40px rgba(36, 129, 204, 0.6);
            filter: brightness(1.1);
        }
        .tg-btn:active { transform: scale(0.96); }
        
        .doc-link-main {
            display: flex;
            width: max-content;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0 auto 60px auto;
            color: rgba(255, 255, 255, 0.6);
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .doc-link-main span {
            text-decoration: underline;
        }
        
        .doc-link-main:hover {
            color: #FFD700;
            transform: scale(1.02);
        }

        .screenshots-wrapper {
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            gap: 30px; 
            margin: 0 auto 50px;
            max-width: 1180px; 
        }

        .phone-mockup {
            width: 255px; height: 455px; background: #000;
            border: 3px solid #1e293b; border-radius: 30px;
            overflow: hidden; position: relative;
            box-shadow: 0 20px 40px rgba(0,0,0,0.6);
            cursor: pointer; transition: all 0.3s ease;
        }
        .phone-mockup:hover { 
            transform: translateY(-10px) rotate(1deg); 
            border-color: #FFD700; 
        }
        
        .phone-mockup img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; }

        .gallery-nav-btn {
            position: fixed; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
            color: white; width: 70px; height: 70px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 32px; 
            z-index: 100001;
            transition: 0.2s; user-select: none;
        }
        .gallery-nav-btn:hover { background: #FFD700; color: #000; border-color: #FFD700; transform: translateY(-50%) scale(1.1); }
        .nav-prev { left: 40px; }
        .nav-next { right: 40px; }
        
        .gallery-close-universal {
            position: fixed; top: 40px; right: 40px; 
            font-size: 50px; color: white; cursor: pointer; 
            z-index: 100002; 
            opacity: 0.6;
            transition: all 0.2s ease;
            display: block;
            line-height: 1;
        }

        .gallery-close-universal:hover { 
            opacity: 1; 
            transform: scale(1.1); 
        }
        
        #landing-gallery-modal {
            display: none; 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            
            background: rgba(0, 0, 0, 0.35); 
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            
            z-index: 100000; 
            justify-content: center; 
            align-items: center; 
        }

        #landing-gallery-img { 
            max-height: 92vh; 
            max-width: 92vw; 
            border-radius: 20px; 
            border: 2px solid rgba(255, 255, 255, 0.1);
            object-fit: contain; 
            display: block;
            box-shadow: 0 0 50px rgba(0,0,0,1);
        }
        
        .desktop-footer {
            margin-top: 40px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 1px;
            
            border-top: 2px solid rgba(255, 255, 255, 0.25);
            
            padding: 30px 0; 
            
            display: block !important;
            width: 100%; 
            text-align: center;
        }
        
        .footer-link {
            color: rgba(255, 255, 255, 0.4);
            text-decoration: none;
            font-size: 12px;
            transition: all 0.2s ease;
            display: inline-block;
            margin-top: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.25);
        }
        .footer-link:hover {
            color: #FFD700;
            border-bottom-color: #FFD700;
        }
        
        #landscape-overlay {
            display: none;
            position: fixed; 
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at top right, #1a1a2e, #16213e, #0f3460);
            z-index: 10000;
            align-items: center; 
            justify-content: center;
            text-align: center;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

        .rotate-icon {
            animation: rotatePhone 2s infinite ease-in-out;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
        }

        @keyframes rotatePhone {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(-90deg); }
            50% { transform: rotate(-90deg); }
            75% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        /* min-aspect-ratio отсекает "ложный ландшафт" при открытой клавиатуре:
           портрет с клавиатурой ~360x300 (1.2:1), реальный ландшафт от 1.5:1 */
        @media screen and (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 3/2) {
            #landscape-overlay {
                display: flex !important;
            }
            body { overflow: hidden !important; }
        }
        
        .profile-header-row {
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            margin-bottom: 30px;
        }
        
        .profile-header-row h1 {
            margin: 0;
            display: flex; 
            align-items: center; 
            gap: 12px;
            color: #FFD700;
            font-size: 28px;
        }

        .refresh-btn {
            background: transparent !important;
            border: none !important;
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: flex-end;
            cursor: pointer;
            padding: 0;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
        }

        .refresh-btn svg {
            width: 26px; height: 26px;
            stroke: #ffffff;
            stroke-width: 2.5;
            transition: transform 1.5s ease;
        }

        .refresh-btn:active svg { 
            opacity: 1; 
            transform: rotate(360deg); 
        }

        .profile-avatar-container {
            position: relative;
            width: 120px; 
            height: 120px; 
            margin: 0 auto 15px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .profile-avatar-container:active { transform: scale(0.95); }

        .profile-avatar {
            width: 100%; height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
        }
        
        .avatar-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            border-radius: 50%;
            background: rgba(0,0,0,0.4);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: 0.2s;
        }
        .profile-avatar-container:active .avatar-overlay { opacity: 1; }

        .stat-row {
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .stat-row:last-child { border-bottom: none; }

        .stat-left { display: flex; align-items: center; gap: 12px; color: #eee; font-size: 16px; }
        .stat-icon { opacity: 0.8; width: 22px; display: flex; justify-content: center; }
        
        .stat-val { font-weight: 600; color: white; font-size: 16px; letter-spacing: 0.5px; }
        .stat-val.gold { color: var(--accent); text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
        
        #simple-avatar-modal {
            display: none;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 2000;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            
            align-items: center;
            justify-content: center;
            
            opacity: 0; animation: fadeInAvatar 0.3s forwards ease-out;
            cursor: pointer;
        }

        @keyframes fadeInAvatar {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        #simple-avatar-img {
            max-width: 85%;
            max-height: 85%;
            object-fit: contain;
            border-radius: 20px;
            
            border: 4px solid #FFD700;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 
                        0 0 60px rgba(255, 215, 0, 0.2);
            
            transition: transform 0.2s;
        }
        #simple-avatar-img:active { transform: scale(0.98); }
        
        .settings-row {
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            padding: 18px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
        }
        .settings-row:last-child { border-bottom: none; }

        .settings-left { display: flex; align-items: center; gap: 15px; color: #eee; font-size: 16px; }
        .settings-icon { opacity: 0.8; width: 24px; display: flex; justify-content: center; color: var(--accent); }
        
        .settings-val { font-weight: 500; color: var(--accent); font-size: 15px; display: flex; align-items: center; gap: 5px; }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 24px;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(255,255,255,0.1); transition: .3s; border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .toggle-slider:before {
            position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
            background-color: white; transition: .3s; border-radius: 50%;
        }
        
        input:checked + .toggle-slider { 
            background-color: var(--accent);
            box-shadow: none;
        }
        
        input:checked + .toggle-slider:before { transform: translateX(18px); background-color: #f2f2f7; }

        .settings-row.is-danger .settings-left,
        .settings-row.is-danger .settings-icon {
            color: #ff4444 !important;
        }
        
        #studio-error-container .shop-card,
        .no-credits-msg {
            transition: transform 0.1s ease-out !important;
            cursor: pointer !important;
            user-select: none;
        }
        
        #studio-error-container .shop-card:active,
        .no-credits-msg:active {
            transform: scale(0.97) !important;
        }
        
        .goto-shop-btn {
            transition: transform 0.1s ease-out !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }
        
        .goto-shop-btn:active {
            transform: scale(0.9) !important;
        }

        [dir="rtl"] .msg-bot {
            margin-right: 0 !important;
            margin-left: auto !important;
            align-self: flex-start !important;
            text-align: right !important;
        }

        [dir="rtl"] .msg-user {
            margin-left: 0 !important;
            margin-right: auto !important;
            align-self: flex-end !important;
            text-align: right !important;
            
            border-radius: 18px 18px 18px 4px !important;
        }

        [dir="rtl"] .chat-input {
            text-align: right !important;
            direction: rtl !important;
        }
        
        [dir="rtl"] .custom-placeholder {
            left: auto !important;
            right: 12px !important;
            flex-direction: row-reverse;
        }


        [dir="rtl"] .settings-left {
            flex-direction: row-reverse;
        }
        [dir="rtl"] .settings-val svg {
            transform: scaleX(-1);
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 40px 0;
            text-align: left;
        }
        
        .feature-card {
            background: rgba(255,255,255,0.03);
            padding: 20px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 215, 0, 0.3);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .security-bar {
            margin: 30px 0 10px 0;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
        }
        
        .security-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #00E5FF;
            font-size: 15px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .security-item svg {
            width: 20px !important;
            height: 20px !important;
            flex-shrink: 0;
        }
        
        .section-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin: 70px 0 30px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        /* .team-grid, .business-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 40px;
            text-align: center;
        } */
        
        .team-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            text-align: center;
        }

        .business-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 40px;
            text-align: center;
        }
        
        .info-card {
            background: rgba(255, 255, 255, 0.03);
            padding: 25px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .info-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 215, 0, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .info-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #00E5FF;
            box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
            background-color: #000;
        }

        .info-card h4 {
            color: #FFD700;
            margin: 0 0 5px 0;
            font-size: 18px;
            font-weight: 700;
        }

        .info-card .role {
            color: #00E5FF;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 15px;
            display: block;
            text-transform: uppercase;
        }

        .info-card p {
            font-size: 14px;
            color: #aaa;
            line-height: 1.6;
            margin-top: 0;
            text-align: center;
        }
        
        .li-btn {
            margin-top: 18px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #0077b5, #00e5ff);
            color: white;
            text-decoration: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease-out;
            box-shadow: 0 8px 20px rgba(0, 119, 181, 0.3), inset 0 1px 1px rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        /* Логика наведения для ПК */
        .li-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(0, 119, 181, 0.5);
            filter: brightness(1.1);
        }
        
        /* Логика нажатия (ПК и Телефон) */
        .li-btn:active {
            transform: scale(0.96);
        }
        
        @media (max-width: 768px) {
            .team-grid {
                grid-template-columns: 1fr;
                padding: 0 15px;
            }
            
            .business-grid {
                display: flex !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory;
                gap: 15px;
                margin: 20px 0 !important;
                padding: 10px 15px 20px 15px !important;
                -webkit-overflow-scrolling: touch;
            }
            
            .business-grid .info-card {
                flex: 0 0 85%;
                scroll-snap-align: center;
                text-align: left;
            }
            
            .business-grid::-webkit-scrollbar { 
                height: 4px;
                display: block;
            }
        
            .business-grid::-webkit-scrollbar-track { 
                background: rgba(255, 255, 255, 0.05);
                border-radius: 10px;
                margin: 0 40px;
            }
        
            .business-grid::-webkit-scrollbar-thumb { 
                background: #FFD700; 
                border-radius: 10px;
                box-shadow: none;
            }
            
            .section-title {
                font-size: 22px;
                margin: 40px 0 20px;
            }
            
            .desktop-content {
                border-radius: 30px; 
                width: 100%;
                box-sizing: border-box;
                background: none !important;
                border: none !important;
                box-shadow: none !important;
                height: auto !important;
                padding: 20px 10px !important;
            }
            
            .desktop-content > svg {
                width: 60px !important;
                height: 60px !important;
                margin-bottom: 15px !important;
            }

            .desktop-content h1 { font-size: 30px; }
            .desktop-desc { font-size: 14px; margin-bottom: 25px; }

            .tg-btn {
                display: flex;
                width: 100%;
                justify-content: center;
                padding: 16px 20px;
                font-size: 18px;
                margin-top: 47.5px !important;
            }

            .doc-link-main {
                width: 100%;
                font-size: 13px;
                margin-bottom: 35px;
                flex-wrap: wrap;
                text-align: center;
            }

            .screenshots-wrapper {
                width: 100%; 
                flex-wrap: nowrap;
                overflow-x: auto;
                justify-content: flex-start; 
                gap: 15px;
                padding: 15px; 
                margin-bottom: 20px;
                scroll-snap-type: x mandatory; 
                -webkit-overflow-scrolling: touch; 
                
                background: rgba(255, 255, 255, 0.03); 
                border: 1px solid rgba(255, 255, 255, 0.05);
                border-radius: 20px; 
            }

            .screenshots-wrapper::-webkit-scrollbar { 
                height: 4px; 
                display: block;
            }
            .screenshots-wrapper::-webkit-scrollbar-track { 
                background: rgba(0, 0, 0, 0.2); 
                border-radius: 10px; 
                margin: 0 15px; 
            }
            .screenshots-wrapper::-webkit-scrollbar-thumb { 
                background: #FFD700; 
                border-radius: 10px; 
                box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
            }

            .phone-mockup {
                flex: 0 0 auto; 
                width: 170px; 
                height: 303px; 
                scroll-snap-align: center; 
            }

            .gallery-nav-btn {
                width: 50px; height: 50px; font-size: 24px;
            }
            
            .gallery-nav-btn:hover {
                background: rgba(255,255,255,0.08); 
                color: white; 
                border-color: rgba(255,255,255,0.1); 
                transform: translateY(-50%) scale(1);
            }
            
            .gallery-nav-btn:active {
                background: #FFD700; 
                color: #000; 
                border-color: #FFD700; 
                transform: translateY(-50%) scale(1.1);
            }
            
            .nav-prev { left: 10px; }
            .nav-next { right: 10px; }
            
            .gallery-close-universal {
                top: 15px; right: 15px; font-size: 40px;
                color: #ffffff !important;
                opacity: 1 !important;
                text-shadow: 0 0 15px rgba(0,0,0,0.8);
            }
            
            .feature-grid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 15px;
                margin: 25px 0 0 0 !important;
                padding: 10px 15px 15px 15px !important;
                -webkit-overflow-scrolling: touch;
            }
        
            .feature-card {
                flex: 0 0 85%;
                scroll-snap-align: center;
                padding: 15px;
                min-height: 140px;
            }
        
            .feature-grid::-webkit-scrollbar { 
                height: 4px;
                display: block;
            }
            .feature-grid::-webkit-scrollbar-track { 
                background: rgba(255, 255, 255, 0.05);
                border-radius: 10px;
                margin: 0 40px;
            }
        
            .feature-grid::-webkit-scrollbar-thumb { 
                background: #FFD700; 
                border-radius: 10px;
                box-shadow: none !important;
            }
        
            .security-bar {
                flex-direction: row !important;
                justify-content: center;
                gap: 12px;
                
                border-top: none !important;
                
                margin-top: 15px !important;
                padding-top: 0 !important; 
                margin-bottom: 20px !important;
            }
            
            .security-item {
                font-size: 10px !important;
                gap: 5px !important;
                white-space: nowrap;
                opacity: 0.8;
            }
        
            .security-item svg {
                width: 14px !important;
                height: 14px !important;
            }
        
            .desktop-content {
                height: auto !important;
                padding-bottom: 30px;
            }
        }