:root {
  --bg: #0e1117; --panel: #151923; --panel-2: #1c2230; --surface: #232b3b; --border: rgba(255,255,255,.09);
  --text: #f5f7fb; --muted: #8f98a9; --accent: #397dfb; --green: #53c27f; --amber: #eaa646; --red: #e65c66; --purple: #a384ef;
  --shadow: 0 16px 48px rgba(0,0,0,.2); --radius: 16px; --sidebar: 220px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); background: var(--bg); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-width: 320px; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(57,125,251,.8); outline-offset: 2px; }
.is-hidden { display: none !important; }
.muted { color: var(--muted); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--border); background: #10141c; display: flex; flex-direction: column; z-index: 30; }
.brand { display: flex; gap: 11px; align-items: center; padding: 22px 16px 16px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: linear-gradient(145deg,#397dfb,#7858e8); box-shadow: 0 8px 24px rgba(57,125,251,.26); }
.brand strong, .brand span { display: block; } .brand strong { font-size: 16px; letter-spacing: -.01em; } .brand span { margin-top: 2px; font-size: 11px; color: var(--muted); }
.nav-list { padding: 6px 9px; display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 10px 11px; display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; text-align: left; cursor: pointer; color: #c8ced9; }
.nav-item:hover { background: rgba(255,255,255,.045); } .nav-item.is-active { background: rgba(57,125,251,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(57,125,251,.16); }
.nav-icon { color: var(--muted); text-align: center; font-weight: 800; } .nav-item.is-active .nav-icon { color: #78a4ff; }
.nav-count { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.055); color: var(--muted); text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border); display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(83,194,127,.08); flex: 0 0 auto; } .version { margin-left: auto; font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; opacity: .65; }
.workspace { min-width: 0; padding: 20px; }
.mobile-header { display: none; }
.page { max-width: 1540px; margin: 0 auto; }
.panel { background: linear-gradient(180deg,rgba(24,29,41,.98),rgba(20,24,34,.98)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-head { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 16px 18px; }
.page-head.simple { background: transparent; border: 0; box-shadow: none; padding: 7px 2px 16px; }
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.025em; } .page-head p { margin: 4px 0 0; font-size: 12px; }
.eyebrow { color: #78a4ff !important; text-transform: uppercase; letter-spacing: .12em; font-size: 9px !important; font-weight: 800; }
.page-actions { display: flex; gap: 10px; align-items: center; }
.search-box { width: min(34vw,390px); min-width: 235px; height: 38px; padding: 0 11px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.button { border: 1px solid var(--border); background: var(--panel-2); padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 650; transition: .15s ease; }
.button:hover { transform: translateY(-1px); background: #242c3d; } .button.primary { background: var(--accent); border-color: #4d89fa; color: white; box-shadow: 0 8px 22px rgba(57,125,251,.22); } .button.primary:hover { background: #4b89ff; }
.button.ghost { background: transparent; } .button.danger-soft { color: #ff8d95; background: rgba(230,92,102,.1); border-color: rgba(230,92,102,.22); } .button.compact { padding: 6px 9px; }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); cursor: pointer; }
.filter-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; }
.chip-row, .select-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--border); background: rgba(28,34,48,.8); color: #b9c0cc; border-radius: 999px; padding: 6px 10px; font-size: 11px; cursor: pointer; } .filter-chip b { margin-left: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-chip.is-active { color: #fff; background: rgba(57,125,251,.2); border-color: rgba(57,125,251,.36); } .filter-chip.review-ready.is-active { background: rgba(163,132,239,.18); border-color: rgba(163,132,239,.35); }
.select-row label { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); } select { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 7px 25px 7px 8px; font-size: 11px; }
.selection-bar { min-height: 52px; margin-bottom: 10px; padding: 9px 12px; border: 1px solid rgba(57,125,251,.25); border-radius: 12px; background: rgba(57,125,251,.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.selection-bar > div:first-child { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }.selection-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.jobs-layout, .needs-layout { display: grid; grid-template-columns: minmax(380px,.85fr) minmax(440px,1.15fr); gap: 12px; min-height: calc(100vh - 220px); }
.list-panel, .detail-panel { min-height: 0; overflow: hidden; }.panel-title-row { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); font-size: 12px; }.panel-title-row > div { display: flex; align-items: center; gap: 7px; }
.count-badge { display: inline-grid; place-items: center; min-width: 23px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.055); color: var(--muted); font-size: 10px; }.text-button { border: 0; background: transparent; color: #78a4ff; font-size: 11px; cursor: pointer; }
.job-list { max-height: calc(100vh - 270px); overflow: auto; padding: 5px; scrollbar-color: #333b4d transparent; }.job-row { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 11px; padding: 11px 10px; display: grid; grid-template-columns: 22px 42px 1fr; gap: 10px; text-align: left; cursor: pointer; }.job-row:hover { background: rgba(255,255,255,.035); }.job-row.is-focused { background: rgba(57,125,251,.09); border-color: rgba(57,125,251,.18); }
.job-check { appearance: none; width: 16px; height: 16px; margin: 12px 0 0; border: 1px solid #4a5468; border-radius: 5px; background: #11151e; cursor: pointer; position: relative; }.job-check:checked { background: var(--accent); border-color: var(--accent); }.job-check:checked::after { content: "✓"; position: absolute; inset: -1px 0 0; display: grid; place-items: center; font-size: 11px; color: white; }
.company-avatar { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: #bdc8dc; font-size: 12px; font-weight: 800; }.job-main { min-width: 0; }.job-title-line { display: flex; align-items: center; gap: 7px; }.job-title-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.sparkle { color: #8fb2ff; margin-left: auto; }.job-company { margin: 4px 0; font-size: 11px; color: #aeb6c5; }.job-meta { display: flex; gap: 6px; align-items: center; min-width: 0; color: var(--muted); font-size: 10px; }.job-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.job-meta .push { margin-left: auto; flex: 0 0 auto; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }.status-ready { color: #6fda98; background: rgba(83,194,127,.12); }.status-needs { color: #ffc06b; background: rgba(234,166,70,.12); }.status-error { color: #ff858e; background: rgba(230,92,102,.12); }.status-applied { color: #7faaff; background: rgba(57,125,251,.13); }
.detail-panel { display: flex; flex-direction: column; }.detail-empty { height: 100%; min-height: 420px; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 40px; }.detail-empty .empty-icon { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2); font-size: 24px; }
.detail-head { padding: 16px; display: flex; gap: 13px; border-bottom: 1px solid var(--border); }.detail-head .company-avatar { width: 58px; height: 58px; font-size: 15px; }.detail-heading { min-width: 0; flex: 1; }.detail-heading h2 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }.detail-company { margin: 4px 0 7px; color: #aeb6c5; font-size: 12px; }.detail-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }.detail-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); overflow: auto; }.detail-tab { flex: 1; min-width: max-content; border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 8px; font-size: 10px; cursor: pointer; }.detail-tab.is-active { color: white; background: var(--surface); }.detail-scroll { padding: 14px; overflow: auto; flex: 1; }.detail-card { padding: 12px; border: 1px solid var(--border); background: rgba(28,34,48,.7); border-radius: 12px; margin-bottom: 10px; }.detail-card h3 { margin: 0 0 9px; font-size: 11px; }.detail-card p { margin: 0; color: #c3c9d4; font-size: 11px; line-height: 1.55; }.info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.info-tile { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--border); }.info-tile span { display:block; color:var(--muted); font-size:9px; margin-bottom:4px; }.info-tile strong { font-size:11px; }.detail-actions { padding: 11px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }.detail-actions .push { margin-left: auto; }
.question-item { padding: 11px; border: 1px solid var(--border); background: rgba(28,34,48,.72); border-radius: 11px; margin-bottom: 8px; }.question-label { font-size: 10px; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }.question-form { display:flex; gap:8px; align-items:center; }.question-form select, .question-form input { flex:1; min-width:0; border:1px solid var(--border); background:#111620; color:white; border-radius:8px; padding:8px; font-size:11px; }.answer-source { margin-top: 6px; color:#78a4ff; font-size:9px; }
.task-strip { margin-top: 10px; min-height: 50px; padding: 8px 10px 8px 12px; display: grid; grid-template-columns: minmax(180px,1fr) minmax(140px,2fr) 42px auto; gap: 12px; align-items: center; border-radius: 12px; border: 1px solid rgba(57,125,251,.2); background: rgba(57,125,251,.07); }.task-copy strong,.task-copy span { display:block; }.task-copy strong { font-size:11px; }.task-copy span { margin-top:3px; color:var(--muted); font-size:9px; }.progress-track { height: 6px; background: rgba(255,255,255,.07); border-radius:999px; overflow:hidden; }.progress-track span { display:block; width:0; height:100%; background:var(--accent); border-radius:999px; transition:width .25s ease; }.progress-value { font-size:10px; font-variant-numeric:tabular-nums; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 10px; }.history-card { padding: 14px; }.history-card h3 { margin: 7px 0 3px; font-size: 13px; }.history-card p { margin: 0; color:var(--muted); font-size:11px; }.history-card .card-foot { margin-top:13px; padding-top:10px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:8px; }.metric { color:var(--muted); font-size:11px; }.empty-state { grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--muted); }
.modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(4,6,10,.72); backdrop-filter:blur(8px); }.modal { width:min(900px,96vw); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }.modal-head { padding:16px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--border); }.review-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; color:#83aaff; background:rgba(57,125,251,.12); font-weight:800; }.modal-head h2 { margin:0; font-size:17px; }.modal-head p { margin:3px 0 0; font-size:10px; }.modal-head .icon-button { margin-left:auto; }.modal-body { overflow:auto; padding:14px; }.review-layout { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(360px,1.35fr); gap:10px; }.review-list { display:grid; gap:6px; align-content:start; }.review-job { border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:9px; padding:9px; text-align:left; cursor:pointer; }.review-job.is-active { border-color:rgba(57,125,251,.35); background:rgba(57,125,251,.08); }.review-job strong,.review-job span { display:block; }.review-job strong { font-size:11px; }.review-job span { margin-top:3px; font-size:9px; color:var(--muted); }.review-details { min-width:0; }.review-line { display:grid; grid-template-columns:90px 1fr; gap:10px; padding:6px 0; font-size:11px; }.review-line span:first-child { color:var(--muted); }.review-answer { padding:8px 0; border-bottom:1px solid var(--border); }.review-answer:last-child { border-bottom:0; }.review-answer span,.review-answer strong { display:block; }.review-answer span { font-size:9px; color:var(--muted); margin-bottom:3px; }.review-answer strong { font-size:11px; }.modal-foot { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--border); }.modal-foot>div { display:flex; gap:8px; }.notice-text { color:var(--muted); font-size:10px; }
.mobile-backdrop { position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.56); }
@media (max-width: 1050px) { .jobs-layout,.needs-layout { grid-template-columns:minmax(330px,.9fr) minmax(390px,1.1fr); }.workspace{padding:14px}.page-actions .search-box{width:290px}.filter-bar{align-items:flex-start;flex-direction:column}.select-row{width:100%;justify-content:flex-end}.job-list{max-height:calc(100vh - 320px)} }
@media (max-width: 780px) {
  .app-shell { display:block; }.sidebar { position:fixed; left:0; transform:translateX(-103%); transition:transform .2s ease; width:min(84vw,280px); }.sidebar.is-open { transform:none; }.workspace { padding:0 12px 16px; }.mobile-header { display:flex; position:sticky; top:0; z-index:20; height:56px; margin:0 -12px 12px; padding:0 12px; align-items:center; gap:10px; background:rgba(14,17,23,.92); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }.mobile-header .health-dot{margin-left:auto}.page-head { align-items:flex-start; flex-direction:column; }.page-head.panel { border-radius:13px; }.page-actions { width:100%; }.search-box { width:100%; min-width:0; }.page-actions .button span{display:none}.filter-bar{padding:10px 0}.chip-row { flex-wrap:nowrap; width:100%; overflow:auto; padding-bottom:4px; }.select-row { justify-content:flex-start; overflow:auto; flex-wrap:nowrap; }.select-row label>span { display:none; }.selection-bar { align-items:flex-start; flex-direction:column; }.selection-actions { width:100%; justify-content:flex-start; overflow:auto; flex-wrap:nowrap; }.selection-actions .button { white-space:nowrap; }.jobs-layout,.needs-layout{display:block;min-height:0}.list-panel{min-height:calc(100vh - 300px)}.job-list{max-height:none}.detail-panel{position:fixed;inset:56px 0 0;z-index:45;border-radius:0;transform:translateX(102%);transition:transform .2s ease;background:var(--bg);}.detail-panel.has-mobile-focus{transform:none}.detail-panel .detail-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}.detail-head:before{content:"‹";width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;cursor:pointer}.history-grid{grid-template-columns:1fr}.review-layout{grid-template-columns:1fr}.review-list{grid-auto-flow:column;grid-auto-columns:75%;overflow:auto}.modal-backdrop{padding:0}.modal{width:100%;max-height:100vh;height:100vh;border-radius:0}.modal-foot{align-items:flex-start;flex-direction:column}.modal-foot>div{width:100%}.modal-foot .button{flex:1}.task-strip{grid-template-columns:1fr 44px auto}.task-strip .progress-track{grid-column:1/-1;grid-row:2}.task-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-text{display:none}.info-grid{grid-template-columns:1fr}.needs-layout>section:first-child{min-height:260px;margin-bottom:10px}
}


/* UI-02: real browser authentication boundary. */
.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(57,125,251,.16), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(120,88,232,.12), transparent 32%),
    var(--bg);
}
.auth-card { width: min(430px, 100%); padding: 22px; }
.auth-brand { display: flex; align-items: center; gap: 11px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.auth-brand strong, .auth-brand span { display: block; }
.auth-brand strong { font-size: 17px; }
.auth-brand span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.auth-checking { min-height: 170px; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.auth-checking strong { display: block; font-size: 13px; }
.auth-checking p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.auth-spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.12); border-top-color: #78a4ff; border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-form { display: grid; gap: 13px; }
.auth-copy { margin-bottom: 4px; }
.auth-copy h1 { margin: 2px 0 7px; font-size: 24px; letter-spacing: -.025em; }
.auth-copy p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.auth-field { display: grid; gap: 6px; color: #b9c0cc; font-size: 11px; }
.auth-field input { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #111620; color: var(--text); padding: 10px 11px; }
.auth-field input::placeholder { color: #667083; }
.auth-submit { width: 100%; min-height: 40px; margin-top: 2px; }
.auth-error { margin: 0; padding: 9px 10px; border: 1px solid rgba(230,92,102,.24); border-radius: 9px; background: rgba(230,92,102,.09); color: #ff9ca3; font-size: 11px; line-height: 1.45; }
.auth-retry { justify-self: center; }
.mock-banner { max-width: 1540px; margin: 0 auto 10px; padding: 9px 12px; display: flex; align-items: baseline; gap: 9px; border: 1px solid rgba(234,166,70,.24); border-radius: 10px; background: rgba(234,166,70,.075); color: #e8c58d; font-size: 10px; line-height: 1.45; }
.mock-banner strong { color: #ffd18d; white-space: nowrap; }
.session-footer { align-items: flex-start; gap: 9px; }
.session-footer .health-dot { margin-top: 5px; }
.session-copy { min-width: 0; flex: 1; }
.session-copy > span, .session-copy > strong, .session-copy > small { display: block; }
.session-copy > span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.session-copy > strong { margin: 2px 0; overflow: hidden; color: #dfe5ef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.session-copy > small { color: #707b8f; font-size: 9px; }
.session-copy .session-notice { margin-top: 4px; color: #ffb2b7; white-space: normal; line-height: 1.35; }
.mobile-session { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.mobile-session > span { max-width: 38vw; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 780px) {
  .auth-gate { padding: 14px; align-items: center; }
  .auth-card { padding: 18px; border-radius: 14px; }
  .mock-banner { align-items: flex-start; flex-direction: column; gap: 3px; }
  .mobile-session .text-button { padding: 0; }
}