.jobsearch-export-modal {
display: none;
position: fixed;
inset: 0;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.jobsearch-export-modal.open { display: block; }
.jobsearch-export-modal .jobsearch-export-overlay {
position: absolute;
inset: 0;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 20, 31, 0.55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: jsx-fade 0.2s ease;
}
.jobsearch-export-modal .jobsearch-export-box {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 440px;
max-width: calc(100% - 32px);
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px -12px rgba(15, 20, 31, 0.45), 0 0 0 1px rgba(15, 20, 31, 0.04);
padding: 32px 30px 28px;
box-sizing: border-box;
text-align: center;
animation: jsx-pop-in 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes jsx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jsx-pop-in {
from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
} .jobsearch-export-modal .jobsearch-export-close {
position: absolute;
top: 14px; right: 16px;
width: 30px; height: 30px;
padding: 0;
border: 0;
background: transparent;
font-size: 24px;
line-height: 1;
color: #aab0bd;
cursor: pointer;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
.jobsearch-export-modal .jobsearch-export-close:hover { background: #f1f3f7; color: #2b3140; } .jobsearch-export-modal h3 {
margin: 0;
font-size: 19px;
font-weight: 700;
color: #1b2030;
line-height: 1.3;
}
.jobsearch-export-modal .jsx-muted { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5; }
.jobsearch-export-modal .jsx-head {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
} .jobsearch-export-modal .jsx-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 12px;
flex: 0 0 auto;
}
.jobsearch-export-modal .jsx-badge-green { background: #e7f7ee; color: #1ca25a; }
.jobsearch-export-modal .jsx-badge-amber { background: #fef3e2; color: #d98513; }
.jobsearch-export-modal .jsx-badge-red   { background: #fdecec; color: #d83a3a; }
.jobsearch-export-modal .jsx-badge-lg {
width: 64px; height: 64px;
border-radius: 50%;
margin: 0 auto 16px;
}
.jobsearch-export-modal .jsx-pop { animation: jsx-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes jsx-badge-pop { from { transform: scale(0); } to { transform: scale(1); } } .jobsearch-export-modal .jsx-stat-card {
background: linear-gradient(135deg, #f6f8fc 0%, #eef2f9 100%);
border: 1px solid #e6eaf1;
border-radius: 12px;
padding: 18px;
margin-bottom: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.jobsearch-export-modal .jsx-stat-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8b93a4;
}
.jobsearch-export-modal .jsx-stat-value {
font-size: 30px;
font-weight: 800;
color: #1b2030;
line-height: 1.1;
} .jobsearch-export-modal .jsx-field { text-align: left; margin-bottom: 24px; }
.jobsearch-export-modal .jsx-field-label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
color: #3a4154;
}
.jobsearch-export-modal .jsx-input {
width: 100%;
height: 44px;
padding: 0 14px;
border: 1.5px solid #dde1ea;
border-radius: 10px;
font-size: 15px;
color: #1b2030;
background: #fff;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jobsearch-export-modal .jsx-input:focus {
outline: none;
border-color: #2f80ed;
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.15);
} .jobsearch-export-modal .export-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.jobsearch-export-modal .jsx-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.15s ease, color 0.15s ease;
}
.jobsearch-export-modal .jsx-btn:active { transform: translateY(1px); }
.jobsearch-export-modal .jsx-btn-primary {
background: linear-gradient(135deg, #2f80ed 0%, #1f6fe0 100%);
color: #fff;
box-shadow: 0 6px 16px -6px rgba(47, 128, 237, 0.7);
}
.jobsearch-export-modal .jsx-btn-primary:hover {
color: #fff;
box-shadow: 0 10px 22px -8px rgba(47, 128, 237, 0.85);
}
.jobsearch-export-modal .jsx-btn-ghost {
background: #f1f3f7;
color: #4a5160;
}
.jobsearch-export-modal .jsx-btn-ghost:hover { background: #e6e9f0; color: #2b3140; } .jobsearch-export-modal .jsx-percent {
font-size: 46px;
font-weight: 800;
color: #1b2030;
line-height: 1;
margin: 18px 0 16px;
font-variant-numeric: tabular-nums;
}
.jobsearch-export-modal .jsx-percent-sign { font-size: 26px; color: #9aa1b1; margin-left: 2px; } .jobsearch-export-modal .jobsearch-export-progress-bar {
position: relative;
width: 100%;
height: 12px;
background: #eceff4;
border-radius: 999px;
overflow: hidden;
margin-bottom: 14px;
}
.jobsearch-export-modal .jobsearch-export-progress-fill {
position: relative;
height: 100%;
width: 0;
min-width: 12px;
border-radius: 999px;
background: linear-gradient(135deg, #2f80ed 0%, #56ccf2 100%);
transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
} .jobsearch-export-modal .jobsearch-export-progress-fill::after {
content: "";
position: absolute;
inset: 0;
top: 0; left: 0; right: 0; bottom: 0;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.28) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.28) 50%,
rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent
);
background-size: 24px 24px;
opacity: 0;
transition: opacity 0.2s ease;
}
.jobsearch-export-modal .jobsearch-export-progress-bar.is-working .jobsearch-export-progress-fill::after {
opacity: 1;
animation: jsx-stripes 0.9s linear infinite;
}
@keyframes jsx-stripes {
from { background-position: 0 0; }
to   { background-position: 24px 0; }
} .jobsearch-export-modal .jsx-spinner {
width: 44px; height: 44px;
margin: 6px auto 16px;
border: 4px solid #e6eaf1;
border-top-color: #2f80ed;
border-radius: 50%;
animation: jsx-spin 0.8s linear infinite;
}
@keyframes jsx-spin { to { transform: rotate(360deg); } } .jobsearch-export-modal .export-error-text {
margin: 0 0 20px;
color: #d83a3a;
font-size: 15px;
line-height: 1.5;
} .jobsearch-export-modal .export-state { display: none; }