/* Base styles the artifact page wrapper added. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: a tab bar over seven views. Apply = review cards (one per prepared application, approve before anything is sent), Needs-you list, Sent log, answer library. Playbook = the framework: loop diagram, live capability scoreboard, rule cards. Persona = the VP of Product & AI voice and its learning log. Pipeline = sortable ledger of roles; Bullets = the approved bullet bank by area; Resumes = each version as a recipe of bullets; References = notes files and open questions. */
:root {
  --bg: #f6f7f5; --surface: #ffffff; --fg: #1b2420; --muted: #5f6b65; --line: #dde2de;
  --accent: #1f6f5c; --accent-soft: #e2f0ea;
  --ok: #1f7a4a; --ok-soft: #e1f3e8;
  --warn: #9a5b00; --warn-soft: #fbefd9;
  --info: #2a5db0; --info-soft: #e3ecfa;
  --bad: #a3392f; --bad-soft: #f8e4e1;
  --plum: #7a3e8f; --plum-soft: #f2e6f6;
  --idle: #6b7470; --idle-soft: #eceeec;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121715; --surface: #1a211e; --fg: #e6ece9; --muted: #9aa7a1; --line: #2b3531;
  --accent: #5fc1a3; --accent-soft: #1d3a31;
  --ok: #6fd39a; --ok-soft: #173325; --warn: #f0b45a; --warn-soft: #3a2a12;
  --info: #8db4f2; --info-soft: #1b2a44; --bad: #f08a7e; --bad-soft: #3d1f1b;
  --plum: #d3a4e4; --plum-soft: #352340;
  --idle: #a3ada8; --idle-soft: #262d2a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121715; --surface: #1a211e; --fg: #e6ece9; --muted: #9aa7a1; --line: #2b3531;
  --accent: #5fc1a3; --accent-soft: #1d3a31;
  --ok: #6fd39a; --ok-soft: #173325; --warn: #f0b45a; --warn-soft: #3a2a12;
  --info: #8db4f2; --info-soft: #1b2a44; --bad: #f08a7e; --bad-soft: #3d1f1b;
  --plum: #d3a4e4; --plum-soft: #352340;
  --idle: #a3ada8; --idle-soft: #262d2a; color-scheme: dark }

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 var(--body); }
.wrap { max-width: none; margin: 0 auto; padding-block: 28px 64px;
  padding-left: max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-right, 0px));
  display: grid; gap: 20px; }
