:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
header { height: 76px; padding: 14px 24px; background: #101828; color: white; display: flex; align-items: center; justify-content: space-between; }
header h1, header p { margin: 0; } header h1 { font-size: 20px; } header p { color: #98a2b3; font-size: 12px; margin-top: 3px; }
header nav { display: flex; gap: 8px; align-items: center; } header nav a { color: #cbd5e1; text-decoration: none; font-size: 13px; padding: 7px 10px; border-radius: 7px; } header nav a.active, header nav a:hover { color: white; background: #344054; }
main { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 76px); }
aside { padding: 18px; border-right: 1px solid #e4e7ec; background: white; } aside h2 { font-size: 13px; color: #667085; }
.job { width: 100%; text-align: left; border: 1px solid #e4e7ec; background: white; padding: 12px; border-radius: 9px; margin: 6px 0; cursor: pointer; }
.job.active { border-color: #2e6de6; background: #f0f5ff; } .job strong, .job small { display: block; } .job small { color: #667085; margin-top: 4px; }
section { padding: 26px; } article { max-width: 1020px; margin: auto; }
.empty { padding: 80px; text-align: center; color: #98a2b3; }
.title-row { display: flex; justify-content: space-between; gap: 20px; align-items: start; } .title-row h2 { margin: 0 0 4px; } .title-row a { color: #475467; font-size: 12px; }
.task-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; } .task-actions button { padding: 6px 9px; border: 1px solid #d0d5dd; border-radius: 7px; background: white; color: #344054; font: 600 11px inherit; cursor: pointer; } .task-actions button:disabled { cursor: default; opacity: .65; } .task-actions .danger-button { border-color: #fda29b; color: #b42318; }
.status { padding: 5px 9px; background: #eaf2ff; color: #175cd3; border-radius: 999px; font-size: 12px; }
.status.completed { background: #ecfdf3; color: #067647; } .status.failed { background: #fef3f2; color: #b42318; } .status.review { background: #fffaeb; color: #b54708; } .status.processing { background: #eff8ff; color: #175cd3; }
.capture-summary { display: inline-block; margin-top: 12px; padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #475467; font-size: 12px; }
.progress-panel { margin: 14px 0; } .progress-panel summary { color: #475467; cursor: pointer; font-size: 12px; } .progress-panel summary span { color: #98a2b3; } .progress { margin: 10px 0 0; display: flex; gap: 7px; flex-wrap: wrap; } .event { background: white; border: 1px solid #e4e7ec; padding: 6px 9px; border-radius: 7px; font-size: 12px; }
.field { background: white; border: 1px solid #e4e7ec; border-radius: 10px; padding: 14px; margin: 9px 0; display: grid; grid-template-columns: 220px 1fr 190px; gap: 16px; align-items: start; }
.field h3 { margin: 0; font-size: 14px; } .field .section { color: #667085; font-size: 11px; margin-top: 4px; } .field textarea { width: 100%; min-height: 58px; padding: 8px; border: 1px solid #d0d5dd; border-radius: 7px; resize: vertical; }
.field.required-field { border-left: 3px solid #f79009; } .required-badge { display: inline-block; margin-left: 7px; padding: 2px 6px; border-radius: 999px; background: #fff4e5; color: #b54708; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.meta { font-size: 11px; color: #667085; } .meta b { color: #344054; } .error { color: #b42318; } .ok { color: #067647; }
form > button { float: right; margin: 14px 0 30px; padding: 11px 18px; border: 0; border-radius: 8px; background: #175cd3; color: white; font-weight: 700; cursor: pointer; }
form > button:disabled { background: #98a2b3; cursor: not-allowed; opacity: .78; }
.form-feedback { min-height: 19px; margin: 12px 0 0; color: #667085; font-size: 12px; line-height: 1.55; }
.form-feedback.error { color: #b42318; } .form-feedback.success { color: #067647; }
.settings-main { display: block; min-height: calc(100vh - 76px); padding: 40px 20px; }
.settings-card { max-width: 700px; margin: auto; padding: 26px; background: white; border: 1px solid #e4e7ec; border-radius: 14px; box-shadow: 0 8px 30px rgba(16,24,40,.06); }
.settings-heading { display: flex; justify-content: space-between; gap: 20px; } .settings-heading h2 { margin: 0; } .settings-heading p { color: #667085; font-size: 13px; }
.settings-card label:not(.toggle) { display: block; font-size: 13px; font-weight: 650; margin-top: 18px; }
.settings-card input[type=url], .settings-card input[type=password], .settings-card input:not([type]) { display: block; width: 100%; padding: 10px 11px; margin-top: 5px; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; }
.toggle { display: flex; gap: 9px; align-items: center; margin: 18px 0 6px; font-size: 13px; } .danger { color: #b42318; }
.help { color: #667085; font-size: 12px; margin: 5px 0; }
.settings-actions { display: flex; gap: 10px; margin-top: 24px; } .settings-actions button { border: 0; border-radius: 8px; background: #175cd3; color: white; padding: 10px 16px; font-weight: 700; cursor: pointer; } .settings-actions button.secondary { background: #eef2f8; color: #344054; }
#settings-message { min-height: 20px; font-size: 13px; color: #344054; }
.records-main { display: block; padding: 26px; } .records-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0; } .records-toolbar h2,.records-toolbar p { margin: 0 0 5px; } .records-toolbar p { color: #667085; font-size: 13px; }
.records-toolbar button,.provider-button,.account-row button,.dialog-actions button { border: 0; border-radius: 8px; padding: 9px 13px; background: #175cd3; color: white; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 13px; }
.records-board { display: grid; grid-template-columns: repeat(7,minmax(190px,1fr)); gap: 12px; overflow-x: auto; padding: 20px 0; }
.status-column { min-height: 440px; padding: 10px; border-radius: 11px; background: #eef2f7; } .status-column h3 { margin: 2px 2px 10px; font-size: 13px; } .status-column h3 span { color: #667085; }
.record-card { display: block; width: 100%; margin: 8px 0; padding: 11px; border: 1px solid #e4e7ec; border-radius: 9px; background: white; text-align: left; cursor: pointer; } .record-card strong,.record-card span,.record-card small { display: block; } .record-card span { margin-top: 4px; color: #475467; font-size: 12px; } .record-card small { margin-top: 8px; color: #667085; }
dialog { width: min(480px,calc(100vw - 30px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(16,24,40,.25); } dialog::backdrop { background: rgba(16,24,40,.5); } dialog form { padding: 24px; } dialog form h2 { margin: 0 0 15px; } dialog label { display: block; margin: 11px 0; font-size: 12px; font-weight: 700; } dialog input,dialog select,dialog textarea { display: block; width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .dialog-actions .secondary { background: #eef2f7; color: #344054; }
.date-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { min-height: 18px; margin: 10px 0 0; color: #b42318; font-size: 12px; }
.mail-main { display: block; max-width: 980px; margin: auto; padding: 28px; } .mail-card { margin-bottom: 16px; padding: 22px; border: 1px solid #e4e7ec; border-radius: 13px; background: white; } .mail-card h2 { margin: 0 0 8px; } .mail-card > p { color: #667085; font-size: 13px; }
.provider-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .provider-button { display: inline-block; } .provider-button.disabled { background: #d0d5dd; cursor: not-allowed; }
.provider-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; } .provider-heading h2,.provider-heading p { margin: 0 0 6px; } .provider-heading p { color: #667085; font-size: 13px; } .provider-heading > span { padding: 5px 9px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 11px; white-space: nowrap; }
.provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 18px; } .mail-provider { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 13px 15px; border: 1px solid #e4e7ec; border-radius: 13px; background: #fff; color: #344054; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s,box-shadow .16s,transform .16s; } .mail-provider:hover { border-color: #84adff; box-shadow: 0 7px 18px rgba(16,24,40,.08); transform: translateY(-1px); } .provider-logo { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: #f8fafc; } .provider-logo img { width: 30px; height: 30px; object-fit: contain; } .provider-copy { min-width: 0; } .provider-copy strong,.provider-copy small { display: block; } .provider-copy strong { font-size: 14px; } .provider-copy small { margin-top: 4px; color: #667085; font-size: 11px; font-weight: 500; } .provider-arrow { margin-left: auto; color: #98a2b3; font-size: 20px; } .mail-provider[data-provider="qq"] .provider-logo { background: #eff8ff; } .mail-provider[data-provider="163"],.mail-provider[data-provider="126"] { border-color: #fee4e2; } .mail-provider[data-provider="gmail"] .provider-logo { background: #fef3f2; } .mail-provider[data-provider="outlook"] .provider-logo { background: #eff8ff; } .mail-provider[data-provider="icloud"] .provider-logo { background: #f2f4f7; }
.account-row,.mail-event { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #eaecf0; } .account-row:first-child,.mail-event:first-child { border-top: 0; } .account-row strong,.account-row small { display: block; } .account-row small { margin-top: 4px; color: #667085; }
.mail-event { justify-content: flex-start; } .mail-event .event-type { align-self: flex-start; padding: 4px 7px; border-radius: 6px; background: #eef4ff; color: #3538cd; font-size: 11px; } .mail-event strong,.mail-event small { display: block; } .mail-event p { margin: 5px 0; font-size: 13px; } .mail-event small,.empty-line { color: #667085; font-size: 12px; }
.account-row .secondary,.review-row .secondary { background: #eef2f7; color: #344054; } .account-row .danger-button { margin-left: 6px; color: #b42318; } .review-row { display: flex; gap: 7px; margin-top: 9px; } .review-row select { min-width: 210px; padding: 7px; border: 1px solid #d0d5dd; border-radius: 7px; } .review-row button { border: 0; border-radius: 7px; padding: 7px 9px; background: #175cd3; color: white; cursor: pointer; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .account-actions .danger-button { margin-left: 0; }
.processing-badge { min-width: 86px; align-self: flex-start; padding: 5px 8px; border-radius: 7px; background: #eef2f7; color: #475467; font-size: 11px; white-space: nowrap; } .processing-badge.processing { background: #eff8ff; color: #175cd3; } .processing-badge.completed { background: #ecfdf3; color: #067647; } .processing-badge.failed { background: #fef3f2; color: #b42318; } .processing-badge i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.inbox-heading { display: flex; justify-content: space-between; gap: 15px; align-items: start; } .inbox-heading h2,.inbox-heading p { margin: 0 0 5px; } .inbox-heading p { color: #667085; font-size: 12px; } .inbox-filters { display: flex; gap: 5px; } .inbox-filters button { padding: 6px 9px; border: 0; border-radius: 7px; background: #eef2f7; color: #475467; cursor: pointer; } .inbox-filters button.active { background: #175cd3; color: white; }
.inbox-actions { display: flex; gap: 9px; align-items: center; } #compose-open,.reader-heading button { padding: 7px 10px; border: 0; border-radius: 7px; background: #175cd3; color: white; cursor: pointer; } .reader-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; } .reader-heading h3 { margin: 0; } .two-fields { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
.inbox-layout { display: grid; grid-template-columns: 360px 1fr; min-height: 380px; margin-top: 14px; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden; } .message-list { border-right: 1px solid #e4e7ec; overflow: auto; max-height: 560px; } .message-group { display: block; margin: 0; border: 0; border-bottom: 1px solid #d0d5dd; } .message-group-heading,.message-group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #f8fafc; color: #344054; font-size: 12px; } .message-group-heading span,.message-group summary span { color: #667085; font-size: 11px; } .message-group summary { cursor: pointer; list-style-position: inside; } .analyzing-group .message-group-heading { background: #eff8ff; color: #175cd3; } .other-group[open] summary { border-bottom: 1px solid #eaecf0; } .message-row-wrap { position: relative; border-bottom: 1px solid #eaecf0; background: white; } .message-row-wrap:last-child { border-bottom: 0; } .message-row { display: block; width: 100%; min-height: 74px; padding: 12px 88px 12px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; } .message-row.active { background: #eff6ff; } .message-row strong,.message-row span,.message-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-row span,.message-row small { margin-top: 4px; color: #667085; font-size: 11px; } .message-category-action { position: absolute; top: 10px; right: 8px; padding: 5px 7px; border: 1px solid #d0d5dd; border-radius: 6px; background: white; color: #667085; font-size: 10px; cursor: pointer; } .message-category-action.promote { border-color: #b2ddff; color: #175cd3; } .message-reader { padding: 18px; min-width: 0; } .message-reader h3 { margin: 0 0 5px; } .reader-actions { display: flex; gap: 7px; flex: 0 0 auto; } .reader-actions .secondary { background: #eef2f7; color: #344054; } .reader-meta { margin: 0 0 16px; color: #667085; font-size: 12px; } .message-reader pre { max-height: 440px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 system-ui,sans-serif; }
.resume-main { grid-template-columns: 330px minmax(0,1fr); background: #f7f9fc; }
.resume-sidebar { padding: 20px; }
.resume-sidebar-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.resume-sidebar-heading h2,.resume-sidebar-heading p { margin: 0; } .resume-sidebar-heading p { margin-top: 4px; color: #98a2b3; font-size: 12px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: #175cd3; font: 600 12px inherit; cursor: pointer; }
.upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; margin: 18px 0 8px; padding: 22px 12px; border: 1.5px dashed #84adff; border-radius: 12px; background: #f5f8ff; color: #175cd3; text-align: center; cursor: pointer; }
.upload-zone::before { content: "↑"; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px; border-radius: 50%; background: #dbeafe; font-size: 20px; }
.upload-zone span,.upload-zone small { margin-top: 5px; color: #667085; font-size: 11px; } .upload-zone.processing { opacity: .65; pointer-events: none; }
.upload-zone.processing::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 2px solid #175cd3; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.resume-message { min-height: 18px; margin: 8px 0; color: #475467; font-size: 12px; line-height: 1.45; }
.resume-list { margin-top: 14px; }
.resume-list-item { display: block; width: 100%; margin: 7px 0; padding: 11px 12px; border: 1px solid #e4e7ec; border-radius: 9px; background: white; color: #344054; text-align: left; cursor: pointer; }
.resume-list-item.active { border-color: #84adff; background: #eff6ff; box-shadow: 0 0 0 1px #dbeafe; }
.resume-list-item span { display: flex; align-items: center; gap: 7px; min-width: 0; } .resume-list-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.resume-list-item em { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; background: #dcfae6; color: #067647; font-size: 10px; font-style: normal; }
.resume-list-item small { display: block; margin-top: 5px; color: #667085; font-size: 11px; }
.resume-workspace { min-width: 0; padding: 30px; }
.resume-empty { display: flex; flex-direction: column; gap: 8px; } .resume-empty strong { color: #475467; font-size: 18px; } .resume-empty span { font-size: 13px; }
.resume-editor { max-width: 1100px; }
.resume-editor-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
#resume-title { width: min(480px,100%); padding: 4px 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: #172033; font: 700 24px/1.3 inherit; }
#resume-title:focus { border-bottom-color: #84adff; } #resume-meta { margin: 6px 0 0; color: #667085; font-size: 12px; }
.resume-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.resume-actions button,.button-link { padding: 8px 12px; border: 0; border-radius: 8px; background: #175cd3; color: white; font: 650 12px inherit; text-decoration: none; cursor: pointer; }
.resume-actions .danger-outline { border: 1px solid #fda29b; background: white; color: #b42318; }
.button-link { border: 1px solid #d0d5dd; background: white; color: #344054; }
.resume-warnings { margin-top: 16px; padding: 10px 13px; border: 1px solid #fedf89; border-radius: 9px; background: #fffaeb; color: #93370d; font-size: 12px; } .resume-warnings p { margin: 3px 0; }
.default-resume { display: inline-flex; gap: 7px; align-items: center; margin: 18px 0 12px; color: #344054; font-size: 12px; font-weight: 650; }
.markdown-editor-label { display: block; margin-bottom: 7px; color: #475467; font-size: 12px; font-weight: 700; }
#resume-markdown { width: 100%; min-height: calc(100vh - 290px); padding: 20px; border: 1px solid #d0d5dd; border-radius: 12px; outline: 0; background: #fff; color: #1d2939; resize: vertical; tab-size: 2; font: 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; box-shadow: 0 5px 18px rgba(16,24,40,.04); }
#resume-markdown:focus { border-color: #84adff; box-shadow: 0 0 0 3px #dbeafe; }
.resume-supplements-panel { margin-top: 14px; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; }
.resume-supplements-panel > summary { padding: 13px 15px; color: #344054; cursor: pointer; font-size: 13px; font-weight: 700; }
.resume-supplements-panel > summary span { margin-left: 6px; padding: 2px 7px; border-radius: 999px; color: #175cd3; background: #eff6ff; font-size: 11px; }
.supplement-help,.supplement-empty { margin: 0; padding: 0 15px 13px; color: #667085; font-size: 12px; line-height: 1.55; }
#supplement-list { padding: 0 14px 14px; }
.supplement-group { margin-top: 10px; padding: 12px; border: 1px solid #e4e7ec; border-radius: 10px; background: #f8fafc; }
.supplement-group-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.supplement-group-heading span,.supplement-group-heading strong { display: block; } .supplement-group-heading span { color: #667085; font-size: 10px; } .supplement-group-heading strong { margin-top: 3px; color: #1d2939; font-size: 13px; }
.supplement-group-heading small,.supplement-anchors { color: #667085; font-size: 10px; }
.supplement-anchors { margin: 7px 0 0; line-height: 1.5; }
.supplement-item { display: grid; grid-template-columns: minmax(130px,.55fr) minmax(240px,1.45fr); gap: 9px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e4e7ec; }
.supplement-item label { margin: 0; color: #475467; font-size: 10px; font-weight: 700; }
.supplement-item input,.supplement-item textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid #d0d5dd; border-radius: 7px; color: #1d2939; background: #fff; font: 12px/1.45 inherit; resize: vertical; }
.supplement-item-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .supplement-item-actions small { margin-right: auto; color: #98a2b3; font-size: 10px; }
.danger-text { color: #b42318; }
.raw-text-panel { margin-top: 12px; border: 1px solid #e4e7ec; border-radius: 9px; background: white; } .raw-text-panel summary { padding: 11px 13px; color: #475467; font-size: 12px; cursor: pointer; } .raw-text-panel pre { max-height: 380px; margin: 0; padding: 14px; border-top: 1px solid #e4e7ec; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #667085; font: 12px/1.6 ui-monospace,monospace; }
.spec-dialog { width: min(760px,calc(100vw - 30px)); } .spec-dialog form { padding: 0; } .dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e4e7ec; } .dialog-heading h2 { margin: 0; font-size: 18px; } .dialog-heading button { border: 0; background: transparent; color: #667085; font-size: 24px; cursor: pointer; } .spec-dialog pre { max-height: 68vh; margin: 0; padding: 22px; overflow: auto; white-space: pre-wrap; color: #344054; font: 12px/1.7 ui-monospace,monospace; }
@media (max-width: 760px) { .provider-grid { grid-template-columns: 1fr; } .provider-heading { display: block; } .provider-heading > span { display: inline-block; margin-top: 5px; } .inbox-layout { grid-template-columns: 1fr; } .message-list { max-height: 260px; border-right: 0; border-bottom: 1px solid #e4e7ec; } }
@media (max-width: 800px) { header { height: auto; min-height: 76px; align-items: flex-start; gap: 12px; } header nav { max-width: 65vw; overflow-x: auto; } main { grid-template-columns: 1fr; } aside { border-right: 0; } .field { grid-template-columns: 1fr; } .resume-main { display: block; } .resume-sidebar { border-bottom: 1px solid #e4e7ec; } .resume-workspace { padding: 20px; } .resume-editor-heading { display: block; } .resume-actions { margin-top: 14px; justify-content: flex-start; } .supplement-item { grid-template-columns: 1fr; } .supplement-item-actions { grid-column: 1; } }

.applications-main { display: block; min-height: calc(100vh - 76px); padding: 28px; background: #f6f8fc; }
.application-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1440px; margin: auto; padding: 0; }
.application-heading h2,.application-heading p { margin: 0; } .application-heading h2 { font-size: 24px; } .application-heading p { margin-top: 5px; color: #667085; font-size: 13px; }
.application-heading-actions { display: flex; align-items: center; gap: 8px; flex: none; } .export-button { padding: 9px 13px; white-space: nowrap; }
.primary-button { border: 0; border-radius: 9px; padding: 10px 16px; background: #175cd3; color: white; font-weight: 700; cursor: pointer; }
.application-controls { display: flex; align-items: center; gap: 10px; max-width: 1440px; margin: 22px auto 14px; padding: 0; }
.application-search { display: flex; align-items: center; flex: 1; max-width: 390px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 9px; background: white; }
.application-search span { color: #98a2b3; font-size: 20px; } .application-search input { width: 100%; padding: 9px 8px; border: 0; outline: 0; font: inherit; }
#record-status { padding: 9px 32px 9px 10px; border: 1px solid #d0d5dd; border-radius: 9px; background: white; color: #344054; }
.view-tabs { display: flex; gap: 3px; margin-left: auto; padding: 3px; border: 1px solid #e4e7ec; border-radius: 10px; background: white; }
.view-tabs button { padding: 7px 14px; border: 0; border-radius: 7px; background: transparent; color: #667085; font-weight: 650; cursor: pointer; }
.view-tabs button.active { background: #172033; color: white; }
.records-message { min-height: 18px; max-width: 1440px; margin: 0 auto 8px; font-size: 12px; }
.application-view { display: none; max-width: 1440px; margin: auto; padding: 0; } .application-view.active { display: block; }
.stats-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.stat-card { padding: 18px; border: 1px solid #e4e7ec; border-radius: 13px; background: white; color: #344054; text-align: left; cursor: pointer; box-shadow: 0 5px 18px rgba(16,24,40,.035); }
.stat-card:hover { border-color: #84adff; } .stat-card span,.stat-card strong,.stat-card small { display: block; } .stat-card span { color: #667085; font-size: 12px; } .stat-card strong { margin-top: 9px; color: #101828; font-size: 30px; } .stat-card small { margin-top: 7px; color: #98a2b3; }
.stats-panel { margin-top: 14px; padding: 22px; border: 1px solid #e4e7ec; border-radius: 13px; background: white; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .panel-heading h3,.panel-heading p { margin: 0; } .panel-heading p { margin-top: 5px; color: #98a2b3; font-size: 12px; }
.panel-heading > strong { color: #175cd3; font-size: 24px; text-align: right; } .panel-heading > strong small { display: block; color: #667085; font-size: 10px; font-weight: 500; }
.status-funnel { margin-top: 22px; } .status-funnel button { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 13px; width: 100%; padding: 8px 0; border: 0; background: transparent; color: #475467; text-align: left; cursor: pointer; }
.status-funnel i { height: 9px; overflow: hidden; border-radius: 999px; background: #f2f4f7; } .status-funnel b { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg,#84adff,#175cd3); } .status-funnel strong { text-align: right; }
.sheet-shell,.calendar-shell { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 13px; background: white; box-shadow: 0 5px 18px rgba(16,24,40,.035); }
.sheet-caption { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; padding: 8px 15px; border-bottom: 1px solid #e4e7ec; color: #344054; font-size: 12px; font-weight: 700; } .sheet-caption small { color: #98a2b3; font-weight: 500; }
.sheet-selection { display: flex; align-items: center; gap: 10px; } #selection-count { color: #175cd3; } #delete-selected { padding: 5px 9px; border: 1px solid #fda29b; border-radius: 7px; background: #fff; color: #b42318; font: 650 11px inherit; cursor: pointer; } #delete-selected:disabled { cursor: default; opacity: .55; }
.sheet-scroll { max-height: calc(100vh - 292px); overflow: auto; } .application-sheet { width: 100%; min-width: 1304px; border-collapse: collapse; table-layout: fixed; }
.application-sheet th { padding: 10px; border-right: 1px solid #eaecf0; border-bottom: 1px solid #d0d5dd; background: #f8fafc; color: #667085; font-size: 11px; font-weight: 650; text-align: left; }
.application-sheet thead th { position: sticky; top: 0; z-index: 2; }
.application-sheet th:nth-child(1){width:44px}.application-sheet th:nth-child(2){width:170px}.application-sheet th:nth-child(3){width:180px}.application-sheet th:nth-child(4){width:120px}.application-sheet th:nth-child(5){width:135px}.application-sheet th:nth-child(6){width:185px}.application-sheet th:nth-child(7){width:180px}.application-sheet th:nth-child(8){width:320px}.application-sheet th:last-child{width:72px}
.application-sheet td { padding: 0; border-right: 1px solid #eaecf0; border-bottom: 1px solid #eaecf0; background: white; } .application-sheet tbody tr:hover td { background: #f8fbff; } .application-sheet tr.selected td { background: #f5f8ff; } .application-sheet tr.bulk-selected td { background: #f0f7ff; }
.application-sheet input,.application-sheet select { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid transparent; outline: 0; background: transparent; color: #344054; font: 12px inherit; }
.selection-column,.selection-cell { text-align: center!important; } .application-sheet .selection-column input,.application-sheet .selection-cell input { width: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: #175cd3; cursor: pointer; }
.application-sheet input:focus,.application-sheet select:focus { position: relative; border-color: #2e6de6; background: white; box-shadow: inset 0 0 0 1px #2e6de6; }
.application-sheet .status-select { font-weight: 650; } .status-select.offer { color: #067647; } .status-select.rejected,.status-select.withdrawn { color: #b42318; } .status-select.interview,.status-select.assessment { color: #175cd3; }
.row-actions { white-space: nowrap; text-align: center; } .row-actions a,.row-actions button { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 0; border-radius: 6px; background: #f2f4f7; color: #475467; text-decoration: none; cursor: pointer; }
.sheet-empty { padding: 54px!important; color: #98a2b3; text-align: center; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid #e4e7ec; } .calendar-toolbar button { padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 7px; background: white; color: #344054; cursor: pointer; } .calendar-toolbar h3 { min-width: 150px; margin: 0 0 0 8px; font-size: 16px; }
.calendar-date-jump { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #d0d5dd; border-radius: 7px; background: white; color: #667085; font-size: 9px; }
.calendar-date-jump input { width: 116px; padding: 2px 0; border: 0; outline: 0; color: #344054; font: 10px inherit; }
#calendar-quick { padding: 6px 27px 6px 8px; border: 1px solid #d0d5dd; border-radius: 7px; background: white; color: #344054; font-size: 10px; }
.calendar-toolbar .important-only { border-color: #fdb022; color: #b54708; font-weight: 650; }
.calendar-toolbar .important-only.active { background: #fffaeb; box-shadow: inset 0 0 0 1px #fdb022; }
.calendar-toolbar .add-calendar-event { border-color: #5fe0d0; background: #f0fdf9; color: #087f6e; font-weight: 650; }
.calendar-mode { display: flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid #e4e7ec; border-radius: 8px; background: #f8fafc; }
.calendar-mode button { min-width: 38px; padding: 4px 9px; border: 0; background: transparent; color: #667085; }
.calendar-mode button.active { background: #172033; color: white; }
.calendar-legend { display: flex; gap: 10px; color: #667085; font-size: 10px; } .calendar-legend span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:#84adff; } .calendar-legend .important::before { content:"◆"; width:auto; height:auto; color:#f79009; background:transparent; font-size:9px; } .calendar-legend .manual::before { background:#14b8a6; } .calendar-legend .interview::before { background:#7f56d9; } .calendar-legend .next_action::before { background:#f79009; } .calendar-legend .received-at::before { border: 1px dashed #667085; border-radius: 2px; background: transparent; }
.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); } .calendar-weekdays span { padding: 9px 12px; border-right: 1px solid #eaecf0; background: #f8fafc; color: #667085; font-size: 10px; text-align: right; }
.calendar-day { min-height: 126px; padding: 7px; border-top: 1px solid #eaecf0; border-right: 1px solid #eaecf0; background: white; } .calendar-day.outside { background: #fafbfc; } .calendar-day.outside .day-number { color: #d0d5dd; } .calendar-day.today .day-number { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: #175cd3; color: white; }
.day-number { display: block; margin-bottom: 5px; color: #667085; font-size: 11px; text-align: right; }
.calendar-event { display: block; width: 100%; margin: 3px 0; padding: 4px 5px; overflow: hidden; border: 0; border-left: 3px solid #84adff; border-radius: 4px; background: #eff6ff; color: #344054; font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .calendar-event b { margin-right: 4px; color: #175cd3; }
.calendar-event.interview { border-color: #7f56d9; background: #f4f3ff; } .calendar-event.interview b { color: #6941c6; } .calendar-event.offer { border-color: #12b76a; background: #ecfdf3; } .calendar-event.offer b { color: #067647; } .calendar-event.rejection { border-color: #f04438; background: #fef3f2; } .calendar-event.rejection b { color: #b42318; } .calendar-event.next_action { border-color: #f79009; background: #fffaeb; } .calendar-event.next_action b { color: #b54708; } .calendar-event.selected { box-shadow: 0 0 0 2px #175cd3; }
.calendar-event.manual { border-color: #14b8a6; background: #f0fdfa; } .calendar-event.manual b { color: #087f6e; }
.calendar-event.important { position: relative; padding-right: 17px; }
.calendar-event.important::after { content:"◆"; position:absolute; top:4px; right:5px; color:#f79009; font-size:8px; line-height:1; }
.calendar-event.received-at { outline: 1px dashed #667085; outline-offset: -1px; }
.calendar-week-view { overflow: hidden; }
.week-header { display: grid; grid-template-columns: 62px repeat(7,minmax(128px,1fr)); min-width: 960px; border-bottom: 1px solid #d0d5dd; background: #f8fafc; }
.week-header > div,.week-time-heading { padding: 9px 8px; border-right: 1px solid #eaecf0; color: #667085; font-size: 10px; text-align: center; }
.week-header > div strong,.week-header > div span { display: block; } .week-header > div span { margin-top: 2px; color: #98a2b3; }
.week-header > div.today { background: #eff6ff; color: #175cd3; }
.week-time-heading { display: grid; place-items: center; }
.week-scroll { max-height: 680px; overflow: auto; }
.week-time-grid { display: grid; grid-template-columns: 62px minmax(898px,1fr); min-width: 960px; background: white; }
.week-hours { position: relative; border-right: 1px solid #d0d5dd; background: #f8fafc; }
.week-hours span { position: absolute; right: 8px; transform: translateY(-7px); color: #98a2b3; font-size: 9px; }
.week-days { display: grid; grid-template-columns: repeat(7,minmax(128px,1fr)); }
.week-day-column { position: relative; border-right: 1px solid #eaecf0; background: repeating-linear-gradient(to bottom,transparent 0,transparent 53px,#eaecf0 53px,#eaecf0 54px); }
.week-day-column.today { background-color: #fbfdff; }
.week-event { position: absolute; width: auto; min-height: 40px; margin: 0; padding: 5px 6px; white-space: normal; box-shadow: 0 2px 5px rgba(16,24,40,.08); }
.week-event time,.week-event b,.week-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-event time { margin-bottom: 2px; color: #667085; font-size: 8px; } .week-event b { margin: 0; font-size: 9px; } .week-event span { margin-top: 2px; color: #475467; font-size: 8px; }
.record-dialog-heading { display: flex; justify-content: space-between; align-items: start; } .record-dialog-heading h2,.record-dialog-heading p { margin: 0; } .record-dialog-heading p { margin-top: 4px; color: #98a2b3; font-size: 11px; } .record-dialog-heading button { border: 0; background: transparent; color: #667085; font-size: 23px; cursor: pointer; }
.record-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dialog-actions span { flex: 1; }
.notes-cell { vertical-align: top; }
.note-stack { min-height: 42px; padding: 5px 7px; }
.note-stack > input { min-height: 30px; padding: 5px 3px; border-top-color: #eaecf0; }
.mail-note-preview { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; width: 100%; padding: 3px; border: 0; background: transparent; color: #475467; text-align: left; cursor: pointer; }
.mail-note-preview span { padding: 2px 5px; border-radius: 5px; background: #eff6ff; color: #175cd3; font-size: 9px; white-space: nowrap; }
.mail-note-preview strong { overflow: hidden; color: #344054; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.mail-note-links,.important-links { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-note-links { padding: 2px 3px 4px; }
.mail-note-links a,.important-links a { padding: 3px 7px; border-radius: 6px; background: #eff8ff; color: #175cd3; font-size: 10px; font-weight: 650; text-decoration: none; }
.record-detail-dialog { width: min(820px,calc(100vw - 30px)); max-height: 90vh; }
.record-detail-dialog form { max-height: calc(90vh - 48px); overflow-y: auto; }
.calendar-event-dialog { width: min(520px,calc(100vw - 30px)); }
.bulk-delete-content { padding: 24px; } .bulk-delete-note { margin: 18px 0 0; padding: 11px 12px; border-radius: 8px; background: #fef3f2; color: #912018; font-size: 12px; line-height: 1.5; } .dialog-actions .danger-button { background: #d92d20; color: white; }
.calendar-important-check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.calendar-important-check input { width: auto; margin: 0; }
.latest-mail-panel,.related-mail-panel { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e4e7ec; }
.latest-mail-panel { padding: 14px; border: 1px solid #b2ddff; border-radius: 10px; background: #f5faff; }
.detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail-section-heading h3 { margin: 0; color: #344054; font-size: 14px; }
.detail-section-heading time,.detail-section-heading span { color: #98a2b3; font-size: 10px; }
#latest-mail-note p { margin: 0 0 9px; color: #344054; font-size: 12px; line-height: 1.6; }
.activity-source { display: inline-flex; margin-bottom: 8px; padding: 3px 7px; border-radius: 999px; background: #eaf2ff; color: #175cd3; font-size: 10px; font-weight: 700; }
.mail-note-preview > span { font-size: 0; }
.mail-note-preview > span::after { content: "最新进展"; font-size: 10px; }
.related-mails { display: grid; gap: 9px; }
.related-mail-card { padding: 12px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; }
.related-mail-card.latest { border-color: #b2ddff; }
.related-mail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.related-mail-heading > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.related-mail-heading strong { overflow: hidden; color: #344054; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.related-mail-heading time,.related-mail-sender { flex: 0 0 auto; color: #98a2b3; font-size: 10px; }
.mail-event-badge { padding: 2px 5px; border-radius: 5px; background: #eff6ff; color: #175cd3; font-size: 9px; white-space: nowrap; }
.mail-event-badge.offer { background: #ecfdf3; color: #067647; } .mail-event-badge.rejection { background: #fef3f2; color: #b42318; }
.related-mail-sender { margin: 5px 0; }
.related-mail-summary,.related-mail-action { margin: 7px 0; color: #475467; font-size: 11px; line-height: 1.55; }
.related-mail-action b { color: #344054; }
.mail-body-toggle { margin-top: 9px; padding: 4px 0; border: 0; background: transparent; color: #175cd3; font-size: 10px; font-weight: 650; cursor: pointer; }
.related-mail-body { max-height: 280px; margin: 8px 0 0; padding: 10px; overflow: auto; border-radius: 7px; background: #f8fafc; white-space: pre-wrap; overflow-wrap: anywhere; color: #475467; font: 11px/1.55 ui-monospace,monospace; }
@media (max-width:900px){.stats-cards{grid-template-columns:repeat(2,1fr)}.application-controls{flex-wrap:wrap}.view-tabs{margin-left:0}.calendar-legend{display:none}.calendar-day{min-height:96px}.record-form-grid{grid-template-columns:1fr}}

/* Account access */
.auth-page { min-height:100vh; background:radial-gradient(circle at 18% 12%,#dbeafe 0,transparent 28%),linear-gradient(145deg,#f8fafc,#eef4ff); color:#172033; }
.auth-shell { display:grid; grid-template-columns:minmax(300px,1fr) minmax(360px,460px); align-items:center; gap:72px; width:min(1080px,calc(100% - 40px)); min-height:100vh; margin:auto; padding:56px 0; }
.auth-brand,.auth-card { padding:0; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; margin-bottom:32px; border-radius:13px; background:#175cd3; color:white; font-size:22px; font-weight:800; box-shadow:0 10px 28px rgba(23,92,211,.26); }
.eyebrow { margin:0 0 10px; color:#175cd3; font-size:11px; font-weight:800; letter-spacing:.16em; }
.auth-brand h1 { max-width:610px; margin:0; font-size:clamp(34px,5vw,60px); line-height:1.08; letter-spacing:-.045em; }
.auth-brand > p:last-child { max-width:530px; margin:22px 0 0; color:#667085; font-size:16px; line-height:1.7; }
.auth-card { padding:36px; border:1px solid rgba(208,213,221,.82); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 24px 70px rgba(16,24,40,.13); backdrop-filter:blur(14px); }
.auth-card h2 { margin:0 0 26px; font-size:28px; letter-spacing:-.025em; }
.auth-card label { display:block; margin:16px 0; color:#344054; font-size:13px; font-weight:700; }
.auth-card input { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid #d0d5dd; border-radius:10px; outline:0; background:white; color:#172033; font:inherit; font-weight:450; }
.auth-card input:focus { border-color:#84adff; box-shadow:0 0 0 4px #dbeafe; }
.muted { color:#98a2b3; font-weight:500; }
.auth-error { min-height:20px; margin:9px 0 0; color:#b42318; font-size:12px; }
form > button.auth-submit { float:none; width:100%; margin:12px 0 0; padding:12px 18px; }
.auth-submit:disabled { opacity:.65; cursor:wait; }
.auth-switch { margin:23px 0 0; color:#667085; font-size:13px; text-align:center; }
.auth-switch a { margin-left:5px; color:#175cd3; font-weight:700; text-decoration:none; }
.account-menu { position:relative; margin-left:2px; }
.account-button { display:flex; align-items:center; gap:7px; max-width:160px; padding:6px 9px; border:1px solid #344054; border-radius:8px; background:#1d2939; color:#e4e7ec; cursor:pointer; }
.account-avatar { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#2e90fa; color:white; font-size:10px; font-weight:800; }
.account-name { overflow:hidden; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.account-popover { position:absolute; z-index:100; top:calc(100% + 8px); right:0; width:230px; padding:10px; border:1px solid #e4e7ec; border-radius:11px; background:white; color:#344054; box-shadow:0 15px 40px rgba(16,24,40,.2); }
.account-popover strong,.account-popover small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-popover strong { font-size:12px; }.account-popover small { margin:3px 0 10px; color:#667085; font-size:10px; }
.account-popover button { width:100%; padding:8px; border:0; border-radius:7px; background:#f2f4f7; color:#344054; font-weight:650; cursor:pointer; }
@media (max-width:760px) { .auth-shell { display:block; width:min(440px,calc(100% - 28px)); padding:30px 0; } .auth-brand { padding:8px 6px 30px; } .auth-brand h1 { font-size:34px; } .auth-brand > p:last-child { font-size:14px; } .brand-mark { margin-bottom:20px; } .auth-card { padding:26px 22px; } }

@media (max-width:560px) {
  header { flex-direction:column; align-items:stretch; min-height:0; padding:12px 16px 10px; }
  header > div { display:flex; align-items:baseline; gap:9px; }
  header h1 { flex:0 0 auto; font-size:17px; white-space:nowrap; }
  header p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  header nav { width:calc(100vw - 32px); max-width:none; gap:4px; padding-bottom:2px; overflow-x:auto; scrollbar-width:none; }
  header nav::-webkit-scrollbar { display:none; }
  header nav a { flex:0 0 auto; padding:6px 9px; white-space:nowrap; }
  .applications-main { min-height:calc(100vh - 102px); padding:22px 16px 30px; }
  .application-heading { flex-direction:column; align-items:stretch; gap:16px; }
  .application-heading h2 { font-size:22px; }
  .application-heading p { max-width:34rem; line-height:1.55; }
  .application-heading-actions { width:100%; }
  .application-heading-actions > * { flex:1; text-align:center; }
  .application-controls { margin-top:18px; }
  .application-search { min-width:0; max-width:none; }
  #record-status { width:122px; }
  .view-tabs { width:100%; }
  .view-tabs button { flex:1; }
  .sheet-caption { align-items:flex-start; }
  .sheet-caption small { max-width:58%; text-align:right; }
  .calendar-toolbar { padding:12px; }
  .calendar-toolbar h3 { min-width:0; margin-left:5px; }
}