/* contractparser.ai — single page styles */

:root {
	--cp-navy: #1a2332;
	--cp-blue: #2563eb;
	--cp-blue-hover: #1d4ed8;
	--cp-teal: #0d9488;
	--cp-green: #059669;
	--cp-red: #dc2626;
	--cp-orange: #d97706;
	--cp-gray-50: #f8fafc;
	--cp-gray-100: #f1f5f9;
	--cp-gray-200: #e2e8f0;
	--cp-gray-300: #cbd5e1;
	--cp-gray-400: #94a3b8;
	--cp-gray-500: #64748b;
	--cp-gray-600: #475569;
	--cp-gray-700: #334155;
	--cp-gray-800: #1e293b;
	--cp-gray-900: #0f172a;
	--cp-radius: 8px;
	--cp-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
	--cp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

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

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--cp-gray-800);
	background: var(--cp-gray-50);
	line-height: 1.6;
}

/* Header */
.cp-header {
	background: var(--cp-navy);
	color: white;
	padding: 16px 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cp-logo {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.cp-logo span {
	color: var(--cp-teal);
}

.cp-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cp-sign-in {
	background: transparent;
	border: 1px solid var(--cp-gray-500);
	color: white;
	padding: 8px 20px;
	border-radius: var(--cp-radius);
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.2s;
}

.cp-sign-in:hover {
	border-color: white;
}

/* Hero section */
.cp-hero {
	text-align: center;
	padding: 64px 32px 48px;
	background: linear-gradient(180deg, var(--cp-navy) 0%, var(--cp-gray-50) 100%);
	color: white;
}

.cp-hero h1 {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.cp-hero p {
	font-size: 18px;
	color: var(--cp-gray-300);
	max-width: 600px;
	margin: 0 auto;
}

.cp-trust-badges {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.cp-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: white;
	background: rgba(15, 23, 42, 0.55);
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.cp-trust-icon {
	font-size: 16px;
}

/* Main content */
.cp-main {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 32px 64px;
}

/* Drop zone */
.cp-dropzone {
	border: 2px dashed var(--cp-gray-300);
	border-radius: 12px;
	padding: 48px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	background: white;
	margin-bottom: 24px;
}

.cp-dropzone:hover,
.cp-dropzone.dragover {
	border-color: var(--cp-blue);
	background: #eff6ff;
}

.cp-dropzone-icon {
	font-size: 48px;
	color: var(--cp-gray-400);
	margin-bottom: 16px;
}

.cp-dropzone h3 {
	font-size: 18px;
	margin-bottom: 8px;
	color: var(--cp-gray-700);
}

.cp-dropzone p {
	color: var(--cp-gray-500);
	font-size: 14px;
}

.cp-dropzone input[type="file"] {
	display: none;
}

/* File list */
.cp-file-list {
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	margin-bottom: 24px;
	display: none;
}

.cp-file-list.visible {
	display: block;
}

.cp-file-list.dragover {
	outline: 2px dashed var(--cp-blue);
	outline-offset: -4px;
	background: #eff6ff;
}

.cp-file-list-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--cp-gray-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cp-file-list-header h3 {
	font-size: 16px;
}

.cp-file-list-clear {
	background: none;
	border: none;
	color: var(--cp-gray-500);
	cursor: pointer;
	font-size: 13px;
}

.cp-file-list-clear:hover {
	color: var(--cp-red);
}

.cp-file-list-items {
	max-height: 240px;
	overflow-y: auto;
}

.cp-file-item {
	padding: 10px 20px;
	border-bottom: 1px solid var(--cp-gray-100);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}

.cp-file-item:last-child {
	border-bottom: none;
}

.cp-file-item-name {
	color: var(--cp-gray-700);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 70%;
}

.cp-file-item-pages {
	color: var(--cp-gray-500);
	font-size: 13px;
	margin-left: auto;
	padding-right: 12px;
}

.cp-file-item-remove {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--cp-gray-400);
	padding: 0 6px;
	border-radius: 4px;
	font-family: inherit;
	transition: color 0.15s, background 0.15s;
}

.cp-file-item-remove:hover:not(:disabled) {
	color: #b91c1c;
	background: #fef2f2;
}

.cp-file-item-remove:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Pricing bar */
.cp-pricing {
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	padding: 20px 24px;
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.cp-pricing.visible {
	display: flex;
}

.cp-pricing-info {
	font-size: 14px;
	color: var(--cp-gray-600);
}

.cp-pricing-total {
	font-size: 24px;
	font-weight: 700;
	color: var(--cp-gray-900);
}

.cp-pricing-total small {
	font-size: 14px;
	font-weight: 400;
	color: var(--cp-gray-500);
}

.cp-pricing-page-note {
	font-size: 11px;
	color: var(--cp-gray-400);
	margin-top: 6px;
}

.cp-analyze-btn {
	background: var(--cp-blue);
	color: white;
	border: none;
	padding: 12px 32px;
	border-radius: var(--cp-radius);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.cp-analyze-btn:hover {
	background: var(--cp-blue-hover);
}

.cp-analyze-btn:disabled {
	background: var(--cp-gray-300);
	cursor: not-allowed;
}

/* Progress */
.cp-progress {
	display: none;
	padding: 32px;
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	margin-bottom: 24px;
}

.cp-progress.visible {
	display: block;
}

.cp-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.cp-progress-header h3 {
	font-size: 16px;
	color: var(--cp-gray-800);
}

.cp-progress-eta {
	font-size: 14px;
	color: var(--cp-gray-500);
	font-weight: 500;
}

.cp-progress-bar-track {
	width: 100%;
	height: 12px;
	background: var(--cp-gray-200);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
}

.cp-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cp-blue), var(--cp-teal));
	border-radius: 6px;
	transition: width 0.5s ease;
	width: 0%;
}

/* Indeterminate state: slides a colored chunk back and forth so the user
   sees activity before the first document finishes processing. */
.cp-progress-bar-fill.indeterminate {
	width: 35% !important;
	transition: none;
	animation: cpIndeterminate 1.6s ease-in-out infinite;
}
@keyframes cpIndeterminate {
	0%   { margin-left: -35%; }
	50%  { margin-left: 100%; }
	100% { margin-left: -35%; }
}

.cp-progress-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--cp-gray-500);
}

