/* Общие стили для всех страниц */
* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; }

.btn-primary {
    background: linear-gradient(135deg, #0088ff 0%, #006dd4 100%);
    box-shadow: 0 2px 8px -2px rgba(0,136,255,0.4);
    transition: all 0.3s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,136,255,0.5); }
.btn-primary:disabled { background: #cdd4db; box-shadow: none; cursor: not-allowed; }

.card {
    background: white;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.input-field {
    background: white;
    border: 1.5px solid #e4e8ec;
    border-radius: 0.875rem;
    transition: all 0.2s ease;
}
.input-field:hover { border-color: #cdd4db; }
.input-field:focus { border-color: #0088ff; box-shadow: 0 0 0 3px rgba(0,136,255,0.1); outline: none; }

.upload-zone {
    border: 2px dashed #e4e8ec;
    border-radius: 1rem;
    transition: all 0.25s ease;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
}
.upload-zone:hover, .upload-zone.drag-over { border-color: #0088ff; background: linear-gradient(180deg, #f0f7ff 0%, #e0efff 100%); transform: scale(1.01);}

.tab-btn {
    position: relative; padding: 0.75rem 1.25rem; font-weight: 500;
    color: #6b7685; transition: all 0.2s ease; border-radius: 0.75rem;
}
.tab-btn:hover:not(.active) { color: #3d4550; background: rgba(0,0,0,0.02); }
.tab-btn.active { color: #0088ff; background: rgba(0,136,255,0.08); }

.wb-badge { background: linear-gradient(135deg, #cb11ab 0%, #9b0d87 100%); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem; }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease forwards; }

/* Animated background */
.bg-animated {
    background: linear-gradient(-45deg, #e0efff, #f0f7ff, #f8f4ff, #e8faf0, #f0f7ff);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bg-mesh {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 10% 20%, rgba(0,136,255,0.08), transparent),
        radial-gradient(ellipse 50% 30% at 90% 80%, rgba(139,92,246,0.06), transparent),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(16,185,129,0.04), transparent);
}

.pricing-period-btn {
    color: #6b7685; cursor: pointer;
}
.pricing-period-btn:hover:not(.active) {
    background: rgba(0,0,0,0.03); color: #3d4550;
}
.pricing-period-btn.active {
    background: white; color: #0088ff; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Pricing period buttons */
.pricing-period-btn {
    color: #6b7685;
    cursor: pointer;
    transition: all 0.2s;
}
.pricing-period-btn:hover:not(.active) {
    background: rgba(0,0,0,0.03);
    color: #3d4550;
}
.pricing-period-btn.active {
    background: white;
    color: #0088ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Pricing cards - исправленные стили */
.pricing-card {
    position: relative;
    background: white;
    border: 1px solid #e4e8ec;
    border-radius: 1rem;
    transition: all 0.2s ease;
}
.pricing-card:hover {
    border-color: #cdd4db;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08);
}
.pricing-card.featured {
    border: 2px solid #0088ff;
    box-shadow: 0 4px 20px -4px rgba(0,136,255,0.2);
}

.btn-secondary {
    background: #f4f6f8;
    border: 1.5px solid #e4e8ec;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background: #eef1f4;
    border-color: #cdd4db;
}

.filter-chip.active {
    background: #0088ff;
    color: #fff;
    border-color: #0088ff;
    box-shadow: 0 2px 8px -2px rgba(0,136,255,0.4);
}