/* MY CV PRO AI — site-wide high-contrast accessibility layer. */
:root,
html[data-theme="light"] {
  --background: #f7f9fc;
  --background-secondary: #eef3f8;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --border: #c8d3df;
  --border-strong: #9fb0c4;
  --text-primary: #0b1220;
  --text-secondary: #334155;
  --text-muted: #475569;
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-active: #1e3a8a;
  --accent: #6d28d9;
  --success: #047857;
  --warning: #b45309;
  --error: #b91c1c;
  --input-background: #ffffff;
  --input-border: #aebed0;
  --focus-ring: #f59e0b;
  --shadow-card: 0 10px 28px rgba(15, 23, 42, .08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-modal: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --studio-text: #0b1220;
  --studio-muted: #334155;
  --studio-border: #b9c8d8;
}

html[data-theme="dark"] {
  --background: #07111f;
  --background-secondary: #0b1728;
  --surface: #0f1d30;
  --surface-hover: #172a42;
  --card: #122238;
  --card-hover: #192d47;
  --border: #3e5875;
  --border-strong: #607b99;
  --text-primary: #f8fbff;
  --text-secondary: #d7e2ef;
  --text-muted: #bdcce0;
  --primary: #4f8cff;
  --primary-hover: #72a3ff;
  --primary-active: #93b8ff;
  --accent: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #fb7185;
  --input-background: #0c1a2c;
  --input-border: #55708d;
  --focus-ring: #facc15;
  --shadow-card: none;
  --studio-text: #ffffff;
  --studio-muted: #d7e2ef;
  --studio-border: #49627f;
}

body {
  color: var(--text-primary);
  font-family: "Cairo", "Tajawal", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body :is(input, textarea, select)::placeholder {
  color: #475569 !important;
  opacity: 1 !important;
}

body :is(button, input, textarea, select, a):focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 3px !important;
}

body button:disabled,
body [aria-disabled="true"] {
  opacity: 1 !important;
}

/* Shared light surfaces. */
body:not(.smart-resume-page):not(.builder-page) :is(
  .brand-sub,
  .section-head p,
  .feature-card p,
  .category-title-wrap p,
  .panel-head p,
  .preview-head p,
  .field-help,
  .analysis-card span,
  .card-description,
  .section-description,
  .page-subtitle,
  .muted
) {
  color: #334155 !important;
  opacity: 1 !important;
}

body:not(.smart-resume-page):not(.builder-page) :is(label, .field-label) {
  color: #172033 !important;
}

body:not(.smart-resume-page):not(.builder-page) :is(input, textarea, select) {
  color: #111827 !important;
  border-color: #b9c6d5 !important;
  background-color: #fff !important;
}

.hero-text { color: #f1f5f9 !important; }
.site-footer :is(p, li, a) { color: #e2e8f0 !important; }

/* Smart Resume: every step, field and status remains readable. */
body.smart-resume-page {
  --studio-text: #0b1220;
  --studio-muted: #2f4055;
  --studio-border: #afbed0;
  color: #0b1220 !important;
}

body.smart-resume-page :is(
  .smart-lead,
  .smart-privacy-note,
  .smart-step-count,
  .smart-step-intro,
  .smart-save-state,
  .smart-coach-head p,
  .smart-education-head p,
  .smart-preview-toolbar span,
  .smart-photo-status,
  .smart-validation,
  .smart-import-review,
  .smart-upload-zone span,
  .smart-dialog p,
  .smart-option p,
  .smart-option small,
  .smart-template-card p,
  .smart-template-card small,
  .smart-specialty-result p,
  .smart-review-item p,
  .smart-result-cards p,
  .smart-inline-status
) {
  color: #2f4055 !important;
  opacity: 1 !important;
}

body.smart-resume-page :is(
  .smart-progress-top,
  .smart-progress-top strong,
  .smart-step-card,
  .smart-step-card h2,
  .smart-field-group label,
  .smart-field-group > span,
  .smart-education-field > span,
  .smart-preview-toolbar,
  .smart-preview-toolbar strong,
  .smart-language-choice legend,
  .smart-language-choice strong,
  .smart-dialog,
  .smart-dialog h2,
  .smart-dialog h3,
  .smart-review-item,
  .smart-option,
  .smart-template-card,
  .smart-specialty-result
) {
  color: #0b1220 !important;
  opacity: 1 !important;
}

body.smart-resume-page :is(.smart-field, .smart-textarea, .smart-select) {
  color: #0b1220 !important;
  border-color: #9fb0c4 !important;
  background: #fff !important;
}

body.smart-resume-page :is(.smart-field, .smart-textarea, .smart-select)::placeholder {
  color: #475569 !important;
}

body.smart-resume-page .smart-stage-nav button {
  color: #26384d !important;
  border-color: #bcc9d8 !important;
  background: #f1f5f9 !important;
  opacity: 1 !important;
}

body.smart-resume-page .smart-stage-nav button:disabled {
  color: #526174 !important;
  border-color: #cbd5e1 !important;
  background: #eef2f7 !important;
}

body.smart-resume-page .smart-stage-nav button.is-current {
  color: #fff !important;
  border-color: #174fbb !important;
  background: #174fbb !important;
}

body.smart-resume-page .smart-stage-nav button.is-done {
  color: #065f46 !important;
  border-color: #79c9a8 !important;
  background: #e4f8ef !important;
}

body.smart-resume-page .smart-secondary,
body.smart-resume-page .smart-link-btn,
body.smart-resume-page .smart-welcome-options button,
body.smart-resume-page .smart-suggestion-chip {
  color: #172033 !important;
  border-color: #aebed0 !important;
  background: #fff !important;
  opacity: 1 !important;
}

body.smart-resume-page .smart-success {
  color: #064e3b !important;
  border-color: #70c8a3 !important;
  background: #dcf8ec !important;
}

body.smart-resume-page .smart-inline-status {
  color: #172033 !important;
  border: 1px solid #9eb7d5 !important;
  background: #edf5ff !important;
}

body.smart-resume-page :is(.smart-option, .smart-template-card, .smart-specialty-result, .smart-review-item) {
  border-color: #b8c7d8 !important;
  background: #fff !important;
}

/* Advanced editor panels use the same readable neutral scale. */
body.builder-page :is(
  .field-help,
  .panel-head p,
  .preview-head p,
  .analysis-card span,
  small,
  label
) {
  color: #334155 !important;
  opacity: 1 !important;
}

body.builder-page :is(input, textarea, select) {
  color: #0b1220 !important;
  border-color: #aebed0 !important;
  background: #fff !important;
}

html[data-theme="dark"] body.builder-page .studio-header small,
html[data-theme="dark"] body.builder-page #resumeFieldsPanel .section-title small {
  color: #e2edf8 !important;
}

html[data-theme="dark"] body.builder-page :is(.top-template-strip, .preview-toolbar, #designToolsPanel) p {
  color: #dce8f5 !important;
  opacity: 1 !important;
}

body.builder-page :is(#aiGlobalCommand, #geminiImprovePrompt)::placeholder {
  color: #475569 !important;
}

body.builder-page .mycv-suggest-badge {
  color: #fff !important;
  border-color: #5b21b6 !important;
  background: #6d28d9 !important;
}

body.builder-page :is(.add-box-btn, .add-page-btn) {
  color: #fff !important;
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
}

body.builder-page .section-delete-btn {
  color: #fff !important;
  border-color: #9f1239 !important;
  background: #9f1239 !important;
}

body.builder-page :is(.cv-photo-placeholder, .cv-photo-placeholder-hint) {
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] {
  --text-primary: #ffffff;
  --text-secondary: #d7e2ef;
  --studio-text: #ffffff;
  --studio-muted: #d7e2ef;
  --studio-border: #49627f;
}

html[data-theme="dark"] body :is(input, textarea, select)::placeholder {
  color: #c6d4e4 !important;
}

/* ---------- Shared 2026 component system ---------- */
html.mycv-theme-ready { background: var(--background); }

body:not(.public-resume-page) {
  background-color: var(--background);
  color: var(--text-primary);
}

body :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-weight: 700;
  text-wrap: balance;
}

body :is(p, li, input, textarea, select) { font-weight: 400; }
body :is(label, button, a) { font-weight: 500; }
body :is(.helper-text, .field-help, .muted, [class*="subtitle"], [class*="description"]) { color: var(--text-muted); opacity: 1; }

body :is(input, textarea, select) {
  min-height: 44px;
  color: var(--text-primary);
  border-color: var(--input-border);
  background: var(--input-background);
  caret-color: var(--primary);
}

body :is(input, textarea, select):hover { border-color: var(--border-strong); }
body :is(input, textarea, select):disabled {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  background: var(--background-secondary) !important;
}

body :is(button, [role="button"], .btn, [class*="-btn"]) {
  min-height: 44px;
  font-weight: 700;
}

body :is(.primary-btn, .header-btn, .smart-primary, .ui-btn.primary, .command-primary) {
  color: #fff !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  background-image: none !important;
}

body :is(.primary-btn, .header-btn, .smart-primary, .ui-btn.primary, .command-primary):hover {
  background: var(--primary-hover) !important;
}

body :is(.ghost-btn, .ghost-inline-btn, .smart-secondary, .ui-btn.ghost, .outline-btn) {
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface) !important;
  background-image: none !important;
}