header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
h1 { font: 700 clamp(26px, 4vw, 36px)/1.1 var(--display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font: 700 20px/1.2 var(--display); margin: 0 0 10px; }
h3 { font: 600 15px/1.3 var(--display); margin: 0; }
.sub { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
button, select, input, textarea { font: inherit; color: inherit; }
.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--surface); border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, tr.row:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .bullet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { border: none; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab .n { font: 500 12px var(--mono); color: var(--muted); margin-left: 6px; }
.view[hidden] { display: none; }

.summary { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.chip b { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.s-Submitted, .s-Final, .s-Live { color: var(--ok); background: var(--ok-soft); }
.s-Open-role, .s-Preview { color: var(--info); background: var(--info-soft); }
.s-Skip, .s-Withdrawn, .s-Not-built, .s-Reserve { color: var(--idle); background: var(--idle-soft); }
.s-Apply, .s-Draft { color: var(--warn); background: var(--warn-soft); }
.s-Screening, .s-Interview { color: var(--plum); background: var(--plum-soft); }
.s-Offer { color: var(--surface); background: var(--ok); }
.s-Rejected, .s-Needs-number { color: var(--bad); background: var(--bad-soft); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }

.quick { display: flex; gap: 6px; margin-top: 8px; }
.qbtn { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 10px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.qbtn.go { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.qbtn.no { color: var(--muted); }
.qbtn.undo { border: none; background: none; padding: 3px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.qbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qbtn:disabled { opacity: .5; cursor: default; }

.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.ledger table { min-width: 1280px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.ledger th { cursor: pointer; }
th[aria-sort="ascending"]::after { content: " ↑"; } th[aria-sort="descending"]::after { content: " ↓"; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
tr.row { cursor: pointer; } tr.row:hover td { background: var(--bg); }
.co { font-weight: 600; } .co a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.role { color: var(--muted); font-size: 13px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.note { color: var(--muted); font-size: 13px; min-width: 320px; max-width: 64ch; }
.ans { font-weight: 600; border-radius: 6px; padding: 1px 7px; }
.ans-full { color: var(--ok); background: var(--ok-soft); }
.ans-part { color: var(--warn); background: var(--warn-soft); }
.ans-none { color: var(--muted); }
.fitcell { min-width: 300px; }
.fit { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; border-radius: 6px; padding: 1px 7px; }
.fit-hi { color: var(--ok); background: var(--ok-soft); }
.fit-mid { color: var(--info); background: var(--info-soft); }
.fit-lo { color: var(--warn); background: var(--warn-soft); }
.fitnote { color: var(--muted); font-size: 12px; margin-top: 4px; max-width: 52ch; line-height: 1.35; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

tr.editor td { background: var(--bg); }
form.edit { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
form.edit label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
form.edit .wide { grid-column: 1 / -1; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 14px; width: 100%; min-width: 0; }
textarea { min-height: 70px; resize: vertical; }
.actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .spacer { flex: 1; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
.msg { font-size: 13px; color: var(--muted); }
.status-line { font-size: 13px; color: var(--muted); }

/* Bullets */
.areas { display: grid; gap: 24px; }
.area-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.area-head .count { font: 500 13px var(--mono); color: var(--muted); }
.blist { display: grid; gap: 8px; }
.bullet { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; cursor: pointer; }
.bullet:hover { border-color: var(--accent); }
.bullet p { margin: 0; max-width: 110ch; }
.bmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.bnote { font-size: 12px; color: var(--muted); }
.bedit { display: grid; gap: 8px; }
.bedit .row2 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Resumes */
.vgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: start; }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; }
.vcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.vcard .meta { font-size: 13px; color: var(--muted); }
.vcard .titleline { font-weight: 600; font-size: 14px; }
.vcard .summ { font-size: 13px; color: var(--muted); margin: 0; }
.vsec { border-top: 1px solid var(--line); padding-top: 8px; }
.vsec h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vsec ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.vsec li.missing { color: var(--bad); }
.doclink { color: var(--accent); font-weight: 600; text-decoration: underline; }
.pdf { font: 500 12px var(--mono); color: var(--muted); word-break: break-word; }

/* References */
.refs td:first-child { font: 500 13px var(--mono); white-space: nowrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: start; }
.qlist li:last-child { border-bottom: none; }
.qlist input { width: auto; margin-top: 4px; }
.qlist .done span { color: var(--muted); text-decoration: line-through; }
.qlist .area { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { tr.row td, .bullet { transition: background .12s, border-color .12s; } }

.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.pcard { padding: 16px 18px; display: grid; gap: 10px; }
.pcard .phead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pcard .pnum { font: 500 12px var(--mono); color: var(--muted); margin-right: 6px; }
.pbody { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.pcard { min-width: 0; }
.pbody p { margin: 0 0 8px; }
.pbody ul { margin: 0 0 8px; padding-left: 18px; }
.pbody li { margin-bottom: 4px; }
.pbody .lbl { font-weight: 600; color: var(--accent); }
.pmeta { font-size: 12px; color: var(--muted); }
#v-persona > div > * { min-width: 0; }
.plogwrap { overflow-x: auto; }
.plogwrap table { min-width: 560px; }
.pteach { padding: 14px; display: grid; gap: 10px; justify-items: start; }
.st-Promoted { color: var(--ok); font-weight: 600; } .st-Logged { color: var(--muted); } .st-Review { color: var(--warn); font-weight: 600; }

.loop { padding: 16px 18px; display: grid; gap: 10px; }
.lrow-label { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); counter-reset: none; }
.lsteps li { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); display: grid; gap: 4px; min-width: 0; }
.lsteps li b { font: 600 14px var(--display); }
.lsteps li b::before { content: attr(data-n); }
.lsteps li span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.lback { font-size: 13px; color: var(--accent); font-weight: 600; }
.scores { display: grid; gap: 8px; }
.score { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.score summary { list-style: none; cursor: pointer; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.score summary::-webkit-details-marker { display: none; }
.score .sname { font-weight: 600; }
.score .sval { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; }
.score .bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--idle-soft); overflow: hidden; }
.score .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.score.mid .bar i { background: var(--warn); } .score.mid .sval { color: var(--warn); }
.score .sbody { padding: 0 16px 14px; display: grid; gap: 8px; font-size: 14px; }
.score .sbody ul { margin: 0; padding-left: 18px; } .score .sbody li { margin-bottom: 4px; }
.score .next { color: var(--muted); font-size: 13px; }
.rgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.rule { padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.rule p { margin: 0; font-size: 14px; line-height: 1.5; }
.rule .ex { font-size: 13px; line-height: 1.45; border-left: 3px solid var(--ok); padding-left: 10px; }
.rule .ex.bad { border-left-color: var(--bad); color: var(--muted); }
.rule .ex b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; display: block; }
#v-playbook > div > * { min-width: 0; }

/* Apply: review cards, needs-you list, sent log, answer library */
#v-apply > div > * { min-width: 0; }
.s-Ready { color: var(--info); background: var(--info-soft); }
.s-Needs-you, .s-Changes-requested { color: var(--warn); background: var(--warn-soft); }
.s-Approved, .s-Sending { color: var(--plum); background: var(--plum-soft); }
.s-Sent { color: var(--ok); background: var(--ok-soft); }
.s-Skipped, .s-Stopped { color: var(--idle); background: var(--idle-soft); }
.kgrid { display: grid; gap: 16px; }
.kit { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.kit.approved { border-color: var(--plum); }
.khead { padding: 16px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: start; }
.khead .kco { font-size: 13px; color: var(--muted); }
.khead .kco a { color: inherit; text-underline-offset: 3px; }
.khead h3 { font: 700 19px/1.25 var(--display); margin: 2px 0 4px; }
.kmeta { font-size: 13px; color: var(--muted); }
.kpills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kcols { border-top: 1px solid var(--line); padding: 14px 18px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.kcol { min-width: 0; display: grid; gap: 6px; align-content: start; }
.kcol h4 { margin: 0; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kcol ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.kcol .kq { font-size: 13px; color: var(--muted); }
.kcol .ka { font-size: 14px; }
.src { font: 600 11px var(--body); border-radius: 6px; padding: 1px 6px; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); margin-left: 4px; }
.src.need { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.src.you { color: var(--ok); border-color: var(--ok); }
details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 8px; }
.fields { display: grid; gap: 8px; }
.fields > div { border-top: 1px solid var(--line); padding-top: 6px; }
.letter { font-size: 14px; line-height: 1.55; white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 10px 12px; max-height: 360px; overflow: auto; }
.kfoot { border-top: 1px solid var(--line); padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kfoot .spacer { flex: 1; }
.kfoot .need { font-size: 13px; color: var(--warn); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.kfoot .ok { font-size: 13px; color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.kedit { border-top: 1px solid var(--line); padding: 12px 18px; display: grid; gap: 8px; }
.knote { font-size: 13px; color: var(--muted); padding: 0 18px 12px; }
.asks { display: grid; gap: 16px; }
.agroup h3 { margin-bottom: 8px; }
.ask { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.ask .aq { font-weight: 600; }
.ask .actx { font-size: 13px; color: var(--muted); }
.ask .asug { font-size: 13px; border-left: 3px solid var(--accent); padding-left: 10px; }
.askhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .askhead:empty { display: none; }
.askn { font: 600 11.5px var(--body); color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 2px 9px; }
.gapchk { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); margin: 4px 0 14px; }
.gapchk.none { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gapchk summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; list-style: none; }
.gapchk summary::-webkit-details-marker { display: none; }
.gapchk summary::after { content: "Show"; margin-left: auto; font: 600 12px var(--body); color: var(--accent); }
.gapchk[open] summary::after { content: "Hide"; }
.vpills { display: flex; gap: 6px; flex-wrap: wrap; }
.vpill { display: inline-block; border-radius: 999px; padding: 2px 9px; font: 600 11.5px var(--body); white-space: nowrap; }
.v-gap { background: var(--bad-soft); color: var(--bad); } .v-part { background: var(--warn-soft); color: var(--warn); }
.v-grow { background: var(--info-soft); color: var(--info); } .v-strong { background: var(--ok-soft); color: var(--ok); }
.gtwrap { overflow-x: auto; margin-top: 10px; }
.gtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.gtable th { text-align: left; font: 600 11.5px var(--body); color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.gtable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 90px; }
.gtable td small { display: block; color: var(--muted); font-size: 11px; }
.gtable .vnote { margin-top: 3px; color: var(--muted); }
.gvocab { margin: 10px 0 0; }
.qcols { display: grid; gap: 28px; }
.qsec h2 { display: flex; gap: 8px; align-items: center; }
.qitem { display: grid; gap: 8px; margin-bottom: 14px; }
.qjobs { display: flex; flex-wrap: wrap; gap: 6px; }
.qjob { background: var(--idle-soft); border-radius: 999px; padding: 3px 10px; font: 600 12px var(--body); }
.qjob small { font-weight: 400; color: var(--muted); margin-left: 5px; }
.ktools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; }
.ktools input[type=search] { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kchips .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.kgroup { margin-top: 18px; } .kgroup h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.klist { padding: 0; } .krow { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.krow:last-child { border-bottom: 0; } .kfact { font-size: 14.5px; min-width: 0; } .kfact small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.kmeta2 .kq { font-size: 12px; }
.kmeta2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kform { display: grid; gap: 8px; } .kform .arow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kform input, .kform select { min-width: 0; }
.kstory { padding: 12px 16px; border-bottom: 1px solid var(--line); } .kstory summary { display: flex; gap: 10px; align-items: baseline; cursor: pointer; flex-wrap: wrap; }
.kstext { white-space: pre-wrap; margin-top: 8px; }
.v-mute { background: var(--idle-soft); color: var(--muted); }
.kline { margin-top: 6px; font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.kstories { margin-top: 10px; } .kstories > summary { cursor: pointer; font: 600 13px var(--body); color: var(--accent); padding: 4px 0; }
.kstories .kstory { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; }
.kchips + .kchips { margin-top: 8px; } .kgroup h2 { display: flex; gap: 8px; align-items: center; }
.tellbox { display: grid; gap: 8px; padding: 16px; margin-bottom: 18px; } .tellbox label { display: grid; gap: 2px; }
.tellbox .arow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.told { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; } .told small { color: var(--muted); margin-left: 8px; }
.mjump { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .mjump a { font: 600 13px var(--body); color: var(--fg); background: var(--idle-soft); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.msec { margin-top: 22px; display: grid; gap: 12px; scroll-margin-top: 16px; } .msec > h2 { margin: 0; }
.pgroup h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.plist { padding: 0; } .abrow { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.abrow:last-child { border-bottom: 0; } .plabel { color: var(--muted); font-size: 13.5px; } .pval { min-width: 0; overflow-wrap: anywhere; } .pval small { display: block; color: var(--muted); font-size: 12px; }
.abrow.kform { grid-template-columns: 1fr; } .abrow:has(> .pval:only-child) { grid-template-columns: 1fr; }
@media (max-width: 560px) { .abrow { grid-template-columns: 1fr auto; } .plabel { grid-column: 1 / -1; } }
.gh { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.acc { margin: 0; padding-left: 18px; }
.boost { border: 1px dashed var(--info); border-radius: 14px; padding: 12px 14px; background: var(--surface); margin: 0 0 14px; }
.boost summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; list-style: none; }
.boost summary::-webkit-details-marker { display: none; }
.boost summary::after { content: "Show"; margin-left: auto; font: 600 12px var(--body); color: var(--accent); }
.boost[open] summary::after { content: "Hide"; }
.boost .asks { margin-top: 10px; }
.kind-Evidence { background: var(--info-soft); color: var(--info); }
.aopts { display: flex; flex-wrap: wrap; gap: 8px; }
.aopt { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 7px 14px; font: 600 13px var(--body); cursor: pointer; }
.aopt:hover { border-color: var(--accent); color: var(--accent); }
.ask .arow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kindtag { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; padding: 1px 7px; }
.kind-Gap { color: var(--bad); background: var(--bad-soft); }
.kind-Question { color: var(--info); background: var(--info-soft); }
.lib { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.lib table { min-width: 720px; }
.lib td.q { font-weight: 600; width: 34%; }
.lib td.a { color: var(--fg); }
.libbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.libbar input { max-width: 320px; }
.libadd { display: grid; gap: 8px; padding: 14px 16px; }
/* Document viewer (PDFs live inside the page's own storage, so they open here, not in a new tab) */
dialog.docview { width: min(920px, 96vw); max-height: 92vh; border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--fg); }
dialog.docview::backdrop { background: rgba(0,0,0,.45); }
.dvhead { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.dvhead h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvbody { padding: 16px; overflow: auto; max-height: calc(92vh - 60px); display: grid; gap: 16px; background: var(--bg); }
.dvbody canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.dvmsg { color: var(--muted); text-align: center; padding: 40px 10px; }
/* Inbox: jobs the scanner found */
.leads { display: grid; gap: 10px; }
.lead { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; min-width: 0; }
.lead .ltop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: start; }
.lead .lco { font-size: 13px; color: var(--muted); }
.lead h3 { font: 700 17px/1.25 var(--display); margin: 1px 0 2px; }
.lead h3 a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.lead .lwhy { font-size: 14px; }
.lead .lgap { font-size: 13px; color: var(--muted); }
.lead .lact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.scanline { font-size: 13px; color: var(--muted); }
/* Search health metrics */
.metrics { display: grid; gap: 10px; }
.mhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mhead h3 { font: 700 15px/1.2 var(--display); margin: 0; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mtile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; position: relative; }
.mtile::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--idle); }
.mtile.ok::before { background: var(--ok); } .mtile.warn::before { background: var(--warn); }
.mtile.north { border-color: var(--accent); background: var(--accent-soft); }
.mtile .ml { font-size: 12px; color: var(--muted); font-weight: 600; }
.mtile .mv { font: 700 24px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.mtile.north .mv { font-size: 30px; }
.mtile .mt { font-size: 12px; color: var(--muted); }
.mtile .mstate { font-size: 11px; font-weight: 700; }
.mtile.ok .mstate { color: var(--ok); } .mtile.warn .mstate { color: var(--warn); } .mtile.none .mstate { color: var(--idle); }
.mhow { font-size: 13px; color: var(--muted); }
.mhow table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.mhow td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.mhow td:first-child { color: var(--fg); font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .mgrid { grid-template-columns: 1fr 1fr; } .mhow td:first-child { white-space: normal; } }
.prefs summary { font-size: 13px; }
.pgrid { display: grid; gap: 12px; margin: 10px 0; }
.prow { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.plabel { font-weight: 600; font-size: 14px; } .plabel span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--surface); }
.pchip { display: inline-flex; align-items: center; gap: 4px; background: var(--idle-soft); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; }
.pdel { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; }
.padd { border: 0; background: transparent; min-width: 160px; flex: 1; font: inherit; font-size: 13px; color: var(--fg); padding: 4px; }
input.padd[type=number] { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 180px; }
@media (max-width: 520px) { .prow { grid-template-columns: 1fr; gap: 6px; } }
/* Jobs view (review one role at a time) */
.subnav[hidden] { display: none; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.subnav .chip .n { font: 500 12px var(--mono); color: var(--muted); margin-left: 6px; }
.jstats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.jstat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.jl { font-size: 12px; color: var(--muted); font-weight: 600; }
.jv { font: 700 30px/1.1 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.js { font-size: 12px; color: var(--muted); margin-top: 2px; }
.jlive { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-live { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: pulse 2s infinite; }
.dot-paused { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.dot-idle { background: var(--idle); box-shadow: 0 0 0 4px var(--idle-soft); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }
.jbtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.stagebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--idle-soft); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: 600 14px var(--body); color: var(--muted); cursor: pointer; position: relative; }
.seg.sm button { padding: 5px 11px; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg button b { margin-left: 6px; color: var(--accent); font-variant-numeric: tabular-nums; }
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
.deck { display: grid; grid-template-columns: 1.25fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 30px rgba(11,31,24,.06); }
.dleft { padding: 24px 26px; min-width: 0; } .dright { background: var(--accent-soft); padding: 24px 26px; border-left: 1px solid var(--line); min-width: 0; }
.dco { display: flex; gap: 14px; align-items: center; }
.mono { width: 52px; height: 52px; border-radius: 14px; color: #fff; display: grid; place-items: center; font: 700 22px var(--display); flex: none; }
.dname { color: var(--muted); font-weight: 600; }
.deck h2 { font: 700 24px/1.15 var(--display); margin: 2px 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.tag { border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; background: var(--idle-soft); color: var(--fg); white-space: nowrap; }
.m-top { background: var(--ok-soft); color: var(--ok); } .m-strong { background: var(--info-soft); color: var(--info); } .m-poss { background: var(--idle-soft); color: var(--muted); } .m-aside { background: var(--warn-soft); color: var(--warn); }
.t-pay { background: var(--accent-soft); color: var(--accent); } .t-old { background: var(--warn-soft); color: var(--warn); }
.dsum { margin: 4px 0 14px; }
.dlinks { display: flex; gap: 10px; flex-wrap: wrap; }
.dright h3 { font: 700 16px var(--display); margin: 0 0 8px; }
.ck { display: flex; gap: 10px; margin: 9px 0; font-size: 14px; }
.ck i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); color: var(--ok); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; }
.ck.w i { background: var(--warn-soft); color: var(--warn); }
.dfoot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.big { border: 0; border-radius: 12px; padding: 11px 24px; font: 700 15px var(--body); cursor: pointer; }
.b-no { background: var(--bad-soft); color: var(--bad); } .b-later { background: var(--idle-soft); color: var(--fg); } .b-go { background: var(--accent); color: #fff; padding: 11px 30px; }
.big:hover { filter: brightness(.97); } .big:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kbd { font-size: 12px; color: var(--muted); }
.dfoot .spacer, .stagebar .spacer, .lbar .spacer { flex: 1; }
.prog { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.dreasons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.key { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--idle-soft); font: 600 11px var(--mono); margin-right: 6px; }
.upnext { display: grid; gap: 8px; }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mini { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 13px/1.35 var(--body); color: var(--fg); display: grid; gap: 2px; cursor: pointer; }
.mini b { font-size: 14px; } .mini span:last-child { color: var(--muted); }
.mini .ml { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: none; padding: 0; }
.undo { background: var(--fg); color: var(--bg); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.undo .linkbtn { color: var(--bg); margin-left: 6px; font-weight: 700; }
.dempty { text-align: center; padding: 56px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; }
.dempty h2 { font: 700 22px var(--display); margin: 0 0 4px; }
.lbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.lbar input[type=search] { width: auto; flex: 1 1 220px; max-width: 360px; } .lbar select { width: auto; }
.setsec .mhead h3 { display: none; } .prefs .pgrid { grid-template-columns: 1fr; }
.ltable { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
.ltable table { width: 100%; border-collapse: collapse; }
.ltable th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ltable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ltable tr[data-open] { cursor: pointer; } .ltable tr[data-open]:hover { background: var(--accent-soft); }
.ltable .co { font-weight: 600; } .ract { white-space: nowrap; text-align: right; } .ract .btn { margin-left: 6px; }
.sech { font: 700 16px var(--display); margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
.setgrid { display: grid; gap: 18px; } .setsec { padding: 18px 20px; } .setsec h2 { margin-top: 0; }
@media (max-width: 860px) { .jstats { grid-template-columns: 1fr 1fr; } .jstat.wide { grid-column: 1 / -1; } .deck { grid-template-columns: 1fr; } .dright { border-right: 0; border-top: 1px solid var(--line); } .kbd { display: none; } }
@media (max-width: 520px) { .dleft, .dright { padding: 18px; } .dfoot { padding: 12px 18px; } .big { flex: 1; padding: 11px 14px; } .prog { order: -1; width: 100%; } .deck h2 { font-size: 20px; } }
/* clean review stage (v2) */
.jtabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
.jtabs button { white-space: nowrap; }
.jtabs button { border: 0; background: none; padding: 8px 12px; border-radius: 10px; font: 600 14px var(--body); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.jtabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.jtabs .c { font: 600 12px var(--mono); color: var(--accent); }
.jstatus { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; }
.iconbtn { border: 0; background: var(--idle-soft); color: var(--fg); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 12px; display: inline-grid; place-items: center; }
.iconbtn:hover { background: var(--line); }
.stage { margin: 0 -24px; padding: 18px 24px 30px; background: radial-gradient(1200px 400px at 50% 0%, var(--accent-soft), transparent 70%); border-radius: 18px; display: grid; justify-items: center; gap: 14px; }
.stage > * { width: 100%; max-width: 960px; }
.dtop { display: flex; align-items: center; gap: 12px; justify-content: space-between; min-height: 24px; }
.dstack { position: relative; }
.dstack::before { content: ""; position: absolute; left: 3%; right: 3%; top: -8px; height: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; opacity: .7; z-index: 0; }
.dstack .deck { position: relative; z-index: 1; }
.deck { grid-template-columns: 1.15fr 1fr; }
.deck .dright { background: var(--bg); margin: 16px 16px 16px 0; border: 0; border-radius: 14px; }
.deck h2 { font-size: 22px; margin: 0; }
.deck .dname { font-weight: 500; }
.deck h4 { font: 700 13px var(--body); margin: 14px 0 6px; color: var(--fg); }
.dright h4:first-child { margin-top: 0; }
.ck.w i { background: var(--bad-soft); color: var(--bad); font-size: 10px; }
.viewjob { display: inline-flex; font-size: 13px; font-weight: 600; color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; text-decoration: none; }
.viewjob:hover { background: var(--idle-soft); }
.dacts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dacts .big { min-width: 150px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.b-no { background: var(--bad); color: #fff; } .b-later { background: var(--surface); color: var(--fg); border: 1px solid var(--line) !important; } .b-go { background: var(--ok); color: #fff; }
.big .k { font: 600 11px var(--mono); background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 5px; }
.dnote { text-align: center; font-size: 12px; color: var(--muted); margin: -4px 0 0; }
.dreasons { justify-content: center; }
.upnext { margin-top: 10px; }
.upnext .ugrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.undo { padding: 6px 12px; font-size: 13px; }
@media (max-width: 860px) { .deck { grid-template-columns: 1fr; } .stage { margin: 0; padding: 12px 0 20px; } .dstack::before { display: none; } .deck .dright { margin: 0 16px 16px; } .dacts .big { min-width: 0; flex: 1; } }
.jtabs2 { display: flex; gap: 28px; border-bottom: 1px solid var(--line); flex: 1 1 auto; }
.jtabs2 button { border: 0; background: none; padding: 10px 2px 12px; display: inline-flex; align-items: center; gap: 9px; font: 600 17px var(--body); color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.jtabs2 button svg { color: var(--idle); }
.jtabs2 button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.jtabs2 button[aria-selected="true"] svg { color: var(--accent); }
.jtabs2 .cnt, .ftabs .cnt { font: 600 12px var(--body); background: var(--idle-soft); color: var(--muted); border-radius: 999px; padding: 2px 9px; }
.stagebar { align-items: flex-end; }
.stagebar .jtabs2 + .spacer { display: none; }
.stagebar .jstatus { margin-bottom: 8px; }
.ftabs { display: flex; gap: 18px; flex-wrap: wrap; }
.ftabs button { border: 0; background: none; padding: 6px 0; font: 600 14px var(--body); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; gap: 7px; align-items: center; }
.ftabs button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }
@media (max-width: 520px) { .jtabs2 { gap: 18px; } .jtabs2 button { font-size: 15px; } .stagebar .jstatus { margin-bottom: 0; } }
/* ===== Jobs: AI Apply replica (Quick Review + Your Jobs) ===== */
#v-apply { --qrw: clamp(640px, 52vw, 1040px); --ai-ink: #0f172a; --ai-sub: #64748b; --ai-line: #e9ebef; --ai-soft: #f4f5f7; --ai-purple: #6c47ff; --ai-purple-soft: #f1edff; --ai-green: #22c55e; --ai-green-ink: #15803d; --ai-green-soft: #e7f8ee; --ai-red: #ef4444; --ai-red-soft: #fdecec; font-family: "Outfit", var(--body); color: var(--ai-ink); }
#v-apply .stagebar { display: block; }
.aihead { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.aihead h2 { font: 700 24px/1.1 "Outfit", var(--display); margin: 0; }
.spill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; background: #eefaf2; border-radius: 999px; padding: 5px 12px; color: var(--ai-ink); }
.spill .dot { width: 7px; height: 7px; box-shadow: none; }
.aitabs { display: flex; gap: 28px; border-bottom: 1px solid var(--ai-line); }
.aitabs button { border: 0; background: none; padding: 10px 2px 12px; display: inline-flex; align-items: center; gap: 8px; font: 500 16px "Outfit", var(--body); color: #9aa1ad; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.aitabs button svg { color: #a3a8b3; }
.aitabs button[aria-selected="true"] { color: var(--ai-ink); border-bottom-color: var(--ai-purple); }
.aitabs button[aria-selected="true"] svg { color: #e0577f; }
.aitabs button[data-av="all"][aria-selected="true"] svg { color: var(--ai-purple); }
.yc { font: 500 12px "Outfit", var(--body); background: var(--ai-soft); color: #4b5563; border-radius: 999px; padding: 2px 9px; }
.ydot { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-red); display: inline-block; }
/* Quick Review */
.qrstage { grid-template-columns: minmax(0, 1fr); margin: 0 calc(-1 * clamp(16px, 2.2vw, 40px)); padding: 26px 24px 32px; min-height: max(560px, calc(100vh - 230px)); background: linear-gradient(115deg, #fbe3e6 0%, #f8eaea 45%, #eef4ea 100%); display: grid; justify-items: center; align-content: start; gap: 16px; }
.qrstack { position: relative; width: 100%; max-width: var(--qrw); min-width: 0; justify-self: center; }
.qrstage > * { min-width: 0; }
.qrbtns, .qrnote, .toast, .qrnext, .qrempty { justify-self: center; width: 100%; max-width: var(--qrw); }
.qrage { font-weight: 400; color: var(--ai-sub); margin-left: 8px; } .qrage.old { color: #9a5b00; }
.ytable th.ra { text-align: right; }
.qrnote span { max-width: 900px; }
.qrstack::before { content: ""; position: absolute; left: 5%; right: 5%; top: -9px; height: 40px; background: #fff; border-radius: 22px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.qrcard { position: relative; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05); }
.qrtop { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qrl { padding: 4px 4px 4px 2px; min-width: 0; }
.qrhead { display: flex; gap: 12px; align-items: flex-start; }
.alogo { width: 26px; height: 26px; border-radius: 7px; color: #fff; display: inline-grid; place-items: center; font: 700 13px "Outfit", var(--body); flex: none; }
.alogo.big { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; box-shadow: 0 0 0 1px var(--ai-line); }
.qrhead h2 { font: 600 clamp(19px, 1.25vw, 23px)/1.25 "Outfit", var(--body); margin: 0; }
.qrco { font-size: 13px; color: #475569; display: inline-flex; align-items: center; gap: 2px; } .chev { color: #94a3b8; display: inline-flex; }
.qrtag { font-size: 11.5px; color: var(--ai-sub); margin-top: 2px; }
.chips { display: flex; flex-wrap: nowrap; gap: 6px; margin: 12px 0 8px; align-items: center; min-width: 0; }
.chips > * { flex: none; white-space: nowrap; } .chips > .cloc { flex: 0 1 auto; min-width: 96px; overflow: hidden; } .chips > .cloc svg { flex: none; } .cloc .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.askopt { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--idle-soft); border-radius: 999px; padding: 2px 9px; }
.rsub { display: grid; gap: 2px; margin: -2px 0 6px 32px; } .rsub[hidden] { display: none; }
.rsb { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font: 500 14px "Outfit", var(--body); color: var(--muted); cursor: pointer; }
.rsb span:first-child { flex: 1; } .rsb .n { font: 600 11px "Outfit", var(--body); background: var(--idle-soft); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.rsb:hover { background: var(--idle-soft); color: var(--fg); } .rsb[aria-current="page"] { color: var(--fg); font-weight: 600; background: var(--idle-soft); } .rsb[aria-current="page"] .n { background: #6c47ff; color: #fff; }
@media (max-width: 1100px) { .rsub { display: none !important; } }
@media (min-width: 1101px) { .aitabs .jtab { display: none; } #t-apply .n { display: none; } }
.qrl { container-type: inline-size; } @container (max-width: 470px) { .chips .clvl { display: none; } }
.vtog { display: inline-flex; align-self: center; border: 1px solid var(--ai-line); border-radius: 10px; padding: 3px; gap: 2px; background: #fff; }
.vtog button { border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font: 500 14px "Outfit", var(--body); color: #6b7280; cursor: pointer; margin: 0; }
.vtog button[aria-pressed="true"] { background: var(--ai-soft); color: var(--ai-ink); font-weight: 600; } .vtog svg { width: 15px; height: 15px; }
.jempty { max-width: 560px; margin: 40px auto; text-align: center; display: grid; gap: 10px; padding: 32px 24px; background: #fff; border-radius: 20px; border: 1px solid var(--ai-line); }
.jempty h3 { margin: 0; font: 600 22px "Outfit", var(--body); } .jempty p { margin: 0; color: var(--muted); line-height: 1.55; }
.ivbar { height: 8px; border-radius: 99px; background: var(--ai-soft); overflow: hidden; margin: 6px 0; } .ivbar i { display: block; height: 100%; background: #6c47ff; border-radius: 99px; }
.rchead { display: grid; gap: 2px; margin: 4px 0 14px; } .rchead b { font: 600 17px "Outfit", var(--body); } .rchead span { color: var(--muted); font-size: 14px; }
.rplist { display: grid; gap: 14px; }
.rp { border: 1px solid var(--ai-line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; background: #fff; } .rp.done { background: var(--ai-soft); }
.rph { display: flex; align-items: center; gap: 12px; } .rpav { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eef1ff; color: #3b4fd1; font: 600 16px "Outfit", var(--body); flex: none; }
.rpn { display: grid; min-width: 0; flex: 1; } .rpn b { font-size: 15.5px; } .rpn b a { color: inherit; } .rpn small { color: var(--muted); font-size: 13px; }
.rpslot { font: 600 12px "Outfit", var(--body); color: var(--muted); background: var(--ai-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rpcontact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.rpemail { font-weight: 600; user-select: all; overflow-wrap: anywhere; min-width: 0; } .rpnone { color: var(--muted); }
.rpver { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #2f7a3d; background: #eef6ef; border-radius: 999px; padding: 1px 8px; } .rpver svg { width: 12px; height: 12px; }
.rpli { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #0a66c2; text-decoration: none; } .rpli:hover { text-decoration: underline; } .rpli svg { width: 12px; height: 12px; }
.rpprof { margin: 0; color: var(--muted); font-size: 13px; }
.rpact { display: grid; gap: 10px; } .rpn b a.rplin, .rplin { margin-left: 10px; font: 600 12.5px var(--body); color: #0a66c2; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px; } .rplin:hover { text-decoration: underline; } .rplin svg { width: 16px; height: 16px; display: block; border-radius: 3px; } .rpn b a.rplin { margin-left: 8px; vertical-align: -3px; display: inline-block; } .rptl { margin-top: 2px; }
.rpland { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; background: #f6f8fc; border-radius: 10px; padding: 8px 12px; } .rpland b { font-weight: 600; margin-right: 4px; color: var(--ai-ink, #222); }
.rpsec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; } .rpsec a.linkbtn { text-decoration: none; display: inline-flex; gap: 4px; align-items: center; } .rpsec svg { width: 12px; height: 12px; }
.rprows { display: grid; gap: 0; border-top: 1px solid var(--ai-line); margin-top: 6px; }
.rprow { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ai-line); }
.rprow .rph { margin: 0; } .rprow .rpav { width: 28px; height: 28px; font-size: 12px; } .rprbtn { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 700px) { .rprow { grid-template-columns: 1fr; } .rprbtn { justify-content: flex-start; } }
.em-due { background: #f5f5f4; color: #57534e; } .em-due.now { background: #fff4e5; color: #b45309; }
a.emchip { text-decoration: none; }
.emtrail, .emseq { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; } .emarrow { color: var(--muted); font-size: 13px; }
.emchip { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid transparent; border-radius: 999px; padding: 2px 9px; font: 600 12px/1.5 var(--body); cursor: pointer; white-space: nowrap; }
.emchip small { font-weight: 500; opacity: .75; } .emchip:hover, .emchip.on { border-color: currentColor; }
.em-confirmation { background: #eef3fb; color: #2456a6; } .em-interview { background: #eef6ef; color: #2f7a3d; } .em-offer { background: #e7f6ec; color: #136c34; }
.em-rejection { background: #fdf0ef; color: #b42318; } .em-reply { background: #f4effb; color: #6b3fa0; } .em-other { background: #f2f2f2; color: #555; }
.yem { min-width: 160px; } .emnone { color: var(--muted); font-size: 12.5px; } .demails { margin: 4px 0 8px; }
.empop { display: grid; gap: 10px; max-width: 620px; } .emsubj { margin: 6px 0 0; font: 600 18px/1.3 "Outfit", var(--body); } .emmeta { margin: 0; color: var(--muted); font-size: 13px; }
.emsnip { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; } .empop .qbtn { justify-self: start; text-decoration: none; }
.rpwhy { margin: 0; color: var(--muted); font-size: 14px; } .rpshared { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #2f7a3d; background: #eef6ef; border-radius: 999px; padding: 1px 8px; }
.rpmsg { white-space: pre-wrap; background: #faf8f5; border: 1px solid #efe9e1; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; position: relative; } .rpmsg small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.rpmail { display: grid; gap: 10px; border-top: 1px solid var(--ai-line); padding-top: 12px; } .rpmail label { display: grid; gap: 4px; font: 600 12px "Outfit", var(--body); color: var(--muted); }
.rpmail input, .rpmail textarea { font: 400 14.5px/1.5 var(--body); color: var(--fg); border: 1px solid var(--ai-line); border-radius: 10px; padding: 9px 12px; background: #fff; width: 100%; box-sizing: border-box; }
.rpmail.view { border-top: 0; padding-top: 0; }
.rpact .rpbtns { align-items: center; gap: 12px; } .rpact .rpbtns .linkbtn { font-size: 13.5px; }
.rpmore { margin-left: auto; position: relative; } .rpmore summary { list-style: none; cursor: pointer; font-size: 13.5px; color: var(--muted); padding: 4px 6px; border-radius: 8px; } .rpmore summary::-webkit-details-marker { display: none; }
.rpmore summary:hover, .rpmore[open] summary { background: #f2f2f0; color: var(--fg); }
.rpmenu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; min-width: 210px; background: #fff; border: 1px solid var(--ai-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.rpmenu button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 14px; } .rpmenu button:hover { background: #f4f4f2; }
.rpprev { position: relative; border: 1px solid var(--ai-line); border-radius: 12px; padding: 14px 16px 6px; background: #fff; }
.rppsub { font-weight: 600; font-size: 15px; padding-right: 110px; } .rppto { color: var(--muted); font-size: 12.5px; margin: 2px 0 10px; }
.rppbody p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; } .rppacts { position: absolute; top: 12px; right: 14px; display: flex; gap: 12px; font-size: 13px; }
.rpto { display: flex; gap: 8px; align-items: center; } .rpto input { flex: 1; min-width: 0; } .rpto .qbtn { flex: none; white-space: nowrap; }
.rpmailmsg { margin: 0; font-size: 13.5px; color: #b42318; } .rpmailmsg.ok { color: #2f7a3d; }
.rpbtns .qbtn { font: 600 14px "Outfit", var(--body); padding: 8px 14px; border-radius: 10px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--fg); } .rpbtns .rpcopy { background: #1f6b52; color: #fff; border-color: transparent; }
.rpbtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rpbtns .spacer { flex: 1; } .linkbtn.muted { color: var(--muted); }
.rpst { margin: 0; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rpdue { margin: 0; color: #9a5b00; font-size: 13.5px; font-weight: 600; }
.trs.trcancel { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .trcancel .th { display: none; } .trcancel:hover, .trcancel:focus-visible { background: var(--ai-red-soft); color: #e11d48; } .trcancel:hover .tn, .trcancel:focus-visible .tn { display: none; } .trcancel:hover .th, .trcancel:focus-visible .th { display: inline; }
.chip2 { display: inline-flex; align-items: center; gap: 5px; background: var(--ai-soft); color: #1f2937; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 500; }
.chip2 svg { color: #64748b; } .chip2.old { background: #fff4e5; color: #9a5b00; } .chip2.plain { background: none; padding: 3px 4px; }
.mpill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mt-top, .mt-strong { background: var(--ai-green-soft); color: var(--ai-green-ink); } .mt-good { background: #eaf1ff; color: #2952cc; } .mt-aside { background: var(--ai-soft); color: var(--ai-sub); }
.mpill .inf { color: inherit; opacity: .55; display: inline-flex; }
.vjob { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe2e7; border-radius: 999px; padding: 5px 12px; font: 600 13px "Outfit", var(--body); color: var(--ai-ink); text-decoration: none; background: #fff; }
.vjob svg { color: #64748b; } .vjob:hover { background: var(--ai-soft); } .vjob.big { padding: 8px 16px; font-size: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.qrlabel { font: 600 12.5px "Outfit", var(--body); color: #475569; margin: 14px 0 6px; }
.qrsum { margin: 0; font-size: clamp(15px, 0.95vw, 17px); line-height: 1.6; }
.qrr { background: var(--ai-soft); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.qrr .qrlabel:first-child { margin-top: 0; }
.qrwhy { font-size: clamp(15.5px, 1vw, 18px); line-height: 1.5; margin: 0 0 4px; }
.km { display: flex; gap: 8px; align-items: flex-start; font-size: clamp(14.5px, 0.92vw, 16.5px); margin: 7px 0; color: #1f2937; }
.km svg { color: var(--ai-green); flex: none; margin-top: 1px; } .km.gap svg { color: var(--ai-red); } .km.gap { font-size: 12.5px; }
.about { margin-top: 14px; border: 1px solid var(--ai-line); border-radius: 14px; padding: 12px 14px; }
.abhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.abhead b { font: 600 14px "Outfit", var(--body); } .abhead span { font-size: 11.5px; color: var(--ai-sub); } .abhead i { font-style: normal; margin: 0 4px; color: #cbd5e1; }
.about p { font-size: 12.5px; color: #475569; margin: 6px 0 0; line-height: 1.55; }
.qrbtns { display: flex; gap: 10px; justify-content: center; }
.qrbtns { align-items: flex-start; } .qbsend { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qb.qb-ign { color: #c2332b; } .qb.qb-ign:hover { background: #fdf3f2; border-color: #f3c9c5; }
.qbwhen { font-weight: 500; opacity: .9; font-size: 14px; } .qbnow { font-size: 14px; }
.qrsend:empty { display: none; } .qrsend { text-align: center; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); } .qrsend.ok { color: #2f7a3d; } .qrsend.err { color: #b42318; }
.qb { min-width: clamp(140px, 11vw, 240px); border-radius: 999px; padding: 12px 24px; font: 600 16px "Outfit", var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; }
.qb-no { background: var(--ai-red); color: #fff; box-shadow: 0 3px 0 #d63030, 0 4px 10px rgba(239,68,68,.25); }
.qb-skip { background: #fff; color: var(--ai-ink); border-color: #e5e7eb; box-shadow: 0 3px 0 #e5e7eb; }
.qb-yes { background: var(--ai-green); color: #fff; box-shadow: 0 3px 0 #16a34a, 0 4px 10px rgba(34,197,94,.25); }
.qb:active { transform: translateY(2px); box-shadow: none; }
.qb .kk { display: inline-grid; place-items: center; width: 20px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.3); }
.qrnote { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12.5px; color: #475569; margin: 0; text-align: center; flex-wrap: wrap; }
.qrnote u { text-underline-offset: 2px; }
.toast { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #111827; color: #fff; border-radius: 12px; padding: 8px 12px; font-size: 13px; max-width: 640px; }
.toast .tw { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; color: #cbd5e1; }
.toast .tr { border: 1px solid #374151; background: none; color: #fff; border-radius: 999px; padding: 2px 9px; font: 500 12px "Outfit", var(--body); cursor: pointer; }
.toast .kn { opacity: .55; margin-right: 4px; }
.toast .tu { margin-left: auto; border: 0; background: none; color: #a5b4fc; font: 600 13px "Outfit", var(--body); cursor: pointer; }
.qrnext { display: none !important; }
.qrnl { font-size: 12.5px; color: #475569; font-weight: 600; margin-bottom: 6px; }
.qrng { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.qrn { width: 100%; min-width: 0; overflow: hidden; } .qrn .mpill, .qrn .alogo { flex: none; }
.qrn { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; padding: 8px 10px; cursor: pointer; text-align: left; font: 13px "Outfit", var(--body); color: var(--ai-ink); }
.qrn > span:nth-child(2) { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: baseline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qrn > span:nth-child(2) span { color: #475569; overflow: hidden; text-overflow: ellipsis; }
.qrn:hover { background: #fff; }
.qrempty { background: #fff; border-radius: 22px; padding: 48px 24px; text-align: center; max-width: 640px; width: 100%; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.qrempty h2 { font: 600 20px "Outfit", var(--body); margin: 0 0 6px; } .qrempty p { color: var(--ai-sub); margin: 0 0 12px; }
/* Your Jobs */
.yj { display: grid; gap: 14px; }
.ystats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ystat { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 0 0 1px var(--ai-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ysn { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; } .ysn .dot { width: 7px; height: 7px; box-shadow: none; }
.yss { font-size: 12px; color: var(--ai-sub); margin-top: 2px; }
.ysl { font-size: 13px; font-weight: 500; } .ysv { font: 600 22px/1.2 "Outfit", var(--body); margin-top: 2px; }
.yact { display: flex; gap: 6px; align-items: center; }
.ybtn, .ybtn2 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 13px "Outfit", var(--body); color: var(--ai-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.yicon { border: 0; background: none; color: #334155; width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; } .yicon:hover { background: var(--ai-soft); }
.ycard { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 0 0 1px var(--ai-line); overflow: hidden; }
.ybar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 0; }
.ytabs { display: flex; gap: 22px; flex: 1; }
.ytabs button { border: 0; background: none; padding: 8px 2px 10px; display: inline-flex; gap: 7px; align-items: center; font: 500 14px "Outfit", var(--body); color: #9aa1ad; cursor: pointer; border-bottom: 2.5px solid transparent; }
.ytabs button[aria-pressed="true"] { color: var(--ai-ink); border-bottom-color: var(--ai-purple); }
.ytabs button[aria-pressed="true"] .yc { background: var(--ai-purple-soft); color: var(--ai-purple); }
.ytools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.ysearch { position: relative; display: inline-flex; align-items: center; }
.ysearch input { border: 1px solid #e5e7eb; border-radius: 999px; padding: 7px 34px 7px 14px; font: 13px "Outfit", var(--body); width: 230px; background: #fff; }
.ysearch svg { position: absolute; right: 12px; color: #94a3b8; pointer-events: none; }
.ysort { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e5e7eb; border-radius: 999px; padding: 0 6px 0 12px; background: #fff; }
.ysort select { border: 0; background: none; font: 500 13px "Outfit", var(--body); padding: 7px 4px; width: auto; color: var(--ai-ink); }
.ytable { overflow-x: auto; }
.ytable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ytable th { text-transform: none; letter-spacing: 0; background: #f7f7f8; text-align: left; font: 500 12.5px "Outfit", var(--body); color: #475569; padding: 9px 14px; border-top: 1px solid var(--ai-line); border-bottom: 1px solid var(--ai-line); white-space: nowrap; }
.ytable td { padding: 9px 14px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.ytable tr[data-yopen] { cursor: pointer; } .ytable tr[data-yopen]:hover td { background: #fafafa; }
.ycn { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .yname { font-weight: 500; }
.sbadge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ai-line); border-radius: 6px; padding: 2px 9px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: #fff; }
.sbadge i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-purple); }
.st-review { color: var(--ai-purple); } .st-applied { color: var(--ai-green-ink); } .st-declined { color: #64748b; } .st-prep { color: #9a5b00; } .st-need { color: #fff; background: var(--ai-red); border-color: var(--ai-red); } .st-ready { color: var(--ai-purple); background: var(--ai-purple-soft); border-color: transparent; } .st-approved { color: #2952cc; }
.jpill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ai-line); border-radius: 999px; padding: 4px 6px 4px 12px; max-width: 520px; }
.jpill > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt { color: #64748b; white-space: nowrap; }
.ra { text-align: right; white-space: nowrap; }
.ydec, .yapp, .yopen { border: 0; border-radius: 999px; padding: 6px 14px; font: 600 13px "Outfit", var(--body); cursor: pointer; margin-left: 6px; }
.ydec { background: var(--ai-red-soft); color: #e11d48; } .yapp { background: var(--ai-green); color: #fff; box-shadow: 0 2px 0 #16a34a; } .yopen { background: var(--ai-soft); color: var(--ai-ink); }
.yempty { text-align: center; color: var(--ai-sub); padding: 30px !important; }
.ypager { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px; font-size: 13px; }
.ypager button { border: 0; background: none; cursor: pointer; color: var(--ai-ink); display: inline-flex; padding: 4px; } .ypager button:disabled { opacity: .3; cursor: default; }
.yfoot { font-size: 12.5px; color: var(--ai-sub); margin: 0; }
/* drawer */
.dscrim { position: fixed; inset: 0; background: rgba(15,23,42,.18); z-index: 40; }
.drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; width: min(440px, calc(100vw - 16px)); background: #fff; border-radius: 16px; box-shadow: -10px 0 40px rgba(15,23,42,.15); z-index: 41; display: flex; flex-direction: column; font-family: "Outfit", var(--body); }
.dh { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 4px; }
.dtitle { font: 600 17px/1.25 "Outfit", var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dco2 { font-size: 13px; color: var(--ai-sub); }
.dchips { padding: 0 12px; margin: 6px 0; }
.dtabs { display: inline-flex; gap: 2px; background: var(--ai-soft); border-radius: 12px; padding: 4px; margin: 0 12px 8px; align-self: flex-start; flex-wrap: wrap; }
.dtabs button { border: 0; background: none; border-radius: 9px; padding: 6px 12px; font: 500 14px "Outfit", var(--body); color: #475569; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.dtabs button[aria-pressed="true"] { background: #fff; color: var(--ai-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.dbody { flex: 1; overflow-y: auto; padding: 6px 14px 14px; }
.dtext { font-size: 14px; line-height: 1.6; margin: 6px 0 12px; } .dtext.muted { color: var(--ai-sub); }
.dsec { font: 600 13px "Outfit", var(--body); color: #64748b; margin: 14px 0 6px; } .dmeta { font-weight: 400; font-size: 12px; margin-left: 8px; }
.dfit .mpill { font-size: 15px; background: none; padding: 0; margin: 4px 0 10px; }
.dwhy { background: var(--ai-soft); border-radius: 12px; padding: 12px 14px; } .dwt { display: flex; gap: 8px; align-items: center; font-weight: 600; } .dwhy p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.dq { font: 600 16px "Outfit", var(--body); margin: 16px 0 0; }
.dwait { background: var(--ai-soft); border-radius: 12px; padding: 14px; font-size: 14px; } .dwait p { margin: 6px 0 0; color: #475569; }
.dkv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; } .dkv span { color: var(--ai-sub); }
.dbody .kit { box-shadow: none; border: 0; padding: 0; } .dbody .kit .khead, .dbody .kit .knote:first-of-type { display: none; } .dbody .kcols { grid-template-columns: 1fr !important; }
.dfoot2 { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--ai-line); }
@media (max-width: 760px) { .qrtop { grid-template-columns: 1fr; } .qrstage { margin: 0; padding: 14px 10px 20px; border-radius: 14px; } .qb { min-width: 0; flex: 1; padding: 10px 12px; } .ystats { grid-template-columns: 1fr; } .ytabs { gap: 14px; overflow-x: auto; } .ysearch input { width: 170px; } .ytable th:nth-child(3), .ytable td:nth-child(3) { display: none; } .jpill { max-width: 220px; } }
.dsec2 { color: var(--ai-ink); font-size: 15px; }
.dsub { font: 600 15px "Outfit", var(--body); margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }
.dletter { background: var(--ai-soft); border-radius: 12px; padding: 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
.dfile { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ai-line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ai-ink); margin-top: 8px; }
.dfile .pdf { width: 30px; height: 36px; border: 1.5px solid #ef4444; border-radius: 4px; color: #ef4444; font: 700 9px "Outfit", var(--body); display: grid; place-items: end center; padding-bottom: 4px; flex: none; }
.dfile b { display: block; font-weight: 600; font-size: 13.5px; } .dfile small { color: var(--ai-sub); }
.dlines { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #475569; }
.dqa { background: var(--ai-soft); border-radius: 12px; padding: 10px 14px; margin: 6px 0; font-size: 14px; position: relative; }
.dqa small { display: block; color: var(--ai-sub); font-size: 12px; } .dqa .src { display: inline-block; margin-top: 6px; font-size: 11px; }
.dapprove { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--ai-line); border-radius: 12px; padding: 10px; margin: 6px 0 10px; position: sticky; top: 0; z-index: 2; }
.dapprove .ydec, .dapprove .yapp, .dapprove .yopen { margin-left: 0; } .yapp:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.need { color: var(--ai-red); font-weight: 600; font-size: 13px; }
/* ===== right rail + Inbox ===== */
.wrap { padding-left: calc(232px + max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-left, 0px))); }
.phead { justify-content: flex-end; min-height: 0; }
.phead:has(#addBtn[hidden]) { display: none; }
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: 216px; z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: calc(18px + env(safe-area-inset-top, 0px)) 12px 18px calc(12px + env(safe-area-inset-left, 0px)); background: var(--surface); border-right: 1px solid var(--line); border-bottom: 0; overflow-y: auto; font-family: "Outfit", var(--body); }
.rbrand { display: flex; align-items: center; gap: 10px; font: 600 15px "Outfit", var(--body); padding: 4px 8px 18px; color: var(--fg); }
.rlogo { width: 28px; height: 28px; border-radius: 8px; background: var(--fg); color: var(--surface); display: grid; place-items: center; font: 700 15px "Outfit", var(--body); }
.rail .tab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; border-bottom: 0; font: 500 15px "Outfit", var(--body); color: var(--muted); }
.rail .tab svg { flex: none; color: currentColor; }
.rail .tab .rl { flex: 1; }
.rail .tab .n { font: 600 11.5px "Outfit", var(--body); background: var(--idle-soft); color: var(--muted); border-radius: 999px; padding: 2px 8px; margin: 0; }
.rail .tab .n:empty { display: none; }
.rail .tab:hover { background: var(--idle-soft); color: var(--fg); }
.rail .tab[aria-selected="true"] { background: var(--idle-soft); color: var(--fg); font-weight: 600; }
.rail .tab[aria-selected="true"] .n { background: #6c47ff; color: #fff; }
.ihead .aihead, .ibox .aihead { margin-bottom: 12px; }
.itoggle { display: inline-flex; background: var(--idle-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.itoggle button { border: 0; background: none; border-radius: 8px; padding: 5px 12px; font: 500 13.5px "Outfit", var(--body); color: var(--muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.itoggle button svg { display: none; }
.itoggle button[aria-pressed="true"] { background: #6c47ff; color: #fff; } .itoggle button[aria-pressed="true"] .yc { background: rgba(255,255,255,.25); color: #fff; }
.ibox { font-family: "Outfit", var(--body); }
.mtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.mail { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; min-height: 70vh; }
.mlist { border-right: 1px solid var(--line); overflow-y: auto; max-height: 78vh; }
.mrow { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); padding: 12px 14px; cursor: pointer; font: inherit; color: var(--fg); }
.mrow:hover { background: var(--bg); } .mrow.on { background: #f1edff; box-shadow: inset 3px 0 0 #6c47ff; }
.mrb { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mrt { display: flex; gap: 8px; align-items: baseline; } .mrt b { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrd { font-size: 12px; color: var(--muted); }
.mrow.unread .mrt b, .mrow.unread .mrs { font-weight: 700; }
.mrs { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrn { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlab { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px; margin-top: 4px; border: 1px solid transparent; }
.ml-conf { color: #6c47ff; background: #f1edff; } .ml-no { color: #64748b; background: var(--idle-soft); } .ml-int { color: #15803d; background: #e7f8ee; } .ml-rec { color: #2952cc; background: #eaf1ff; } .ml-upd { color: #9a5b00; background: #fff4e5; }
.mpane { padding: 18px 22px; overflow-y: auto; max-height: 78vh; min-width: 0; } .mpane.empty { display: grid; place-items: center; color: var(--muted); }
.mph { display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.mph h3 { font: 600 18px "Outfit", var(--body); margin: 0 0 4px; } .mfrom { font-size: 14px; } .mfrom span, .mdate { color: var(--muted); font-size: 12.5px; }
.mact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mlsel { position: relative; display: inline-flex; } .mlsel select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .mlsel .mlab { margin: 0; padding: 5px 10px; }
.mapp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 14px 0; }
.mset { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: 100%; font-size: 12.5px; color: var(--muted); } .mset .yopen { margin: 0; padding: 4px 10px; font-size: 12.5px; }
.mbody { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }
.qrng { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }
.qrn { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; }
.qrnh { display: flex; align-items: center; gap: 8px; min-width: 0; } .qrnh b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrnt { color: #475569; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrnm { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .qrnp { font-size: 12px; color: var(--ai-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) and (min-width: 481px) {
  .wrap { padding-left: calc(76px + max(16px, env(safe-area-inset-left, 0px))); }
  .rail { width: 68px; padding-right: 8px; padding-left: calc(8px + env(safe-area-inset-left, 0px)); align-items: center; }
  .rbrand span:last-child { display: none; } .rbrand { padding: 4px 0 16px; justify-content: center; }
  .rail .tab { flex-direction: column; gap: 3px; width: 56px; padding: 8px 4px; font-size: 11px; position: relative; align-items: center; text-align: center; }
  .rail .tab .rl { flex: none; }
  .rail .tab .n { position: absolute; top: 2px; right: 2px; padding: 0 5px; font-size: 10px; }
}
.mail, .ycard { min-width: 0; }
@media (max-width: 760px) { .mail { grid-template-columns: 1fr; } .mlist { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); } .qrng { grid-template-columns: 1fr !important; } }
@media (max-width: 480px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .rail { top: auto; left: 0; right: 0; width: auto; height: auto; flex-direction: row; justify-content: space-around; padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); border-right: 0; border-top: 1px solid var(--line); }
  .rbrand { display: none; } .rail .tab { flex-direction: column; gap: 2px; width: auto; padding: 6px 10px; font-size: 11.5px; position: relative; } .rail .tab .n { position: absolute; top: 0; right: 0; padding: 0 5px; font-size: 10px; }
  .mail { grid-template-columns: 1fr; } .mlist { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .qrng { grid-template-columns: 1fr !important; }
}
.qrcard { touch-action: pan-y; user-select: none; cursor: grab; will-change: transform; }
.qrcard:active { cursor: grabbing; }
.qrcard a, .qrcard button { cursor: pointer; }
.stamp { position: absolute; top: 22px; z-index: 5; font: 800 26px/1 "Outfit", var(--body); letter-spacing: .08em; padding: 6px 14px; border: 4px solid; border-radius: 10px; opacity: 0; pointer-events: none; background: rgba(255,255,255,.85); }
.st-yes { left: 22px; color: var(--ai-green); border-color: var(--ai-green); transform: rotate(-12deg); }
.st-no { right: 22px; color: var(--ai-red); border-color: var(--ai-red); transform: rotate(12deg); }
.st-skip { left: 50%; top: 40%; transform: translateX(-50%); color: #64748b; border-color: #94a3b8; }
.qrcard.tilt-yes { box-shadow: 0 10px 30px rgba(34,197,94,.25), 0 0 0 3px rgba(34,197,94,.35); }
.qrcard.tilt-no { box-shadow: 0 10px 30px rgba(239,68,68,.22), 0 0 0 3px rgba(239,68,68,.3); }
.qrhint { text-align: center; font-size: 12px; color: #64748b; margin: -6px 0 0; justify-self: center; }
@media (hover: none) { .qrhint { display: none; } }
/* application cards inside Quick Review */
.tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-self: center; width: 100%; max-width: var(--qrw); }
.trl { font: 600 12.5px "Outfit", var(--body); color: #475569; margin-right: 4px; }
.trc { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.8); border-radius: 12px; padding: 6px 12px 6px 6px; cursor: pointer; font: 13px "Outfit", var(--body); color: var(--ai-ink); text-align: left; }
.trc span { display: grid; line-height: 1.2; } .trc small { font-size: 11.5px; color: #64748b; }
.trc.on { background: #fff; box-shadow: 0 0 0 2px #6c47ff; }
.trc.tr-need small { color: var(--ai-red); font-weight: 600; } .trc.tr-ready small { color: #6c47ff; font-weight: 600; } .trc.tr-build small { color: #9a5b00; }
.trback { margin-left: auto; border: 0; background: none; font: 600 13px "Outfit", var(--body); color: #6c47ff; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.trs { flex: none; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: var(--ai-soft); color: #475569; }
.trs.tr-need { background: var(--ai-red-soft); color: #e11d48; } .trs.tr-ready { background: var(--ai-purple-soft); color: var(--ai-purple); } .trs.tr-build { background: #fff4e5; color: #9a5b00; } .trs.tr-ok { background: #eaf1ff; color: #2952cc; }
.appc .qrtop.app { margin-top: 14px; }
.appc .qrr { max-height: 560px; overflow-y: auto; }
.qrlabel.need { color: var(--ai-red); } .qrlabel span { font-weight: 400; color: var(--ai-sub); margin-left: 4px; }
.steps { display: grid; gap: 10px; margin: 6px 0 12px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #94a3b8; } .step b { font-weight: 500; } .step small { display: block; color: var(--ai-sub); font-size: 12px; }
.step.done, .step.doing, .step.you { color: var(--ai-ink); }
.sp { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; margin-top: 1px; }
.sp.done { color: var(--ai-green); } .sp.done svg { width: 20px; height: 20px; }
.sp.todo { border: 1.6px solid #cbd5e1; }
.sp.doing { border: 2px solid #e2e8f0; border-top-color: #6c47ff; animation: spin 0.9s linear infinite; }
.sp.you { background: var(--ai-red); color: #fff; font-weight: 700; font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp.doing { animation: none; } }
.dletter.sm { max-height: 200px; font-size: 13px; }
.qas { display: grid; gap: 6px; }
.appc .asks { display: grid; gap: 10px; margin-bottom: 10px; }
.appc .ask { background: #fff; border: 1.5px solid #f3c1c7; border-radius: 12px; padding: 10px 12px; }
.qb:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
/* one-shot application cards */
.qtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-self: center; width: 100%; max-width: var(--qrw); }
.qtab { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.65); border-radius: 999px; padding: 6px 14px; font: 500 13.5px "Outfit", var(--body); color: #475569; cursor: pointer; }
.qtab[aria-pressed="true"] { background: #fff; color: var(--ai-ink); box-shadow: 0 0 0 2px #6c47ff; }
.qtab.tr-ready .yc { background: var(--ai-purple-soft); color: var(--ai-purple); }
.appsec { margin-top: 16px; border-top: 1px dashed #e2e8f0; padding-top: 14px; }
.apphead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .apphead h3 { font: 600 17px "Outfit", var(--body); margin: 0; }
.appasks { margin-top: 10px; background: #fff7f8; border: 1px solid #f9d0d6; border-radius: 14px; padding: 12px; } .appasks .asks { display: grid; gap: 10px; }
.appasks .ask { background: #fff; border: 1px solid #f3c1c7; border-radius: 12px; padding: 10px 12px; }
.appgrid { display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: 16px; margin-top: 10px; }
.appcol { min-width: 0; } .appcol .qrlabel:first-child { margin-top: 0; }
.appcol .qas { max-height: 380px; overflow-y: auto; padding-right: 4px; }
.combo .dletter.sm { max-height: 300px; }
@media (max-width: 1000px) { .appgrid { grid-template-columns: 1fr; } }
/* pipeline stages: Quick Review shows open, prep, ready; Your Jobs shows every status */
.stagetabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; justify-self: center; width: 100%; max-width: calc(var(--qrw) + 200px); }
@media (max-width: 640px) { .stagetabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .stagetabs .stg { flex: none; } }
.ycard .stagetabs { max-width: none; padding: 4px 0 8px; }
.ycard .stagetabs.ylist { justify-content: flex-start; gap: 4px; }
.stg { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #e5e7eb; background: rgba(255,255,255,.75); border-radius: 999px; padding: 6px 14px; font: 500 13.5px "Outfit", var(--body); color: #475569; cursor: pointer; }
.stg[aria-pressed="true"] { background: #fff; color: var(--ai-ink); box-shadow: 0 0 0 2px #6c47ff; border-color: transparent; }
.stg-ready .yc { background: var(--ai-purple-soft); color: var(--ai-purple); } .stg-applied .yc { background: var(--ai-green-soft); color: var(--ai-green-ink); }
.stg-declined { margin-left: auto; border-style: dashed; font-size: 12.5px; padding: 4px 12px; }
.stgarrow { color: #94a3b8; font-size: 16px; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; width: 100%; max-width: var(--qrw); justify-self: center; }
.scard { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(15,23,42,.06); cursor: pointer; display: grid; gap: 10px; min-width: 0; font-family: "Outfit", var(--body); }
.scard:hover { box-shadow: 0 6px 18px rgba(15,23,42,.1); }
.sch { display: flex; gap: 10px; align-items: flex-start; } .sch b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.scm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: #475569; } .scm .via { color: #94a3b8; }
.stl { display: flex; gap: 4px; } .stl span { flex: 1; text-align: center; font-size: 11px; color: #94a3b8; border-top: 3px solid #e5e7eb; padding-top: 4px; } .stl span.on { color: var(--ai-green-ink); border-top-color: var(--ai-green); }
.smail { display: flex; gap: 8px; align-items: center; font-size: 12.5px; background: var(--ai-soft); border-radius: 10px; padding: 6px 8px; min-width: 0; } .smail span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smail .mlab { margin: 0; } .smail small { color: #94a3b8; }

/* About Me and Settings: rows you click to edit */
.ahead { display: grid; gap: 10px; margin-bottom: 6px; } .ahead h1 { margin: 0; }
.tellbar { display: flex; gap: 8px; max-width: 720px; } .tellbar input { flex: 1; min-width: 0; border-radius: 999px; padding: 10px 16px; }
.mtabs { margin: 8px 0 18px; }
.ibody { display: grid; gap: 16px; max-width: 900px; }
.icard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.icard > h3 { margin: 0; padding: 12px 16px 6px; font: 600 12px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ilist { display: grid; }
.ir { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 12px; align-items: center; padding: 6px 16px; border-top: 1px solid var(--line); min-height: 44px; }
.icard > h3 + .ilist > .ir:first-child { border-top: 0; }
.ir-solo { grid-template-columns: 1fr; }
.il { color: var(--muted); font-size: 13.5px; }
.iv { text-align: left; border: 1px solid transparent; background: none; font: inherit; color: var(--fg); padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: text; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.iv:hover:not(:disabled) { background: var(--bg); border-color: var(--line); }
.iempty { color: var(--muted); }
.ir-edit { grid-template-columns: minmax(130px, 220px) 1fr; padding: 10px 16px; align-items: start; }
.ir-edit > input, .ir-edit > textarea { min-width: 0; width: 100%; }
.ir-edit .iact { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.ir-edit .idel { margin-left: auto; color: var(--bad); }
.icard .ir-edit:only-child, .ir-edit:has(> input:first-child + textarea), .ir-edit:has(> textarea:first-child) { }
.iaddbtn { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 16px; font: 600 13.5px var(--body); color: var(--accent); cursor: pointer; }
.iaddbtn:hover { background: var(--bg); }
.icard > h3 + .ilist > .iaddbtn:first-child { border-top: 0; }
.ichips .pchips { border: 0; padding: 0; } .ipay { display: inline-flex; align-items: center; gap: 4px; } .ipay input { width: 140px; }
.setsec .icard + .icard { margin-top: 14px; }
.itoggle { display: flex; gap: 8px; align-items: center; background: none !important; padding: 0 !important; font-size: 14.5px; } .itoggle input { width: auto; }
@media (max-width: 560px) { .ir, .ir-edit { grid-template-columns: 1fr; gap: 2px; } .ir { padding: 8px 16px; } }

.aflow { display: grid; gap: 10px; }
.aprog { display: flex; align-items: center; gap: 12px; font: 600 12.5px var(--body); color: var(--muted); }
.abar { flex: 1; max-width: 220px; height: 6px; border-radius: 999px; background: var(--idle-soft); overflow: hidden; }
.abar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .4s ease; }
.anotnow { justify-self: start; font-size: 13px; color: var(--muted); }
.boost { border: 1px dashed var(--info); border-radius: 14px; padding: 14px 16px; background: var(--surface); margin: 0 0 14px; display: grid; gap: 10px; }
.boost .bhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rtoast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; gap: 10px; align-items: center; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--fg); color: var(--bg); font-size: 14px; box-shadow: 0 10px 30px #0003; animation: rpop .35s cubic-bezier(.2,.9,.3,1.3); }
.rtoast.good svg { color: #5fd38d; flex: none; }
.rtoast[hidden] { display: none; }
@keyframes rpop { from { transform: translate(-50%, 14px) scale(.96); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@media (max-width: 480px) { .rtoast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }

/* Review application: wins first */
.rv { padding: 22px 24px; display: grid; gap: 16px; }
.rvhead { display: flex; gap: 14px; align-items: center; } .rvhead h2 { margin: 0; font: 700 21px/1.2 "Outfit", var(--display); }
.rvsub { color: var(--muted); font-size: 13.5px; margin-top: 3px; } .rvsub a { color: var(--accent); }
.rvprog { display: grid; gap: 8px; background: var(--ok-soft); border-radius: 14px; padding: 14px 16px; }
.rvpct { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .rvpct b { font: 700 20px "Outfit", var(--display); color: var(--ok); } .rvpct span { color: var(--fg); font-size: 14px; }
.rvbar { height: 8px; border-radius: 999px; background: #fff8; overflow: hidden; } .rvbar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width .6s cubic-bezier(.2,.9,.3,1); }
.rvwins { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rvwin + .rvwin { border-top: 1px solid var(--line); }
.rvwin summary { display: flex; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.rvwin summary::-webkit-details-marker { display: none; }
.rvcheck { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ok); }
.rvwin.done .rvcheck { background: var(--ok-soft); } .rvcheck i { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed var(--warn); }
.rvt { flex: 1; min-width: 0; display: grid; gap: 1px; } .rvt b { font-weight: 600; } .rvt small { color: var(--muted); font-size: 13px; }
.rvsee, .rvlink { font: 600 13px var(--body); color: var(--accent); text-decoration: none; } .rvwin[open] .rvsee { visibility: hidden; }
.rvd { padding: 0 16px 14px 54px; } .rvd .gapchk { margin: 0; }
.rvrate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.rvbtw { background: var(--warn-soft); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.rvbtwh { font: 600 15px var(--body); color: var(--fg); }
.rvbtw .ask { background: var(--surface); }
.rvmore > summary { cursor: pointer; font: 600 13px var(--body); color: var(--muted); list-style: none; } .rvmore > summary::-webkit-details-marker { display: none; }
.rvmore > summary::before { content: "+ "; } .rvmore[open] > summary::before { content: "− "; } .rvmore .rvd { padding: 8px 0 0; }
.qb-yes.glow { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 #22c55e55; } 50% { box-shadow: 0 0 0 10px #22c55e00; } }
.rv.celebrate { animation: cel 1.2s ease; } @keyframes cel { 0% { box-shadow: 0 0 0 0 #22c55e66; } 40% { box-shadow: 0 0 0 14px #22c55e22; } 100% { box-shadow: 0 0 0 0 #22c55e00; } }
@media (max-width: 560px) { .rv { padding: 16px; } .rvd { padding-left: 16px; } }

/* big monitors: scale the review stage up so text and cards stay proportionate */
.status-line:empty { display: none; }
#v-apply { overflow-x: clip; }

@media (min-width: 1800px) { .qrstage { zoom: 1.08; } }
@media (min-width: 2200px) { .qrstage { zoom: 1.18; } .yj, #v-about .ibody, #kpanel, #spanel { zoom: 1.08; } }

/* Application mode */
.modes { display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.moderow { display: flex; gap: 16px; align-items: center; text-align: left; border: 0; border-top: 1px solid var(--line); background: var(--surface); padding: 18px 20px; font: inherit; color: var(--fg); cursor: pointer; }
.moderow:first-child { border-top: 0; } .moderow:hover:not(:disabled) { background: var(--bg); } .moderow.on { background: #f3f0ff; }
.micon { flex: none; color: #6c47ff; display: grid; place-items: center; width: 34px; } .micon.sm { width: 18px; } .micon.sm svg { width: 16px; height: 16px; }
.mtxt { flex: 1; display: grid; gap: 3px; min-width: 0; } .mtxt b { font: 600 16px "Outfit", var(--body); } .mtxt small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.mradio { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.moderow.on .mradio { background: #6c47ff; border-color: #6c47ff; }
.modesec .modes { max-width: 720px; }
.aitabs .modemenu .moderow { display: flex; padding: 16px 18px; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--fg); font: inherit; gap: 14px; background: var(--surface); }
.aitabs .modemenu .moderow:first-child { border-top: 0; } .aitabs .modemenu .moderow.on { background: #f3f0ff; } .aitabs .modemenu .moderow:hover { background: var(--bg); }
.aitabs .modemenu .mtxt small { font-size: 13px; } .aitabs .micon svg { color: #6c47ff; }
.aitabs .spacer { flex: 1; }
.modedd { position: relative; align-self: center; margin-bottom: 6px; }
.modedd > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: 500 13.5px "Outfit", var(--body); color: var(--fg); cursor: pointer; background: var(--surface); box-shadow: 0 1px 2px #0000000d; }
.modedd > summary::-webkit-details-marker { display: none; }
.modemenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(440px, calc(100vw - 32px)); box-shadow: 0 16px 40px #0f172a22; border-radius: 18px; }
@media (max-width: 640px) { .modedd > summary { padding: 6px 10px; font-size: 12.5px; } }

/* gap check on open roles */
.lgc { font-weight: 500; color: var(--ai-sub, var(--muted)); margin-left: 6px; }
.lgl { display: grid; gap: 8px; margin-top: 6px; }
.lgr { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; } .lgr b { font-weight: 500; display: block; } .lgr small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ai-sub, var(--muted)); font-size: 12.5px; margin-top: 1px; }
.lg { flex: none; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-size: 12px; border-radius: 50%; margin-top: 1px; }
.lg svg { width: 18px; height: 18px; } .lg-s { color: #16a34a; } .lg-p { color: #b45309; background: #fef3c7; } .lg-g { color: #dc2626; background: #fee2e2; }
.lgmore > summary { cursor: pointer; font: 600 13px var(--body); color: var(--accent); margin-top: 8px; list-style: none; } .lgmore > summary::-webkit-details-marker { display: none; }

/* Review application v2: a briefing, not a checklist */
.rv2 { padding: 24px 26px; display: grid; gap: 18px; }
.qrstack:has(.rv2), .qrstage:has(.rv2) .qrbtns, .qrstage:has(.rv2) .qrnote { max-width: calc(var(--qrw) + 280px); }
.rvtop { display: flex; gap: 14px; align-items: flex-start; }
.rvco { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 4px; } a.rvco:hover { color: var(--accent); }
.rvone { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; } .rvtt { flex: 1; min-width: 0; } .rvtt h2 { margin: 0; font: 700 21px/1.2 "Outfit", var(--display); }
.rvstate { flex: none; display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--body); }
.rvstate.go { background: var(--ok-soft); color: var(--ok); } .rvstate.go svg { width: 16px; height: 16px; } .rvstate.wait { background: var(--warn-soft); color: var(--warn); }
.rvstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rvt2 { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; min-width: 0; background: var(--surface); }
.rvt2 small { font: 600 11.5px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .rvt2 b { font: 600 16px "Outfit", var(--body); overflow-wrap: anywhere; } .rvt2 span, .rvt2 em { font-size: 12.5px; color: var(--muted); font-style: normal; }
.rvt2.ok { border-color: #bfe5cc; } .rvt2.ok span { color: var(--ok); } .rvt2.warn { border-color: #f1d3a3; background: #fffaf0; } .rvt2.warn span { color: var(--warn); }
.rvseg { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 3px 0 1px; } .rvseg i { display: block; } .rvseg .s { background: #22c55e; } .rvseg .p { background: #f59e0b; } .rvseg .g { background: #ef4444; }
.rvcols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
.rvw { margin: 2px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--fg); display: grid; gap: 4px; } .rvw li::marker { color: var(--warn); }
.rvgap > summary { margin-top: 2px; }
.rvcols > section { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.rvcols h3 { margin: 0; font: 700 15px "Outfit", var(--body); } .rvcols h4 { margin: 6px 0 0; font: 600 12px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rvp { margin: 0; font-size: 14.5px; line-height: 1.55; } .rvabout { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .rvabout b { color: var(--fg); }
.lgn { color: var(--warn) !important; }
.rvdoc { display: flex; gap: 14px; align-items: flex-start; } .rvdoc > div { min-width: 0; flex: 1; } .rvdoc .dlines { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.rvthumb { flex: none; width: 92px; aspect-ratio: 8.5 / 11; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 8px #0f172a14; transition: transform .15s; }
.rvthumb:hover { transform: translateY(-2px); } .rvthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .rvtph { font: 700 12px var(--body); color: #c2410c; }
.rvq { margin: 6px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvans { display: grid; gap: 6px; } .rvqas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.rvqa { display: grid; gap: 1px; min-width: 0; } .rvqa small { color: var(--muted); font-size: 12px; } .rvqa span { font-size: 13.5px; overflow-wrap: anywhere; }
.rvnext { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 13.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; } .rvnext b { color: var(--fg); }
@media (max-width: 860px) { .rvstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rvcols { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rv2 { padding: 16px; } .rvqas { grid-template-columns: 1fr; } .rvtop { flex-wrap: wrap; } .rvtop .alogo { display: none; } .rvstate { order: 3; } .modedd > summary { font-size: 0; gap: 4px; padding: 7px 9px; } .modedd > summary .micon { font-size: 13px; } }

.rvsec { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 12px; }
.rvsec h3 { margin: 0; font: 700 15px "Outfit", var(--body); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rvc { display: grid; gap: 8px; align-content: start; min-width: 0; } .rvc + .rvc { border-left: 1px solid var(--line); padding-left: 18px; }
.rvc h4 { margin: 0; font: 600 12px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: flex; gap: 8px; align-items: baseline; }
.rvc h4 .kq { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rvc h4 b { font: 700 15px "Outfit", var(--body); } .rvc h4.gs b { color: var(--ok); } .rvc h4.gp b { color: var(--warn); } .rvc h4.gg b { color: var(--bad); }
.rvqas.one { grid-template-columns: 1fr; }
.rvl { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; } .rvl.s li::marker { color: var(--ok); } .rvl.p li::marker { color: var(--warn); } .rvl.g li::marker { color: var(--bad); }
.rvnone { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--ok); font-weight: 600; font-size: 14px; } .rvnone svg { width: 18px; height: 18px; }
.rvc .rvdoc { flex-direction: column; } .rvc .rvthumb { width: 110px; }
@media (max-width: 860px) { .rv3 { grid-template-columns: 1fr; } .rvc + .rvc { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } .rvc .rvdoc { flex-direction: row; } }

.rvtbtn { all: unset; display: grid; cursor: pointer; border-radius: 14px; } .rvtbtn:hover .rvt2 { border-color: var(--accent); } .rvtbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rvtbtn .rvt2::after { content: "View all"; font: 600 12px var(--body); color: var(--accent); margin-top: 2px; }
.rvh { display: grid; gap: 10px; }
.rvhr { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--warn); } .rvhr.g { border-left-color: var(--bad); }
.rvhr b { font-weight: 600; font-size: 14px; } .rvhr span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.rvessays { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.rvessays h4 { margin: 0; font: 600 12px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: flex; gap: 8px; align-items: baseline; } .rvessays h4 .kq { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rvess { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.rvess > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; } .rvess > summary::-webkit-details-marker { display: none; }
.rvess-q { font-weight: 600; font-size: 14px; } .rvess-m { font-size: 12px; color: var(--muted); }
.rvess-p { font-size: 13.5px; line-height: 1.5; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rvess-more { font: 600 12.5px var(--body); color: var(--accent); }
.rvess[open] .rvess-p, .rvess[open] .rvess-more { display: none; }
.rvess-a { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; margin-top: 6px; }
.rvess.wait { display: grid; gap: 4px; border-style: dashed; border-color: var(--warn); background: #fffaf0; } .rvess.wait .rvess-m { color: var(--warn); }

.ask-in .ask { margin-top: 6px; background: #fffaf0; border-color: #f1d3a3; }
.rvess.ask-in { border-style: dashed; border-color: var(--warn); background: #fffaf0; display: grid; gap: 4px; } .rvess.ask-in .ask { background: var(--surface); }
.rvess.ask-in .ask .aq, .rvqa.ask-in .ask .aq { display: none; }
.rvhq { color: var(--warn) !important; font-weight: 600; } .imp { font: 600 11px var(--body); color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }

.gcpop { padding: 6px 4px 12px; display: grid; gap: 14px; max-width: 760px; margin: 0 auto; } .gcsum { margin: 0; font-size: 14.5px; }
.gcpop .lgr small.full { -webkit-line-clamp: unset; display: block; }
.mpill.mbtn { border: 0; cursor: pointer; font-family: inherit; } .mpill.mbtn:hover { filter: brightness(.97); text-decoration: underline; text-underline-offset: 2px; }
.rvscore { font-weight: 600; }
.scpop { max-width: 620px; } .sctop { display: flex; align-items: baseline; gap: 10px; } .scbig { font: 700 40px/1 "Outfit", var(--body); color: var(--ai-ink); } .sctop span { color: var(--ai-sub); font-size: 14px; }
.sccap { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff4e5; color: #9a5b00; font-size: 14px; }
.scdims { display: grid; gap: 14px; } .scdh { display: flex; align-items: baseline; gap: 8px; } .scdh b { font-size: 15px; } .scdh small { color: var(--ai-sub); font-size: 12px; } .scdn { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.scbar { height: 6px; border-radius: 99px; background: var(--ai-soft); overflow: hidden; margin: 6px 0 4px; } .scbar i { display: block; height: 100%; border-radius: 99px; background: #5cc06a; } .scbar.mid i { background: #eaa23a; } .scbar.lo i { background: #e05252; }
.scd p { margin: 0; color: var(--ai-sub); font-size: 13.5px; line-height: 1.45; }

.rvfacts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); align-items: center; }
.rvfacts span { display: inline-flex; gap: 6px; align-items: center; } .rvfacts svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.rvfacts .linkbtn { font-size: 13px; }
.rvwarn { border-left: 3px solid var(--warn); background: #fffaf0; border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 14px; color: var(--fg); }
.rvwarn .linkbtn { margin-left: 4px; }

.agelim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; } .agelim input { width: 72px; }

.rvatt { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; background: var(--surface); text-decoration: none; color: var(--fg); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.rvatt:hover { border-color: var(--accent); box-shadow: 0 2px 10px #0f172a12; }
.rvatt-th { flex: none; width: 38px; height: 49px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; }
.rvatt-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .rvatt-ic { font: 700 9px var(--body); color: #c2410c; }
.rvatt-tx { display: grid; gap: 1px; min-width: 0; } .rvatt-tx b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rvatt-tx small { color: var(--muted); font-size: 12px; }
.rvc .dlines { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.rvopen { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.rvchg { display: grid; gap: 7px; }
.rvch { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.4; }
.rvct { font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rvct.t-added { color: var(--ok); } .rvct.t-removed { color: var(--bad); } .rvct.t-moved { color: var(--info); } .rvct.t-swapped { color: #7c3aed; } .rvct.t-keywords { color: var(--warn); }

.rvlinkf { display: inline-flex; gap: 7px; align-items: center; font: 600 13.5px var(--body); color: var(--accent); text-decoration: none; max-width: 100%; }
.rvlinkf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rvlinkf:hover span { text-decoration: underline; } .rvlinkf svg { flex: none; }
.rvlinkf small { color: var(--muted); font-weight: 400; font-size: 12px; } .rvlinkf small:empty { display: none; }
.rvc .dlines { color: var(--fg); }

.rvfile { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 300px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface); text-decoration: none; color: var(--fg); transition: border-color .15s, background .15s; }
.rvfile:hover { border-color: var(--accent); background: var(--bg); } .rvfic { flex: none; }
.rvfx { display: grid; gap: 1px; min-width: 0; } .rvfx b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rvfx small { color: var(--muted); font-size: 12px; }

.rvmatch { display: grid; gap: 8px; max-width: 560px; }
.rvmt { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .rvmt b { font: 600 15px "Outfit", var(--body); } .rvmt span { font-size: 13px; color: var(--muted); }
.rvmbar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--idle-soft); }
.rvmbar i { display: block; } .rvmbar .s { background: #22c55e; } .rvmbar .p { background: #f59e0b; } .rvmbar .g { background: #ef4444; }
.rvmleg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 14px; color: var(--muted); }
.rvmleg span { display: inline-flex; gap: 6px; align-items: center; } .rvmleg b { color: var(--fg); font: 700 15px "Outfit", var(--body); }
.rvmleg .d { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .rvmleg .d.s { background: #22c55e; } .rvmleg .d.p { background: #f59e0b; } .rvmleg .d.g { background: #ef4444; }
.rvmleg .zero .d.g { background: var(--line); } .rvmleg .zero b { color: var(--ok); }
.rvmleg .linkbtn { margin-left: auto; font-size: 13.5px; }

.rvpart { display: grid; gap: 8px; max-width: 760px; }
.ivpreps { display: grid; gap: 14px; margin-bottom: 18px; } .ivprep { background: #fff; border: 1px solid var(--ai-line); border-radius: 16px; padding: 16px 20px; display: grid; gap: 8px; }
.ivh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .ivh b { font: 600 17px "Outfit", var(--body); } .ivh span { color: var(--muted); }
.ivprep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ivprep li { display: grid; gap: 1px; padding-left: 16px; position: relative; font-size: 14px; }
.ivprep li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; } .ivprep li.g::before { background: #ef4444; }
.ivup li::before { background: #10b981; } .ivup .rvpl b { font-weight: 600; }
.rvpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 40px; max-width: 1000px; }
.rvpcol { display: grid; gap: 8px; align-content: start; } .rvpcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rvpcol li { display: grid; gap: 1px; font-size: 14px; line-height: 1.4; padding-left: 16px; position: relative; }
.rvpcol li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; } .rvpcol li.g::before { background: #ef4444; }
.rvpt { font: 600 12px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rvpart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rvpart li { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 4px 16px; align-items: baseline; font-size: 13.5px; line-height: 1.45; padding-left: 16px; position: relative; }
.rvpart li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; } .rvpart li.g::before { background: #ef4444; }
.rvpl { color: var(--fg); } .rvph { color: var(--muted); } .rvph.q { color: var(--warn); font-weight: 600; }
.rvpart li.ask-in { grid-template-columns: 1fr; } .rvpart li.ask-in .ask { margin-top: 2px; }
@media (max-width: 640px) { .rvpart li { grid-template-columns: 1fr; gap: 1px; } }