.cp-progress-file {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60%;
}

.cp-progress-email-note,
.cp-progress-resume-note {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--cp-gray-50);
	border-radius: var(--cp-radius);
	font-size: 13px;
	color: var(--cp-gray-600);
}

.cp-resume-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--cp-blue);
	word-break: break-all;
	font-size: 12px;
}

.cp-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--cp-gray-200);
	border-top-color: var(--cp-blue);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto 16px;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.cp-progress-text {
	color: var(--cp-gray-600);
	font-size: 14px;
	text-align: center;
}

/* Email input */
.cp-email-row {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cp-gray-200);
}

.cp-email-row label {
	font-size: 13px;
	color: var(--cp-gray-600);
	white-space: nowrap;
}

.cp-email-row input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: var(--cp-radius);
	font-size: 14px;
}

.cp-email-row input:focus {
	outline: none;
	border-color: var(--cp-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cp-email-hint {
	font-size: 12px;
	color: var(--cp-gray-400);
	margin-top: 4px;
}

/* Results */
.cp-results {
	display: none;
	margin-bottom: 24px;
}

.cp-results.visible {
	display: block;
}

.cp-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.cp-results-header h2 {
	font-size: 20px;
}

/* Download bar */
.cp-download-bar {
	margin-top: 24px;
	padding: 24px;
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	text-align: center;
}

.cp-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--cp-green);
	color: white;
	border: none;
	padding: 14px 32px;
	border-radius: var(--cp-radius);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.cp-download-btn:hover {
	background: #047857;
	transform: translateY(-1px);
}

.cp-download-btn:active {
	transform: translateY(0);
}

.cp-download-icon {
	width: 22px;
	height: 22px;
}

.cp-download-hint {
	margin-top: 10px;
	font-size: 13px;
	color: var(--cp-gray-400);
}

.cp-next-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--cp-gray-200);
}

