:root { color-scheme: light; --ink: #15212a; --muted: #60717c; --quiet: #87959d; --canvas: #eef2f3; --paper: #ffffff; --line: #d5dee2; --line-soft: #e7ecee; --navy: #182630; --navy-2: #233642; --orange: #e68a43; --orange-dark: #b85f25; --blue: #376c91; --blue-soft: #e8f1f6; --green: #28735f; --green-soft: #e1f1eb; --red: #a64d4d; --red-soft: #f7e4e4; --amber-soft: #fff0e3; --shadow: 0 14px 36px rgba(22, 39, 49, .08); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); }
html { scroll-behavior: smooth; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, a.ghost-button { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease, border-color .2s ease, color .2s ease; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 18px; }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; font: 800 20px Georgia, serif; }
.brand-block div, .sidebar-status div { display: flex; flex-direction: column; min-width: 0; }
.brand-block span:last-child, .sidebar-status span { margin-top: 2px; color: #94a6af; font-size: .76rem; }
.primary-nav { margin-top: 22px; }
.nav-label { margin: 0 10px 9px; color: #7f929d; font-size: .68rem; font-weight: 750; letter-spacing: .035em; }
.nav-item { width: 100%; min-height: 43px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; margin-bottom: 3px; padding: 0 11px; background: transparent; text-align: left; }
.nav-glyph { font-size: 1.1rem; text-align: center; }
.nav-item b { min-width: 23px; padding: 2px 6px; border-radius: 99px; font-size: .67rem; text-align: center; }
.nav-item i { width: 8px; height: 8px; border-radius: 50%; }
.nav-item i.live { background: var(--orange); box-shadow: 0 0 0 4px rgba(230, 138, 67, .14); }
.main-content { min-width: 0; padding: 28px clamp(22px, 3.4vw, 48px) 50px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.breadcrumb { margin: 0 0 4px; font-size: .76rem; }
.topbar > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: .9rem; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.primary-button, .ghost-button, .danger-button, .icon-button { min-height: 40px; padding: 0 14px; }
.primary-button { border: 1px solid var(--orange); box-shadow: 0 2px 0 var(--orange-dark); }
.primary-button:disabled, .ghost-a.primary-button, a.ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
button:disabled { box-shadow: 1px 1px 0 var(--ink); }
.ghost-button, .icon-button { border: 1px solid var(--line); }
.ghost-button:hover, .icon-button:hover { border-color: #aebbc2; }
.icon-button { width: 40px; padding: 0; font-size: 1.1rem; }
.danger-button { border: 1px solid #e7bcbc; }
.text-button { border: 0; padding: 4px; color: var(--blue); background: transparent; }
kbd { display: inline-grid; place-items: center; min-width: 25px; min-height: 23px; padding: 2px 5px; border-bottom-width: 2px; font: 700 .72rem ui-monospace, monospace; }
.view { display: none; }
.view.active-view { display: block; animation: view-enter .28s cubic-bezier(.2,.8,.2,1); }
.panel, .split-panel, .application-workspace { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 7px 20px rgba(22, 39, 49, .04); }
.panel-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-heading h2, .index-heading h2, .activity-header h2 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.012em; }
.panel-heading p, .index-heading p, .activity-header p { margin: 0; color: var(--muted); font-size: .78rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.metric-grid article { min-height: 112px; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.metric-grid span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.metric-grid strong { display: block; line-height: .9; font-variant-numeric: tabular-nums; }
.metric-grid small { color: var(--quiet); font-size: .7rem; text-align: right; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 16px; }
.recent-panel, .activity-summary-panel { min-height: 240px; }
.count-pill { min-width: 29px; padding: 4px 8px; border-radius: 99px; font-size: .76rem; text-align: center; }
.attention-list, .recent-list { padding: 7px 10px 11px; }
.attention-item, .recent-item { width: 100%; display: grid; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 12px 8px; color: inherit; background: transparent; text-align: left; }
.attention-item { grid-template-columns: 10px minmax(0, 1fr) auto; }
.attention-item:last-child, .recent-item:last-child { border-bottom: 0; }
.attention-item:hover, .recent-item:hover { background: #f8fafb; }
.attention-mark { width: 8px; height: 8px; border-radius: 50%; }
.attention-item strong, .recent-item strong { display: block; font-size: .85rem; }
.attention-item small, .recent-item small { display: block; margin-top: 3px; color: var(--muted); font-size: .73rem; }
.attention-item > span:last-child { color: var(--blue); font-size: .74rem; font-weight: 700; }
.recent-item { grid-template-columns: minmax(0, 1fr) auto auto; }
.recent-item .status-chip { min-width: 72px; text-align: center; }
.quick-actions { display: grid; padding: 9px; }
.load-more { display: block; margin: 12px auto; }
.ai-panel { margin: 16px 0 0; padding: 14px; }
.application-ai { margin: 14px 20px 0; }
.ai-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-panel-head h3 { margin: 0; }
.ai-panel-head p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.ai-buttons, .ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-result:empty { display: none; }
.ai-result { margin-top: 12px; font-size: .8rem; line-height: 1.5; }
.ai-result h4 { margin: 12px 0 4px; font-size: .78rem; }
.ai-result ul, .ai-result ol { margin: 4px 0; padding-left: 18px; }
.ai-score { display: flex; align-items: center; gap: 10px; }
.ai-score strong { line-height: 1; }
.ai-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-draft { width: 100%; padding: 10px; font: inherit; line-height: 1.5; }
.ai-questions li { margin-bottom: 10px; }
.ai-questions p { margin: 3px 0; }
.ai-status { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ai-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: currentColor; border-radius: 50%; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-spinner { animation: none; }
}
.ai-error { color: var(--red); }
.ai-footnote { margin-top: 10px; color: var(--muted); font-size: .68rem; }
@media (max-width: 700px) {
  .ai-columns { grid-template-columns: 1fr; }
}
.load-more[hidden] { display: none; }
.profile-panel, .evidence-panel { padding-bottom: 6px; }
.profile-panel .tracking-card, .evidence-panel .tracking-card { margin: 0 16px 16px; }
.evidence-actions { display: flex; gap: 8px; }
.evidence-actions .primary-button { flex: 1; }
.evidence-list { display: grid; gap: 10px; padding: 0 16px 12px; }
.evidence-item { display: grid; gap: 6px; padding: 12px 14px; }
.evidence-item header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.evidence-item small { color: var(--muted); }
.evidence-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.5; }
.account-panel { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
.account-panel > .panel-heading { grid-column: 1 / -1; }
.verify-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; font-size: .8rem; }
.verify-banner[hidden] { display: none; }
@media (max-width: 860px) {
  .profile-layout, .account-panel { grid-template-columns: 1fr; }
}
.quick-actions button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 6px; padding: 13px 10px; color: inherit; background: transparent; text-align: left; }
.quick-actions button:last-child { border-bottom: 0; }
.quick-actions button:hover { background: #f5f8f9; }
.quick-actions i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 6px; color: var(--ink); font-style: normal; font-weight: 900; }
.quick-actions span { display: flex; flex-direction: column; color: var(--blue); font-size: .84rem; font-weight: 750; }
.quick-actions small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.latest-summary { min-height: 150px; display: flex; align-items: center; gap: 13px; padding: 20px; }
.latest-summary .empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.latest-summary strong { font-size: .88rem; }
.latest-summary p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.search-panel { margin-bottom: 16px; padding: 17px 19px 12px; }
.search-panel label { display: block; margin-bottom: 7px; color: #bdcbd1; font-size: .78rem; }
.search-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.search-row > span { color: #8397a2; font-size: 1.3rem; }
.search-row input { width: 100%; min-height: 44px; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.search-panel > p { margin: 8px 0 0; padding-top: 9px; color: #94a8b1; font-size: .71rem; }
.opportunities-layout { display: grid; grid-template-columns: minmax(530px, 1fr) minmax(300px, 34%); overflow: hidden; }
.list-panel { min-width: 0; }
.list-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--line-soft); }
.filter-tabs, .status-tabs { display: flex; gap: 3px; }
.filter, .app-filter { border: 0; border-radius: 6px; padding: 7px 11px; background: transparent; font-size: .78rem; }
.mini-search { display: flex; align-items: center; gap: 5px; padding: 0 8px; color: var(--quiet); }
.mini-search input { width: 132px; min-height: 31px; border: 0; outline: 0; background: transparent; font-size: .78rem; }
.table-head { display: grid; gap: 10px; padding: 10px 17px; border-bottom: 1px solid var(--line); font-size: .67rem; }
.jobs-head, .job-row { grid-template-columns: minmax(200px, 1fr) 58px 82px 78px 164px; }
.job-list { max-height: 545px; overflow-y: auto; }
.job-row { width: 100%; min-height: 68px; display: grid; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 17px; color: inherit; background: white; text-align: left; cursor: pointer; }
.job-row:hover { background: #f8fafb; }
.job-row.selected { background: #edf4f7; box-shadow: inset 4px 0 var(--orange); }
.job-main { min-width: 0; display: flex; align-items: center; gap: 11px; }
.company-mark { flex: 0 0 auto; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.job-main > span:last-child { min-width: 0; }
.job-main strong, .job-main > span:last-child > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-main strong { margin-bottom: 3px; font-size: .84rem; }
.job-main > span:last-child > span, .source, .date { color: var(--muted); font-size: .72rem; }
.signal { width: fit-content; min-width: 36px; padding: 4px 6px; border-radius: 5px; font-size: .68rem; font-weight: 800; text-align: center; }
.signal.high { color: var(--green); }
.job-prepare { min-height: 32px; color: var(--ink); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.job-prepare:hover { background: #ffd49d; }
.job-prepare:disabled { cursor: not-allowed; opacity: .45; }
.detail-panel { min-width: 0; padding: 24px; background: #fbfcfc; }
.detail-empty { min-height: 360px; display: grid; place-content: center; justify-items: center; color: var(--quiet); text-align: center; }
.detail-empty > span { font-size: 1.8rem; }
.detail-empty strong { margin: 12px 0 5px; color: var(--muted); }
.detail-empty p { max-width: 240px; margin: 0; font-size: .8rem; line-height: 1.5; }
.detail-kicker { margin: 0 0 7px; font-size: .7rem; }
.detail-panel h2 { margin: 0 0 7px; font-size: 1.4rem; }
.detail-company { margin: 0; color: var(--muted); }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 0; overflow: hidden; }
.detail-meta div { padding: 11px; background: white; }
.detail-meta span, .detail-meta strong { display: block; }
.detail-meta span { color: var(--quiet); font-size: .67rem; }
.detail-meta strong { margin-top: 3px; overflow-wrap: anywhere; font-size: .78rem; }
.open-button { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.detail-actions { display: grid; gap: 10px; }
.detail-actions .primary-button { width: 100%; }
.application-workspace { min-height: 650px; display: grid; grid-template-columns: minmax(300px, 35%) minmax(0, 1fr); overflow: hidden; }
.application-index { min-width: 0; }
.index-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; border-bottom: 1px solid var(--line-soft); }
.status-tabs { padding: 9px 13px; border-bottom: 1px solid var(--line-soft); }
.application-list { max-height: 558px; overflow-y: auto; }
.application-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--line-soft); padding: 13px 14px; color: inherit; background: white; text-align: left; }
.application-row:hover { background: #f8fafb; }
.application-row.selected { background: #edf4f7; box-shadow: inset 4px 0 var(--orange); }
.application-row .company-mark { width: 38px; height: 38px; }
.application-main { min-width: 0; }
.application-main strong, .application-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.application-main strong { font-size: .83rem; }
.application-main span { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.application-side { text-align: right; }
.application-side small { margin-top: 5px; color: var(--quiet); font-size: .65rem; }
.status-chip { display: inline-block; width: fit-content; padding: 4px 7px; font-size: .67rem; }
.status-chip.drafted { color: #9a541e; }
.status-chip.applied, .status-chip.interviewing { color: var(--green); background: var(--green-soft); }
.application-detail { min-width: 0; background: #f8fafb; }
.application-hero { min-height: 126px; display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 22px 24px; }
.application-hero h2 { margin: 0 0 6px; font-size: 1.35rem; }
.application-hero p { margin: 0; color: #aebdc4; }
.application-hero .status-chip { margin-top: 2px; }
.application-meta { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 18px; color: #b9c7cd; font-size: .74rem; }
.application-body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; padding: 20px 22px 24px; }
.artifact-section h3, .next-step h3 { margin: 0 0 10px; font-size: .87rem; }
.artifact-list { display: grid; gap: 7px; }
.artifact-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; }
.file-icon { display: grid; place-items: center; width: 31px; height: 36px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.artifact-row strong, .artifact-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-row strong { font-size: .78rem; }
.artifact-row small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.file-actions { display: flex; gap: 5px; }
.file-actions button, .file-actions a { padding: 6px 7px; font-size: .67rem; font-weight: 750; text-decoration: none; }
.next-step { align-self: start; padding: 14px; }
.next-step p { margin: 0 0 12px; color: #70441f; font-size: .76rem; line-height: 1.45; }
.next-step .primary-button { width: 100%; }
.readiness { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(184, 95, 37, .18); }
.readiness span { display: flex; justify-content: space-between; color: #70441f; font-size: .7rem; }
.progress-track { height: 5px; margin-top: 7px; border-radius: 99px; overflow: hidden; }
.progress-track i { display: block; height: 100%; }
.missing-list { margin: 10px 0 0; padding-left: 17px; color: #7c552f; font-size: .69rem; }
.upload-box { margin-top: 12px; padding: 12px; }
.upload-box label { display: block; font-size: .74rem; cursor: pointer; }
.upload-box input { width: 100%; margin-top: 8px; font-size: .7rem; }
.upload-box small { display: block; margin-top: 7px; color: var(--quiet); font-size: .64rem; }
.tracking-card { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px; }
.tracking-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.tracking-heading h3 { margin: 0; font-size: .87rem; }
.tracking-heading p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.database-badge { padding: 4px 7px; border-radius: 5px; font-size: .62rem; font-weight: 900; }
.tracking-card label { display: grid; gap: 5px; font-weight: 800; }
.tracking-card input, .tracking-card select, .tracking-card textarea { width: 100%; padding: 8px 9px; color: var(--ink); }
.tracking-card textarea { resize: vertical; line-height: 1.4; }
.tracking-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tracking-card .primary-button { width: 100%; }
.file-library { overflow: hidden; }
.files-head, .file-row { grid-template-columns: minmax(240px, 1fr) minmax(180px, .7fr) 90px 76px 145px; }
.file-row { min-height: 61px; display: grid; align-items: center; gap: 10px; padding: 9px 17px; border-bottom: 1px solid var(--line-soft); }
.file-row:hover { background: #f8fafb; }
.file-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.file-name div { min-width: 0; }
.file-name strong, .file-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name strong { font-size: .8rem; }
.file-name small, .file-row > span { color: var(--muted); font-size: .7rem; }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.activity-card { padding: 20px; }
.activity-header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.state-pill { padding: 5px 9px; border-radius: 99px; font-size: .7rem; }
.state-pill.running { color: #94501f; background: var(--amber-soft); }
.state-pill.complete { color: var(--green); }
.state-pill.failed, .state-pill.cancelled { color: var(--red); background: var(--red-soft); }
.technical-log { overflow: hidden; }
.technical-log summary { padding: 11px 13px; font-size: .77rem; cursor: pointer; }
#activity-log { min-height: 300px; max-height: 470px; overflow: auto; margin: 0; padding: 17px; font: 12.5px/1.55 "DejaVu Sans Mono", ui-monospace, monospace; white-space: pre-wrap; }
.activity-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.empty-state { padding: 60px 20px; color: var(--quiet); text-align: center; }
.empty-state span, .empty-state strong { display: block; }
.empty-state span { margin-bottom: 10px; font-size: 1.7rem; }
.empty-state strong { color: var(--muted); }
.empty-state p { margin: 5px 0 0; font-size: .8rem; }
dialog { padding: 0; }
.modal { width: min(520px, calc(100vw - 30px)); }
.modal form { position: relative; padding: 29px; }
.dialog-close { position: absolute; top: 13px; right: 14px; border: 0; color: var(--quiet); background: transparent; font-size: 1.5rem; }
.modal h2 { margin: 0 0 8px; font-size: 1.45rem; }
.modal p:not(.dialog-kicker) { color: var(--muted); line-height: 1.5; }
.modal label { display: block; margin: 19px 0 7px; font-size: .8rem; font-weight: 750; }
.modal textarea { width: 100%; resize: vertical; padding: 11px; border-radius: 7px; line-height: 1.45; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.full-button { width: 100%; margin-top: 22px; }
.preview-modal { width: min(1120px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); }
.preview-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 14px 10px 18px; }
.preview-header > div { display: flex; align-items: center; gap: 10px; }
.preview-header > div:first-child { min-width: 0; flex-direction: column; align-items: start; gap: 2px; }
.preview-header strong, .preview-header span { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-header span { color: var(--muted); font-size: .7rem; }
.preview-header a { display: inline-flex; align-items: center; text-decoration: none; }
.dialog-close-inline { width: 38px; height: 38px; border: 0; color: var(--muted); background: transparent; font-size: 1.45rem; }
.preview-body iframe { width: 100%; height: 100%; border: 0; background: #dfe6e9; }
.preview-text { width: min(820px, calc(100% - 40px)); height: calc(100% - 40px); overflow: auto; margin: 20px auto; padding: 30px; color: var(--ink); background: white; font: 14px/1.65 "DejaVu Sans Mono", ui-monospace, monospace; }
#toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 390px; padding: 11px 15px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .18s ease; }
#toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand-block { justify-content: center; padding-inline: 0; }
  .brand-block div, .nav-label, .nav-item > span:not(.nav-glyph), .nav-item b, .sidebar-status div { display: none; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .overview-grid { grid-template-columns: 1fr 320px; }
  .application-body { grid-template-columns: 1fr; }
  .sidebar-account { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  .sidebar-account > div { display: none; }
}
@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; z-index: 12; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 8px 12px; }
  .brand-block { padding: 0 10px 0 0; border: 0; }
  .brand-mark { width: 34px; height: 34px; }
  .primary-nav { flex: 1; display: flex; justify-content: flex-end; margin: 0; }
  .nav-item { width: 43px; min-height: 39px; margin: 0 1px; }
  .main-content { padding: 22px 15px 40px; }
  .topbar { align-items: start; }
  .topbar-actions .icon-button { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .overview-grid, .activity-layout { grid-template-columns: 1fr; }
  .opportunities-layout { display: block; }
  .detail-panel { border: 0; border-top: 1px solid var(--line); }
  .application-workspace { grid-template-columns: 1fr; }
  .application-index { border: 0; border-bottom: 1px solid var(--line); }
  .application-list { max-height: 320px; }
  .files-head, .file-row { grid-template-columns: minmax(220px, 1fr) 120px 110px; }
  .files-head span:nth-child(3), .files-head span:nth-child(4), .file-row > span:nth-child(3), .file-row > span:nth-child(4) { display: none; }
}
@media (max-width: 620px) {
  .topbar { display: block; }
  .topbar-actions { margin-top: 15px; }
  .topbar-actions .primary-button { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid article { min-height: 88px; }
  .search-row { grid-template-columns: auto 1fr; }
  .search-row .primary-button { grid-column: 1 / -1; width: 100%; }
  .list-toolbar { align-items: stretch; flex-direction: column; padding-block: 10px; }
  .mini-search input { width: 100%; }
  .table-head { display: none; }
  .job-row .source, .job-row .date { display: none; }
  .application-hero { display: block; }
  .application-hero .status-chip { margin-top: 12px; }
  .application-body { padding: 15px; }
  .file-row > span, .file-row .application-name { display: none; }
  .preview-modal { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Ink & paper: a 1930s rubber-hose cartoon title-card look, drawn by hand. */
@font-face { font-family: "Titan One"; src: url("/fonts/titan-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/fonts/alegreya.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
:root { --ink: #1f140c; --muted: #5e4730; --quiet: #6b5238; --canvas: #f2e2bb; --paper: #fbf1d6; --line: #1f140c; --line-soft: #d9c395; --navy: #ead5a4; --navy-2: #fbf1d6; --orange: #c7362c; --orange-dark: #8f2119; --mustard: #e5a823; --teal: #2c6b6e; --blue: #2c6b6e; --blue-soft: #d6e6df; --green: #2f6b3f; --green-soft: #d5e5c7; --red: #b0281f; --red-soft: #f3cfc2; --amber-soft: #f7e3a8; --shadow: 4px 5px 0 var(--ink); --wobble: 14px; --wobble-sm: 9px; --display: "Titan One", "Arial Rounded MT Bold", "Arial Black", sans-serif; font-family: "Alegreya", Georgia, "Times New Roman", serif; font-size: 17px; }
html, body { background: var(--canvas); }
body { line-height: 1.55; }
/* Film grain and a projector vignette sit above the page but never take clicks. */
/* Both layers are promoted to their own compositor layer and never repaint on scroll. */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; transform: translateZ(0); will-change: transform; }
body::before { background: radial-gradient(ellipse at center, transparent 58%, rgba(31, 20, 12, .22) 100%); }
body::after { opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sidebar { color: var(--ink); background: var(--navy); border-right: 3px solid var(--ink); }
.brand-block { border-bottom: 3px solid var(--ink); }
.brand-block strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.brand-mark { overflow: visible; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; box-shadow: none; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-block span:last-child, .sidebar-status span, .nav-label { color: var(--muted); }
.nav-item { color: var(--ink); border: 3px solid transparent; border-radius: var(--wobble-sm); font-weight: 700; }
.nav-item:hover { border-color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.nav-item.active { color: var(--paper); border-color: var(--ink); background: var(--orange); box-shadow: 3px 3px 0 var(--ink); }
.nav-glyph { color: inherit; }
.nav-item b { color: var(--ink); border: 2px solid var(--ink); background: var(--paper); font-family: var(--display); font-weight: 400; }
.nav-item i { background: var(--quiet); }
/* The view title is the one showpiece: a cream title card inked onto a red banner. */
.topbar h1 { display: inline-block; margin: 2px 0 4px; padding: .12em .55em .2em; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: .02em; color: var(--paper); background: var(--orange); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: 5px 6px 0 var(--ink); transform: rotate(-1.2deg); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--ink); animation: title-card-in .42s cubic-bezier(.2, .9, .3, 1.2) both; }
.breadcrumb { color: var(--muted); font-style: italic; font-weight: 600; }
#view-description { color: var(--muted); font-style: italic; }
.primary-button, .ghost-button, .danger-button, .icon-button { border: 3px solid var(--ink); border-radius: var(--wobble-sm); box-shadow: 3px 4px 0 var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: .02em; transition: transform .08s ease, box-shadow .08s ease; }
.primary-button { color: var(--paper); background: var(--orange); -webkit-text-stroke: .6px var(--ink); }
.primary-button:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ink); }
.primary-button:active, .ghost-button:active, .icon-button:active, .danger-button:active { transform: translate(3px, 3px) scale(.98, 1.02); box-shadow: 0 1px 0 var(--ink); }
.ghost-button, .icon-button { color: var(--ink); background: var(--paper); }
.ghost-button:hover, .icon-button:hover { background: var(--mustard); }
.danger-button { color: var(--red); background: var(--paper); }
a.primary-button, a.ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
kbd { border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); background: var(--paper); box-shadow: 1px 2px 0 var(--ink); }
.panel, .split-panel, .application-workspace, .metric-grid article { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); }
.metric-grid article:nth-child(1) { background: var(--paper); }
.metric-grid article:nth-child(2) { background: var(--amber-soft); }
.metric-grid article:nth-child(3) { background: var(--blue-soft); }
.metric-grid article:nth-child(4) { background: var(--red-soft); }
.metric-grid strong { font-family: var(--display); font-weight: 400; font-size: 2.3rem; }
.panel-heading, .list-toolbar, .table-head, .index-heading, .status-tabs { border-bottom: 3px solid var(--ink); }
.panel-heading h2, .index-heading h2, .activity-header h2, .artifact-section h3, .next-step h3 { font-family: var(--display); font-weight: 400; }
.panel-heading p, .index-heading p { font-style: italic; }
.count-pill { color: var(--ink); border: 2px solid var(--ink); background: var(--mustard); box-shadow: 2px 2px 0 var(--ink); font-family: var(--display); font-weight: 400; }
.attention-item, .recent-item, .quick-actions button { border-bottom: 2px dashed var(--line-soft); }
.attention-mark { background: var(--orange); }
.quick-actions span, .attention-item > span:last-child, .text-button { color: var(--orange-dark); }
.text-button { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.quick-actions i { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--mustard); }
.latest-summary .empty-icon { color: var(--ink); border: 3px solid var(--ink); background: var(--mustard); }
.search-panel { color: var(--ink); border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--mustard); box-shadow: var(--shadow); }
.search-panel label { font-family: var(--display); font-weight: 400; }
.search-panel label, .search-panel > p, .search-row > span { color: var(--ink); }
.search-row input { color: var(--ink); font-weight: 700; }
.search-row input::placeholder { color: var(--muted); }
.search-panel > p { border-top: 2px dashed var(--ink); font-style: italic; }
.filter, .app-filter { color: var(--muted); font-weight: 700; }
.filter.active, .app-filter.active { color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--mustard); box-shadow: 2px 2px 0 var(--ink); }
.mini-search { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); }
.table-head { color: var(--ink); background: var(--navy); font-family: var(--display); font-weight: 400; }
.job-row, .application-row, .file-row { border-bottom: 2px dashed var(--line-soft); }
.job-prepare { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--mustard); box-shadow: 2px 3px 0 var(--ink); }
.job-prepare:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.job-row:hover, .application-row:hover, .file-row:hover { background: var(--amber-soft); }
.job-row.selected, .application-row.selected { background: var(--amber-soft); box-shadow: inset 6px 0 var(--orange); }
.company-mark, .file-icon { color: var(--paper); border: 2px solid var(--ink); border-radius: 50%; background: var(--teal); font-family: var(--display); font-weight: 400; }
.signal { color: var(--ink); border: 2px solid var(--ink); background: var(--paper); }
.signal.high { background: var(--green-soft); }
.detail-panel, .application-detail { background: var(--paper); }
.detail-panel { border-left: 3px solid var(--ink); }
.detail-kicker { color: var(--orange); font-style: italic; font-weight: 700; }
.detail-meta { border: 3px solid var(--ink); border-radius: var(--wobble-sm); background: var(--ink); }
.application-index { border-right: 3px solid var(--ink); }
.application-hero { color: var(--paper); border-bottom: 3px solid var(--ink); background: var(--teal); }
.application-hero h2 { -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.application-hero p, .application-meta { color: #f4e8c8; }
.status-chip { color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--blue-soft); font-weight: 700; }
.status-chip.drafted { background: var(--amber-soft); }
.status-chip.applied, .status-chip.interview, .status-chip.apply { background: var(--green-soft); }
.status-chip.rejected, .status-chip.skip { background: var(--red-soft); }
.status-chip.consider { background: var(--amber-soft); }
.artifact-row { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); box-shadow: 2px 3px 0 var(--line-soft); }
.file-actions button, .file-actions a { color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--amber-soft); }
.next-step { border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--amber-soft); box-shadow: 3px 4px 0 var(--ink); }
.next-step p, .readiness span { color: var(--muted); }
.progress-track { border: 2px solid var(--ink); background: var(--paper); }
.progress-track i { background: var(--orange); }
.upload-box { border: 3px dashed var(--ink); border-radius: var(--wobble); background: var(--paper); }
.upload-box label { color: var(--orange-dark); font-weight: 700; }
.tracking-card { border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--paper); box-shadow: 3px 4px 0 var(--ink); }
.tracking-heading h3 { font-family: var(--display); font-weight: 400; }
.database-badge { border: 2px solid var(--ink); color: var(--ink); background: var(--green-soft); }
.tracking-card label { color: var(--ink); font-size: .78rem; }
.tracking-card input, .tracking-card select, .tracking-card textarea { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.ai-panel { border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--paper); box-shadow: 4px 5px 0 var(--ink); }
.ai-panel-head h3 { font-size: 1.1rem; }
.ai-score strong { font-family: var(--display); font-weight: 400; font-size: 2.6rem; color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.ai-draft { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.evidence-item { border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); box-shadow: 2px 3px 0 var(--line-soft); }
.verify-banner { border: 3px solid var(--ink); border-radius: var(--wobble-sm); background: var(--mustard); box-shadow: 3px 4px 0 var(--ink); font-weight: 700; }
.activity-card { background: var(--paper); }
.state-pill { color: var(--ink); border: 2px solid var(--ink); background: var(--paper); font-weight: 700; }
.state-pill.running, .state-pill.queued { background: var(--amber-soft); }
.state-pill.complete { background: var(--green-soft); }
.state-pill.failed { background: var(--red-soft); }
.technical-log { border: 3px solid var(--ink); border-radius: var(--wobble-sm); }
.technical-log summary { color: var(--ink); border-bottom: 3px solid var(--ink); background: var(--mustard); font-family: var(--display); font-weight: 400; }
#activity-log { color: var(--paper); background: var(--ink); }
dialog { border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--paper); box-shadow: 8px 9px 0 var(--ink); }
dialog::backdrop { background: rgba(31, 20, 12, .45); }
.modal textarea { border: 2px solid var(--ink); }
.preview-header { border-bottom: 3px solid var(--ink); background: var(--navy); }
.preview-modal { background: var(--canvas); }
.preview-text { border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); }
#toast { border: 3px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: var(--mustard); box-shadow: 4px 5px 0 var(--ink); font-family: var(--display); font-weight: 400; }
@media (max-width: 860px) {
  .sidebar { border-right: 0; border-bottom: 3px solid var(--ink); }
  .detail-panel, .application-index { border-left: 0; border-right: 0; }
  .topbar h1 { transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar h1 { animation: none; }
}
@media (forced-colors: active) {
  body::before, body::after { display: none; }
}
/* BidSharpe initial setup and shared icon system. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button svg, a.ghost-button svg, a.primary-button svg, .upload-box label svg, .text-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.primary-button, .ghost-button, .danger-button, .text-button, .job-prepare, .file-actions button, .file-actions a, .upload-box label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.icon-button { display: inline-grid; place-items: center; }
.icon-button svg { width: 18px; height: 18px; }
.nav-glyph { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.quick-actions i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search-row > svg, .mini-search > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filter, .app-filter { display: inline-flex; align-items: center; gap: 6px; }
.filter svg, .app-filter svg { width: 14px; height: 14px; }
.attention-item > span:last-child, .recent-item > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.attention-item svg, .recent-item svg, .application-side svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.application-side small { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.dialog-close, .dialog-close-inline { display: grid; place-items: center; }
.dialog-close svg, .dialog-close-inline svg { width: 20px; height: 20px; }
.sidebar-account { margin-top: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr) 34px; align-items: center; gap: 9px; padding: 15px 5px 0; border-top: 2px solid var(--ink); }
.sidebar-account > div { min-width: 0; }
.sidebar-account strong, .sidebar-account span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { font-size: .76rem; }
.sidebar-account div span { margin-top: 2px; color: var(--muted); font-size: .66rem; }
.account-avatar, .sidebar-account .account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 8px; color: white; background: var(--orange); font-weight: 900; box-shadow: 2px 2px 0 var(--ink); }
.sidebar-account button { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.sidebar-account button svg { width: 16px; height: 16px; }
.entry-gate, .onboarding-gate { min-height: calc(100vh - 3px); background: var(--canvas); }
.entry-brand { display: flex; align-items: center; gap: 10px; }
.entry-brand img { width: 42px; height: 42px; }
.entry-brand strong { font: 400 1.15rem var(--display); letter-spacing: .01em; }
.entry-brand > span { margin-left: 6px; color: var(--muted); font-size: .78rem; }
.entry-screen { min-height: 100vh; background: var(--canvas); }
.entry-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 2px solid var(--ink); background: var(--paper); }
.entry-header .entry-brand { color: inherit; text-decoration: none; }
.entry-header > a:last-child { text-decoration: none; }
.entry-layout { width: min(1180px, calc(100% - 44px)); min-height: calc(100vh - 90px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .72fr); align-items: center; gap: clamp(40px, 8vw, 110px); margin: auto; padding: 56px 0 74px; }
.entry-layout .entry-card .entry-form { display: grid; gap: 14px; }
.entry-layout .entry-card .entry-form h2, .entry-layout .entry-card .entry-form p { margin: 0; }
.entry-layout .entry-card .entry-form .full-button { margin-top: 0; }
.entry-pitch .eyebrow, .setup-shell .eyebrow, .setup-step .eyebrow { display: block; margin-bottom: 14px; color: #ad3e12; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.entry-pitch h1, .setup-shell .setup-aside h1 { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; color: var(--paper); text-shadow: 4px 5px 0 var(--ink); max-width: 680px; margin: 0; font: 400 clamp(2.8rem, 6vw, 5.6rem)/.94 var(--display); letter-spacing: .01em; }
.entry-pitch h1 em { color: var(--orange); font-style: normal; }
.entry-pitch > p { max-width: 620px; margin: 25px 0; color: var(--muted); font-size: 1.04rem; line-height: 1.65; }
.entry-pitch ul { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.entry-pitch li { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 800; }
.entry-pitch li svg { width: 28px; height: 28px; padding: 5px; border: 2px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--mustard); fill: none; stroke: currentColor; stroke-width: 2; box-shadow: 2px 2px 0 var(--ink); }
.entry-card, .setup-card { border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 8px 9px 0 var(--ink); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; border-bottom: 2px solid var(--ink); background: var(--amber-soft); border-radius: 13px 13px 0 0; }
.auth-tabs button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 2px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: .78rem; font-weight: 900; }
.auth-tabs button.active { border-color: var(--ink); color: var(--ink); background: white; box-shadow: 2px 2px 0 var(--ink); }
.entry-form { padding: 30px; }
.entry-form h2, .setup-step h2 { margin: 0; font: 400 1.6rem var(--display); letter-spacing: .01em; }
.entry-form > p, .setup-step > p:not(.eyebrow) { margin: 8px 0 24px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.entry-form label, .setup-step label { display: grid; gap: 7px; margin: 16px 0; color: var(--ink); font-size: .76rem; font-weight: 850; }
.entry-form input, .setup-step input, .setup-step select { min-height: 44px; width: 100%; border: 2px solid var(--ink); border-radius: 8px; padding: 0 12px; color: var(--ink); background: var(--paper); outline: 0; }
.entry-form input:focus, .setup-step input:focus, .setup-step select:focus { box-shadow: 3px 3px 0 var(--mustard); }
.entry-form label small, .setup-step label small { color: var(--quiet); font-size: .65rem; font-weight: 500; }
.entry-form .primary-button, .setup-step > .primary-button, #complete-setup { width: 100%; margin-top: 10px; }
.setup-header { min-height: 74px; padding: 12px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 2px solid var(--ink); background: var(--navy); }
.setup-header > span { padding: 6px 9px; border: 2px solid var(--ink); border-radius: 7px; background: var(--mustard); font-size: .7rem; font-weight: 900; box-shadow: 2px 2px 0 var(--ink); }
.setup-shell { width: min(1080px, calc(100% - 44px)); min-height: calc(100vh - 78px); display: grid; grid-template-columns: minmax(320px, .8fr) minmax(440px, 1fr); align-items: center; gap: clamp(44px, 8vw, 100px); margin: auto; padding: 46px 0 68px; }
.setup-shell .setup-aside h1 { font-size: clamp(2.4rem, 4.5vw, 4.3rem); }
.setup-shell .setup-aside ol { display: grid; gap: 11px; margin: 34px 0 0; padding: 0; list-style: none; }
.setup-shell .setup-aside li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; padding: 9px; border: 2px solid transparent; border-radius: 9px; color: var(--quiet); }
.setup-shell .setup-aside li b { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid currentColor; border-radius: 50%; }
.setup-shell .setup-aside li strong, .setup-shell .setup-aside li small { display: block; }
.setup-shell .setup-aside li small { margin-top: 2px; font-size: .68rem; }
.setup-shell .setup-aside li.active { border-color: var(--ink); color: var(--ink); background: var(--amber-soft); box-shadow: 3px 3px 0 var(--ink); }
.setup-shell .setup-aside li.active b { color: white; background: var(--orange); }
.setup-shell .setup-aside li.complete { color: var(--green); }
.setup-card { min-height: 530px; display: grid; align-items: center; }
.setup-step { padding: clamp(28px, 5vw, 46px); }
.setup-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 24px; border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--mustard); box-shadow: 3px 4px 0 var(--ink); }
.setup-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.setup-icon.success { color: white; background: var(--green); }
.setup-actions { grid-template-columns: 120px 1fr; }
.setup-actions button { width: 100%; }
@media (max-width: 860px) {
  .entry-layout, .setup-shell { grid-template-columns: 1fr; }
  .entry-layout { padding-top: 38px; }
  .entry-pitch h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }
  .setup-shell .setup-aside h1 { font-size: 2.7rem; }
  .setup-shell .setup-aside ol { grid-template-columns: repeat(3, 1fr); }
  .setup-shell .setup-aside li { grid-template-columns: 30px 1fr; padding: 7px; }
  .setup-shell .setup-aside li b { width: 28px; height: 28px; }
  .sidebar-account { margin: 0 0 0 auto; padding: 0; border: 0; grid-template-columns: auto; }
  .sidebar-account > .account-avatar, .sidebar-account > div { display: none; }
}
@media (max-width: 560px) {
  .entry-brand > span { display: none; }
  .entry-layout, .setup-shell { width: min(100% - 26px, 1180px); }
  .entry-layout { gap: 35px; padding-block: 35px; }
  .entry-card, .setup-card { box-shadow: 5px 6px 0 var(--ink); }
  .entry-form, .setup-step { padding: 24px 20px; }
  .setup-shell .setup-aside ol { grid-template-columns: 1fr; }
  .setup-shell .setup-aside li:not(.active) span { display: none; }
}
/* Public BidSharpe story: the application pipeline is the visual anchor. */
.public-site { min-height: 100vh; color: var(--ink); background: var(--canvas); }
.public-nav { position: sticky; top: 0; z-index: 20; min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 10px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 2px solid var(--ink); background: var(--canvas); }
.public-nav .entry-brand, .public-footer .entry-brand { color: inherit; text-decoration: none; }
.public-nav nav { display: flex; align-items: center; gap: 26px; }
.public-nav nav a { color: var(--muted); font-size: .78rem; font-weight: 800; text-decoration: none; }
.public-nav nav a:hover { color: var(--orange-dark); }
.public-nav > div { display: flex; justify-content: flex-end; gap: 9px; }
.public-nav button { min-height: 38px; }
.public-hero { width: min(1180px, calc(100% - 44px)); min-height: min(760px, calc(100vh - 72px)); display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(430px, .8fr); align-items: center; gap: clamp(45px, 7vw, 90px); margin: auto; padding: 66px 0 78px; }
.hero-note { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px !important; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink) !important; background: var(--mustard); font-size: .72rem !important; font-weight: 900; box-shadow: 2px 3px 0 var(--ink); }
.hero-note svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.public-hero .entry-pitch h1 { font-size: clamp(3rem, 6vw, 5.9rem); }
.public-hero .entry-pitch h1 span { color: var(--orange); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-actions a { min-height: 44px; text-decoration: none; }
.entry-pitch > small { display: block; margin-top: 15px; color: var(--quiet); font-size: .69rem; }
.pipeline-demo { position: relative; padding: 16px; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 9px 10px 0 var(--ink); transform: rotate(1deg); }
.pipeline-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 3px 15px; border-bottom: 2px solid var(--ink); font-size: .74rem; font-weight: 900; }
.pipeline-top b { padding: 4px 7px; border: 1px solid var(--ink); border-radius: 99px; color: #0c5b3b; background: #b9e4ca; font-size: .62rem; }
.pipeline-demo article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 16px 4px; }
.pipeline-demo > i { display: block; height: 2px; margin-left: 17px; background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px); }
.pipeline-number { display: grid; width: 31px; height: 31px; place-items: center; border: 2px solid var(--ink); border-radius: 8px; background: var(--mustard); font-weight: 950; box-shadow: 2px 2px 0 var(--ink); }
.pipeline-demo article small, .pipeline-demo article strong, .pipeline-demo article p { display: block; }
.pipeline-demo article small { color: var(--orange-dark); font-size: .62rem; font-weight: 850; }
.pipeline-demo article strong { margin-top: 3px; font-size: .82rem; }
.pipeline-demo article p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.pipeline-state { padding: 5px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--amber-soft); font-size: .63rem; font-weight: 850; }
.pipeline-state.ready { background: #b9e4ca; }
.public-section { padding: 92px max(24px, calc((100vw - 1180px) / 2)); border-top: 2px solid var(--ink); }
.section-intro { max-width: 720px; }
.section-intro > span { color: var(--orange-dark); font-size: .75rem; font-weight: 900; }
.section-intro h2, .control-board h2, .public-cta h2 { margin: 10px 0 14px; font: 400 clamp(2rem, 4vw, 3.6rem)/1 var(--display); letter-spacing: .01em; }
.section-intro p, .control-board > div > p { color: var(--muted); line-height: 1.65; }
.process-section, .control-section, .pricing-section { background: var(--canvas); }
.process-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 52px 0 0; padding: 0; border: 2px solid var(--ink); border-radius: 13px; background: var(--ink); box-shadow: 7px 8px 0 var(--orange); list-style: none; overflow: hidden; }
.process-line li { position: relative; min-height: 250px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 23px 18px; background: #fff8eb; }
.process-line li + li { border-left: 2px solid var(--ink); }
.process-line li > b { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--mustard); }
.process-line svg { width: 27px; height: 27px; margin: 2px 0 28px; fill: none; stroke: var(--orange); stroke-width: 1.8; }
.process-line h3 { margin: 0 0 9px; font-size: 1rem; }
.process-line p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.control-board { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .7fr); align-items: center; gap: clamp(50px, 9vw, 120px); }
.control-stamp { display: inline-block; padding: 6px 9px; border: 2px solid var(--ink); border-radius: 7px; color: white; background: var(--orange); font-size: .7rem; font-weight: 900; box-shadow: 2px 2px 0 var(--ink); }
.control-board ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.control-board li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; }
.control-board li > svg { width: 36px; height: 36px; padding: 7px; border: 2px solid var(--ink); border-radius: 9px; background: white; fill: none; stroke: currentColor; stroke-width: 2; box-shadow: 2px 2px 0 var(--ink); }
.control-board li strong, .control-board li span { display: block; }
.control-board li span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.control-board li strong { margin-bottom: 2px; color: var(--ink); }
.boundary-visual { padding: 19px; border: 3px solid var(--ink); border-radius: 22px; background: var(--orange); box-shadow: 10px 11px 0 var(--ink); transform: rotate(-1.5deg); }
.boundary-visual > span, .boundary-visual > p { display: block; color: #5a2610; font-size: .7rem; font-weight: 900; text-align: center; }
.boundary-visual > div { display: grid; gap: 8px; margin: 13px 0; padding: 25px; border: 2px solid var(--ink); border-radius: 13px; background: white; }
.boundary-visual b { margin-bottom: 8px; font-size: 1.2rem; }
.boundary-visual small { padding: 9px; border: 1px solid var(--ink); border-radius: 6px; background: #fff8eb; font-weight: 750; }
.pricing-section .section-intro { margin-inline: auto; text-align: center; }
.price-strip { max-width: 1120px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; margin: 45px auto 0; }
.price-strip article { min-height: 390px; flex-direction: column; padding: 28px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 5px 6px 0 var(--ink); }
.price-strip article { position: relative; }
.price-name { min-height: 66px; padding-bottom: 17px; border-bottom: 2px solid var(--ink); text-align: center; }
.price-name span { font: 400 1.15rem var(--display); }
.price-name p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; }
.price-value { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-top: 21px; font: 400 2.8rem var(--display); text-align: center; }
.price-value small { color: var(--muted); font: 700 .7rem system-ui, sans-serif; }
.price-strip ul { display: grid; gap: 10px; padding-left: 19px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.price-strip button { width: 100%; }
.price-strip article button { margin-top: auto; }
.price-strip .featured-price { background: var(--amber-soft); }
.managed-price { background: #fff8eb !important; }
.price-badge { position: absolute; top: -14px; right: 17px; padding: 5px 8px; border: 2px solid var(--ink); border-radius: 7px; color: var(--ink); background: #b9e4ca; font-size: .65rem; font-weight: 900; box-shadow: 2px 2px 0 var(--ink); }
.byok-note { max-width: 1120px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; margin: 22px auto 0; padding: 14px 17px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.byok-note svg { width: 34px; height: 34px; padding: 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--mustard); fill: none; stroke: currentColor; stroke-width: 2; }
.byok-note p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.byok-note strong { color: var(--ink); }
.public-cta { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 55px max(24px, calc((100vw - 1180px) / 2)); border-top: 2px solid var(--ink); background: var(--paper); }
.public-cta img { width: 68px; height: 68px; }
.public-cta h2 { max-width: 760px; margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.public-cta p { margin: 7px 0 0; color: var(--muted); }
.public-footer { min-height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 17px max(24px, calc((100vw - 1180px) / 2)); border-top: 2px solid var(--ink); background: var(--paper); }
.public-footer p, .public-footer > span { color: var(--muted); font-size: .72rem; }
.public-footer > span { text-align: right; }
.auth-dialog { width: min(440px, calc(100vw - 28px)); padding: 0; overflow: visible; }
.auth-dialog[open] { display: block; }
.auth-dialog .auth-close { z-index: 2; top: -17px; right: -15px; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: white; box-shadow: 2px 2px 0 var(--ink); }
.auth-dialog .auth-tabs { padding-right: 30px; }
.auth-dialog .entry-form { max-height: min(650px, calc(100vh - 120px)); overflow-y: auto; }
.public-nav.is-scrolled { box-shadow: 0 5px 0 rgba(42, 29, 23, .12); }
.pipeline-demo:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 11px 13px 0 var(--ink); }
.process-line li:hover { transform: translateY(-4px); z-index: 1; }
.price-strip article:hover { transform: translateY(-5px); box-shadow: 7px 9px 0 var(--ink); }
.boundary-visual:hover { transform: rotate(0deg) translateY(-4px); }
.public-site:not([hidden]) .pipeline-demo > i { transform-origin: left; }
.auth-dialog[open] { animation: dialog-enter .24s cubic-bezier(.2,.8,.2,1); }
.auth-dialog[open]::backdrop { animation: backdrop-enter .2s ease; }
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes connector-draw { from { transform: scaleX(0); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes backdrop-enter { from { opacity: 0; } }
@media (max-width: 900px) {
  .public-nav { grid-template-columns: 1fr auto; }
  .public-nav nav { display: none; }
  .public-hero, .control-board { grid-template-columns: 1fr; }
  .public-hero { padding-top: 46px; }
  .pipeline-demo { max-width: 620px; transform: none; }
  .process-line { grid-template-columns: 1fr 1fr; }
  .process-line li:nth-child(3) { border-left: 0; border-top: 2px solid var(--ink); }
  .process-line li:nth-child(4) { border-top: 2px solid var(--ink); }
  .price-strip { grid-template-columns: 1fr; max-width: 560px; }
  .public-cta { grid-template-columns: 60px 1fr; }
  .public-cta button { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 600px) {
  .public-nav { min-height: 64px; padding-inline: 13px; }
  .public-nav .entry-brand img { width: 36px; height: 36px; }
  .public-nav > div .ghost-button { display: none; }
  .public-nav > div .primary-button { padding-inline: 10px; }
  .public-hero { width: calc(100% - 26px); min-height: auto; padding-block: 42px 55px; }
  .public-hero .entry-pitch h1 { font-size: clamp(2.55rem, 15vw, 4rem); }
  .hero-actions { display: grid; }
  .pipeline-demo { padding: 11px; box-shadow: 6px 7px 0 var(--ink); }
  .pipeline-demo article { grid-template-columns: 31px minmax(0, 1fr); }
  .pipeline-demo article > span:last-child { grid-column: 2; width: fit-content; }
  .public-section { padding-block: 65px; }
  .process-line, .price-strip { grid-template-columns: 1fr; }
  .process-line li + li { border-left: 0; border-top: 2px solid var(--ink); }
  .process-line li { min-height: 205px; }
  .public-cta { grid-template-columns: 48px 1fr; padding-block: 40px; }
  .public-cta img { width: 46px; height: 46px; }
  .public-footer { grid-template-columns: 1fr; text-align: center; }
  .public-footer .entry-brand { justify-content: center; }
  .public-footer > span { text-align: center; }
}
button:disabled, button:disabled:hover, button:disabled:active { cursor: not-allowed; opacity: .48; transform: none; box-shadow: 1px 1px 0 var(--ink); }
/* Profile details, documents, and ranking controls. */
.job-actions { display: flex; justify-content: flex-end; gap: 6px; }
.job-rank, .job-prepare { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 9px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: var(--paper); box-shadow: 2px 3px 0 var(--ink); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.job-rank { background: var(--blue-soft); }
.job-rank svg, .job-prepare svg { width: 14px; height: 14px; }
.job-rank:hover, .job-prepare:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.rank-batch { min-height: 36px; margin-left: auto; white-space: nowrap; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.link-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 10px 12px 12px; border: 2px dashed var(--line-soft); border-radius: var(--wobble-sm); }
.link-fields legend { padding: 0 6px; font-family: var(--display); font-size: .78rem; }
.tracking-card small { color: var(--muted); font-weight: 400; }
.document-upload .file-drop { padding: 14px; border: 3px dashed var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; cursor: pointer; }
.document-upload .file-drop input { margin-top: 8px; border: 0; background: transparent; padding: 0; }
.documents-panel, .details-panel { padding-bottom: 6px; }
.document-list { display: grid; gap: 10px; padding: 0 16px 12px; }
.document-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); }
.document-item strong { display: block; overflow-wrap: anywhere; }
.document-item small { color: var(--muted); }
.document-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.document-actions .primary-button, .document-actions .ghost-button { min-height: 34px; font-size: .78rem; }
.import-result { margin: 0 16px 16px; }
.import-result h3 { margin: 4px 0; }
.proposal-details { margin: 10px 0; padding: 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--amber-soft); }
.proposal-details p { margin: 0 0 6px; }
.proposal { background: #fffaf0; }
@media (max-width: 1100px) {
  .jobs-head, .job-row { grid-template-columns: minmax(0, 1fr) 58px 150px; }
  .jobs-head span:nth-child(3), .jobs-head span:nth-child(4), .job-row .source, .job-row .date { display: none; }
}
@media (max-width: 860px) {
  .field-pair, .link-fields { grid-template-columns: 1fr; }
  .rank-batch { margin-left: 0; }
}
@media (max-width: 620px) {
  #toast { left: 12px; right: 12px; bottom: 12px; }
}
/* QA fixes: icon sizing, overflow, focus, mobile layout, dialogs. */
:where(svg:has(> use)) { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.file-actions svg, .artifact-row svg, .document-actions svg, .price-strip svg, .public-cta svg { width: 15px; height: 15px; }
.file-name > span, .artifact-row > span { min-width: 0; }
.file-actions { flex-wrap: wrap; justify-content: flex-end; }
.panel, .profile-column > *, .evidence-list > *, .document-list > * { min-width: 0; }
.evidence-list, .document-list { grid-template-columns: minmax(0, 1fr); }
.evidence-item header { min-width: 0; flex-wrap: wrap; }
.evidence-item strong, .evidence-item p, .proposal-details p, .ai-result, .application-hero h2, .detail-panel h2, .job-main strong, .application-main strong { overflow-wrap: anywhere; min-width: 0; }
.application-side { display: grid; gap: 6px; justify-items: end; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.search-row:focus-within, .mini-search:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.nav-item.active:focus-visible { outline-color: var(--mustard); }
.checkbox-label { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px !important; font-weight: 600; }
.checkbox-label input { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 2px 0 0; accent-color: var(--orange); }
.checkbox-label a { color: var(--orange-dark); font-weight: 700; }
#toast { margin: 0; inset: auto 22px 22px auto; overflow: visible; }
#toast:popover-open { display: block; }
.preview-modal { overflow: hidden; }
.preview-body { height: calc(100% - 66px); overflow: hidden; }
.preview-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.entry-header { flex-wrap: wrap; row-gap: 8px; }
.price-strip a, .price-strip button, .price-strip span.ghost-button, .public-cta a, .public-cta button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
/* Buttons animate transform only; shadow changes are instant to avoid repaints. */
button, a.ghost-button, a.primary-button, .primary-button, .ghost-button, .danger-button, .icon-button, .job-rank, .job-prepare { transition: transform .1s ease, background-color .15s ease, color .15s ease; }
@media (max-width: 1100px) and (min-width: 621px) {
  .jobs-head, .job-row { grid-template-columns: minmax(0, 1fr) 58px 150px; }
}
@media (max-width: 620px) {
  .job-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .job-row .job-main { grid-column: 1 / -1; }
  .job-row .job-actions { justify-content: flex-end; }
  .file-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .file-row > span { display: none; }
  .file-row > .file-name, .file-row > .file-actions, .file-row > .application-name { display: flex; }
  .file-row > .application-name { display: block; color: var(--muted); font-size: .72rem; }
  .file-row > .application-name br { display: none; }
  .file-actions { justify-content: flex-start; }
  #toast { inset: auto 12px 12px 12px; max-width: none; }
  .price-strip, .public-cta { grid-template-columns: minmax(0, 1fr) !important; }
  .public-nav { grid-template-columns: auto minmax(0, 1fr); }
  .public-nav nav { display: none; }
}
/* The grain overlay costs a full-screen layer; phones and reduced-data users skip it. */
@media (max-width: 860px), (prefers-reduced-data: reduce) {
  body::after { display: none; }
}
/* Profile blocks: one frame per panel, even 18px rhythm, no card-in-card shadows. */
.profile-pane .panel-heading, .account-panel > .panel-heading { padding: 18px; border-bottom: 3px solid var(--ink); }
.profile-pane .tracking-card, .account-panel .tracking-card { margin: 18px; padding: 16px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); box-shadow: none; background: #fffaf0; }
.profile-pane .document-list, .profile-pane .evidence-list { padding: 0 18px 18px; gap: 12px; }
.profile-pane .empty-state { margin: 0 18px 18px; padding: 22px 16px; }
.profile-pane .import-result { margin: 0 18px 18px; }
.profile-pane .import-result:empty { display: none; }
.document-item { box-shadow: none; background: #fffaf0; }
/* Tailored CV: an on-screen paper sheet that also prints cleanly. */
.cv-draft { max-width: 780px; margin: 6px 0 12px; padding: 30px 34px; border: 2px solid var(--ink); border-radius: 6px; color: #1b130c; background: #fffdf6; box-shadow: 4px 5px 0 var(--line-soft); font-size: .86rem; line-height: 1.5; }
.cv-draft .cv-head { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.cv-draft h2 { margin: 0; font-size: 1.6rem; }
.cv-draft .cv-headline { margin: 4px 0 0; font-weight: 700; }
.cv-draft .cv-links { margin: 4px 0 0; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.cv-draft .cv-summary { margin: 12px 0 0; }
.cv-draft section { margin-top: 16px; }
.cv-draft h3 { margin: 0 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--line-soft); font-size: .9rem; letter-spacing: .03em; }
.cv-draft article { margin-bottom: 10px; }
.cv-draft article header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.cv-draft article header span { color: var(--muted); font-size: .76rem; }
.cv-draft ul { margin: 4px 0 0; padding-left: 18px; }
.cv-draft p { margin: 0; }
#print-area { display: none; }
@media print {
  @page { margin: 14mm; }
  body.printing-cv { background: #fff; }
  body.printing-cv::before, body.printing-cv::after { display: none; }
  body.printing-cv > *:not(#print-area) { display: none !important; }
  body.printing-cv #print-area { display: block; }
  .cv-print { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff; color: #000; font-size: 10.5pt; }
  .cv-print h2 { font-size: 20pt; }
  .cv-print h3 { font-size: 11.5pt; border-bottom-color: #999; }
  .cv-print article { break-inside: avoid; }
}
/* Landing motion: short transform/opacity entrances on promoted layers only. */
.public-site:not([hidden]) .entry-pitch { animation: hero-copy-enter .45s cubic-bezier(.2,.8,.2,1) both; will-change: transform, opacity; }
.public-site:not([hidden]) .pipeline-demo { animation: hero-demo-enter .5s .06s cubic-bezier(.2,.8,.2,1) both; will-change: transform, opacity; }
.public-site:not([hidden]) .pipeline-demo > i { animation: none; }
@keyframes hero-copy-enter { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.motion-ready .public-section.motion-pending, .motion-ready .public-cta.motion-pending, .motion-ready .public-footer.motion-pending { opacity: 0; transform: translate3d(0, 14px, 0); will-change: transform, opacity; }
.motion-ready .public-section.is-visible, .motion-ready .public-cta.is-visible, .motion-ready .public-footer.is-visible { opacity: 1; transform: none; transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.pipeline-demo, .process-line li, .price-strip article, .boundary-visual { transition: transform .2s ease; }
/* Closing call to action: a centred red title card. */
.public-site .public-cta { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 76px 24px 84px; border-block: 3px solid var(--ink); background: var(--orange); text-align: center; }
.public-site .public-cta img { width: 84px; height: 84px; transform: rotate(-6deg); filter: drop-shadow(3px 4px 0 var(--ink)); }
.public-site .public-cta h2 { max-width: 16ch; margin: 0; color: var(--paper); font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--ink); }
.public-site .public-cta p { margin: 6px 0 0; font-size: 1.05rem; font-style: italic; }
.public-site .public-cta a.primary-button, .public-site .public-cta button { width: auto; min-width: 220px; margin-top: 8px; color: var(--ink); background: var(--mustard); -webkit-text-stroke: 0; }
.public-site .public-cta a.primary-button:hover { background: #f0b83a; }
@media (max-width: 620px) {
  .public-site .public-cta { padding: 56px 18px 62px; }
  .public-site .public-cta a.primary-button { width: 100%; }
}
/* AI usage: token counts and allowance for the signed-in user. */
.usage-body { display: grid; gap: 14px; padding: 18px; }
.usage-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usage-stats div { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.usage-stats strong { font-family: var(--display, inherit); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.usage-stats span, .usage-caption { color: var(--muted); font-size: .8rem; }
.usage-caption { margin: 0; }
.usage-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.usage-table th, .usage-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.usage-table th:first-child, .usage-table td:first-child { text-align: left; }
.usage-table thead th { font-size: .74rem; color: var(--muted); }
.usage-body h3 { margin: 4px 0 0; font-size: .95rem; }
.usage-recent { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.usage-recent li { display: grid; grid-template-columns: 1.2fr 1.6fr .8fr 1.4fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-variant-numeric: tabular-nums; }
.usage-recent time { color: var(--muted); text-align: right; }
@media (max-width: 620px) {
  .usage-recent li { grid-template-columns: 1fr 1fr; }
  .usage-table { font-size: .76rem; }
}
/* Profile forms sit directly on their panel: one frame, no card inside a card. */
.profile-pane .panel > form.tracking-card { margin: 0; padding: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.profile-pane .panel > form.tracking-card + * { border-top: 2px dashed var(--line); padding-top: 18px; }
.profile-pane .panel > form.tracking-card + .import-result:empty { border-top: 0; }
.profile-pane .panel > .document-list:empty, .profile-pane .panel > .evidence-list:empty { display: none; }
.account-panel { column-gap: 18px; }
.account-panel .tracking-card { align-self: stretch; margin: 18px 0 0; }
@media (max-width: 980px) {
  .account-panel { grid-template-columns: minmax(0, 1fr); }
}
/* Sidebar navigation: one fixed badge column so counts and the activity dot line up. */
@media (min-width: 1121px) {
  .sidebar .nav-item { grid-template-columns: 24px minmax(0, 1fr) 34px; gap: 10px; min-height: 44px; padding: 0 10px 0 12px; transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .18s ease, color .18s ease, box-shadow .22s cubic-bezier(.2,.8,.2,1); }
  .sidebar .nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .nav-item > b, .sidebar .nav-item > i { grid-column: 3; justify-self: center; }
  .sidebar .nav-item > b { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper); font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .18s ease; }
  .sidebar .nav-item > i { width: 9px; height: 9px; }
  .sidebar .nav-item .nav-glyph { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .sidebar .nav-item:hover { transform: translateX(3px); }
  .sidebar .nav-item:hover .nav-glyph { transform: rotate(-10deg) scale(1.12); }
  .sidebar .nav-item:hover > b { transform: scale(1.08); }
  .sidebar .nav-item:active { transform: translateX(3px) translateY(1px) scale(.98); }
  .sidebar .nav-item.active { transform: translateX(2px) rotate(-.6deg); }
  .sidebar .nav-item.active > b { background: var(--mustard); }
  @keyframes nav-enter { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }
  .sidebar .primary-nav .nav-item { animation: nav-enter .38s cubic-bezier(.2,.8,.2,1) both; }
  .sidebar .primary-nav .nav-item:nth-of-type(2) { animation-delay: .04s; }
  .sidebar .primary-nav .nav-item:nth-of-type(3) { animation-delay: .08s; }
  .sidebar .primary-nav .nav-item:nth-of-type(4) { animation-delay: .12s; }
  .sidebar .primary-nav .nav-item:nth-of-type(5) { animation-delay: .16s; }
  .sidebar .primary-nav .nav-item:nth-of-type(6) { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item, .sidebar .nav-item * { animation: none !important; transition: none !important; transform: none !important; }
}
/* Billing: wallet and packs on top, usage and history below. */
.billing-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.billing-layout .panel-heading { padding: 18px; border-bottom: 3px solid var(--ink); }
.wallet-body { display: grid; gap: 14px; padding: 18px; }
.wallet-balance { display: grid; gap: 4px; padding: 18px 20px; border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--mustard); box-shadow: 4px 5px 0 var(--ink); transform: rotate(-1deg); }
.wallet-balance.is-empty { background: #f3d2c8; }
.wallet-balance span { font-size: .8rem; font-weight: 700; }
.wallet-balance strong { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.wallet-facts div { padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.wallet-facts dt { color: var(--muted); font-size: .74rem; }
.wallet-facts dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-empty { margin: 0; color: var(--red); font-weight: 700; }
.pack-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; }
.pack-card { display: grid; justify-items: start; gap: 4px; min-height: 132px; padding: 16px; border: 3px solid var(--ink); border-radius: var(--wobble); color: var(--ink); background: var(--paper); box-shadow: 3px 4px 0 var(--ink); text-align: left; }
.pack-card strong { font-family: var(--display); font-size: 2rem; font-weight: 400; line-height: 1; }
.pack-card span { font-weight: 700; font-size: .86rem; }
.pack-card small { color: var(--muted); font-size: .76rem; }
.pack-card:not(:disabled):hover { box-shadow: 5px 7px 0 var(--ink); background: #fffaf0; }
.pack-card:not(:disabled):active { transform: translate(1px, 1px); box-shadow: 1px 2px 0 var(--ink); }
.pack-card:last-of-type { background: var(--mustard); }
.pack-note { grid-column: 1 / -1; }
.billing-layout .usage-panel, .billing-layout .history-panel { align-self: stretch; }
.credit-history { display: grid; margin: 0; padding: 8px 18px 18px; list-style: none; }
.credit-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.credit-history li span { display: grid; font-weight: 700; font-size: .86rem; }
.credit-history li span small { color: var(--muted); font-weight: 400; }
.credit-history li strong { font-variant-numeric: tabular-nums; }
.credit-history li.is-credit strong { color: var(--green); }
.credit-history li time { grid-column: 1 / -1; color: var(--muted); font-size: .74rem; }
.credit-history .history-empty { display: block; color: var(--muted); }
@media (max-width: 1120px) {
  .billing-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pack-list { grid-template-columns: 1fr; }
  .pack-card { min-height: 0; }
}
/* AI payment mode: two title cards, then the settings for the chosen mode. */
.billing-layout .ai-mode-panel { grid-column: 1 / -1; }
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 18px 0; }
.mode-switch button { display: grid; gap: 4px; padding: 16px 18px; border: 3px solid var(--ink); border-radius: var(--wobble); color: var(--ink); background: var(--paper); box-shadow: 3px 4px 0 var(--ink); text-align: left; }
.mode-switch button strong { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.mode-switch button span { color: var(--muted); font-size: .82rem; }
.mode-switch button:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--ink); }
.mode-switch button.active { background: var(--mustard); transform: rotate(-.6deg); }
.mode-switch button.active span { color: var(--ink); }
.mode-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding: 18px; animation: view-enter .28s cubic-bezier(.2,.8,.2,1); }
.settings-form { display: grid; gap: 12px; align-content: start; padding: 16px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.settings-form h3 { margin: 0; font-size: 1rem; }
.settings-form label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }
.settings-form label small { color: var(--muted); font-weight: 400; }
.settings-form input:not([type=checkbox]), .settings-form select { width: 100%; padding: 8px 9px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: var(--paper); }
.settings-form .usage-caption { margin: 0; }
.switch-row { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; }
.switch-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.switch-row span { display: grid; gap: 2px; }
.limit-meter { display: grid; gap: 5px; font-size: .78rem; }
.limit-meter i { display: block; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.limit-meter b { display: block; height: 100%; background: var(--mustard); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.key-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #dcecdf; }
.key-status.is-bad { background: #f3d2c8; }
.key-status.is-off { background: #fbe9c4; }
.key-status button { flex: none; }
.plan-offer .draft-mode { margin-top: 8px; }
.plan-offer .draft-mode small { font-size: .8rem; font-weight: 700; }
.key-status div { display: grid; gap: 2px; }
.key-status span { font-size: .8rem; }
.save-card { display: flex; align-items: center; gap: 8px; margin: 0 18px 18px; font-size: .84rem; font-weight: 700; }
.save-card input { width: 18px; height: 18px; accent-color: var(--orange); }
@media (max-width: 620px) {
  .mode-switch { grid-template-columns: 1fr; }
}
.mode-body > .settings-form:only-child { max-width: 760px; }
/* Profile: identity header, section tabs, one focused pane at a time. */
.profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-bottom: 18px; padding: 22px 24px; border: 3px solid var(--ink); border-radius: var(--wobble); background: var(--paper); box-shadow: 5px 6px 0 var(--ink); }
.profile-avatar { display: grid; place-items: center; width: 76px; height: 76px; border: 3px solid var(--ink); border-radius: 50%; color: var(--paper); background: var(--orange); box-shadow: 3px 4px 0 var(--ink); font-family: var(--display); font-size: 2.2rem; transform: rotate(-4deg); }
.profile-identity { display: grid; gap: 6px; min-width: 0; }
.profile-identity h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); overflow-wrap: anywhere; }
.profile-identity p { margin: 0; color: var(--muted); font-style: italic; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.profile-chips li { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fffaf0; font-size: .76rem; font-weight: 700; }
.profile-strength { display: grid; justify-items: center; gap: 6px; font-size: .74rem; font-weight: 700; }
.strength-ring { --value: 0; display: grid; place-items: center; width: 84px; height: 84px; border: 3px solid var(--ink); border-radius: 50%; background: conic-gradient(var(--mustard) calc(var(--value) * 1%), #fffaf0 0); transition: --value .8s ease; }
.strength-ring strong { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-family: var(--display); font-weight: 400; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.profile-tabs button { padding: 8px 16px; border: 3px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: var(--paper); font-weight: 700; }
.profile-tabs button:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--ink); }
.profile-tabs button[aria-selected="true"] { color: var(--paper); background: var(--orange); box-shadow: 3px 4px 0 var(--ink); transform: rotate(-1deg); }
.profile-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; animation: view-enter .28s cubic-bezier(.2,.8,.2,1); }
.profile-pane[data-pane="documents"], .profile-pane[data-pane="evidence"], .profile-pane[data-pane="account"] { grid-template-columns: minmax(0, 1fr); }
.profile-pane .account-panel { grid-column: auto; }
.profile-checklist { display: grid; gap: 10px; margin: 0; padding: 18px; list-style: none; counter-reset: step; }
.profile-checklist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; counter-increment: step; }
.profile-checklist li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-family: var(--display); }
.profile-checklist li.done { background: #dcecdf; }
.profile-checklist li.done::before { content: "✓"; background: var(--green-soft, #cfe8d3); }
.profile-checklist li div { display: grid; gap: 2px; }
.profile-checklist li small { color: var(--muted); }
.profile-checklist li button { padding: 6px 12px; }
.profile-snapshot { display: grid; gap: 12px; margin: 0; padding: 18px; }
.profile-snapshot div { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.profile-snapshot dt { color: var(--muted); font-size: .74rem; font-weight: 700; }
.profile-snapshot dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .profile-pane { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .profile-hero { grid-template-columns: auto minmax(0, 1fr); }
  .profile-strength { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .profile-avatar { width: 58px; height: 58px; font-size: 1.6rem; }
}
/* Phone header: brand and account stay put, the section icons scroll between them. */
@media (max-width: 860px) {
  .sidebar { gap: 8px; }
  .sidebar .brand-block { flex: 0 0 auto; }
  .sidebar .primary-nav { flex: 1 1 auto; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 4px 2px; }
  .sidebar .primary-nav::-webkit-scrollbar { display: none; }
  .sidebar .primary-nav .nav-item { flex: 0 0 43px; scroll-snap-align: start; }
  .sidebar .sidebar-account { flex: 0 0 auto; margin: 0; padding: 0; border: 0; grid-template-columns: 34px; }
  .sidebar .sidebar-account .account-avatar { display: none; }
}
/* Readability: content boxes stay square to the page. Only icons and the logo tilt. */
.topbar h1, .wallet-balance, .mode-switch button.active, .profile-tabs button[aria-selected="true"], .sidebar .nav-item.active, .pipeline-demo, .boundary-visual { transform: none; }
@keyframes title-card-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.pack-card:not(:disabled):hover { transform: translateY(-3px); }
@keyframes hero-demo-enter { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.pipeline-demo:hover, .boundary-visual:hover { transform: translateY(-4px); }
/* Dropdowns: one consistent control with a clear chevron, hover and focus states. */
select, .tracking-card select, .settings-form select, .setup-step select, .entry-form select { appearance: none; -webkit-appearance: none; min-height: 42px; width: 100%; padding: 0 42px 0 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background-color: #fffaf0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231a12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; box-shadow: 2px 3px 0 var(--ink); font-weight: 700; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease; }
select:hover { background-color: #fff4dc; }
select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mustard), 2px 3px 0 var(--ink); }
select:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }
select:disabled { cursor: not-allowed; opacity: .55; }
select option { color: var(--ink); background: #fffaf0; font-weight: 400; }
/* Setup wizard: progress, optional steps, and a big CV drop target. */
.setup-card { position: relative; overflow: hidden; }
.setup-progress { position: absolute; inset: 0 0 auto; height: 6px; background: #efe2c6; }
.setup-progress span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.setup-step { animation: view-enter .3s cubic-bezier(.2,.8,.2,1); }
.setup-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.setup-actions .primary-button { display: inline-flex; align-items: center; gap: 8px; min-width: 180px; justify-content: center; }
.setup-actions .primary-button svg { width: 16px; height: 16px; }
.setup-skip { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.setup-drop { display: grid !important; justify-items: center; gap: 6px !important; padding: 30px 18px; border: 3px dashed var(--ink); border-radius: var(--wobble); background: #fffaf0; text-align: center; cursor: pointer; transition: background-color .15s ease; }
.setup-drop:hover, .setup-drop:focus-within { background: #fff1d2; }
.setup-drop svg { width: 34px; height: 34px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setup-drop strong { font-size: 1rem; }
.setup-drop input { max-width: 100%; margin-top: 6px; border: 0 !important; min-height: 0 !important; background: transparent !important; }
.setup-note { margin: 10px 0 0; font-weight: 700; }
.setup-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.setup-points li { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.setup-points li span { color: var(--muted); font-size: .84rem; }
.setup-points li.done { background: #dcecdf; }
.setup-header { display: flex; align-items: center; justify-content: space-between; }
/* Page tour: one small note at a time, pointing at the section it explains. */
.tour-spot { position: relative; z-index: 41; outline: 4px solid var(--mustard); outline-offset: 4px; border-radius: var(--wobble); transition: outline-color .2s ease; }
.tour-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(31, 20, 12, .28); animation: fade-in .2s ease; pointer-events: none; }
.tour-card { position: absolute; z-index: 42; width: min(320px, calc(100vw - 32px)); padding: 16px 16px 14px; border: 3px solid var(--ink); border-radius: var(--wobble); color: var(--ink); background: var(--paper); box-shadow: 5px 6px 0 var(--ink); animation: tour-in .22s cubic-bezier(.2,.8,.2,1); }
.tour-card h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.tour-card p { margin: 0 0 14px; font-size: .88rem; line-height: 1.5; }
.tour-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card footer span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.tour-card footer div { display: flex; gap: 8px; }
.tour-card button { min-height: 34px; padding: 0 12px; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tour-card, .tour-backdrop, .setup-step { animation: none; }
}
/* Opportunity filters and search settings. */
.job-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 12px 15px; border-bottom: 2px solid var(--ink); background: #fff8e8; }
.job-filters label { display: grid; gap: 4px; min-width: 130px; font-size: .72rem; font-weight: 700; }
.job-filters select { min-height: 36px; }
.job-filters .filter-check { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; font-size: .82rem; }
.job-filters .filter-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.job-filters #clear-job-filters { margin-left: auto; min-height: 36px; }
.search-settings { display: grid; gap: 16px; margin-top: 14px; padding: 16px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; animation: view-enter .25s cubic-bezier(.2,.8,.2,1); }
.search-settings fieldset { margin: 0; padding: 0; border: 0; }
.search-settings legend { margin-bottom: 8px; font-weight: 800; font-size: .84rem; }
.source-options { display: flex; flex-wrap: wrap; gap: 8px; }
.source-options label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: .82rem; font-weight: 700; cursor: pointer; }
.source-options label:has(input:checked) { background: var(--mustard); }
.source-options label.is-off { opacity: .55; }
.source-options input { accent-color: var(--ink); }
.source-options small { color: var(--muted); font-weight: 400; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-grid label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }
.settings-grid input { width: 100%; min-height: 42px; padding: 0 10px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); }
.settings-grid small { color: var(--muted); font-weight: 400; }
@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
  .job-filters label { flex: 1 1 140px; }
}
.search-settings .setup-actions .primary-button { width: auto; min-width: 200px; }
.search-panel .search-settings label, .search-panel .search-settings legend { margin: 0; font-family: inherit; font-weight: 700; color: var(--ink); }
.search-panel .search-settings input, .search-panel .search-settings input::placeholder { font-family: inherit; font-weight: 400; }
/* Search settings: every control the same height, labels on one baseline. */
.search-panel .search-settings { gap: 18px; }
.search-panel .search-settings legend { margin-bottom: 10px; }
.search-panel .settings-grid { align-items: start; }
.search-panel .settings-grid label { gap: 6px; }
.search-panel .settings-grid select, .search-panel .settings-grid input { box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; }
.search-panel .settings-grid input { padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; box-shadow: 2px 3px 0 var(--ink); color: var(--ink); }
.search-panel .settings-grid input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mustard), 2px 3px 0 var(--ink); }
.search-panel .search-settings .setup-actions { margin-top: 0; padding-top: 14px; border-top: 1px dashed var(--line); }
/* Styled dropdown: button looks like the old select; the list matches the ink cards. */
.dropdown { position: relative; width: 100%; }
.dropdown-native { position: absolute !important; inset: auto 0 0 0; width: 100% !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.dropdown-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: #fffaf0; box-shadow: 2px 3px 0 var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.dropdown-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-button svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.dropdown-button:hover { background: #fff4dc; }
.dropdown-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mustard), 2px 3px 0 var(--ink); }
.dropdown-button:disabled { opacity: .55; cursor: not-allowed; }
.dropdown.open .dropdown-button svg { transform: rotate(180deg); }
.dropdown-list { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 100%; max-height: 260px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 3px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); box-shadow: 4px 5px 0 var(--ink); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.dropdown.up .dropdown-list { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.dropdown.open .dropdown-list { visibility: visible; opacity: 1; transform: none; transition: opacity .14s ease, transform .14s ease; }
.dropdown-list:focus { outline: none; }
.dropdown-list li { padding: 9px 12px; border-radius: 7px; color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; }
.dropdown-list li.active { background: #fff1d2; }
.dropdown-list li[aria-selected="true"] { color: var(--paper); background: var(--orange); }
.dropdown-list li[aria-selected="true"].active { background: #b8341e; }
.dropdown-list li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.job-filters .dropdown-button { min-height: 36px; }
.search-panel .settings-grid .dropdown-button { height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .dropdown-list, .dropdown-button svg { transition: none; }
}
/* Readable hovers everywhere: an old dark-theme rule set white text on the cream hover. */
.nav-item:hover { color: var(--ink); }
.nav-item.active, .nav-item.active:hover { color: var(--paper); }
.primary-button:hover { color: var(--paper); background: #a82c21; }
.ghost-button:hover, .icon-button:hover, a.ghost-button:hover { color: var(--ink); background: var(--mustard); }
.danger-button:hover { color: var(--paper); background: var(--red); }
.text-button:hover { color: #7c2412; }
.job-rank:hover, .job-prepare:hover { color: var(--ink); }
/* Load more sits centred under its list. */
.load-more:not([hidden]) { display: flex; width: fit-content; margin: 16px auto; }
/* Sidebar: workspace pages on top, account pages at the bottom. */
.sidebar .account-nav { margin-top: auto; padding-top: 14px; }
.sidebar .sidebar-account { margin-top: 12px; }
@media (max-width: 860px) {
  .sidebar .account-nav { flex: 0 0 auto; display: flex; margin: 0; padding: 0; overflow: visible; }
}
/* Account settings: one row per setting, details open in place. */
.settings-list { display: grid; }
.account-panel .settings-list { grid-column: 1 / -1; }
.setting-row { display: block; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.setting-row:last-child { border-bottom: 0; }
div.setting-row, .setting-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.setting-row > summary { cursor: pointer; list-style: none; }
.setting-row > summary::-webkit-details-marker { display: none; }
.setting-row h3 { margin: 0 0 3px; font-size: 1rem; }
.setting-row p { margin: 0; color: var(--muted); font-size: .84rem; }
.setting-action { flex: 0 0 auto; }
.setting-row[open] > summary .setting-action { visibility: hidden; }
.setting-body { display: grid; gap: 12px; max-width: 640px; margin-top: 14px; padding: 16px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; animation: view-enter .22s cubic-bezier(.2,.8,.2,1); }
.setting-body label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }
.setting-body label small { color: var(--muted); font-weight: 400; }
.setting-body input { width: 100%; min-height: 42px; padding: 0 10px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); }
.setting-body button { justify-self: start; }
.danger-row h3 { color: var(--red); }
.danger-row .setting-body { border-color: var(--red); background: #fdf0ec; }
.account-panel { display: block; padding: 0 22px 8px; }
.account-panel > .panel-heading { margin: 0 -22px; }
@media (max-width: 620px) {
  div.setting-row, .setting-row > summary { flex-direction: column; align-items: flex-start; }
}
/* Social sign-in. */
.social-login { display: grid; gap: 12px; margin: 4px 0 8px; }
.social-buttons { display: grid; gap: 10px; }
.social-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: #fffaf0; box-shadow: 2px 3px 0 var(--ink); font-weight: 800; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.social-button:hover { background: var(--mustard); transform: translateY(-1px); box-shadow: 3px 4px 0 var(--ink); }
.social-button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font-size: .8rem; font-weight: 900; }
.social-google b { background: #4285f4; }
.social-linkedin b { background: #0a66c2; }
.social-x b { background: #000; }
.social-terms { margin: 0; color: var(--muted); font-size: .74rem; text-align: center; }
.social-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.identity-list { display: grid; gap: 8px; min-width: min(360px, 100%); }
.identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; }
.identity span { display: grid; }
.identity small { color: var(--muted); }
/* Landing pricing: identical rows in every card so prices, notes, and buttons line up. */
.price-strip article { display: grid; grid-template-rows: auto auto 2.8em 1fr auto; gap: 0; }
.price-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 20px; }
.price-line .price-value { margin: 0; font-size: 2.8rem; line-height: 1; }
.price-line small { color: var(--muted); font-size: .8rem; font-weight: 700; }
.price-note { margin: 8px 0 0; color: var(--orange-dark); font-size: .74rem; font-weight: 800; line-height: 1.35; text-align: center; }
.price-strip ul { align-self: start; margin: 18px 0 24px; }
.price-strip article > a, .price-strip article > .ghost-button { width: 100%; margin: 0; }
.price-badge { white-space: nowrap; }
@media (max-width: 860px) {
  .price-strip article { grid-template-rows: auto; }
}
.also-on { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
.also-on a { color: var(--orange-dark); font-weight: 700; }
/* Work in progress stays where you are: a thin top bar and inline search progress. */
.global-loading { position: fixed; inset: 0 0 auto; z-index: 70; height: 4px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.global-loading::before { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: var(--orange); animation: loading-slide 1.1s ease-in-out infinite; }
.global-loading.active { opacity: 1; }
@keyframes loading-slide { to { transform: translateX(350%); } }
.search-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; font-size: .86rem; font-weight: 700; }
.search-progress[hidden] { display: none; }
.search-progress .progress-track { grid-column: 1 / -1; position: relative; height: 8px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.search-progress .progress-track i { position: absolute; inset: 0 auto 0 -30%; width: 30%; background: var(--orange); animation: loading-slide 1.3s ease-in-out infinite; }
.job-list.is-loading { position: relative; min-height: 240px; }
.job-list.is-loading::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(31,20,12,.06) 18px 58px, transparent 58px 76px); animation: shimmer 1.2s ease-in-out infinite alternate; pointer-events: none; }
@keyframes shimmer { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .global-loading::before, .search-progress .progress-track i, .job-list.is-loading::after { animation: none; }
}
/* Accessibility: text contrast of at least 4.5:1 on every surface. */
.primary-button, a.primary-button, button.primary-button { color: var(--paper); -webkit-text-stroke: 0; }
.search-panel .text-button, .verify-banner .text-button, .wallet-balance span { color: var(--ink); }
.pack-card:last-of-type small, .featured-price .price-note { color: var(--ink); }
.public-site .boundary-visual > span, .public-site .boundary-visual > p { color: var(--paper); }
.public-site .public-cta p { color: var(--paper); }
.price-hint { display: inline-block; margin: 4px 8px 0 0; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffaf0; color: var(--ink); font-size: .74rem; font-style: normal; font-weight: 700; }
.price-hint::before { content: "≈ "; }
/* Fast or Detailed drafting, and the questions Detailed mode asks. */
.draft-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; max-width: 560px; }
.draft-mode button { display: grid; gap: 2px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); color: var(--ink); background: #fffaf0; text-align: left; }
.draft-mode button small { font-size: .74rem; }
.draft-mode button.active { background: var(--mustard); box-shadow: 2px 3px 0 var(--ink); }
.draft-questions { display: grid; gap: 14px; }
.draft-questions h4 { margin: 0; }
.draft-questions label { display: grid; gap: 4px; font-weight: 700; }
.draft-questions label small { color: var(--muted); font-weight: 400; }
.draft-questions textarea { width: 100%; padding: 8px 10px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: #fffaf0; font: inherit; font-weight: 400; resize: vertical; }
@media (max-width: 620px) { .draft-mode { grid-template-columns: 1fr; } }
/* Landing: "What is BidSharpe?" and the FAQ. */
.about-section { background: var(--paper); }
.about-section .section-intro { max-width: 860px; }
.about-section .section-intro p { font-size: 1.12rem; color: var(--ink); }
.faq-section { background: var(--canvas); }
.faq-list { display: grid; gap: 12px; max-width: 860px; margin-top: 28px; }
.faq-list details { border: 3px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); box-shadow: 3px 4px 0 var(--ink); }
.faq-list summary { padding: 16px 20px; font-weight: 800; font-size: 1.05rem; cursor: pointer; list-style-position: inside; }
.faq-list summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.faq-list details[open] summary { border-bottom: 2px dashed var(--line-soft); }
.faq-list details p { margin: 0; padding: 14px 20px 18px; color: var(--muted); line-height: 1.6; }
/* Account settings: keep paired fields level when only one has a hint below it. */
.setting-body .field-pair { align-items: start; }
.setting-body label { align-content: start; }
.setting-body label[hidden] { display: none; }
@media (max-width: 620px) {
  .setting-row[open] > summary .setting-action { display: none; }
}