*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    min-height: 100%;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #1a1a2e;
}

body { display: flex; flex-direction: column; }

/* ── Header ───────────────────────────────────────────────────── */
header {
    flex-shrink: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    z-index: 10;
}

header svg { flex-shrink: 0; }

header h1 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── Main — centered single column ───────────────────────────── */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 36px 16px 48px;
    background: #f0f2f5;
}

.form-wrap {
    width: 100%;
    max-width: 560px;
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    padding: 28px 32px;
    width: 100%;
}

.card h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 22px;
    color: #1a1a2e;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f2f5;
}

/* ── Form fields ──────────────────────────────────────────────── */
.field { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.field input[type="file"],
.field select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: .92rem;
    background: #fafafa;
    color: #1a1a2e;
    transition: border-color .2s;
    outline: none;
    cursor: pointer;
}

.field input[type="file"]:hover,
.field select:hover { border-color: #6366f1; }
.field input[type="file"]:focus,
.field select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* ── File label badges ────────────────────────────────────────── */
.file-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-original { background: #e0e7ff; color: #4338ca; }
.badge-modified  { background: #dcfce7; color: #166534; }

/* ── Detected type badges ─────────────────────────────────────── */
.type-badge-row { min-height: 20px; margin-top: 5px; }

.type-badge {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity .2s;
}

.type-badge:not(:empty)           { opacity: 1; }
.type-badge-documents             { background: #e0e7ff; color: #3730a3; }
.type-badge-presentations         { background: #fef9c3; color: #854d0e; }
.type-badge-spreadsheets          { background: #dcfce7; color: #166534; }
.type-badge-unknown               { background: #fee2e2; color: #991b1b; }

/* ── Mismatch error ───────────────────────────────────────────── */
.mismatch-error {
    display: none;
    margin-bottom: 14px;
    padding: 9px 12px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 7px;
    font-size: .86rem;
    color: #b91c1c;
    line-height: 1.45;
}

/* ── Compare button ───────────────────────────────────────────── */
.btn-compare {
    width: 100%;
    padding: 11px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-compare:hover:not(:disabled) { background: #4f46e5; }
.btn-compare:active:not(:disabled) { transform: scale(.98); }
.btn-compare:disabled { background: #a5b4fc; cursor: not-allowed; }

/* ── Status panel ─────────────────────────────────────────────── */
#statusPanel {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    display: none;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: .92rem;
    color: #6b7280;
}

.step-row.active    { color: #1a1a2e; font-weight: 500; }
.step-row.done      { color: #16a34a; }
.step-row.error-row { color: #dc2626; }

.step-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.spinner {
    width: 17px; height: 17px;
    border: 2.5px solid #d1d5db;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.check {
    width: 17px; height: 17px;
    background: #16a34a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.check::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}

.xmark {
    width: 17px; height: 17px;
    background: #dc2626; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; font-weight: 700;
}

.dot {
    width: 10px; height: 10px;
    background: #d1d5db; border-radius: 50%; margin: auto;
}

/* ── Result panel ─────────────────────────────────────────────── */
#resultPanel {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f2f5;
}

.result-row {
    display: flex;
    gap: 10px;
}

.btn-result {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 7px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .1s;
    white-space: nowrap;
}
.btn-result:active { transform: scale(.98); }

/* View in Browser — indigo */
.btn-view {
    background: #6366f1;
    color: #fff;
}
.btn-view:hover { background: #4f46e5; color: #fff; }

/* Download — neutral outlined */
.btn-dl {
    background: #f8f9fa;
    color: #1a1a2e;
    border: 1.5px solid #d1d5db;
}
.btn-dl:hover { background: #e5e7eb; }

/* ── Error message ────────────────────────────────────────────── */
#errorMsg {
    margin-top: 10px;
    font-size: .86rem;
    color: #dc2626;
    display: none;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .card { padding: 20px 16px; }
    .result-row { flex-direction: column; }
}