.cp-add-more-btn {
	padding: 10px 24px;
	border: 2px solid var(--cp-blue);
	border-radius: var(--cp-radius);
	background: white;
	color: var(--cp-blue);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.cp-add-more-btn:hover {
	background: var(--cp-blue);
	color: white;
}

.cp-new-analysis-btn {
	padding: 10px 24px;
	border: 1px solid var(--cp-gray-300);
	border-radius: var(--cp-radius);
	background: white;
	color: var(--cp-gray-600);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.cp-new-analysis-btn:hover {
	border-color: var(--cp-gray-500);
	color: var(--cp-gray-800);
}

/* Summary cards */
.cp-summary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.cp-summary-card {
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	padding: 16px;
	text-align: center;
}

.cp-summary-card .count {
	font-size: 28px;
	font-weight: 700;
}

.cp-summary-card .label {
	font-size: 12px;
	color: var(--cp-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cp-summary-card.expired .count { color: var(--cp-red); }
.cp-summary-card.expiring .count { color: var(--cp-orange); }
.cp-summary-card.active .count { color: var(--cp-green); }
.cp-summary-card.evergreen .count { color: var(--cp-teal); }

/* Results — full width mode */
.cp-results.fullwidth {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--cp-gray-50);
	margin: 0;
	padding: 20px;
	overflow-y: auto;
}

/* Results table */
.cp-table-wrap {
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	overflow-x: auto;
	overflow-y: auto;
	max-height: 65vh;
	position: relative;
}

/* Scroll hint */
.cp-scroll-hint {
	text-align: right;
	font-size: 12px;
	color: var(--cp-gray-400);
	padding: 8px 12px 0;
}

.cp-table {
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.cp-table th {
	background: var(--cp-gray-100);
	padding: 10px 14px;
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cp-gray-600);
	border-bottom: 2px solid var(--cp-gray-200);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.cp-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--cp-gray-100);
	vertical-align: top;
	white-space: normal;
	min-width: 80px;
	max-width: 350px;
}

.cp-table tr:hover {
	background: var(--cp-gray-50);
}

/* Expand button */
.cp-expand-btn {
	background: none;
	border: 1px solid var(--cp-gray-300);
	border-radius: var(--cp-radius);
	padding: 6px 12px;
	font-size: 13px;
	color: var(--cp-gray-600);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cp-expand-btn:hover {
	border-color: var(--cp-gray-500);
	color: var(--cp-gray-800);
}

.cp-expand-icon {
	width: 16px;
	height: 16px;
}

.cp-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.cp-status-badge.expired { background: #fef2f2; color: var(--cp-red); }
.cp-status-badge.expiring-soon { background: #fffbeb; color: var(--cp-orange); }
.cp-status-badge.active { background: #ecfdf5; color: var(--cp-green); }
.cp-status-badge.evergreen { background: #f0fdfa; color: var(--cp-teal); }
.cp-status-badge.unknown { background: var(--cp-gray-100); color: var(--cp-gray-500); }
.cp-status-badge.error { background: #fef2f2; color: var(--cp-red); }

/* Confidence badges */
.cp-confidence {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.cp-confidence.high { background: #ecfdf5; color: var(--cp-green); }
.cp-confidence.medium { background: #fffbeb; color: var(--cp-orange); }
.cp-confidence.low { background: #fef2f2; color: var(--cp-red); }

.cp-confidence-flag {
	font-size: 11px;
	color: var(--cp-orange);
	margin-top: 4px;
	line-height: 1.3;
	max-width: 200px;
}

/* Error */
.cp-error {
	display: none;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--cp-radius);
	padding: 16px 20px;
	color: var(--cp-red);
	margin-bottom: 24px;
}

.cp-error.visible {
	display: block;
}

/* Footer */
.cp-footer {
	text-align: center;
	padding: 32px;
	color: var(--cp-gray-500);
	font-size: 13px;
	border-top: 1px solid var(--cp-gray-200);
}

.cp-footer a {
	color: var(--cp-gray-500);
	text-decoration: none;
}

.cp-footer a:hover {
	color: var(--cp-gray-700);
}

/* How it works */
.cp-how-it-works {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
	text-align: center;
}

.cp-step {
	padding: 24px;
}

.cp-step-number {
	width: 36px;
	height: 36px;
	background: var(--cp-blue);
	color: white;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	margin-bottom: 12px;
}

.cp-step h4 {
	font-size: 15px;
	margin-bottom: 8px;
}

.cp-step p {
	font-size: 13px;
	color: var(--cp-gray-500);
}

/* Section titles */
.cp-section {
	margin-bottom: 32px;
}

.cp-section-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--cp-gray-800);
}

/* Cloud source buttons */
.cp-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.cp-source-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--cp-gray-200);
	border-radius: var(--cp-radius);
	background: white;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--cp-gray-700);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-source-btn:hover {
	border-color: var(--cp-blue);
	box-shadow: var(--cp-shadow);
}

.cp-source-btn.connected {
	border-color: var(--cp-green);
	color: var(--cp-green);
}

.cp-source-icon {
	width: 20px;
	height: 20px;
}

/* Extraction config */
.cp-extraction-config {
	background: white;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	padding: 24px;
}

.cp-section-subtitle {
	font-size: 14px;
	color: var(--cp-gray-500);
	margin-bottom: 20px;
}

/* Common fields — big, friendly checkboxes at top */
.cp-common-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin-bottom: 20px;
}

.cp-common-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--cp-gray-200);
	border-radius: var(--cp-radius);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.cp-common-field:hover {
	border-color: var(--cp-blue);
	background: #f8faff;
}

.cp-common-field.checked {
	border-color: var(--cp-blue);
	background: #eff6ff;
}

.cp-common-field input[type="checkbox"] {
	accent-color: var(--cp-blue);
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.cp-common-field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cp-gray-700);
	cursor: pointer;
}

.cp-common-field .cp-field-desc {
	font-size: 11px;
	color: var(--cp-gray-400);
	display: block;
	font-weight: 400;
}

/* Advanced toggle */
.cp-advanced-toggle {
	margin-bottom: 16px;
}

.cp-advanced-btn {
	background: none;
	border: none;
	color: var(--cp-blue);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	padding: 8px 0;
}

.cp-advanced-btn:hover {
	color: var(--cp-blue-hover);
}

#advancedArrow {
	display: inline-block;
	transition: transform 0.2s;
	font-size: 10px;
}

#advancedArrow.open {
	transform: rotate(90deg);
}

/* Advanced fields grid */
.cp-advanced-fields {
	padding-top: 16px;
	border-top: 1px solid var(--cp-gray-200);
}

.cp-field-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

.cp-custom-prompt-hint {
	font-size: 12px;
	color: var(--cp-gray-400);
	margin-top: 6px;
}

.cp-field-category {
	border: 1px solid var(--cp-gray-200);
	border-radius: var(--cp-radius);
	padding: 16px;
}

.cp-field-category h4 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cp-gray-500);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cp-gray-100);
}

