/* Исправленные стили с учетом fixed шапки */
.color-page {
    padding: 120px 0 40px 0; /* Больше отступ сверху для fixed шапки */
    min-height: 100vh;
}

.color-hero-section {
    margin-bottom: 40px;
}

.color-preview-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.color-swatch-large {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    border: 3px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.color-info {
    flex: 1;
}

.color-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    font-family: 'Manrope', sans-serif;
    transition: color 0.3s ease;
}

.color-subtitle {
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    font-weight: 500;
    transition: color 0.3s ease;
}

.color-hex {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Monaco', 'Consolas', monospace;
    transition: color 0.3s ease;
}

.background-toggle {
    display: flex;
    gap: 12px;
    position: absolute;
    top: 30px;
    right: 30px;
}

.bg-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-option.active {
    border-color: var(--accent);
    transform: scale(1.1);
}
.pantone-badge {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.bg-option:hover {
    transform: scale(1.05);
}

.bg-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
}

.bg-light { background: #ffffff; }
.bg-light-gray { background: #f0f0f0; }
.bg-dark-gray { background: #666666; }
.bg-black { background: #000000; }

/* Секции */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--text-primary);
}

/* Сетка форматов */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.format-card {
    padding: 25px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.format-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

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

.format-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.format-header h3 {
    margin: 0;
    font-size: 1.25rem;
    flex: 1;
}

.copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.1);
}

.format-value {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    word-break: break-all;
}

/* Действия */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.action-card {
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
}

.action-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.action-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.action-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
}

.action-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Похожие цвета */
.similar-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.similar-color-card {
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.similar-color-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.similar-color-card .color-swatch {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 2px solid var(--glass-border);
}

.similar-color-card .color-code {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.similar-color-card .color-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.similar-color-card .color-hex {
    font-size: 0.8rem;
    font-family: 'Monaco', 'Consolas', monospace;
    color: var(--accent);
}

/* Color Harmony */
.harmony-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.harmony-card {
    padding: 20px;
    border-radius: 15px;
}

.harmony-card h4 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.harmony-palette {
    display: flex;
    gap: 8px;
    height: 60px;
}

.harmony-color {
    flex: 1;
    border-radius: 8px;
    border: 2px solid var(--glass-border);
}

/* Contrast Checker */
.contrast-demo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: start;
}

.contrast-example {
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.text-sample {
    padding: 10px;
    border-radius: 8px;
}

.large-text { font-size: 1.5rem; font-weight: 700; }
.small-text { font-size: 0.9rem; }

.contrast-scores {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contrast-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--glass-bg);
    border-radius: 10px;
}

.score-value {
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
}

.score-value.excellent { background: #48bb78; color: white; }
.score-value.good { background: #38b2ac; color: white; }
.score-value.acceptable { background: #ed8936; color: white; }
.score-value.poor { background: #f56565; color: white; }

/* Vision Simulator */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.vision-card {
    padding: 20px;
    text-align: center;
    border-radius: 15px;
}

.vision-preview {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    margin-top: 15px;
    border: 2px solid var(--glass-border);
}

/* Professional Tools */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.tool-card {
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    font-family: inherit;
}

.tool-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.tool-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

.tool-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
}

.tool-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Technical Specifications */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
}

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

.spec-label {
    color: var(--text-secondary);
}

.spec-value {
    font-weight: 600;
    font-family: 'Monaco', 'Consolas', monospace;
}

/* Адаптивность */
@media (max-width: 768px) {
    .color-page {
        padding: 100px 0 20px 0;
    }
    
    .color-preview-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px 20px;
    }
    
    .color-swatch-large {
        width: 150px;
        height: 150px;
    }
    
    .color-title {
        font-size: 2.5rem;
    }
    
    .background-toggle {
        position: static;
        justify-content: center;
        margin-top: 20px;
    }
    
    .formats-grid {
        grid-template-columns: 1fr;
    }
    
    .similar-colors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .harmony-grid {
        grid-template-columns: 1fr;
    }
    
    .contrast-demo {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .vision-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .color-page {
        padding: 90px 0 20px 0;
    }
    
    .similar-colors-grid {
        grid-template-columns: 1fr;
    }
    
    .color-title {
        font-size: 2rem;
    }
    
    .color-preview-card {
        padding: 20px 15px;
    }
    
    .vision-grid {
        grid-template-columns: 1fr;
    }
}

/* Секция изображения */
.image-preview {
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.color-preview-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.image-controls {
    background: var(--glass-bg);
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: center;
}

.control-group label {
    min-width: 180px;
    text-align: right;
    font-weight: 500;
}

.control-slider {
    flex: 1;
    max-width: 200px;
}

.image-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
}

/* -------------- */
/* Общие стили для всех карточек */
.format-card, .action-card, .tool-card, .similar-color-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 25px;
    border-radius: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.format-card::before, .action-card::before, .tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.format-card:hover, .action-card:hover, .tool-card:hover, .similar-color-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Иконки Feather */
.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.format-icon .feather {
    width: 20px;
    height: 20px;
}

.action-icon .feather {
    width: 32px;
    height: 32px;
}

.tool-icon .feather {
    width: 40px;
    height: 40px;
}

/* Заголовки карточек */
.format-header h3, .action-card h3, .tool-card h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
}

/* Текст карточек */
.format-value, .action-card p, .tool-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Кнопка копирования */
.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.format-icon .feather-icon,
.action-icon .feather-icon,
.tool-icon .feather-icon {
    width: 20px;
    height: 20px;
    stroke: white !important; /* Всегда белые в синих кругах */
}


/* Форматы скачивания */
.format-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px 0;
}

.format-option {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.format-option:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.format-option .format-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 10px;
}

.format-info strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.format-info span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* История цвета - главный раздел */
.color-history-section {
    margin: 60px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 10px;
}

.history-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Таймлайн */
.timeline-section {
    padding: 40px;
    border-radius: 20px;
}

.timeline-title {
    color: var(--text-primary);
    margin-bottom: 30px;
    font-size: 1.5rem;
    text-align: center;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), var(--accent-light));
    border-radius: 3px;
}