body :is(.ghost-btn, .ghost-inline-btn, .smart-secondary, .ui-btn.ghost, .outline-btn):hover {
  color: var(--text-primary) !important;
  border-color: var(--primary) !important;
  background: var(--surface-hover) !important;
}

body :is(.danger, .danger-btn, .is-danger) { color: #fff !important; background: var(--error) !important; border-color: var(--error) !important; }
body :is(.success, .success-btn) { color: #fff !important; background: var(--success) !important; border-color: var(--success) !important; }

body :is(.feature-card, .pricing-card, .info-card, .account-card, .auth-card, .article-item, .smart-card, .modal-card) {
  color: var(--text-primary);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

body :is(dialog, [role="dialog"], .modal, .smart-dialog) {
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-modal) !important;
  background: var(--surface) !important;
  box-shadow: 0 24px 70px rgba(2, 8, 23, .32) !important;
}

body dialog::backdrop { background: rgba(2, 8, 23, .72); backdrop-filter: blur(4px); }

body :is([role="tooltip"], .tooltip),
body [data-tooltip]::after {
  color: #fff !important;
  border: 1px solid #475569 !important;
  background: #0f172a !important;
  opacity: 1 !important;
}

body :is(.toast, .smart-toast, [role="status"]) { opacity: 1; }
body :is(.toast, .smart-toast) {
  color: #fff;
  border: 1px solid #475569;
  background: #0f172a;
}

body :is(.skeleton, [class*="skeleton"]) {
  background: linear-gradient(90deg, var(--background-secondary), var(--surface-hover), var(--background-secondary));
}

body :is(.empty-state, [class*="empty-state"]) {
  color: var(--text-primary);
  border: 1px dashed var(--border-strong);
  background: var(--surface);
}

/* Shared header follows the selected theme and keeps compact controls visible. */
.global-cv-header .theme-capsule {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
}

.admin-login-theme {
  position: fixed;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 50;
  width: 46px;
  min-width: 46px;
  height: 46px;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

html[data-theme="light"] .global-cv-header {
  color: #0b1220 !important;
  border-color: #b9c8d8 !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .14) !important;
}

html[data-theme="light"] .global-cv-header :is(.center-nav-links a, .ai-phrase-text) { color: #334155 !important; }
html[data-theme="light"] .global-cv-header .flow-colors-logo {
  color: #0f2f68 !important;
  background: none !important;
  -webkit-text-fill-color: #0f2f68 !important;
}
html[data-theme="light"] .global-cv-header .center-nav-links a:hover,
html[data-theme="light"] .global-cv-header .center-nav-links a.active-nav { color: #1d4ed8 !important; background: #e8f0ff !important; }
html[data-theme="light"] .global-cv-header .btn-neon-pulse {
  color: #fff !important;
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .global-cv-header .theme-capsule {
  color: #f8fbff !important;
  border-color: #55708d !important;
  background: #13243a !important;
}

/* The cinematic hero is an intentional dark brand surface in both themes. */
#mycvCinematicHero { color: #f8fbff !important; }
#mycvCinematicHero h1 {
  color: #fff !important;
  background: linear-gradient(90deg, #fff 8%, var(--p-color, #32d6ff) 52%, #fff 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#mycvCinematicHero :is(.cine-lead, .cine-feature p, .cine-trust) { color: #d7e2ef !important; }
#mycvCinematicHero .cine-feature h3 { color: #fff !important; }
#mycvCinematicHero .cine-feature small { color: #67e8f9 !important; }

/* Smart Resume application shell changes theme; the resume paper never does. */
html[data-theme="dark"] body.smart-resume-page {
  color: var(--text-primary) !important;
  background: var(--background) !important;
}

html[data-theme="dark"] body.smart-resume-page :is(
  .smart-welcome-card,
  .smart-progress-wrap,
  .smart-coach-panel,
  .smart-preview-panel,
  .smart-step-actions,
  .smart-option,
  .smart-template-card,
  .smart-specialty-result,
  .smart-review-item,
  .smart-education-card,
  .smart-dialog
) {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

html[data-theme="dark"] body.smart-resume-page :is(
  .smart-lead,
  .smart-privacy-note,
  .smart-step-count,
  .smart-step-intro,
  .smart-save-state,
  .smart-coach-head p,
  .smart-option p,
  .smart-option small,
  .smart-template-card p,
  .smart-template-card small,
  .smart-preview-toolbar span,
  .smart-dialog p
) { color: var(--text-secondary) !important; }

html[data-theme="dark"] body.smart-resume-page :is(
  .smart-progress-top,
  .smart-progress-top strong,
  .smart-step-card,
  .smart-step-card h2,
  .smart-field-group label,
  .smart-field-group > span,
  .smart-preview-toolbar,
  .smart-preview-toolbar strong,
  .smart-language-choice legend,
  .smart-language-choice strong,
  .smart-dialog h2,
  .smart-dialog h3
) { color: var(--text-primary) !important; }

html[data-theme="dark"] body.smart-resume-page .smart-welcome-card h1 { color: #fff !important; }
html[data-theme="dark"] body.smart-resume-page #welcomeTitle {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
html[data-theme="dark"] body.smart-resume-page .smart-language-choice button {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] body.smart-resume-page .smart-language-choice button small { color: var(--text-secondary) !important; }
html[data-theme="dark"] body.smart-resume-page .smart-language-choice button.is-selected {
  color: #0b1220 !important;
  border-color: #4f8cff !important;
  background: #eff6ff !important;
}
html[data-theme="dark"] body.smart-resume-page .smart-language-choice button.is-selected small { color: #334155 !important; }

html[data-theme="dark"] body.smart-resume-page :is(.smart-field, .smart-textarea, .smart-select) {
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
  background: var(--input-background) !important;
}

html[data-theme="dark"] body.smart-resume-page .smart-stage-nav button {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] body.smart-resume-page .smart-stage-nav button.is-current {
  color: #fff !important;
  border-color: var(--primary) !important;
  background: #285fc4 !important;
}

html[data-theme="dark"] body.smart-resume-page .smart-stage-nav button.is-done {
  color: #d1fae5 !important;
  border-color: #18805d !important;
  background: #0b3d31 !important;
}

html[data-theme="dark"] body.smart-resume-page .smart-preview-toolbar { color: var(--text-primary) !important; background: var(--surface) !important; }
html[data-theme="dark"] body.smart-resume-page .smart-preview-stage { background: #050d18 !important; }
html[data-theme="dark"] body.smart-resume-page #smartCvPreview,
html[data-theme="dark"] body.smart-resume-page #smartCvPreview > .resume-page {
  color-scheme: light !important;
  background: #fff !important;
}

html[data-theme="dark"] body.smart-resume-page .smart-secondary,
html[data-theme="dark"] body.smart-resume-page .smart-link-btn,
html[data-theme="dark"] body.smart-resume-page .smart-welcome-options button {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-hover) !important;
}

/* Dark shared pages: cards and controls must not remain white. */
html[data-theme="dark"] body:not(.smart-resume-page):not(.builder-page):not(.public-resume-page) :is(
  .feature-card,
  .pricing-card,
  .info-card,
  .account-card,
  .auth-card,
  .article-item,
  .builder-panel,
  .preview-panel,
  .upload-box,
  .analysis-card,
  .template-card
) {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  background: var(--card) !important;
}

html[data-theme="dark"] body:not(.smart-resume-page):not(.builder-page):not(.public-resume-page) :is(label, .field-label) {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body:not(.smart-resume-page):not(.builder-page):not(.public-resume-page) :is(input, textarea, select) {
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
  background: var(--input-background) !important;
}

@media (max-width: 680px) {
  .global-cv-header .left-neon-controls { gap: 5px !important; }
  .global-cv-header .theme-capsule,
  .global-cv-header .lang-capsule { min-width: 44px !important; padding-inline: 8px !important; }
}

@media (prefers-contrast: more) {
  body * { text-decoration-thickness: max(1px, .08em); }
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--text-primary, #1671c5);
  outline-offset: 3px;
}
[data-privacy-preferences] label { display: flex; align-items: flex-start; gap: .75rem; }
[data-privacy-preferences] input[type="checkbox"] { flex: 0 0 auto; inline-size: 1.2rem; block-size: 1.2rem; }
.auth-field input[type="email"], .auth-field input[inputmode="numeric"] { direction: ltr; text-align: start; }
.auth-modal-content { max-block-size: calc(100dvh - 2rem); overflow-y: auto; }