.cp-field-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.cp-field-item label {
	font-size: 13px;
	color: var(--cp-gray-700);
	cursor: pointer;
}

.cp-field-item input[type="checkbox"] {
	accent-color: var(--cp-blue);
	cursor: pointer;
}

.cp-custom-prompt {
	margin-top: 16px;
}

.cp-custom-prompt label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--cp-gray-700);
}

.cp-custom-prompt textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: var(--cp-radius);
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 60px;
}

.cp-custom-prompt textarea:focus {
	outline: none;
	border-color: var(--cp-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* AI tier selection */
.cp-tier-select {
	margin-bottom: 24px;
}

.cp-tier-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.cp-tier-option {
	cursor: pointer;
	display: block;
}

.cp-tier-option input[type="radio"] {
	display: none;
}

.cp-tier-card {
	border: 2px solid var(--cp-gray-200);
	border-radius: 12px;
	padding: 20px;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: white;
}

.cp-tier-option:hover .cp-tier-card {
	border-color: var(--cp-blue);
}

.cp-tier-option.selected .cp-tier-card {
	border-color: var(--cp-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cp-tier-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.cp-tier-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--cp-gray-800);
}

.cp-tier-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--cp-blue);
}

.cp-tier-desc {
	font-size: 13px;
	color: var(--cp-gray-500);
	line-height: 1.5;
	margin-bottom: 12px;
}

.cp-tier-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cp-tier-badge.fast {
	background: #eff6ff;
	color: var(--cp-blue);
}

.cp-tier-badge.accurate {
	background: #f0fdfa;
	color: var(--cp-teal);
}

@media (max-width: 768px) {
	.cp-tier-options { grid-template-columns: 1fr; }
}

/* Cloud browse modal */
.cp-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-modal {
	background: white;
	border-radius: 12px;
	width: 90%;
	max-width: 700px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cp-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--cp-gray-200);
}

.cp-modal-header h3 {
	font-size: 16px;
}

.cp-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--cp-gray-400);
	line-height: 1;
}

.cp-modal-close:hover {
	color: var(--cp-gray-700);
}

.cp-modal-search {
	display: flex;
	gap: 8px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--cp-gray-100);
}

.cp-modal-search input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: var(--cp-radius);
	font-size: 14px;
}

.cp-modal-search input:focus {
	outline: none;
	border-color: var(--cp-blue);
}

.cp-modal-search-btn {
	padding: 8px 16px;
	background: var(--cp-blue);
	color: white;
	border: none;
	border-radius: var(--cp-radius);
	font-size: 13px;
	cursor: pointer;
}

.cp-modal-breadcrumb {
	padding: 8px 20px;
	font-size: 13px;
	color: var(--cp-gray-500);
}

.cp-modal-breadcrumb a {
	color: var(--cp-blue);
	text-decoration: none;
	cursor: pointer;
}

.cp-modal-files {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	min-height: 200px;
	max-height: 400px;
}

.cp-modal-file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-bottom: 1px solid var(--cp-gray-100);
	cursor: pointer;
	font-size: 14px;
}

.cp-modal-file-item:hover {
	background: var(--cp-gray-50);
}

.cp-modal-file-item.selected {
	background: #eff6ff;
}

