/* Refined original: same layout, flows and color roles as the shipped panel,
   tuned for legibility (WCAG AA text), an 8px spacing scale and macOS-like materials.
   Loaded last so it only adjusts visual tokens; it never hides or reorders controls. */
:root {
  --u: var(--panel-unit, 1px);
  --space-1: calc(4 * var(--u)); --space-2: calc(8 * var(--u)); --space-3: calc(12 * var(--u));
  --space-4: calc(16 * var(--u)); --space-5: calc(20 * var(--u)); --space-6: calc(24 * var(--u));
  --radius-sm: calc(8 * var(--u)); --radius-md: calc(12 * var(--u)); --radius-lg: calc(16 * var(--u));
  --panel-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Segoe UI", sans-serif;
  --text-xs: calc(11 * var(--u)); --text-sm: calc(12 * var(--u)); --text-md: calc(13 * var(--u));

  /* Light: neutral system greys, all text ≥ 4.5:1 on the card and panel surfaces. */
  --text-primary: #1d1d1f;
  --text-secondary: #424955;
  --text-muted: #5a6270;
  --accent: #0a5fcc;
  --accent-light: #0a5fcc14;
  --error-text: #c4271d;
  --special-text: #9a3a00;
  --bg-solid: #f5f6f8;
  --bg-card: #ffffffcc;
  --bg-card-hover: #ffffff;
  --bg-card-active: #eceef2;
  --border-color: #0000001a;
  --hairline: #00000014;
  --glass-fill: linear-gradient(180deg, #ffffff, #fafbfc);
  --glass-edge: linear-gradient(180deg, #ffffff00, #ffffff00);
  --glass-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #0000000d;
  --reading-fill: #ffffffd9;
  --reading-border: #00000012;
  --reading-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) #0000000a, 0 calc(4 * var(--u)) calc(12 * var(--u)) #1d2a3a0a;
  --icon-color: #3c4350;
  --primary-fill: linear-gradient(180deg, #1a6de6, #0a5bd0);
  --primary-edge: linear-gradient(180deg, #ffffff40, #ffffff00 60%);
  --primary-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff33, 0 calc(1 * var(--u)) calc(2 * var(--u)) #0a3d8a33, 0 calc(4 * var(--u)) calc(12 * var(--u)) #0a62d82e;
  --pdf-fill: linear-gradient(180deg, #5f6b7a, #465261);
  --pdf-edge: linear-gradient(180deg, #ffffff33, #ffffff00 60%);
  --ats-fill: linear-gradient(180deg, #1d7d53, #146845);
  --ats-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff2e, 0 calc(1 * var(--u)) calc(2 * var(--u)) #0b3f2833, 0 calc(4 * var(--u)) calc(12 * var(--u)) #15704929;
  --badge-fill: #1f8a5b17;
  --badge-text: #17663f;
  --slot-fill: #f7f8fa;
  --slot-line: #00000024;
  --focus-ring: 0 0 0 calc(3 * var(--u)) #0a5fcc40;
}
html[data-theme="dark"] {
  --text-primary: #f2f2f7;
  --text-secondary: #c9ccd6;
  --text-muted: #a9aebb;
  --accent: #6aa8ff;
  --accent-light: #6aa8ff1f;
  --error-text: #ff7a70;
  --special-text: #ffcf66;
  --bg-solid: #24262e;
  --bg-card: #2a2c35cc;
  --bg-card-hover: #32353f;
  --bg-card-active: #3a3d48;
  --border-color: #ffffff1f;
  --hairline: #ffffff14;
  --glass-fill: linear-gradient(180deg, #34363f, #2c2e37);
  --glass-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff0d, 0 calc(1 * var(--u)) calc(2 * var(--u)) #00000040;
  --reading-fill: #23252dd9;
  --reading-border: #ffffff14;
  --reading-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff08, 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000033;
  --icon-color: #d4d7e0;
  --primary-fill: linear-gradient(180deg, #1f6fe0, #1858c4);
  --primary-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff26, 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000059;
  --pdf-fill: linear-gradient(180deg, #4f5967, #3c4552);
  --ats-fill: linear-gradient(180deg, #21815a, #176443);
  --ats-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff21, 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000059;
  --badge-fill: #3ccf8a1f;
  --badge-text: #8fe0b6;
  --slot-fill: #1c1e25;
  --slot-line: #ffffff26;
  --focus-ring: 0 0 0 calc(3 * var(--u)) #6aa8ff4d;
}

/* Panel shell */
body {
  font-family: var(--panel-font);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  margin: var(--space-3);
  padding: var(--space-4);
  min-height: calc(100vh - 2 * var(--space-3));
  border: calc(1 * var(--u)) solid #ffffffb3;
  border-radius: calc(20 * var(--u));
  background: #f9fafbe6;
  box-shadow: 0 0 0 calc(.5 * var(--u)) #0000000f, 0 calc(8 * var(--u)) calc(24 * var(--u)) #1d2a3a14;
}
[data-theme="dark"] body {
  border-color: #ffffff14;
  background: #1a1b21eb;
  box-shadow: 0 0 0 calc(.5 * var(--u)) #000000a0, 0 calc(12 * var(--u)) calc(32 * var(--u)) #00000066;
}
.header h3, .header-version, .candidate-lock-toggle { font-family: var(--panel-font); }

/* Header */
.header { gap: var(--space-2); padding: 0 0 var(--space-4); }
.header-brand { gap: var(--space-2); }
.header-brand-icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) #0a3d8a33; }
.header h3 { font-size: calc(17 * var(--u)); font-weight: 650; letter-spacing: calc(-.3 * var(--u)); }
.header-version { font-size: var(--text-xs); font-weight: 600; padding: calc(2 * var(--u)) var(--space-2); border-color: transparent; background: var(--accent-light); color: var(--accent); box-shadow: none; }
[data-theme="dark"] .header-version { background: var(--accent-light); border-color: transparent; box-shadow: none; }
.header-actions { gap: var(--space-2); }
.header-actions .theme-toggle { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.header-actions .theme-toggle:hover, #manageRulesBtn:hover { transform: none; background: var(--bg-card-hover) !important; }
.header-actions .theme-toggle::before { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
#sourceSetupBanner { margin: 0 0 var(--space-3) !important; padding: var(--space-2) var(--space-3) !important; border-radius: var(--radius-sm) !important; border: calc(1 * var(--u)) solid #c9780033; font-size: var(--text-sm) !important; line-height: 1.6 !important; }
[data-theme="dark"] #sourceSetupBanner { border-color: #ffcf6633; }

/* Shared control material: white controls with a hairline, like AppKit push buttons. */
.header-actions .theme-toggle, #manageRulesBtn, #startLearningBtn, #copyCurrentDateTimeBtn, #positionFindPanel, .candidate-lock-actions button,
#sentChecklistToggle, #sentResetBtn, #documentMatchCheckBtn, .document-page-import button {
  border: calc(1 * var(--u)) solid var(--border-color) !important;
  background: var(--glass-fill) !important;
  box-shadow: var(--glass-shadow) !important;
}
.glass-reflection { display: none; }
[data-optical-glass] { backdrop-filter: none; -webkit-backdrop-filter: none; }

.template-controls { gap: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
#startLearningBtn, #manageRulesBtn { min-height: calc(36 * var(--u)); border-radius: var(--radius-sm) !important; }
#manageRulesBtn { flex-basis: calc(36 * var(--u)); }
#startLearningBtn { font-size: var(--text-md) !important; font-weight: 600 !important; padding: var(--space-2) var(--space-6) !important; }
#startLearningBtn::after, #pdfToolBtn::after, #candidateLockUnlockBtn::after { opacity: .7; }

.top-actions { gap: var(--space-2) !important; }
#extractFromPageBtn, #pdfToolBtn, #bulkFillBtn { border-radius: var(--radius-md); letter-spacing: 0; }
#extractFromPageBtn { min-height: calc(48 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 650; border-color: transparent; }
#extractFromPageBtn::before, #pdfToolBtn::before { width: calc(18 * var(--u)); flex-basis: calc(18 * var(--u)); height: calc(18 * var(--u)); }
#extractFromPageBtn:hover, #pdfToolBtn:hover, #bulkFillBtn:hover { transform: none; filter: brightness(1.06); }
#copyCurrentDateTimeBtn { height: calc(32 * var(--u)) !important; border-radius: var(--radius-sm) !important; font-size: var(--text-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
#copyCurrentDateTimeBtn::before { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
#positionFindPanel { height: calc(36 * var(--u)); min-height: calc(36 * var(--u)); border-radius: var(--radius-sm) !important; }
#positionFindInput { height: calc(34 * var(--u)); padding-left: calc(36 * var(--u)); font-size: var(--text-md); }
#positionFindInput::placeholder { color: var(--text-muted); }
.position-find-icon { top: calc(11 * var(--u)); left: var(--space-3); }

/* Reading cards */
.candidate-lock-panel, .document-intake, .document-intake[data-disabled="true"], .sent-guard-panel, .site-select-wrapper, .item-card {
  border: calc(1 * var(--u)) solid var(--reading-border) !important;
  box-shadow: var(--reading-shadow) !important;
}
.candidate-lock-panel, .document-intake, .sent-guard-panel, .site-select-wrapper { border-radius: var(--radius-md) !important; }
.candidate-lock-panel { padding: var(--space-3) var(--space-4); }
.candidate-lock-panel[data-state="empty"], .candidate-lock-panel[data-state="off"], .document-intake, .sent-guard-panel, .site-select-wrapper { background: var(--reading-fill) !important; }
.candidate-lock-head { margin-bottom: var(--space-2); }
.candidate-lock-title { gap: var(--space-2); font-size: var(--text-md); font-weight: 600; }
.candidate-lock-main { font-size: calc(15 * var(--u)); font-weight: 650; }
.candidate-lock-meta, .candidate-lock-message { font-size: var(--text-sm); color: var(--text-secondary); }
.candidate-lock-actions { margin-top: var(--space-3); }
.candidate-lock-actions button { min-height: calc(32 * var(--u)); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-primary); }
.candidate-lock-toggle { font-size: var(--text-xs); background: linear-gradient(180deg, #1a6de6, #0a5bd0); border-color: transparent; box-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff33; }
.candidate-lock-panel[data-state="off"] .candidate-lock-toggle { background: #8a919c; }

.document-intake, .document-intake[data-disabled="true"] { padding: var(--space-3); gap: var(--space-2); }
.document-intake-status { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.document-intake-badge { font-size: var(--text-xs); font-weight: 600; padding: calc(2 * var(--u)) var(--space-2); }
.document-page-import { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.document-page-import > div { gap: var(--space-2); }
.document-page-import button { min-height: calc(32 * var(--u)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.document-page-import button[data-imported="true"] { opacity: 1; color: var(--text-muted); background: var(--bg-card-active) !important; box-shadow: none !important; }
.document-slot, .document-slot.document-slot-readonly { min-height: calc(40 * var(--u)); gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--slot-fill); border: calc(1 * var(--u)) dashed var(--slot-line); box-shadow: none; }
.document-slot.document-slot-readonly { border-style: solid; border-color: var(--reading-border); }
.document-slot:not(.document-slot-readonly) { padding-right: calc(36 * var(--u)); }
.document-slot:not(.document-slot-readonly)::after { right: var(--space-3); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.document-slot-label { border-right-color: var(--hairline); font-size: var(--text-sm); font-weight: 600; }
.document-intake-main { font-size: var(--text-sm); color: var(--text-secondary); }
.document-resume-mode { font-size: var(--text-xs); color: var(--text-secondary); gap: var(--space-2); }

#pdfToolBtn { min-height: calc(44 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; border-color: transparent; box-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff26, 0 calc(2 * var(--u)) calc(8 * var(--u)) #1d2a3a26; }
#pdfToolBtn:hover { box-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff26, 0 calc(2 * var(--u)) calc(8 * var(--u)) #1d2a3a33; }

.site-select-wrapper { padding: var(--space-3) !important; }
.top-actions > .site-select-wrapper { gap: var(--space-2); }
.site-select-label { font-size: var(--text-sm) !important; font-weight: 600; color: var(--text-secondary); margin-bottom: 0 !important; }
select.site-dropdown, #sentCountModeSelect {
  min-height: calc(36 * var(--u)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-md); color: var(--text-primary); background: var(--bg-card-hover);
  border: calc(1 * var(--u)) solid var(--border-color);
}
#sentCountModeSelect { min-height: calc(30 * var(--u)); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
#activeSiteAutoStatus { font-size: var(--text-xs) !important; color: var(--text-muted) !important; margin-top: 0 !important; line-height: 1.5 !important; }

/* ATS bulk fill stays green; the bolt is drawn as an icon instead of an emoji. */
.bulk-fill-shell, .bulk-fill-shell > #bulkFillBtn { min-height: calc(48 * var(--u)); }
#bulkFillBtn { gap: var(--space-2); font-size: calc(16 * var(--u)); font-weight: 650; background: var(--ats-fill); border: calc(1 * var(--u)) solid transparent; box-shadow: var(--ats-shadow); }
#bulkFillBtn::before { content: ''; flex: 0 0 calc(18 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: currentColor; mask: url('glass/bolt.svg') center / contain no-repeat; -webkit-mask: url('glass/bolt.svg') center / contain no-repeat; }
[data-theme="dark"] #bulkFillBtn, #sentCountBtn:not(:disabled), [data-theme="dark"] #sentCountBtn:not(:disabled) { background: var(--ats-fill); }
#bulkFillBtn:hover { box-shadow: var(--ats-shadow); }

.sent-guard-panel { padding: var(--space-3); }
.sent-guard-top { gap: var(--space-2); }
.sent-guard-top button { min-height: calc(32 * var(--u)); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
#sentChecklistToggle, #documentMatchCheckBtn { color: var(--accent); }
#sentResetBtn { color: var(--text-primary); }
#sentCountBtn:disabled { opacity: 1; background: var(--bg-card-active); color: var(--text-muted); }
.sent-counter-row, .sent-mode-row { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); gap: var(--space-2); }
.sent-counter-value { font-size: calc(16 * var(--u)); }
.sent-checklist-body { gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-color: var(--hairline); }
.sent-check-row { font-size: var(--text-sm); gap: var(--space-2); }
.checklist-prerequisite-gate { border-radius: var(--radius-sm); padding: var(--space-3); gap: var(--space-2); }
.checklist-prerequisite-gate-title { font-size: var(--text-md); }
.checklist-prerequisite-gate-message { font-size: var(--text-sm); }
#currentEmployerGateFocusBtn { min-height: calc(32 * var(--u)); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; background: #c4271d; }
[data-theme="dark"] #currentEmployerGateFocusBtn { background: #b8342c; }
.document-check-box { padding: var(--space-3); gap: var(--space-2); border-radius: var(--radius-sm); }
#documentMatchCheckBtn { min-height: calc(32 * var(--u)); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.document-check-result, #sentGuardFeedback { font-size: var(--text-sm); }

/* Extracted data cards */
.section-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: calc(.4 * var(--u)); color: var(--text-secondary); }
.grid-container { gap: var(--space-2); }
.item-card { border-radius: var(--radius-sm); padding: var(--space-3); background: var(--reading-fill) !important; }
.item-card .label { font-size: var(--text-xs); color: var(--text-secondary); }
.mini-fill-btn, .mini-split-btn, .save-btn { border-radius: calc(6 * var(--u)); }
.mini-fill-btn, [data-theme="dark"] .mini-fill-btn { background: var(--ats-fill); }

/* Disabled controls stay legible: tone shifts instead of fading the whole control. */
.candidate-lock-actions button:disabled, .mini-fill-btn:disabled, .document-manual-confirm button:disabled,
.blind-email-copy-actions .mini-split-btn:disabled, #currentEmployerGateFocusBtn:disabled, #documentMatchCheckBtn:disabled {
  opacity: 1; color: var(--text-muted) !important; background: var(--bg-card-active) !important; box-shadow: none !important; filter: none;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: calc(2 * var(--u)) solid var(--accent); outline-offset: calc(2 * var(--u));
}

/* Settings modal */
#ruleModalOverlay { background: #10141a66 !important; backdrop-filter: blur(calc(6 * var(--u))) !important; }
#ruleModalOverlay > div {
  width: calc(100% - 2 * var(--space-4)) !important; max-width: calc(360 * var(--u)) !important;
  padding: var(--space-4) !important; border-radius: var(--radius-lg) !important;
  background: var(--bg-solid) !important; border: calc(1 * var(--u)) solid var(--border-color) !important;
  box-shadow: 0 0 0 calc(.5 * var(--u)) #0000001f, 0 calc(20 * var(--u)) calc(48 * var(--u)) #0000003d !important;
}
#ruleModalOverlay > div > h4 { font-size: calc(16 * var(--u)) !important; font-weight: 650; margin-bottom: var(--space-2) !important; }
#ruleModalOverlay > div > p { font-size: var(--text-sm) !important; line-height: 1.6; color: var(--text-secondary) !important; margin: 0 0 var(--space-3) !important; }
.login-manager { margin: 0 0 var(--space-2); padding: var(--space-3); background: var(--reading-fill); border: calc(1 * var(--u)) solid var(--reading-border); border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--reading-shadow); }
.login-manager summary { font-size: var(--text-md); font-weight: 600; line-height: 1.5; }
.login-manager summary span { margin-left: var(--space-1); padding: calc(1 * var(--u)) var(--space-2); border-radius: calc(999 * var(--u)); background: var(--accent-light); color: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.login-manager small { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.6; margin: var(--space-2) 0; }
.login-manager label { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.login-manager input, .login-manager textarea, .login-manager select {
  margin-top: var(--space-1); min-height: calc(32 * var(--u)); padding: var(--space-1) var(--space-2);
  font-size: var(--text-md); font-weight: 400; color: var(--text-primary);
  background: var(--bg-card-hover); border: calc(1 * var(--u)) solid var(--border-color); border-radius: var(--radius-sm);
}
.login-manager input::placeholder, .login-manager textarea::placeholder { color: var(--text-muted); opacity: 1; }
.login-manager input:focus, .login-manager textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.login-manager button { min-height: calc(30 * var(--u)); margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--accent); background: var(--glass-fill); border: calc(1 * var(--u)) solid var(--border-color); box-shadow: var(--glass-shadow); }
.login-manager button::after { content: none; }
#sourceFieldMapList > div { gap: var(--space-1) !important; padding: var(--space-2) 0 !important; border-bottom-color: var(--hairline) !important; }
#sourceFieldMapList label { font-size: var(--text-sm) !important; color: var(--text-secondary) !important; }
#sourceFieldMapList [data-remove-field] { color: var(--error-text) !important; background: var(--error-bg) !important; border-color: #c4271d40 !important; box-shadow: none; }
.login-account { gap: var(--space-2); padding: var(--space-2) 0; border-bottom-color: var(--hairline); }
.login-account strong { font-size: var(--text-sm); }
.login-manager .login-actions button { margin: 0; padding: var(--space-1) var(--space-2); }

@media (max-width: 420px) {
  body { margin: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); min-height: calc(100vh - 2 * var(--space-2)); }
  .header { gap: var(--space-2); } .header-brand { gap: var(--space-2); }
  .header-brand-icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); }
  .header h3 { font-size: calc(16 * var(--u)); }
  .header-actions { gap: var(--space-1); }
  .header-actions .theme-toggle { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .header-version { font-size: var(--text-xs); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
  .document-intake-main { font-size: var(--text-sm); }
}
@media (prefers-reduced-transparency: reduce) {
  body { background: var(--bg-solid); }
}