.timeline-event {
    position: relative;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.timeline-year {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(113, 92, 186, 0.3);
    z-index: 2;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: 12px;
    flex-shrink: 0;
    border: 3px solid var(--bg-primary);
    box-shadow: 0 0 0 3px var(--accent);
    z-index: 2;
}

.timeline-content {
    flex: 1;
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.timeline-content h4 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.timeline-content p {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.color-evolution {
    display: flex;
    gap: 12px;
    align-items: center;
}

.evolution-color {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.evolution-color:hover {
    transform: scale(1.1);
}

/* Нижняя секция - статистика и цвета в одной строке */
.history-bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.usage-stats,
.related-colors {
    padding: 30px;
    border-radius: 20px;
    height: fit-content;
}

.usage-stats h3,
.related-colors h3 {
    color: var(--text-primary);
    margin-bottom: 25px;
    font-size: 1.3rem;
    text-align: center;
}

/* Статистика */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stat-item {
    background: var(--glass-bg);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.stat-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.stat-progress {
    height: 100%;
    background: red;
    border-radius: 3px;
    transition: width 1s ease-in-out;
}

/* Связанные цвета */
.related-colors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.related-color {
    display: flex;
    align-items: center;
    gap: 15px;
    background:var(--glass-bg);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.related-color:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.related-color .color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-color .color-info {
    flex: 1;
}

.related-color .color-code {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.related-color .color-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 2px 0;
}

.related-color .color-year {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
}

/* Адаптивность */
@media (max-width: 968px) {
    .history-bottom-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .timeline-event {
        flex-direction: column;
        gap: 15px;
    }
    
    .timeline::before {
        left: 15px;
    }
    
    .timeline-dot {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .timeline-section,
    .usage-stats,
    .related-colors {
        padding: 25px;
    }
    
    .timeline-year {
        align-self: flex-start;
    }
    
    .color-evolution {
        justify-content: center;
    }
}


/* ФИКСЫ ДЛЯ ИСТОРИИ ЦВЕТА - ПРИНУДИТЕЛЬНЫЕ СТИЛИ */

/* Линия между точками в таймлайне */
.timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 30px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(to bottom, var(--accent), var(--accent-light)) !important;
    border-radius: 3px !important;
    z-index: 1 !important;
}

/* Проценты в статистике - видимые в любой теме */
.stat-value {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Заполнение прогресс-баров */
.stat-progress {
    background: var(--accent) !important;
    height: 100% !important;
    border-radius: 3px !important;
    display: block !important;
}

/* Годы в таймлайне - видимые в любой теме */
.timeline-year {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
    color: var(--text-primary) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    min-width: 80px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(113, 92, 186, 0.3) !important;
    z-index: 2 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Плашки контента в таймлайне - для светлой темы */
.timeline-content {
    background:var(--glass-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Для светлой темы - делаем плашки серыми */
@media (prefers-color-scheme: light) {
    .timeline-content {
        background: rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .stat-item {
        background: rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .related-color {
        background:var(--glass-bg) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .usage-stats,
    .related-colors,
    .timeline-section {
        background: rgba(0, 0, 0, 0.03) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Проценты в светлой теме */
    .stat-value {
        text-shadow: none !important;
    }
    
    /* Прогресс-бары в светлой теме */
    .stat-bar {
        background: rgba(0, 0, 0, 0.1) !important;
    }
}

/* Для темной темы - усиливаем видимость */
@media (prefers-color-scheme: dark) {
    .stat-value {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }
    


    


    

}

/* Конкретные прогресс-бары с шириной */
.stat-item:nth-child(1) .stat-progress { width: 85% !important; }
.stat-item:nth-child(2) .stat-progress { width: 70% !important; }
.stat-item:nth-child(3) .stat-progress { width: 60% !important; }
.stat-item:nth-child(4) .stat-progress { width: 45% !important; }

/* Дополнительная видимость для точек таймлайна */
.timeline-dot {
    width: 16px !important;
    height: 16px !important;
    background: var(--accent) !important;
    border-radius: 50% !important;
    border: 3px solid var(--bg-primary) !important;
    box-shadow: 0 0 0 3px var(--accent) !important;
    z-index: 2 !important;
    display: block !important;
}



/* Modern Tech Specs Styles */
.tech-specs-modern {
    margin: 60px 0;
    padding: 0 20px;
}

.specs-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    font-family: 'Manrope', sans-serif;
}

.specs-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.spec-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.spec-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    flex: 1;
}

.spec-value-large {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* LRV Meter */
.lrv-meter {
    margin: 20px 0;
}

.lrv-track {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.lrv-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 10px;
    transition: width 1.5s ease-in-out;
    position: relative;
}

.lrv-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
}

.lrv-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Temperature Visual */
.temp-visual {
    margin: 25px 0;
}

.temp-scale {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #4FC3F7, #81C784, #FFB74D);
    border-radius: 10px;
    position: relative;
    margin-bottom: 15px;
}

.temp-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--accent);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 1s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.temp-marker.cool { left: 20%; }
.temp-marker.neutral { left: 50%; }
.temp-marker.warm { left: 80%; }

.temp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.temp-cool { color: #4FC3F7; }
.temp-neutral { color: #81C784; }
.temp-warm { color: #FFB74D; }

/* Color Systems */
.systems-grid {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.system-item {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.system-logo {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 5px;
}

.system-value {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Monaco', 'Consolas', monospace;
}

/* LAB Visual */
.lab-visual {
    margin-top: 20px;
}

.lab-axis {
    width: 100%;
    height: 200px;
    background: 
        linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.2) 49.5%, rgba(255,255,255,0.2) 50.5%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.2) 49.5%, rgba(255,255,255,0.2) 50.5%, transparent 50.5%),
        radial-gradient(circle at center, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 20px 20px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 20px;
}

.lab-point {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 3px solid white;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: pulse 2s infinite;
}

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

.lab-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lab-value {
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
}

.lab-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.lab-number {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Monaco', 'Consolas', monospace;
}

.spec-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 10px;
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .specs-dashboard {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .specs-main-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .spec-card {
        padding: 20px;
    }
    
    .spec-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .lab-axis {
        height: 150px;
    }
    
    .lab-values {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .tech-specs-modern {
        margin: 40px 0;
        padding: 0 15px;
    }
    
    .specs-main-title {
        font-size: 1.8rem;
    }
    
    .spec-value-large {
        font-size: 2rem;
    }
}


/* PANTONE */
/* ★★★ PANTONE SPECS STYLES ★★★ */
.pantone-specs-section {
    margin: 40px 0;
}

.specs-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.spec-card {
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.spec-icon {
    font-size: 1.5rem;
}

.spec-header h3 {
    margin: 0;
    flex: 1;
    font-size: 1.2rem;
}

.spec-value-large {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}

.spec-value {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.spec-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Rating Stars */
.rating-stars {
    margin: 15px 0;
}

.star {
    font-size: 1.5rem;
    color: #ccc;
    margin-right: 5px;
}

.star.filled {
    color: #ffd700;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
}

.progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease;
}

/* АДАПТИВНОСТЬ ДЛЯ PANTONE SPECS */
@media (max-width: 768px) {
    .specs-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .spec-card {
        padding: 20px;
    }
    
    .spec-value-large {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .spec-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .spec-icon {
        font-size: 1.8rem;
    }
}

/* ★★★ PANTONE FORMULA STYLES - КРУТАЯ ВЕРСИЯ ★★★ */
.pantone-formula-section {
    margin: 40px 0;
}

.formula-dashboard {
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.formula-bars {
    margin-bottom: 25px;
}

.formula-bar {
    margin-bottom: 20px;
}

.pigment-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 500;
}

.pigment-name {
    color: var(--text-primary);
    font-weight: 600;
}

.pigment-percentage {
    color: #715cba;
    font-weight: 700;
    font-size: 1.1rem;
}

.percentage-bar {
    width: 100%;
    height: 16px;
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.percentage-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-in-out;
    background: linear-gradient(90deg, #715cba, #9d4edd) !important;
    box-shadow: 0 2px 8px rgba(113, 92, 186, 0.4);
    position: relative;
}

.percentage-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 0 10px 10px 0;
}

.formula-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding-top: 25px;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.summary-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.summary-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-value {
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, #715cba, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* АДАПТИВНОСТЬ ДЛЯ ФОРМУЛЫ */
@media (max-width: 768px) {
    .formula-dashboard {
        padding: 20px;
    }
    
    .formula-summary {
        grid-template-columns: 1fr;
    }
    
    .pigment-info {
        font-size: 0.9rem;
    }
    
    .percentage-bar {
        height: 14px;
    }
}

/* ★★★ CROSS-SYSTEM CORRESPONDENCES STYLES ★★★ */
.cross-system-section {
    margin: 40px 0;
}

.correspondence-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.correspondence-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.correspondence-card:hover {
    transform: translateY(-5px);
    border-color: #715cba;
    box-shadow: 0 10px 30px rgba(113, 92, 186, 0.2);
}

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

.system-logo {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
}

.ral-logo {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.ncs-logo {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.hex-logo {
    background: linear-gradient(135deg, #715cba, #9d4edd);
}

.system-match-level {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.color-match {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.match-color-swatch {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.match-info {
    flex: 1;
}

.match-code {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.match-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.match-delta {
    color: #715cba;
    font-weight: 700;
    font-size: 0.8rem;
}

.match-actions {
    text-align: center;
}

.btn-view-match, .btn-copy-hex {
    background: linear-gradient(135deg, #715cba, #9d4edd);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-view-match:hover, .btn-copy-hex:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(113, 92, 186, 0.4);
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .correspondence-dashboard {
        grid-template-columns: 1fr;
    }
    
    .correspondence-card {
        padding: 20px;
    }
    
    .system-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .color-match {
        flex-direction: column;
        text-align: center;
    }
    
    .match-color-swatch {
        width: 80px;
        height: 80px;
    }
}

/* ★★★ PRODUCTION RECOMMENDATIONS STYLES ★★★ */
.production-recommendations-section {
    margin: 40px 0;
}

.production-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.production-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.production-card:hover {
    transform: translateY(-5px);
    border-color: #715cba;
    box-shadow: 0 10px 30px rgba(113, 92, 186, 0.2);
}

.production-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.production-icon {
    font-size: 1.8rem;
}

.production-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

/* Технические параметры */
.param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.param-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.param-value {
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(135deg, #715cba, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Совместимость */
.compatibility-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.compat-item.compatible {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.compat-item.limited {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.compat-icon {
    font-size: 1.2rem;
}

.compat-text {
    font-weight: 500;
    color: var(--text-primary);
}

/* Стандарты */
.standards-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.standard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.standard-icon {
    color: #ffd700;
    font-size: 1.2rem;
}

.standard-text {
    font-weight: 500;
    color: var(--text-primary);
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .production-dashboard {
        grid-template-columns: 1fr;
    }
    
    .production-card {
        padding: 20px;
    }
    
    .production-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* ★★★ ANIMATIONS FOR PANTONE SECTIONS ★★★ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pantone-specs-section,
.pantone-formula-section,
.cross-system-section,
.production-recommendations-section {
    animation: fadeInUp 0.8s ease-out;
}

/* Stagger animations for cards */
.specs-dashboard .spec-card:nth-child(1) { animation-delay: 0.1s; }
.specs-dashboard .spec-card:nth-child(2) { animation-delay: 0.2s; }
.specs-dashboard .spec-card:nth-child(3) { animation-delay: 0.3s; }
.specs-dashboard .spec-card:nth-child(4) { animation-delay: 0.4s; }

.correspondence-dashboard .correspondence-card:nth-child(1) { animation-delay: 0.1s; }
.correspondence-dashboard .correspondence-card:nth-child(2) { animation-delay: 0.2s; }
.correspondence-dashboard .correspondence-card:nth-child(3) { animation-delay: 0.3s; }

.production-dashboard .production-card:nth-child(1) { animation-delay: 0.1s; }
.production-dashboard .production-card:nth-child(2) { animation-delay: 0.2s; }
.production-dashboard .production-card:nth-child(3) { animation-delay: 0.3s; }
/* ★★★ MICRO-INTERACTIONS ★★★ */
.spec-card, .correspondence-card, .production-card {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.spec-card:active, .correspondence-card:active, .production-card:active {
    transform: scale(0.98);
}

/* Hover effects for progress bars */
.percentage-bar:hover .percentage-fill {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(113, 92, 186, 0.6);
}

/* Pulse animation for important values */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.spec-value-large {
    animation: pulse 2s infinite;
}

/* Glow effect for Pantone badge */
.pantone-badge {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    }
    to {
        box-shadow: 0 4px 25px rgba(255, 107, 107, 0.6);
    }
}
/* ★★★ MOBILE OPTIMIZATIONS ★★★ */
@media (max-width: 480px) {
    .pantone-badge {
        font-size: 0.8rem;
        padding: 5px 12px;
    }
    
    .color-title {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
        text-align: center;
    }
    
    /* Touch-friendly buttons */
    .btn-view-match, .btn-copy-hex {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Better touch targets */
    .spec-card, .correspondence-card, .production-card {
        padding: 20px 15px;
    }
}

/* ★★★ PANTONE SPECIFIC STYLES ★★★ */

/* Professional Specs Dashboard */
.pantone-specs-section {
    margin: 40px 0;
}

.specs-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.spec-card {
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.spec-icon {
    font-size: 1.5rem;
}

.spec-header h3 {
    margin: 0;
    flex: 1;
    font-size: 1.2rem;
}

.spec-value-large {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}

.spec-value {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.spec-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Rating Stars */
.rating-stars {
    margin: 15px 0;
}

.star {
    font-size: 1.5rem;
    color: #ccc;
    margin-right: 5px;
}

.star.filled {
    color: #ffd700;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
}

.progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease;
}

/* Pantone Formula Styles */
.pantone-formula-section {
    margin: 40px 0;
}

.formula-dashboard {
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.formula-bars {
    margin-bottom: 25px;
}

.formula-bar {
    margin-bottom: 20px;
}

.pigment-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 500;
}

.pigment-name {
    color: var(--text-primary);
    font-weight: 600;
}

.pigment-percentage {
    color: #715cba;
    font-weight: 700;
    font-size: 1.1rem;
}

.percentage-bar {
    width: 100%;
    height: 16px;
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.percentage-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-in-out;
    background: linear-gradient(90deg, #715cba, #9d4edd) !important;
    box-shadow: 0 2px 8px rgba(113, 92, 186, 0.4);
    position: relative;
}

.percentage-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 0 10px 10px 0;
}

.formula-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding-top: 25px;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.summary-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.summary-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-value {
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, #715cba, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cross-system Correspondences */
.cross-system-section {
    margin: 40px 0;
}

.correspondence-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.correspondence-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.correspondence-card:hover {
    transform: translateY(-5px);
    border-color: #715cba;
    box-shadow: 0 10px 30px rgba(113, 92, 186, 0.2);
}

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

.system-logo {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
}

.ral-logo {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.ncs-logo {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.hex-logo {
    background: linear-gradient(135deg, #715cba, #9d4edd);
}

.system-match-level {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.color-match {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.match-color-swatch {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.match-info {
    flex: 1;
}

.match-code {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.match-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.match-delta {
    color: #715cba;
    font-weight: 700;
    font-size: 0.8rem;
}

.match-actions {
    text-align: center;
}

.btn-view-match, .btn-copy-hex {
    background: linear-gradient(135deg, #715cba, #9d4edd);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-view-match:hover, .btn-copy-hex:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(113, 92, 186, 0.4);
}

/* Production Recommendations */
.production-recommendations-section {
    margin: 40px 0;
}

.production-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.production-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.production-card:hover {
    transform: translateY(-5px);
    border-color: #715cba;
    box-shadow: 0 10px 30px rgba(113, 92, 186, 0.2);
}

.production-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.production-icon {
    font-size: 1.8rem;
}

.production-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

/* Technical Parameters */
.param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.param-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.param-value {
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(135deg, #715cba, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Compatibility */
.compatibility-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.compat-item.compatible {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.compat-item.limited {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.compat-icon {
    font-size: 1.2rem;
}

.compat-text {
    font-weight: 500;
    color: var(--text-primary);
}

/* Standards */
.standards-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.standard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.standard-icon {
    color: #ffd700;
    font-size: 1.2rem;
}

.standard-text {
    font-weight: 500;
    color: var(--text-primary);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pantone-specs-section,
.pantone-formula-section,
.cross-system-section,
.production-recommendations-section {
    animation: fadeInUp 0.8s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .specs-dashboard,
    .correspondence-dashboard,
    .production-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .spec-card,
    .correspondence-card,
    .production-card {
        padding: 20px;
    }
    
    .spec-header,
    .production-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .color-match {
        flex-direction: column;
        text-align: center;
    }
    
    .match-color-swatch {
        width: 80px;
        height: 80px;
    }
}
/* ★★★ ДОПОЛНИТЕЛЬНЫЕ PANTONE СТИЛИ ★★★ */

/* Совместимость и покрытия */
.pantone-compatibility-section {
    margin: 40px 0;
}

.compatibility-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.compatibility-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(10px);
}

.compatibility-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.compatibility-icon {
    font-size: 1.8rem;
}

.compatibility-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Профессиональные инструменты */
.pantone-tools-section {
    margin: 40px 0;
}

.tools-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.tool-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    color: inherit;
    text-decoration: none;
}

.tool-card:hover {
    transform: translateY(-5px);
    border-color: #715cba;
    box-shadow: 0 10px 30px rgba(113, 92, 186, 0.2);
}

.tool-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.tool-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.tool-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Диаграмма цветового охвата */
.pantone-gamut-section {
    margin: 40px 0;
}

.gamut-dashboard {
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.gamut-visual {
    margin-bottom: 25px;
}

.gamut-chart {
    width: 100%;
    height: 200px;
    background: 
        radial-gradient(circle at center, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 12px;
    position: relative;
    border: 2px solid rgba(255,255,255,0.1);
}

.gamut-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.gamut-label {
    position: absolute;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.gamut-label:nth-child(1) { top: 10%; left: 20%; }
.gamut-label:nth-child(2) { top: 70%; left: 70%; }

.gamut-point {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
}

.gamut-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.gamut-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
    color: var(--text-primary);
}

/* Анимации для новых секций */
.pantone-compatibility-section,
.pantone-tools-section,
.pantone-gamut-section {
    animation: fadeInUp 0.8s ease-out;
}

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

/* Адаптивность */
@media (max-width: 768px) {
    .compatibility-dashboard,
    .tools-dashboard {
        grid-template-columns: 1fr;
    }
    
    .gamut-info {
        grid-template-columns: 1fr;
    }
}