.cp-modal-file-icon {
	font-size: 18px;
	width: 24px;
	text-align: center;
}

.cp-modal-file-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-modal-file-size {
	color: var(--cp-gray-400);
	font-size: 12px;
}

.cp-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	border-top: 1px solid var(--cp-gray-200);
}

.cp-modal-footer span {
	font-size: 13px;
	color: var(--cp-gray-500);
}

/* Email-update form in progress area */
.cp-progress-email-update {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding: 16px;
	background: var(--cp-gray-50);
	border: 1px solid var(--cp-gray-200);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
}

.cp-progress-email-update label {
	font-weight: 500;
	color: var(--cp-gray-700);
}

.cp-progress-email-update input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 8px 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: white;
}

.cp-progress-email-update input[type="email"]:focus {
	outline: none;
	border-color: var(--cp-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cp-email-save-btn {
	background: var(--cp-blue);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
}

.cp-email-save-btn:hover:not(:disabled) {
	background: var(--cp-blue-hover);
}

.cp-email-save-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cp-email-save-status {
	font-size: 13px;
	color: var(--cp-teal);
	font-weight: 500;
	font-family: inherit;
}

.cp-progress-email-hint {
	flex-basis: 100%;
	font-size: 12px;
	color: var(--cp-gray-500);
	font-family: inherit;
	margin-top: 4px;
}

.cp-progress-email-hint code,
.cp-email-hint code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	padding: 1px 5px;
	background: var(--cp-gray-100);
	border-radius: 3px;
	color: var(--cp-gray-700);
}

/* Cancel button in progress area */
.cp-progress-cancel-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--cp-gray-200);
	font-family: inherit;
}

.cp-cancel-btn {
	background: white;
	color: #b91c1c;
	border: 1.5px solid #fca5a5;
	padding: 10px 22px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cp-cancel-btn:hover:not(:disabled) {
	background: #fef2f2;
	border-color: #b91c1c;
}

.cp-cancel-btn:active:not(:disabled) {
	background: #fee2e2;
}

.cp-cancel-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cp-cancel-hint {
	font-size: 14px;
	color: var(--cp-gray-500);
	font-family: inherit;
}

/* Confirmation modal (reuses .cp-modal-overlay + .cp-modal base styles) */
.cp-confirm-modal {
	max-width: 440px;
}

.cp-confirm-body {
	padding: 20px;
	color: var(--cp-gray-700);
	line-height: 1.5;
	font-size: 15px;
}

.cp-confirm-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 20px 20px;
}

.cp-confirm-no,
.cp-confirm-yes {
	padding: 9px 18px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	line-height: 1;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cp-confirm-no {
	background: white;
	border: 1px solid var(--cp-gray-300);
	color: var(--cp-gray-700);
}

.cp-confirm-no:hover {
	background: var(--cp-gray-50);
	border-color: var(--cp-gray-400);
}

.cp-confirm-yes {
	background: #dc2626;
	border: 1px solid #dc2626;
	color: white;
}

.cp-confirm-yes:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

/* Results banner — charged amount + cancellation note */
.cp-results-banner {
	padding: 12px 16px;
	margin-bottom: 16px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 6px;
	color: var(--cp-gray-800);
	font-size: 14px;
}

/* Upload cap hint below dropzone */
.cp-dropzone-note {
	margin-top: 10px;
	font-size: 13px;
	color: var(--cp-gray-500);
	text-align: center;
	font-family: inherit;
}

/* Language banner — shown once to non-English browsers */
.cp-lang-banner {
	background: #ecfdf5;
	border-bottom: 1px solid #a7f3d0;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--cp-gray-800);
	font-family: inherit;
	line-height: 1.4;
}

.cp-lang-banner[dir="rtl"] { direction: rtl; }

.cp-lang-banner-text { flex: 1; }

.cp-lang-banner-link {
	color: var(--cp-teal);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cp-lang-banner-link:hover { text-decoration: underline; }

.cp-lang-banner-close {
	background: none;
	border: none;
	color: var(--cp-gray-500);
	font-size: 22px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	font-family: inherit;
}

.cp-lang-banner-close:hover { color: var(--cp-gray-700); }

/* Responsive */
@media (max-width: 768px) {
	.cp-hero h1 { font-size: 28px; }
	.cp-hero p { font-size: 16px; }
	.cp-summary { grid-template-columns: repeat(2, 1fr); }
	.cp-how-it-works { grid-template-columns: 1fr; }
	.cp-pricing { flex-direction: column; gap: 16px; text-align: center; }
	.cp-header { padding: 12px 16px; }
	.cp-main { padding: 0 16px 48px; }
}