.pippin-main { min-height: 100vh; margin-left: 235px; padding: 36px; box-sizing: border-box; background: #f5f7fb; color: #172033; }
.pippin-page-header, .pippin-panel { width: min(920px, 100%); margin-right: auto; margin-left: auto; }
.pippin-page-header { margin-bottom: 24px; }
.pippin-eyebrow { margin: 0 0 8px; color: #4f46e5; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.pippin-page-header h1 { margin: 0; font-size: 32px; }
.pippin-page-header > p:last-child { margin: 10px 0 0; color: #687386; }
.pippin-panel { margin-bottom: 20px; padding: 28px; border: 1px solid #e2e7f0; border-radius: 18px; box-sizing: border-box; background: #fff; box-shadow: 0 12px 30px rgba(30,41,59,.05); }
.pippin-step-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.pippin-step-heading > span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #4f46e5; color: #fff; font-weight: 800; }
.pippin-step-heading h2 { margin: 1px 0 5px; font-size: 19px; }
.pippin-step-heading p { margin: 0; color: #7a8495; font-size: 14px; }
.pippin-dropzone { display: flex; min-height: 210px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; border: 2px dashed #cbd3e1; border-radius: 16px; background: #fafbfe; cursor: pointer; transition: .18s ease; }
.pippin-dropzone:hover, .pippin-dropzone.is-dragging { border-color: #6366f1; background: #f3f4ff; }
.pippin-upload-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #eef0ff; color: #4f46e5; font-size: 25px; font-weight: 800; }
.pippin-dropzone strong { margin-top: 4px; font-size: 16px; }
.pippin-dropzone small { color: #8a94a5; }
.pippin-file { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 14px; border: 1px solid #dce2ec; border-radius: 12px; background: #fbfcfe; }
.pippin-file[hidden] { display: none; }
.pippin-file-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 10px; background: #eaf8ef; color: #168445; font-size: 11px; font-weight: 900; }
.pippin-file-meta { display: grid; flex: 1; min-width: 0; gap: 4px; }
.pippin-file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pippin-file-meta span { color: #8992a2; font-size: 13px; }
.pippin-file button { border: 0; background: transparent; color: #dc2626; cursor: pointer; font: inherit; }
.pippin-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.pippin-actions p { margin: 0; color: #7a8495; font-size: 14px; }
.pippin-progress { margin-top: 20px; padding: 16px; border-radius: 12px; background: #f5f6ff; }
.pippin-progress[hidden] { display: none; }
.pippin-progress > div:first-child { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #4b5563; font-size: 13px; }
.pippin-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #dfe3f2; }
.pippin-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #4f46e5; transition: width .25s ease; }
.pippin-primary-button, .pippin-download-button { border: 0; border-radius: 11px; padding: 13px 20px; background: #4f46e5; color: #fff; cursor: pointer; font: inherit; font-weight: 800; }
.pippin-primary-button:disabled, .pippin-download-button:disabled { background: #cbd1dc; cursor: not-allowed; }
.pippin-result-empty { display: flex; min-height: 110px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; border-radius: 13px; background: #f8fafc; color: #8a94a5; }
.pippin-result-empty span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d8dee8; border-radius: 50%; color: #a2aaba; }
.pippin-result-empty p { margin: 0; }
.pippin-result-empty.is-complete { background: #effaf3; color: #187442; }
.pippin-result-empty.is-error { background: #fff1f2; color: #be123c; }
.pippin-download-button { display: block; margin: 18px 0 0 auto; }
@media (max-width: 900px) { .pippin-main { padding: 24px 18px; } .pippin-actions { align-items: stretch; flex-direction: column; } .pippin-primary-button, .pippin-download-button { width: 100%; } }