.comparison-section { margin-top: 32px; background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 18px; box-shadow: 0 4px 24px var(--shadow-color, rgba(0,0,0,0.25)); padding: 28px 24px 24px; max-width: 860px; margin-left: auto; margin-right: auto; } .cmp-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; } .cmp-header-icon { width: 28px; height: 28px; flex-shrink: 0; } .cmp-header-icon path { fill: var(--primary, #14d7ff); } .cmp-header h3 { color: var(--primary, #14d7ff); margin: 0; font-size: 1.25em; font-weight: 700; letter-spacing: 0.01em; } .cmp-subtitle { text-align: center; color: var(--text-muted, rgba(233,248,255,0.55)); font-size: 0.88em; margin: -10px 0 20px; line-height: 1.5; max-width: 520px; margin-left: auto; margin-right: auto; } .cmp-dropzones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .cmp-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 16px; border: 2px dashed var(--card-border, rgba(255,255,255,0.18)); border-radius: 14px; background: rgba(255,255,255,0.03); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; cursor: pointer; min-height: 110px; } .cmp-dropzone:hover { border-color: var(--primary, #14d7ff); background: rgba(20,215,255,0.04); } .cmp-dropzone.cmp-valid { border-color: #1ec676; border-style: solid; background: rgba(30,198,118,0.06); box-shadow: 0 0 16px rgba(30,198,118,0.12); } .cmp-dropzone.cmp-invalid { border-color: #ff5252; border-style: solid; background: rgba(255,82,82,0.05); } .cmp-dropzone input[type="file"] { display: none; } .cmp-status-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s, box-shadow 0.3s; background: rgba(255,255,255,0.08); } .cmp-status-icon svg { width: 20px; height: 20px; transition: fill 0.3s; } .cmp-dropzone:not(.cmp-valid):not(.cmp-invalid) .cmp-status-icon svg { fill: var(--text-muted, rgba(233,248,255,0.45)); } .cmp-dropzone.cmp-valid .cmp-status-icon { background: rgba(30,198,118,0.18); box-shadow: 0 0 12px rgba(30,198,118,0.25); } .cmp-dropzone.cmp-valid .cmp-status-icon svg { fill: #1ec676; } .cmp-dropzone.cmp-invalid .cmp-status-icon { background: rgba(255,82,82,0.15); } .cmp-dropzone.cmp-invalid .cmp-status-icon svg { fill: #ff5252; } .cmp-dropzone-label { font-size: 0.92em; font-weight: 600; color: var(--text-primary, #e9f8ff); text-align: center; } .cmp-dropzone-sub { font-size: 0.78em; color: var(--text-muted, rgba(233,248,255,0.55)); text-align: center; } .cmp-dropzone-filename { font-size: 0.82em; color: #1ec676; font-weight: 600; word-break: break-all; text-align: center; max-width: 100%; } .cmp-vs { display: flex; align-items: center; justify-content: center; font-size: 0.82em; font-weight: 700; color: var(--text-muted, rgba(233,248,255,0.4)); letter-spacing: 0.08em; text-transform: uppercase; margin: -6px 0; pointer-events: none; } .cmp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; margin-bottom: 6px; } .cmp-actions .core-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0.5em 1.5em; font-size: 0.88em; font-weight: 700; border-radius: 10px; border: none; cursor: pointer; letter-spacing: 0.02em; transition: background 0.2s, box-shadow 0.2s, transform 0.12s, opacity 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.12); line-height: 1.4; } .cmp-actions .core-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .cmp-actions .core-btn:active { transform: translateY(0); } .cmp-actions .core-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .cmp-btn-compare { background: linear-gradient(90deg, var(--primary, #14d7ff) 0%, var(--primary-dark, #009fdd) 100%) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(20,215,255,0.18) !important; } .cmp-btn-compare svg { fill: #fff; } .cmp-btn-compare:hover { box-shadow: 0 4px 18px rgba(20,215,255,0.28) !important; } .cmp-btn-compare:disabled { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } .cmp-btn-export-pdf { background: rgba(20,215,255,0.08) !important; color: var(--primary, #14d7ff) !important; border: 1px solid rgba(20,215,255,0.25) !important; box-shadow: 0 2px 8px rgba(20,215,255,0.08) !important; } .cmp-btn-export-pdf svg { fill: var(--primary, #14d7ff); } .cmp-btn-export-pdf:hover { background: rgba(20,215,255,0.16) !important; box-shadow: 0 4px 14px rgba(20,215,255,0.16) !important; } .cmp-btn-cancel { background: rgba(255,255,255,0.05) !important; color: var(--text-muted, rgba(233,248,255,0.6)) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: none !important; } .cmp-btn-cancel:hover { background: rgba(255,82,82,0.08) !important; border-color: rgba(255,82,82,0.35) !important; color: #ff5252 !important; box-shadow: 0 2px 10px rgba(255,82,82,0.1) !important; } #comparison-result { margin-top: 18px; } .cmp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .cmp-summary-card { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border, rgba(255,255,255,0.10)); border-radius: 12px; padding: 14px 12px; text-align: center; } .cmp-sc-value { font-size: 1.6em; font-weight: 700; line-height: 1.2; } .cmp-sc-label { font-size: 0.78em; color: var(--text-muted, rgba(233,248,255,0.6)); margin-top: 4px; } .cmp-sc-improved { color: #1ec676; } .cmp-sc-regressed { color: #ff5252; } .cmp-sc-unchanged { color: var(--text-muted, rgba(233,248,255,0.5)); } .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92em; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border, rgba(255,255,255,0.10)); } .cmp-table thead th { background: rgba(12,18,30,0.95); color: #fff; font-weight: 700; padding: 10px 14px; text-align: left; font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--primary, #14d7ff); } .cmp-table tbody td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--text-primary, #e9f8ff); } .cmp-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); } .cmp-table tbody tr:nth-child(odd) td { background: transparent; } .cmp-table tbody tr:hover td { background: rgba(20,215,255,0.05); } .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-delta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-weight: 600; font-size: 0.88em; white-space: nowrap; } .cmp-delta-good { background: rgba(30,198,118,0.14); color: #1ec676; } .cmp-delta-bad { background: rgba(255,82,82,0.14); color: #ff5252; } .cmp-delta-zero { background: rgba(255,255,255,0.06); color: var(--text-muted, rgba(233,248,255,0.5)); } .cmp-delta svg { width: 12px; height: 12px; } .cmp-delta-good svg { fill: #1ec676; } .cmp-delta-bad svg { fill: #ff5252; } .cmp-delta-zero svg { fill: var(--text-muted, rgba(233,248,255,0.5)); } .cmp-val-a, .cmp-val-b { font-weight: 600; font-size: 0.95em; } .cmp-no-change { text-align: center; padding: 24px 16px; color: #1ec676; font-size: 1em; font-weight: 600; } .cmp-no-change svg { width: 28px; height: 28px; fill: #1ec676; vertical-align: -6px; margin-right: 6px; } .cmp-result-title { font-size: 1.05em; font-weight: 700; color: var(--primary, #14d7ff); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .cmp-result-title svg { width: 20px; height: 20px; fill: var(--primary, #14d7ff); } .compare-inputs { display: none !important; } @media (max-width: 600px) { .cmp-dropzones { grid-template-columns: 1fr; } .cmp-summary { grid-template-columns: 1fr; } .comparison-section { padding: 18px 12px 16px; border-radius: 14px; } .cmp-table thead th, .cmp-table tbody td { padding: 7px 8px; font-size: 0.85em; } .cmp-vs { display: none; } } @media print { .comparison-section { box-shadow: none; border: 1px solid #ddd; background: #fff; color: #111; } .cmp-dropzones, .cmp-actions { display: none !important; } .cmp-header h3 { color: #111; } .cmp-table thead th { background: #eee !important; color: #111 !important; border-bottom-color: #333 !important; } .cmp-table tbody td { color: #111; border-bottom-color: #ddd; } .cmp-summary-card { background: #f9f9f9; border-color: #ddd; } .cmp-sc-label { color: #555; } }