:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #18212f; background: #f4f7fb; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; }
.container { width: min(680px, calc(100% - 32px)); margin: auto; padding: 72px 0 48px; }
.container.wide { width: min(1040px, calc(100% - 32px)); }
.hero { margin-bottom: 28px; } .eyebrow { color: #3267d6; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 12px 0; font-size: clamp(32px, 7vw, 52px); line-height: 1.02; letter-spacing: -.04em; } .hero p { color: #5c6879; font-size: 18px; line-height: 1.55; }
.card { padding: 28px; border: 1px solid #e1e7f0; border-radius: 20px; background: white; box-shadow: 0 14px 40px rgba(30, 53, 91, .08); }
.file-picker { display: block; padding: 22px; border: 1px dashed #b8c5da; border-radius: 14px; cursor: pointer; color: #56657a; text-align: center; }
.file-picker input[type="file"] { display: block; width: 100%; margin-top: 14px; padding: 10px; border: 1px solid #d5deeb; border-radius: 10px; background: #fff; color: #425269; font: inherit; font-size: 13px; cursor: pointer; }
.file-picker input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 12px; border: 0; border-radius: 8px; background: #e7eefc; color: #2457c5; font: inherit; font-weight: 700; cursor: pointer; }
.file-picker input[type="file"]::file-selector-button:hover { background: #d8e4fb; }
.file-picker strong, .file-picker span { display: block; }
.file-picker strong { color: #28384f; margin-bottom: 5px; }
.file-picker span { font-size: 13px; }
.file-picker.secondary { padding: 18px; background: #f8faff; }
.execution { margin: 0 0 22px; padding: 22px; border: 1px solid #dce4f0; border-radius: 16px; }
.execution legend { padding: 0 8px; color: #2457c5; font-size: 18px; font-weight: 800; }
.group-help { margin-top: 0; color: #728096; font-size: 13px; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.batch-results { display: grid; gap: 18px; }
.job-card { padding: 24px; border: 1px solid #e1e7f0; border-radius: 18px; background: white; box-shadow: 0 10px 30px rgba(30, 53, 91, .07); }
.job-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #2457c5; }
.job-file { margin-bottom: 4px; font-weight: 700; overflow-wrap: anywhere; }
.job-comparisons { margin-top: 0; color: #728096; font-size: 13px; overflow-wrap: anywhere; }
.review-field { display: block; margin-top: 16px; }
.review-field span { display: block; margin-bottom: 7px; color: #8a5600; font-size: 13px; font-weight: 800; }
.review-field textarea { display: block; width: 100%; min-height: 88px; padding: 12px; border: 1px solid #f0c36d; border-radius: 10px; background: #fff8e9; color: #604600; font: inherit; font-size: 13px; line-height: 1.45; resize: vertical; }
button, .download { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 10px; background: #2457c5; color: white; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
button:hover, .download:hover { background: #1b459f; } .status { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: #eef4ff; color: #2457c5; } .status.error { background: #fff0f0; color: #b62b2b; }
.download { background: #16815a; } .note { color: #728096; font-size: 13px; line-height: 1.6; }
@media (max-width: 680px) { .comparison-grid { grid-template-columns: 1fr; } .container { padding-top: 40px; } .card, .execution { padding: 18px; } }