.s3-panel{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;padding:12px;margin-top:80px}
.s3-title{font-size:32px;font-weight:900;color:#0d1117}
.s3-lead{font-size:18px;color:#334155;max-width:680px}
.s3-points{list-style:none;margin:8px 0 4px 0;padding:0;display:grid;gap:8px}
.s3-points li{font-size:16px;color:#1f2937}
.s3-stats{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px;max-width:560px;width:100%}
.s3-stat{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid #e6ecf6;border-radius:14px;padding:18px 20px;box-shadow:0 10px 24px rgba(16,23,41,.08)}
.s3-icon{font-size:18px;display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;box-shadow:0 6px 14px rgba(34,158,217,.25)}
.s3-stat-title{font-size:16px;font-weight:800;color:#0f172a}
.s3-stat-text{font-size:14px;color:#475569}
@media (max-width: 700px){.s3-stats{grid-template-columns:1fr}}

/* S4 Panel - инфографика */
.s4-panel{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 12px;width:100%}
.s4-infographics{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:700px;width:100%}
.s4-card{background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid #e8eef7;border-radius:24px;padding:32px 24px;text-align:center;position:relative;overflow:hidden;box-shadow:0 12px 32px rgba(17,23,41,.1),0 4px 12px rgba(17,23,41,.05);transition:transform .3s,box-shadow .3s}
.s4-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(17,23,41,.15),0 6px 16px rgba(17,23,41,.08)}
.s4-icon-wrapper{position:relative;width:80px;height:80px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.s4-icon{font-size:42px;z-index:2;position:relative;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.s4-glow{position:absolute;inset:-10px;background:radial-gradient(circle,rgba(42,171,238,.25),rgba(34,158,217,.15),transparent 70%);border-radius:50%;animation:pulse 3s ease-in-out infinite}
.s4-card-title{font-size:24px;font-weight:900;color:#0d1117;margin-bottom:8px;letter-spacing:-.3px}
.s4-card-desc{font-size:15px;color:#64748b;margin-bottom:16px;line-height:1.5}
.s4-highlight{display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:.3px;box-shadow:0 4px 12px rgba(34,158,217,.3)}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
@media (max-width: 700px){.s4-infographics{grid-template-columns:1fr;gap:16px}.s4-card{padding:24px 20px}.s4-icon-wrapper{width:64px;height:64px;margin-bottom:16px}.s4-icon{font-size:32px}.s4-card-title{font-size:20px}.s4-card-desc{font-size:14px}}

/* Subscription Panel Styles */
.s-subscription-panel{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 12px;width:100%;max-width:700px;margin:0 auto}
.s-subscription-content{width:100%;text-align:center}
.s-subscription-price{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:32px;padding:24px;background:linear-gradient(135deg,#2AABEE,#229ED9);border-radius:20px;box-shadow:0 12px 32px rgba(34,158,217,.35)}
.s-price-title{font-size:48px;font-weight:900;color:#fff;line-height:1;letter-spacing:2px}
.s-price-subtitle{font-size:18px;color:rgba(255,255,255,.9);font-weight:500;line-height:1.4;text-align:center}
.s-subscription-benefits{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;text-align:left}
.s-benefit-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid #e8eef7;border-radius:16px;box-shadow:0 4px 12px rgba(17,23,41,.06)}
.s-benefit-item.s-benefit-highlight{background:linear-gradient(135deg,#fff9e6,#fffbf0);border:2px solid #fdb347;box-shadow:0 6px 16px rgba(253,179,71,.25)}
.s-benefit-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.s-benefit-text{font-size:16px;color:#1f2937;line-height:1.5;flex:1;font-weight:500}
.s-benefit-highlight .s-benefit-text{color:#0f172a;font-weight:700}
.s-benefit-text strong{color:#0d1117;font-weight:700}
@media (max-width: 700px){.s-price-title{font-size:36px;letter-spacing:1px}.s-price-subtitle{font-size:16px}.s-benefit-item{padding:14px}.s-benefit-text{font-size:15px}}
.s2-panel{width:100%;max-width:820px;margin:20px auto 0 auto;padding:12px 6px 0;position:relative;min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.s2-panel::before,.s2-panel::after{content:'';position:absolute;border-radius:50%;filter:blur(40px);opacity:.4;z-index:-1}
.s2-panel::before{width:240px;height:240px;background:radial-gradient(circle,#2AABEE,transparent 60%);top:-40px;right:-60px}
.s2-panel::after{width:200px;height:200px;background:radial-gradient(circle,#229ED9,transparent 60%);bottom:-60px;left:-80px}
.s2-heading h3{font-size:34px;font-weight:900;letter-spacing:.2px;color:#0d1117;margin-bottom:6px}
.s2-heading p{font-size:20px;color:#334155;margin-bottom:18px}
.s2-heading .s2-pill{display:inline-block;margin:6px 0 10px 0;padding:10px 14px;border:1px solid #e9eef5;border-radius:14px;background:linear-gradient(180deg,#ffffff,#f7fbff);box-shadow:0 8px 20px rgba(16,23,41,.06)}
.s2-heading .s2-accent{display:inline-block;margin:0 0 10px 0;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(34,158,217,.35)}
.s2-section{padding:14px 0}
.s2-body{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.s2-col.s2-bottom{grid-column:1 / -1}
.s2-audio{max-width:560px;justify-self:center;width:100%}
.s2-subtitle{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:.2px;margin-bottom:10px}
.s2-bullets{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.s2-bullets li{display:flex;align-items:center;gap:12px;font-size:18px;color:#0f172a}
.s2-bullets .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#2AABEE,#229ED9);box-shadow:0 0 0 6px rgba(34,158,217,.12)}
.s2-bullets.numbered .badge{min-width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2AABEE,#229ED9);box-shadow:0 6px 14px rgba(34,158,217,.25)}
.s2-audio{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid #e6ecf6;border-radius:18px;padding:14px 16px;box-shadow:0 12px 28px rgba(16,23,41,.08)}
.s2-audio .icon-pause{display:none}
.s2-audio.playing .icon-play{display:none}
.s2-audio.playing .icon-pause{display:block}
.s2-wave{position:relative;height:14px;border-radius:10px;overflow:hidden;background:linear-gradient(90deg, rgba(42,171,238,.25), rgba(34,158,217,.25))}
.s2-wave span{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(42,171,238,.7) 0 12px, rgba(34,158,217,.7) 12px 24px);mix-blend:overlay;animation:none}
.s2-audio.playing .s2-wave span{animation:waveMove 2.2s linear infinite}
.s2-time{font-size:14px;color:#475569}
@media (max-width:600px){.s2-heading h3{font-size:24px}.s2-heading p{font-size:16px}.s2-bullets li{font-size:16px}}

/* S5 Panel - реферальная программа */
.s5-referral-panel{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 12px;width:100%}
.s5-referral-header{text-align:center;margin-bottom:24px;max-width:600px}
.s5-title{font-size:32px;font-weight:900;color:#0d1117;margin-bottom:12px}
.s5-desc{font-size:18px;color:#334155;max-width:560px}
.s5-referral-link-block{width:100%;max-width:560px;margin-bottom:24px}
.s5-label{display:block;font-size:14px;font-weight:600;color:#475569;margin-bottom:8px;text-align:left}
.s5-input-group{display:flex;gap:8px;align-items:center}
.s5-input{flex:1;padding:12px 16px;border:1px solid #e6ecf6;border-radius:12px;font-size:14px;background:#fff;color:#0d1117}
.s5-copy-btn{padding:12px 20px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s;white-space:nowrap;box-shadow:0 4px 12px rgba(34,158,217,.3)}
.s5-copy-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,158,217,.4)}
.s5-referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:560px}
.s5-stat-item{background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid #e6ecf6;border-radius:16px;padding:20px;text-align:center;box-shadow:0 8px 20px rgba(16,23,41,.08)}
.s5-stat-value{font-size:28px;font-weight:900;color:#2AABEE;margin-bottom:6px}
.s5-stat-label{font-size:13px;color:#64748b;font-weight:600}
@media (max-width: 700px){.s5-referral-stats{grid-template-columns:1fr;gap:12px}.s5-stat-item{padding:16px}.s5-stat-value{font-size:24px}}
.cover-stack{margin-top:auto;display:flex;flex-direction:column;width:100%;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
    padding: 0 20px;
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

/* Auth/onboarding: фиксируем экран, убираем вертикальный скролл и выезд контента */
html.auth-mode,
html.auth-mode body,
body.auth-mode {
    overflow: hidden !important;
    overflow-x: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: pan-x !important;
    overscroll-behavior: none !important;
    padding: 0 !important;
}
.auth-mode .feed {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
}
.auth-mode .container {
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:none !important;
    width:100% !important;
}
.auth-mode .feed {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}
.auth-mode :root{ --auth-controls-h: 160px; }
.auth-mode .cover-auth-slider {
    width:90% !important;
    max-width:90% !important;
    overflow:visible !important;
    height:calc(100dvh - var(--auth-controls-h) - env(safe-area-inset-bottom)) !important;
    min-height:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
/* ПК версия: ЖЁСТКОЕ центрирование - переписываем с нуля, игнорируем базовые стили */
@media (min-width: 701px) {
    /* Container: убираем max-width:50%, делаем на весь экран */
    body.auth-mode .container {
        max-width:none !important;
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }
    
    /* Центрируем feed - родительский контейнер */
    body.auth-mode .feed {
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        width:100vw !important;
        padding:0 !important;
        margin:0 !important;
        position:relative !important;
        overflow:visible !important;
    }
    
    /* Слайдер: 40% ширины, ЖЁСТКО по центру экрана, БЕЗ ОБРЕЗАНИЯ */
    body.auth-mode .cover-auth-slider {
        width:40% !important;
        max-width:none !important;
        margin-left:calc((100vw - 40%) / 2) !important;
        margin-right:calc((100vw - 40%) / 2) !important;
        margin-top:0 !important;
        margin-bottom:0 !important;
        padding:0 !important;
        position:relative !important;
        overflow:visible !important;
    }
    
    /* Слайды: центрируем всё внутри, БЕЗ ОБРЕЗАНИЯ */
    body.auth-mode .cover-slide {
        justify-content:center !important;
        align-items:center !important;
        padding:0 !important;
        text-align:center !important;
        width:100% !important;
        overflow:visible !important;
        max-width:none !important;
    }
    
    /* Все элементы внутри слайда - по центру, БЕЗ ОБРЕЗАНИЯ */
    body.auth-mode .cover-slide * {
        text-align:center !important;
        overflow:visible !important;
    }
    
    body.auth-mode .cover-slide .cover-chat {
        margin:0 auto 24px auto !important;
        max-width:none !important;
        width:100% !important;
        overflow:visible !important;
        position:relative !important;
    }
    
    body.auth-mode .cover-slide .cover-stack {
        margin:24px auto 0 auto !important;
        align-items:flex-start !important;
        text-align:left !important;
        width:100% !important;
        max-width:none !important;
        overflow:visible !important;
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
    }
    
    body.auth-mode .cover-slide .cover-row-titlelogo {
        justify-content:flex-start !important;
        margin:0 !important;
        max-width:none !important;
        gap:8px !important;
        width:100% !important;
        align-self:flex-start !important;
    }
    
    body.auth-mode .cover-slide .cover-row-titlelogo img,
    body.auth-mode .cover-slide .cover-logo-img,
    body.auth-mode .cover-slide .cover-row-titlelogo .cover-logo-img {
        width:53px !important;
        height:53px !important;
        min-width:53px !important;
        min-height:53px !important;
        max-width:53px !important;
        max-height:53px !important;
        border-radius:50% !important;
        -webkit-border-radius:50% !important;
        -moz-border-radius:50% !important;
        object-fit:cover !important;
        display:block !important;
        border:none !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        clip-path:circle(50%) !important;
        -webkit-clip-path:circle(50%) !important;
    }
    
    body.auth-mode .cover-slide .s2-panel,
    body.auth-mode .cover-slide .s3-panel,
    body.auth-mode .cover-slide .s4-panel {
        margin:0 auto !important;
        width:100% !important;
        max-width:none !important;
        overflow:visible !important;
    }
    
    /* Убираем ВСЕ max-width ограничения на ПК */
    body.auth-mode .cover-slide .s2-heading,
    body.auth-mode .cover-slide .s2-heading h3,
    body.auth-mode .cover-slide .s2-heading p,
    body.auth-mode .cover-slide .s2-heading *,
    body.auth-mode .cover-slide .s2-pill,
    body.auth-mode .cover-slide .s2-accent,
    body.auth-mode .cover-slide .s2-body,
    body.auth-mode .cover-slide .s2-audio {
        max-width:none !important;
        width:auto !important;
        min-width:auto !important;
        overflow:visible !important;
        white-space:normal !important;
        word-wrap:normal !important;
        text-overflow:clip !important;
    }
    
    /* Переопределяем базовые стили s2-panel на ПК */
    body.auth-mode .cover-slide .s2-panel {
        max-width:none !important;
        width:100% !important;
    }
    
    /* Убираем ВСЕ ограничения ширины на ПК */
    body.auth-mode .cover-slide h3,
    body.auth-mode .cover-slide p,
    body.auth-mode .cover-slide div,
    body.auth-mode .cover-slide span,
    body.auth-mode .cover-slide section,
    body.auth-mode .cover-slide header {
        max-width:none !important;
        width:auto !important;
        overflow:visible !important;
    }
}
.auth-mode .cover-slide {
    height:calc(100dvh - var(--auth-controls-h) - env(safe-area-inset-bottom)) !important;
    min-height:auto !important;
    overflow: visible !important;
}

.container {
    max-width: 50%;
    margin: 0 auto;
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0px 0;
    overflow: visible;
}

/* Header */
.header::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, transparent, rgba(245, 245, 247, 1));
    pointer-events: none;
}

.header::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -20px;
    right: -20px;
    height: 100px;
    background: #f5f5f7;
    pointer-events: none;
    z-index: -1;
}

.header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 16px 24px;
    margin-bottom: 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 8px;
    z-index: 200;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.logo-img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

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

.logo-text {
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.5px;
}

.logo-subtitle {
    font-size: 12px;
    color: #86868b;
    font-weight: 400;
    display: block;
}

.header-balances {
    display: none;
    gap: 12px;
    align-items: center;
}

.header-balances.visible {
    display: flex;
}

.balance-badge {
    background: linear-gradient(135deg, #5e5ce6 0%, #4c4aba 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.balance-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(94, 92, 230, 0.4);
}

.balance-badge #balance {
    font-weight: 700;
}

.leads-badge {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
}

.leads-badge #totalLeads {
    font-weight: 700;
}

.install-button {
    background: linear-gradient(135deg, #007AFF, #5AC8FA);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    transition: all 0.2s ease;
}

.install-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

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

/* Feed */
.feed {
    flex: 1;
    padding: 20px 0 400px 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e5e7;
    border-top-color: #5e5ce6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Purchased Leads Section */
.purchased-leads-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.purchased-leads-section h4 {
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1.1em;
}

.purchased-leads-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 20px;
}

.purchased-leads-buttons .button {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: #f5f5f7;
    border: 1px solid #d1d1d6;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.purchased-leads-buttons .button:hover {
    background: #e8e8ed;
    border-color: #a1a1a6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.purchased-leads-buttons .button:active {
    transform: translateY(0);
    background: #d1d1d6;
}

.modal-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e8e8ed;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-actions .button {
    width: 100%;
    text-align: center;
    padding: 14px 16px;
    background: #f5f5f7;
    border: 1px solid #d1d1d6;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-actions .button:hover {
    background: #e8e8ed;
    border-color: #a1a1a6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.modal-actions .button:active {
    transform: translateY(0);
    background: #d1d1d6;
}

/* Leads Modal */
.leads-modal-content {
    max-width: 95vw;
    max-height: 95vh;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.leads-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-label {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    margin-bottom: 5px;
}

.summary-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-color);
}

.leads-table-container {
    max-height: calc(95vh - 250px);
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg);
}

.leads-table th {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    position: sticky;
    top: 0;
    z-index: 10;
}

.leads-table th:first-child {
    border-top-left-radius: 12px;
}

.leads-table th:last-child {
    border-top-right-radius: 12px;
}

.leads-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.leads-table tbody tr:hover {
    background-color: #f8f9fa;
}

.leads-table tbody tr:last-child td {
    border-bottom: none;
}

.leads-table .loading {
    text-align: center;
    color: var(--secondary-text-color);
    font-style: italic;
    padding: 30px;
}

.lead-text {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}

.lead-text:hover {
    white-space: normal;
    overflow: visible;
    background-color: var(--card-bg);
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.lead-price {
    font-weight: 600;
    color: var(--accent-color);
}

.lead-price.free {
    color: var(--secondary-text-color);
}

.lead-date {
    font-size: 0.9em;
    color: var(--secondary-text-color);
}

.lead-type {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.lead-type.bonus {
    background-color: rgba(48, 209, 88, 0.1);
    color: var(--accent-color);
}

.lead-type.paid {
    background-color: rgba(102, 126, 234, 0.1);
    color: var(--primary-color);
}

.lead-type.success {
    background-color: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.lead-type.pending {
    background-color: rgba(255, 149, 0, 0.1);
    color: #ff9500;
}

.lead-type.failed {
    background-color: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

/* Arbitrage Modal */
.arbitrage-description {
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: 1em;
}

.arbitrage-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.arbitrage-form label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.arbitrage-form .form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
}

.arbitrage-form textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

.error-message.success {
    background-color: #34c759;
    color: white;
}

.lead-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.lead-action-btn.arbitrage {
    background: #ff9500;
    color: white;
    padding: 8px 12px;
    font-size: 16px;
    min-width: 40px;
}

.lead-action-btn.arbitrage:hover {
    background: #ff8800;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4);
}

.lead-action-btn.arbitrage:active {
    transform: translateY(0);
    background: #ff7700;
}

.lead-action-btn.primary {
    background-color: #5e5ce6;
    color: white;
    border: none;
}

.lead-action-btn.primary:hover {
    background-color: #4c4aba;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(94, 92, 230, 0.4);
}

.lead-action-btn.secondary {
    background-color: var(--bg-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color);
}

.lead-action-btn.secondary:hover {
    background-color: var(--border-color);
}

/* Load More Button */
.load-more-button {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 16px 24px;
    margin: 24px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    position: relative;
    z-index: 10;
}

.load-more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

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

.load-more-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.load-more-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.load-more-content svg {
    transition: transform 0.3s ease;
}

.load-more-button:hover .load-more-content svg {
    transform: scale(1.1);
}

/* Loading state for load more button */
.load-more-button.loading {
    pointer-events: none;
    opacity: 0.8;
}

.load-more-button.loading .loading-spinner {
    animation: spin 1s linear infinite;
}

.load-more-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.load-more-button:disabled:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

/* Message Card */
.message-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
    animation: fadeIn 0.3s ease-in;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

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

.message-card:hover {
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

/* Subscription Promo Card (мини-карточка между результатами) */
.subscription-promo-card {
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease-in;
}

.subscription-promo-content {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(34, 158, 217, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.subscription-promo-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 158, 217, 0.4);
}

.subscription-promo-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
}

.subscription-promo-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.subscription-promo-text {
    flex: 1;
    color: white;
}

.subscription-promo-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: white;
}

.subscription-promo-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.subscription-promo-desc .price-old {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 4px;
}

.subscription-promo-desc .price-new {
    color: #a7f3d0;
    font-weight: 700;
}

.subscription-promo-button {
    flex-shrink: 0;
    background: white;
    color: #229ED9;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.subscription-promo-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

@media (max-width: 600px) {
    .subscription-promo-content {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    
    .subscription-promo-icon {
        align-self: flex-start;
    }
    
    .subscription-promo-button {
        width: 100%;
        margin-top: 8px;
    }
}

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

.message-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

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

.message-author {
    font-weight: 600;
    font-size: 16px;
    color: #000;
    margin-bottom: 2px;
}

.message-source {
    font-size: 13px;
    color: #6e6e73;
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-similarity {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.message-text {
    font-size: 15px;
    line-height: 1.5;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f5f5f7;
}

.message-date {
    font-size: 13px;
    color: #6e6e73;
}

.message-actions {
    display: flex;
    gap: 8px;
}

.action-button {
    padding: 8px 16px;
    border: 1px solid #e5e5e7;
    background: white;
    color: #000;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-button:hover {
    background: #f5f5f7;
    border-color: #d2d2d7;
}

.action-button.primary {
    background: #5e5ce6;
    color: white;
    border-color: #5e5ce6;
}

.action-button.primary:hover {
    background: #4c4aba;
}

.action-button.success {
    background: #34c759;
    color: white;
    border-color: #34c759;
}

.action-button.danger {
    background: #ff3b30;
    color: white;
    border-color: #ff3b30;
}

/* Search Container */
.search-container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 247, 1));
    pointer-events: none;
}

.search-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    max-width: 50%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    z-index: 200;
}

.search-container::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -20px;
    right: -20px;
    height: 200px;
    background: #f5f5f7;
    pointer-events: none;
    z-index: -1;
}

.search-box {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #f5f5f7;
    border-radius: 24px;
    padding: 8px 8px 8px 20px;
    transition: all 0.2s;
}

.search-box:focus-within {
    background: #e8e8ed;
    box-shadow: 0 0 0 4px rgba(94, 92, 230, 0.1);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    outline: none;
    color: #000;
}

.search-input::placeholder {
    color: #6e6e73;
}

/* Динамическая кнопка */
.dynamic-button {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #6e6e73;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.dynamic-button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* Состояние микрофона (по умолчанию) */
.dynamic-button.mic-mode {
    background: transparent;
    color: #6e6e73;
}

.dynamic-button.mic-mode:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

.dynamic-button.mic-mode.recording {
    background: #ff3b30;
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Состояние поиска (когда есть текст) */
.dynamic-button.search-mode {
    background: #5e5ce6;
    color: white;
    transform: scale(1.05);
}

.dynamic-button.search-mode:hover {
    background: #4c4aba;
    transform: scale(1.1);
}

/* Анимация переключения иконок */
.dynamic-button svg {
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dynamic-button .mic-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dynamic-button .search-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.dynamic-button.search-mode .mic-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.dynamic-button.search-mode .search-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

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

/* Старые стили для совместимости */
.voice-button,
.search-button {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #6e6e73;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.voice-button:hover,
.search-button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

.voice-button.recording {
    background: #ff3b30;
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.search-button {
    background: #5e5ce6;
    color: white;
}

.search-button:hover {
    background: #4c4aba;
}

.recording-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    color: #ff3b30;
    font-size: 14px;
    font-weight: 500;
}

.recording-indicator.active {
    display: flex;
}

.recording-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.terms-notice {
    text-align: center;
    margin-top: 12px;
    font-size: 11px;
    color: #86868b;
    line-height: 1.4;
}

.terms-notice a {
    color: #5e5ce6;
    text-decoration: none;
}

.terms-notice a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1400px) {
    .container {
        max-width: 70%;
    }
    
    .search-container {
        width: 70%;
        max-width: 70%;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 90%;
    }
    
    .search-container {
        width: 90%;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0px 0;
    }
    
    .header {
        border-radius: 16px;
        top: 4px;
        margin-bottom: 4px;
        padding: 12px 16px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .search-container {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        left: 8px;
        right: 8px;
        transform: none;
        bottom: 8px;
        padding: 12px 16px;
        border-radius: 16px;
        margin: 0;
    }
    
    .header-content {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .logo-img {
        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px;
        max-height: 32px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
    }
    
    .logo-text {
        font-size: 18px;
        font-style: normal;
        background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    
    .logo-subtitle {
        font-size: 9px;
        display: block;
    }
    
    .header-balances {
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    
    .balance-badge {
        padding: 8px 12px;
        font-size: 11px;
        flex: 1;
        min-width: 120px;
        text-align: center;
        border-radius: 12px;
        background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
        color: white;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    }
    
    /* Адаптивная таблица лидов */
    .leads-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .leads-table {
        min-width: 600px;
        font-size: 0.85em;
    }
    
    .leads-table th {
        padding: 10px 8px;
        font-size: 0.85em;
    }
    
    .leads-table td {
        padding: 10px 8px;
    }
    
    .lead-text {
        max-width: 200px;
    }
    
    .lead-action-btn {
        padding: 6px 10px;
        font-size: 0.75em;
        gap: 3px;
    }
    
    .lead-action-btn.arbitrage {
        padding: 6px 10px;
        font-size: 14px;
        min-width: 36px;
    }
    
    .leads-summary {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }
    
    .summary-value {
        font-size: 1.2em;
    }
    
    .leads-badge {
        padding: 8px 12px;
        font-size: 11px;
        background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
        color: white;
        border-radius: 12px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
        min-width: 80px;
        text-align: center;
    }
    
    .install-button {
        padding: 8px 12px;
        font-size: 11px;
        border-radius: 12px;
        min-width: 80px;
        justify-content: center;
    }
    
    .feed {
        padding: 0px 0 400px 0;
    }
    
    .message-card {
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .search-box {
        padding: 6px 6px 6px 16px;
    }
    
    .search-input {
        font-size: 14px;
    }
    
    .dynamic-button {
        width: 36px;
        height: 36px;
    }
    
    .voice-button, .search-button {
        width: 36px;
        height: 36px;
    }
    
    .terms-notice {
        font-size: 10px;
        margin-top: 8px;
    }
    
    .modal {
        padding: 8px;
    }
    
    .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 16px;
    }
    
    .modal-header {
        padding: 16px 20px 12px;
    }
    
    .modal-body {
        padding: 0 20px 20px;
    }
    
    .packages-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .package-button {
        padding: 16px 12px;
    }
    
    .package-amount {
        font-size: 14px;
    }
    
    .package-price {
        font-size: 18px;
    }
    
    .package-per-lead {
        font-size: 11px;
    }
    
    .custom-amount {
        gap: 6px;
        margin-top: 12px;
    }
    
    #customAmount {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .topup-button {
        padding: 10px 16px;
        font-size: 13px;
        min-width: 70px;
    }
    
    .topup-section {
        margin-bottom: 20px;
    }
    
    .leads-section {
        margin-top: 20px;
        padding-top: 16px;
    }
}

/* Intro Cards */
.intro-card {
    background: white;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.intro-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.intro-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.intro-card p:last-child {
    margin-bottom: 0;
}

.intro-card ul {
    margin: 12px 0;
    padding-left: 24px;
}

.intro-card li {
    font-size: 15px;
    line-height: 1.8;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.intro-card strong {
    font-weight: 600;
    color: #1d1d1f;
}

/* Реферальная карточка в ленте */
.referral-card-header {
    margin-bottom: 20px;
}

.referral-card-header h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.referral-card-header p {
    font-size: 15px;
    color: #6e6e73;
    margin: 0;
}

.referral-card-link-block {
    margin-bottom: 20px;
}

.referral-card-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.referral-card-input-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.referral-card-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #1d1d1f;
    min-width: 0;
}

.referral-card-input:focus {
    outline: none;
    border-color: #007AFF;
}

.referral-card-copy-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
}

.referral-card-copy-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

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

.referral-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #e0eef7;
}

.referral-card-stat-item {
    text-align: center;
}

.referral-card-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #007AFF;
    margin-bottom: 4px;
}

.referral-card-stat-label {
    font-size: 12px;
    color: #6e6e73;
}

/* Карточка подписки в ленте */
.subscription-card-header {
    margin-bottom: 20px;
}

.subscription-card-header h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1d1d1f;
}

.subscription-card-content {
    width: 100%;
}

.subscription-card-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(34, 158, 217, 0.3);
}

.subscription-card-price-amount {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.subscription-card-price-period {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.subscription-card-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.subscription-card-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fbff;
    border: 1px solid #e8eef7;
    border-radius: 12px;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.5;
}

.subscription-card-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.subscription-card-text {
    flex: 1;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
}

.subscription-card-text strong {
    color: #0d1117;
    font-weight: 700;
}

.subscription-card-benefit-highlight {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border: 2px solid #fdb347;
    box-shadow: 0 4px 12px rgba(253, 179, 71, 0.2);
}

.subscription-card-benefit-highlight span:last-child {
    font-weight: 700;
    color: #0f172a;
}

.subscription-card-button {
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(34, 158, 217, 0.3);
    transition: filter 0.16s, transform 0.08s;
    margin-top: 12px;
}

.subscription-card-button:hover {
    filter: brightness(1.05);
}

.subscription-card-button:active {
    transform: translateY(1px);
}

/* Блок подписки в ленте - новый дизайн */
.subscription-card-feed {
    border: 2px solid #e8eef7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.subscription-card-header-new {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 16px;
}

.subscription-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.subscription-header-top .subscription-card-title-new {
    margin: 0;
    text-align: center;
}

.subscription-status-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.subscription-card-title-new {
    font-size: 36px;
    font-weight: 900;
    color: #0d1117;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Больший стиль для ПОТОК+ в welcome message */
.subscription-card-feed .subscription-card-title-new {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subscription-card-subtitle-new {
    font-size: 16px;
    color: #64748b;
    margin: 0 0 12px 0;
    font-weight: 500;
    text-align: center;
}

.subscription-card-status-new {
    margin-top: 12px;
}

.subscription-status-active-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-status-inactive-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e2e8f0;
}

.subscription-card-content-new {
    width: 100%;
}

.subscription-card-benefits-section {
    margin-bottom: 24px;
}

.subscription-benefits-title {
    font-size: 20px;
    font-weight: 700;
    color: #0d1117;
    margin: 0 0 16px 0;
}

.subscription-card-benefits-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subscription-card-benefit-item-new {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8eef7;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.subscription-card-benefit-item-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.subscription-card-icon-new {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.subscription-card-text-new {
    font-size: 15px;
    color: #1f2937;
    line-height: 1.5;
    flex: 1;
    font-weight: 500;
}

.benefit-savings {
    color: #10b981;
    font-weight: 600;
}

.price-old {
    text-decoration: line-through;
    color: #6b7280;
    margin-right: 4px;
}

.price-new {
    color: #10b981;
    font-weight: 700;
}

.subscription-card-grant-new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border: 2px solid #81c784;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(129, 199, 132, 0.25);
}

.subscription-grant-text-new {
    flex: 1;
    width: 100%;
}

.subscription-grant-text-new strong {
    font-size: 16px;
    color: #0d1117;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}

.subscription-grant-text-new strong .asterisk {
    font-weight: 400;
    font-size: 12px;
    vertical-align: super;
}

.subscription-grant-hint {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 8px;
}

.subscription-card-button-new {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
    box-shadow: 0 8px 20px rgba(34, 158, 217, 0.3);
    margin-top: 20px;
}

.subscription-card-button-new:hover {
    filter: brightness(1.05);
}

.subscription-card-button-new:active {
    transform: translateY(1px);
}

.subscription-card-active-info-new {
    padding: 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    margin-top: 20px;
    text-align: center;
}

.subscription-card-active-badge-new {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-card-active-text-new {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.subscription-card-active-date-new {
    font-size: 16px;
    color: #0d1117;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.subscription-card-active-hint-new {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

/* Раскрывающийся блок подписки */
.subscription-details-toggle {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid #e8eef7;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #5e5ce6;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.subscription-details-toggle:hover {
    background: #f8fbff;
    border-color: #5e5ce6;
    color: #5e5ce6;
}

.subscription-details-toggle:active {
    transform: translateY(1px);
}

.subscription-details-toggle .toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.subscription-details-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    padding: 0;
    margin-top: 0;
}

.subscription-details-content.expanded,
.subscription-details-content[style*="display: block"] {
    max-height: 2000px;
    opacity: 1;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 2px solid #e8eef7;
    padding-bottom: 16px;
}

@media (max-width: 600px) {
    .subscription-header-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .subscription-header-top .subscription-card-title-new {
        width: 100%;
        text-align: center;
    }
}

/* Feather Icons inline styles */
.inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 4px;
}

.inline-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
    display: block;
}

.subscription-benefit-icon i,
.subscription-card-icon-new i,
.subscription-card-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-benefit-icon svg,
.subscription-card-icon-new svg,
.subscription-card-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.subscription-card-icon-new {
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-card-icon-new svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.welcome-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 2;
}

/* Ensure icons are properly sized in buttons */
.button i,
.lead-action-btn i {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 4px;
}

.button svg,
.lead-action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Modal headers with icons */
.modal-header h3 i,
.modal-header h4 i {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
}

.modal-header h3 svg,
.modal-header h4 svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.subscription-card-benefit-item {
    background: #ffffff;
    border: 1px solid #e8eef7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.subscription-card-benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.subscription-card-active-info {
    padding: 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    margin-top: 16px;
    text-align: center;
}

.subscription-card-active-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-card-active-text {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.subscription-card-active-date {
    font-size: 16px;
    color: #0d1117;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.subscription-card-active-hint {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

@media (max-width: 600px) {
    .referral-card-input-group {
        flex-direction: column;
    }
    .referral-card-copy-btn {
        width: 100%;
    }
    .referral-card-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Еще более компактная таблица на маленьких экранах */
    .leads-table {
        min-width: 550px;
        font-size: 0.8em;
    }
    
    .leads-table th {
        padding: 8px 6px;
        font-size: 0.8em;
    }
    
    .leads-table td {
        padding: 8px 6px;
    }
    
    .lead-text {
        max-width: 150px;
        font-size: 0.9em;
    }
    
    .lead-action-btn {
        padding: 5px 8px;
        font-size: 0.7em;
    }
    
    .lead-action-btn.arbitrage {
        padding: 5px 8px;
        font-size: 12px;
        min-width: 32px;
    }
    
    .modal-content {
        padding: 16px;
    }
    
    .arbitrage-form textarea.form-input {
        min-height: 80px;
    }
}

/* Auth Message Card */
.auth-message-card {
    background: white;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.auth-message-card:hover {
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.auth-message-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1d1d1f;
}

.auth-message-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #6e6e73;
    margin-bottom: 20px;
}

.auth-card-button {
    background: linear-gradient(135deg, #0088cc 0%, #005fa3 100%);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
}

.auth-card-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 136, 204, 0.4);
}

.auth-card-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Auth Screen (waiting/success states) */
.auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 20px;
}

.auth-card {
    background: white;
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.auth-card h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.auth-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.auth-card p {
    font-size: 16px;
    line-height: 1.5;
    color: #6e6e73;
    margin-bottom: 24px;
}

.auth-card.waiting {
    padding: 60px 40px;
}

.auth-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid #0088cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-note {
    font-size: 14px !important;
    color: #86868b !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

.bot-link {
    display: inline-block;
    color: #0088cc;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 24px;
    border: 2px solid #0088cc;
    border-radius: 12px;
    transition: all 0.2s;
}

.bot-link:hover {
    background: #0088cc;
    color: white;
    transform: translateY(-2px);
}

.auth-card.success {
    padding: 60px 40px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    margin: 0 auto 24px;
    box-shadow: 0 4px 24px rgba(52, 199, 89, 0.3);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6e6e73;
}

.empty-state h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.empty-state p {
    font-size: 15px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in;
    padding: 16px;
    box-sizing: border-box;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 32px;
    color: #86868b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.modal-body {
    padding: 28px;
}

.profile-info {
    margin-bottom: 32px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.profile-label {
    font-size: 15px;
    color: #86868b;
    font-weight: 500;
}

.profile-value {
    font-size: 16px;
    color: #1d1d1f;
    font-weight: 600;
}

.balance-value {
    color: #5e5ce6;
    font-size: 18px;
}

.topup-section {
    margin-top: 24px;
}

/* Реферальный блок */
.referral-section {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fbff 0%, #e8f4ff 100%);
    border-radius: 16px;
    border: 1px solid #e0eef7;
}

.referral-header {
    margin-bottom: 20px;
}

.referral-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.referral-desc {
    font-size: 14px;
    color: #6e6e73;
    margin: 0;
    line-height: 1.5;
}

.referral-link-block {
    margin-bottom: 20px;
}

.referral-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.referral-input-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.referral-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #1d1d1f;
}

.referral-input:focus {
    outline: none;
    border-color: #007AFF;
}

.referral-copy-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
}
@media (max-width: 600px) {
    .referral-input-group {
        flex-direction: column;
    }
    .referral-copy-btn {
        width: 100%;
    }
}

.referral-copy-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

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

.referral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #e0eef7;
}

.referral-stat-item {
    text-align: center;
}

.referral-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #007AFF;
    margin-bottom: 4px;
}

.referral-stat-label {
    font-size: 12px;
    color: #6e6e73;
}

.topup-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 16px;
}

.topup-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.amount-button {
    background: #f5f5f7;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s;
}

.amount-button:hover {
    background: #e8e8ed;
}

.amount-button.selected {
    background: #e8ebff;
    border-color: #5e5ce6;
    color: #5e5ce6;
}

.custom-amount {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

#customAmount {
    flex: 1;
    border: 2px solid #e8e8ed;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    outline: none;
    transition: all 0.2s;
    min-width: 0;
}

#customAmount:focus {
    border-color: #5e5ce6;
}

.topup-button {
    background: linear-gradient(135deg, #5e5ce6 0%, #4c4aba 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 80px;
}

.topup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(94, 92, 230, 0.4);
}

.topup-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Leads Section */
.leads-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.leads-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.leads-info {
    font-size: 14px;
    color: #6e6e73;
    margin-bottom: 16px;
    line-height: 1.5;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.package-button {
    background: white;
    border: 2px solid #e8e8ed;
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.package-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #5e5ce6;
}

.package-button.popular {
    border-color: #5e5ce6;
    background: linear-gradient(135deg, #f5f4ff 0%, #ffffff 100%);
}

.package-button.best {
    border-color: #34c759;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

/* Subscription Section Styles - Profile */
.subscription-section-profile {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 2px solid #e8eef7;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.subscription-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.subscription-profile-header h4 {
    font-size: 22px;
    font-weight: 800;
    color: #0d1117;
    margin: 0;
}

.subscription-status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.subscription-status-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-status-inactive {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 158, 217, 0.3);
}

.subscription-profile-content {
    width: 100%;
}

.subscription-profile-price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(34, 158, 217, 0.35);
}

.subscription-profile-price-amount {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.subscription-profile-price-period {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.subscription-profile-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.subscription-profile-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8eef7;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.subscription-profile-benefit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.subscription-benefit-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.subscription-benefit-text {
    flex: 1;
    font-size: 15px;
    color: #1f2937;
    line-height: 1.6;
}

.subscription-benefit-text strong {
    color: #0d1117;
    font-weight: 700;
}

.subscription-benefit-grant {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border: 2px solid #fdb347;
    box-shadow: 0 4px 16px rgba(253, 179, 71, 0.25);
}

.subscription-profile-button {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(34, 158, 217, 0.35);
    transition: filter 0.16s, transform 0.08s;
}

.subscription-profile-button:hover {
    filter: brightness(1.05);
}

.subscription-profile-button:active {
    transform: translateY(1px);
}

.subscription-active-info {
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 14px;
    text-align: center;
    margin-top: 20px;
}

.subscription-active-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-active-text {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.subscription-active-date {
    font-size: 18px;
    color: #0d1117;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.subscription-active-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

.package-badge {
    position: absolute;
    top: -8px;
    background: linear-gradient(135deg, #5e5ce6 0%, #4c4aba 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(94, 92, 230, 0.3);
}

.package-button.best .package-badge {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.package-amount {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
}

.package-price {
    font-size: 20px;
    font-weight: 800;
    color: #1d1d1f;
}

.package-per-lead {
    font-size: 12px;
    font-weight: 500;
    color: #86868b;
}

/* Welcome Modal */
.welcome-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in;
}

.welcome-modal.active {
    display: flex;
}

.welcome-modal-content {
    background: white;
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
    position: relative;
}

.welcome-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    margin: 0 auto 24px;
    box-shadow: 0 4px 24px rgba(52, 199, 89, 0.3);
}

.welcome-modal-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.welcome-modal-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #6e6e73;
    margin-bottom: 32px;
}

.welcome-button {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 16px 48px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

.welcome-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(52, 199, 89, 0.4);
}

/* --- COVER AUTH --- */
.cover-auth-bg{
  position:fixed;z-index:0;inset:0;background:#fff;
}
.cover-auth-slider{
  position:relative;z-index:2;max-width:560px;margin:24px auto 0 auto;padding:24px 0 96px 0;min-height:72vh;display:flex;overflow:visible; flex-direction: column;align-items:center;}
.cover-auth-slider{width:100%;overflow:visible}
.cover-slide{display:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;animation:fadeIn .7s;padding:0 16px;min-height:calc(72vh);}
/* ПК версия: центрируем слайды и весь контент */
@media (min-width: 701px) {
  .cover-auth-slider{margin-left:auto !important;margin-right:auto !important}
  .cover-slide{align-items:center !important;justify-content:center !important;padding-left:0 !important;padding-right:0 !important}
}
.cover-slide.active{display:flex;}
.cover-chat{width:100%;max-width:560px;margin:58px auto 12px auto;position:relative;height:clamp(220px,40dvh,520px);overflow:visible;}
.chat-bubble{
  display:flex;gap:12px;align-items:center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid #e8eef7;
  border-radius:16px;
  padding:14px 16px;
  backdrop-filter: blur(4px);
  box-shadow:
    0 10px 24px rgba(17, 23, 41, 0.10),
    0 3px 8px rgba(17, 23, 41, 0.06),
    0 1px 0 rgba(255,255,255,0.75) inset;
  width:clamp(170px, 44%, 260px);
}
.chat-text{color:#1d2430;font-size:14px;line-height:1.4;}
.chat-avatar{width:28px;height:28px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #eaf1ff, #dfe8fa);
  box-shadow: 0 4px 10px rgba(17,23,41,.12) inset, 0 1px 0 rgba(255,255,255,.7) inset;
  display:flex;align-items:center;justify-content:center;font-size:14px;}
.chat-text{color:#1d2430;font-size:14px;line-height:1.4;}

/* Card positions to fill area */
.chat-bubble.card{position:absolute;animation:float 6s ease-in-out infinite;}
.lg{transform:scale(1)}
.md{transform:scale(.92)}
.sm{transform:scale(.86)}
.p1{top:0;left:0;animation-delay:0s}
.p2{top:8%;left:52%;animation-delay:.2s}
.p3{top:22%;left:6%;animation-delay:.4s}
.p4{top:34%;left:50%;animation-delay:.6s}
.p5{top:48%;left:2%;animation-delay:.8s}
.p6{top:6%;left:30%;animation-delay:1s}
.p7{top:28%;left:58%;animation-delay:1.2s}

@keyframes float{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -3px; }
}

/* Mobile adjustments */
@media (max-width: 420px) {
  .cover-auth-controls{padding:0 0 16px 0}
  .cover-auth-btn{padding:16px 0;font-size:1.05rem, background:}
  .terms-notice{font-size:12px;margin-top:6px}
  .cover-chat{ max-width: 340px; height: 28dvh; transform: scale(.9); transform-origin: top center; }
  .chat-bubble{ width: clamp(160px, 82%, 220px); padding: 12px 14px; }
  .p1{ top:0; left:0; }
  .p2{ top:10%; left:42%; }
  .p3{ top:22%; left:4%; }
  .p4{ top:34%; left:44%; }
  .p5{ top:50%; left:2%; }
  .p6{ top:6%; left:18%; }
  .p7{ top:28%; left:56%; }
}
.cover-desc{ text-align:left; align-self:flex-start; max-width:720px; margin-top:12px; margin-bottom:16px; color:#5c626a; font-size:1.06rem; line-height:1.55; margin-left:0; width:100%; }
.cover-sub{ margin-left:0; width:100%; text-align:left !important; align-self:flex-start !important; }
/* push title+subtitle+desc to bottom of slide */
.cover-row-titlelogo{ margin-top:auto; }
@keyframes fadeIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
.cover-img{margin:0 auto 22px auto;}
.cover-title{font-weight:900;font-size:3.0rem;color:#1b1c1d;margin-bottom:6px;text-align:center;letter-spacing:.005em;line-height:1.05;}
.cover-sub{font-size:2.0rem;text-align:center;font-weight:800;max-width:90vw;line-height:1.08;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;}
.cover-ico{font-size:3.5rem;margin:0 0 16px 0;}
.auth-mode .cover-auth-slider .cover-slide:first-child{margin-top:-40px}
.auth-mode .cover-auth-slider .cover-slide:nth-child(2){margin-top:-70px}
.auth-mode .cover-auth-slider .cover-slide:nth-child(3){margin-top:-60px}
.auth-mode .cover-auth-slider .cover-slide:nth-child(4){margin-top:-60px}
.auth-mode .cover-auth-slider .cover-slide:nth-child(5){margin-top:-80px}
.auth-mode .cover-auth-slider .cover-slide:nth-child(6){margin-top:-120px}
.cover-progress{display:flex;gap:9px;align-items:center;justify-content:center;margin:28px 0 16px 0;}
.cover-progress .dot{width:12px;height:12px;background:#E2E8F0;border-radius:50%;}
.cover-progress .dot.active{background:#007AFF;}
.cover-auth-controls {
    position: fixed;
    left: 50%;                 /* центрируем по горизонтали */
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;                /* на мобильных займёт всю ширину */
    max-width: 480px;           /* ограничение для десктопа */
    z-index: 10;
    background: #fff;
    padding: 28px 0 16px 0;            /* верх/низ — 28px, горизонтальные отступы не нужны, ширина через max-width */
    text-align: center;
    border-radius: 32px 32px 0 0; /* скругление только сверху, как было раньше; можно 32px */
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.cover-auth-btn{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 auto;padding:20px 0;width:94%;max-width:400px;
  background:#4f85c4;
  font-size:1.2rem;font-weight:800;border:none;border-radius:16px;color:#fff;
  box-shadow:0 12px 28px rgba(34,158,217,.35);transition:filter .16s, transform .08s;letter-spacing:.02em;}
.cover-auth-btn:hover{filter:brightness(1.05);} 
.cover-auth-btn:active{transform:translateY(1px);} 
.accent{color:#007AFF;font-weight:700;}
@media (max-width:600px){.cover-title{font-size:1.6rem;}.cover-sub{font-size:1.15rem;}.cover-img img{width:50px;}}

/* Terms notice under button */
.terms-notice{margin-top:10px;color:#6b7280;font-size:13px}
.terms-notice a{color:#5667ff;text-decoration:none}
.terms-notice a:hover{text-decoration:underline}

/* ---- Промо first screen ---- */
.firstscreen-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 44px 12px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.firstscreen-bubble {
  display: flex;
  align-items: center;
  background: #f7faff;
  border-radius: 20px;
  box-shadow: 0 4px 32px #0b162055;
  padding: 14px 20px 14px 14px;
  margin-bottom: 40px;
  margin-top: 10px;
  min-width: 0;
  max-width: 400px;
}
.bubble-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e1eafe 50%, #c1e4ef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 12px;
  box-shadow: 0 1px 8px #8881;
}
.bubble-text {
  font-size: 1.12rem;
  color: #222e43;
  line-height: 1.5;
  font-weight: 500;
  word-break: break-word;
}
.firstscreen-logo {
  margin-bottom: 36px;
}
.firstscreen-title {
  font-weight: 900;
  font-size: 2.7rem;
  letter-spacing: 0.01em;
  color: #181b25;
  margin-bottom: 0;
  text-align: left;
  width: 100%;
}
.firstscreen-blue {
  color: #007AFF;
  font-weight: 900;
  font-size: 2.15rem;
  margin: 2px 0 32px 0;
  line-height: 1.1;
  display: block;
  text-align: left;
  width: 100%;
}
.firstscreen-desc {
  margin-top: 18px;
  font-size: 1.17rem;
  color: #646b7a;
  font-weight: 500;
  line-height: 1.5;
  width: 100%;
  text-align: left;
}
.firstscreen-btn {
  width: 100%;
  max-width: 440px;
  margin: 48px auto 0 auto;
  display: block;
  background: #007AFF;
  color: #fff;
  font-size: 1.26rem;
  font-weight: 900;
  border: none;
  border-radius: 17px;
  padding: 21px 0;
  text-align: center;
  transition: background 0.17s;
  box-shadow: 0 12px 38px #52aeff2c;
  letter-spacing: .01em;
}
.firstscreen-btn:active {
  background: #0352b4;
}
@media (max-width: 600px) {
  .firstscreen-title{font-size:2.1rem;}
  .firstscreen-blue{font-size:1.3rem;}
  .firstscreen-btn{font-size:1.05rem;}
  .bubble-avatar{width:32px;height:32px;font-size:18px;}
}

.cover-row-titlelogo{display:flex;align-items:center;gap:8px;margin-top:8px;margin-bottom:2px;justify-content:flex-start;width:100%;}
.cover-logo-img,
.cover-row-titlelogo img,
.cover-row-titlelogo .cover-logo-img {
    width:53px !important;
    height:53px !important;
    min-width:53px !important;
    min-height:53px !important;
    max-width:53px !important;
    max-height:53px !important;
    border-radius:50% !important;
    -webkit-border-radius:50% !important;
    -moz-border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    clip-path:circle(50%) !important;
    -webkit-clip-path:circle(50%) !important;
}
.cover-row-titlelogo .cover-title{font-size:65px;line-height:1;font-weight:600;padding:0;margin:0;letter-spacing:0.02em;text-transform:uppercase;background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);-webkit-background-clip: text;background-clip: text;color: transparent;}

/* Slide 2 multi-block layout */
.s2-grid{width:100%;display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.s2-grid.full{max-width:620px}
.s2-title{grid-column:1 / -1;font-size:32px;font-weight:900;color:#0d1117;letter-spacing:.2px}
.s2-lead{grid-column:1 / -1;font-size:20px;color:#2f3947;margin-top:-6px}
.s2-card{background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);border:1px solid #eaf0f7;border-radius:18px;padding:20px 22px;box-shadow:0 14px 34px rgba(16,23,41,.08)}
.s2-card p{font-size:17px;color:#4a5562;line-height:1.7}
.s2-card--info{position:relative;overflow:hidden}
.s2-card--info::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#2AABEE,#229ED9)}
.s2-list{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.s2-list li{display:flex;align-items:center;gap:12px;color:#1e293b;font-size:17px}
.s2-list li svg{background:linear-gradient(135deg,#2AABEE,#229ED9);border-radius:50%;padding:4px;box-shadow:0 4px 12px rgba(34,158,217,.25)}
.s2-list li svg path{stroke:#fff}
.s2-voice{grid-column:1 / -1}

/* iOS style slide 2 multi-block layout */
.s2-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.s2-chip{grid-column:1 / -1;justify-self:start;background:rgba(0,0,0,.06);border:1px solid #eef1f6;border-radius:999px;padding:6px 12px;font-size:12px;color:#3a3f4a}
.s2-title{grid-column:1 / -1;font-size:22px;font-weight:800;margin-top:4px;color:#111}
.s2-lead{grid-column:1 / -1;font-size:15px;color:#3a3f4a;margin-bottom:4px}
.s2-card{background:rgba(255,255,255,.9);border:1px solid #eef1f6;border-radius:16px;padding:14px 16px;box-shadow:0 8px 24px rgba(20,25,40,.06)}
.s2-card p{font-size:15px;color:#5c636f;line-height:1.6}
.s2-voice{grid-column:1 / -1}

.voice-card{display:flex;align-items:center;gap:14px;margin-top:8px;background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid #e6ecf6;border-radius:18px;padding:14px 16px;box-shadow:0 12px 28px rgba(16,23,41,.08)}
.voice-play{width:46px;height:46px;border:none;border-radius:50%;background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 18px rgba(34,158,217,.35)}
.voice-play .icon-pause{display:none}
.voice-playing .icon-play{display:none}
.voice-playing .icon-pause{display:block}
.voice-info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.voice-wave{flex:1;height:14px;border-radius:10px;background:linear-gradient(90deg, rgba(42,171,238,.25), rgba(34,158,217,.25));position:relative;overflow:hidden}
.voice-wave::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(42,171,238,.55) 0 10px, rgba(34,158,217,.55) 10px 20px);mix-blend:overlay;animation:waveMove 2s linear infinite}
.voice-meta{font-size:13px;color:#5b6573}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-20px)}}
.voice-meta{font-size:12px;color:#6b7280}

/* Поток Пульс - стили для модального окна */
.pulse-modal-content {
    max-width: 600px;
}

.pulse-step {
    animation: fadeIn 0.3s ease-in;
}

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

.pulse-option-btn:hover {
    border-color: #007aff !important;
    background: #f0f7ff !important;
}

.pulse-option-btn.active {
    border-color: #007aff !important;
    background: #e6f2ff !important;
}

.pulse-option-btn.active div {
    color: #007aff !important;
}

.pulse-period-btn:hover {
    border-color: #007aff !important;
    background: #f0f7ff !important;
}

.pulse-period-btn.active {
    border-color: #007aff !important;
    background: #e6f2ff !important;
}

.pulse-period-btn.active div {
    color: #007aff !important;
}

.pulse-example-card:hover {
    border-color: #007aff !important;
    background: #f0f7ff !important;
}

.pulse-toggle-btn:hover {
    border-color: #007aff !important;
}

.pulse-toggle-btn.active {
    background: #007aff !important;
    color: white !important;
    border-color: #007aff !important;
}

/* Улучшенные стили для поля ввода */
#pulseSearchQuery:focus {
    outline: none;
    border-color: #30d158 !important;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.2) !important;
}

/* Улучшенные стили для кнопки голосового ввода */
.pulse-voice-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4) !important;
}

.pulse-voice-button:active {
    transform: scale(0.95);
}

.pulse-voice-button.recording {
    background: linear-gradient(135deg, #ff3b30 0%, #ff2d55 100%) !important;
    animation: pulse-recording 1.5s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 59, 48, 0.6);
    }
}

/* Улучшенные стили для кнопки CTA */
.pulse-next-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(52, 199, 89, 0.4) !important;
}

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

/* Стили для тегов-примеров */
.pulse-tag-btn:hover {
    background: #e6f2ff !important;
    border-color: #34c759 !important;
    color: #34c759 !important;
    transform: translateY(-1px);
}

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

/* Анимация поиска для Поток Пульс */
@keyframes pulse-search-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.pulse-search-animation {
    animation: pulse-search-pulse 2s ease-in-out infinite;
}

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

/* Стили для слайдеров Поток Пульс */
#pulseIntervalSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e5e5e7;
    outline: none;
    transition: background 0.3s ease;
}

#pulseIntervalSlider:hover {
    background: #d1d1d6;
}

#pulseIntervalSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.4);
    transition: all 0.3s ease;
}

#pulseIntervalSlider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.6);
}

#pulseIntervalSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.4);
    transition: all 0.3s ease;
}

#pulseIntervalSlider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.6);
}

/* Стили для сдвоенной кнопки периода */
.pulse-period-toggle {
    position: relative;
}

.pulse-period-toggle-btn {
    transition: all 0.3s ease;
}

.pulse-period-toggle-btn:hover:not(.active) {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}

/* Стили для карточки ПОТОК+ */
.pulse-potok-plus-offer {
    position: relative;
}

.pulse-potok-plus-offer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.05) 0%, rgba(48, 209, 88, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

/* Стили для кнопки "Далее" с градиентом и hover-эффектом */
#pulseStep3Next {
    position: relative;
    overflow: hidden;
}

#pulseStep3Next::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

#pulseStep3Next:hover::before {
    left: 100%;
}

#pulseStep3Next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
}

#pulseStep3Next:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

@media (max-width: 600px) {
    .pulse-options-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .pulse-examples-grid {
        grid-template-columns: 1fr !important;
    }
    
    #pulseIntervalValue {
        font-size: 28px !important;
    }
    
    #pulsePriceDisplay {
        font-size: 36px !important;
    }
}

/* wrapper: окно карусели (фиксированный размер или % по желанию) */
.png-slider-wrapper {
    width: 100vw;             /* под ширину экрана */
    height: 100vh;            /* под высоту экрана */
    margin: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    background: linear-gradient(to bottom, #3f75c4, #accbee);
}

.png-slider {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
}

.png-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: contain;      /* масштабирует картинки без обрезки */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Точки */
.top-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.top-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #3f75c4;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.top-dot:hover {
    transform: scale(1.3);
}

.top-dot.active {
    background-color: #3f75c4;
    border-color: #3f75c4;
    transform: scale(1.3);
}

/* Кнопка авторизации */
.cover-auth-btn {
    margin-top: 12px;
    z-index: 10;
    position: relative;
}

@media (max-width: 768px) {
    .png-slide:nth-child(3) {
        transform: translateY(-40px);
    }

    .png-slide:nth-child(4) {
        transform: translateY(-40px);
    }

    .png-slide:nth-child(5) {
        transform: translateY(-40px);
    }

    .png-slide:nth-child(6) {
        transform: translateY(-40px);
    }

    .png-slide:nth-child(7) {
        transform: translateY(-40px);
    }
}

.head-pubs {
  padding-bottom: 20px;
}
.card-subscription-pulse,
.card-subscription-plus {
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 254;
  padding: 20px;
  border-radius: 55px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* прижимаем кнопку к низу */
  align-items: center;         /* центрируем горизонтально */
  position: relative;
  overflow: hidden;
}

.card-img-pulse,
.card-img-plus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Для экранов шириной 480px и меньше (телефоны) */
@media (max-width: 480px) {
  /* Уменьшаем размер карточки */
  .card-subscription-wrapper {
    width: 90%;
  }

  .card-subscription-pulse,
  .card-subscription-plus {
    padding: 15px;
    border-radius: 30px;
    /* можно немного уменьшить сам блок */
    max-width: 350px;
    aspect-ratio: 350 / 230; /* чуть меньше пропорции */
  }

  /* Картинки внутри карточки */
  .card-img-pulse,
  .card-img-plus {
    transform: scale(1.25);   /* немного уменьшаем, если было scale(1.2) */
    object-fit: contain;    /* чтобы не выходили за блок */
  }

  /* Кнопки */
  .card-button-modal,
  .card-button-plus {
    width: 70%;
    height: 40px;
    font-size: 13px;
    margin-bottom: 10px;  /* увеличиваем отступ снизу, кнопки ниже */
  }
}


.card-button-pulse:hover {
  opacity: 0.9; /* небольшой эффект при наведении */
}

.card-button-modal,
.card-button-plus {
  position: relative;
  width: 70%;
  height: 40px;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #10183C;
  background-color: #FFFFFF;
  border: none;
  border-radius: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  z-index: 2;
}



/* Ховер эффект */
.card-button-modal:hover,
.card-button-plus:hover {
  opacity: 0.9;
}

.card-subscription-wrapper {
  width: 100%;
  display: flex;               /* flex для центрирования карточки */
  justify-content: center;     /* центрируем карточку горизонтально */
  margin-bottom: 20px;
  background: radial-gradient(
    ellipse at 150% 150%,
    #516A91 0%,
    #161F31 70%
  );
  border-radius: 55px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  padding: 0;                  /* внутренние отступы карточки внутри оставляем сами блоки */
}

/* Фон модального окна */
.subs-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;              /* скрыта по умолчанию */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Активное состояние */
.subs-modal.active {
  display: flex;
}

/* Контент модалки */
.subs-modal-content {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;

  width: 100%;        /* почти во всю ширину экрана */
  max-width: 1200px; /* ограничение, чтобы не было слишком широким на больших экранах */

  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Кнопка закрытия */
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.subscription-choice {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap; /* карточки горизонтально */
}

.paywall-subscription-wrapper {
  width: 320px;      /* фиксированная ширина */
  height: 440px;     /* фиксированная высота */
  flex: 0 0 auto;    /* запрещаем растягивание */
}

/* Карточка с фоном и кнопками */
.paywall-subscription-plus {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;      /* кнопки сверху вниз */
  justify-content: flex-end;   /* прижать кнопки к низу */
  align-items: center;
  border-radius: 55px;
  padding: 10px;
  overflow: hidden;
  position: relative;

  background-size: contain;   /* картинка целиком */
  background-repeat: no-repeat;
  background-position: bottom right;
}

/* Общие стили для кнопок */
.paywall-subscription-plus button {
  border: none;
  border-radius: 55px;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px; /* промежуток между кнопками */
  z-index: 1;           /* поверх картинки */
}

/* Большая кнопка */
.big-button-create {
  width: 80%;
  height: 44px;
  font-size: 16px;
  color: #10183C;
  background-color: #FFFFFF;
}

/* Маленькие кнопки */
.small-button-create {
  width: 65%;
  height: 34px;
  font-size: 14px;
  color: #10183C;
  background-color: #FFFFFF;
}

.orange-button-create {
  width: 65%;
  height: 34px;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #FF970F;
}

#comboCard {
  transition: all 0.3s ease;
}

.modal-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 90%;
}

.modal-image-pulse {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
}

/* Контейнер кнопок - ФИКСИРОВАННАЯ ширина */
.modal-buttons {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    /* УБИРАЕМ width: 100% - это причина смещения */
    width: auto; /* или можно удалить эту строку */
}

/* Общий стиль для всех кнопок */
.big-button-create,
.small-button-create,
.orange-button-create {
    font-family: 'SF Pro Rounded', sans-serif;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    /* Добавляем выравнивание текста по центру */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Убираем растягивание по ширине */
    box-sizing: border-box;
}

/* Кнопки с ФИКСИРОВАННОЙ шириной в пикселях или относительно экрана */
.big-button-create {
    /* Используем min-width для адаптивности */
    min-width: 280px;
    max-width: 90vw; /* 90% ширины экрана */
    width: auto; /* ширина по содержимому с ограничениями */
    padding: 0 20px; /* отступы по бокам */
    height: 54px;
    font-size: 16px;
    color: #10183C;
    background-color: #FFFFFF;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    white-space: nowrap; /* текст в одну строку */
}

.small-button-create {
    min-width: 220px;
    max-width: 80vw;
    width: auto;
    padding: 0 16px;
    height: 54px;
    font-size: 14px;
    color: #10183C;
    background-color: #FFFFFF;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    white-space: nowrap;
}

.orange-button-create {
    min-width: 220px;
    max-width: 80vw;
    width: auto;
    padding: 0 16px;
    height: 38px;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #FF970F;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    white-space: nowrap;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .modal-image-wrapper {
        max-width: 95%;
    }

    .modal-buttons {
        bottom: 10px;
        gap: 6px;
    }

    .big-button-create {
        min-width: 240px;
        max-width: 85vw;
        font-size: 14px;
        height: 40px;
        padding: 0 16px;
    }

    .small-button-create,
    .orange-button-create {
        min-width: 180px;
        max-width: 75vw;
        font-size: 12px;
        height: 32px;
        padding: 0 12px;
    }
}

/* Класс для отображения paywall */
.paywall-visible {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.8) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Класс для скрытия paywall */
.paywall-hidden {
    display: none !important;
}

/* Основное модальное окно */
.modal-active {
    display: block !important;
}

.modal-hidden {
    display: none !important;
}

.pulse-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px; /* Минимальная высота для центрирования */
}

.pulse-next-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 24px auto !important; /* Автоматические отступы по бокам */
    max-width: 400px !important;
}

/* Центрирование модального окна Поток Пульс */
#pulseModal.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#pulseModal.modal.active {
    display: flex !important;
}

.pulse-modal-content {
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.pulse-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Для центрирования на мобильных */
@media (max-width: 768px) {
    .pulse-modal-content {
        width: 95%;
        max-height: 95vh;
        margin: 10px auto;
    }
}

/* Стили для шага 2 Pulse */
.pulse-examples-grid {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.pulse-examples-grid::-webkit-scrollbar {
    width: 6px;
}

.pulse-examples-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.pulse-examples-grid::-webkit-scrollbar-thumb {
    background: #c7c7cc;
    border-radius: 3px;
}

.pulse-examples-grid::-webkit-scrollbar-thumb:hover {
    background: #a8a8ad;
}

.pulse-example-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.pulse-example-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pulse-selected-counter {
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

@keyframes pulse-search-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}