:root {
  --ink: #17324d; --ink-soft: #4e6479; --navy: #102a43; --navy-deep: #091d31;
  --blue: #147dab; --cyan: #38bdf8; --amber: #f59e0b; --mist: #f3f7fb;
  --paper: #ffffff; --line: #dce6ee; --line-strong: #c7d5e1; --success: #16836a;
  --danger: #bd4350; --shadow: 0 18px 45px rgba(20, 55, 82, .08); --content-column: 860px;
  --decision-green: #167e5a; --decision-mint: #daf2e4; --decision-sky: #dcecff;
  --decision-violet: #e8dcfb; --decision-alert: #ffe0d1;
  --display: "Bricolage Grotesque", sans-serif; --body: "Manrope", sans-serif; --mono: "IBM Plex Mono", monospace;
  font-family: var(--body); color: var(--ink); background: var(--mist);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--mist); }
body { min-height: 100vh; margin: 0; background: var(--mist); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(56, 189, 248, .36); outline-offset: 2px; }
h1, h2, h3, h4, p { margin-top: 0; }

/* Login */
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 43%) 1fr; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 56px; background: var(--paper); }
.login-card { width: min(100%, 420px); animation: rise-in .55s both; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy); font-family: var(--display); font-size: 22px; font-weight: 750; letter-spacing: -.8px; }
.brand small { margin-left: -4px; padding: 3px 5px; border: 1px solid currentColor; border-radius: 3px; color: var(--blue); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--navy); background: var(--cyan); border-radius: 7px 7px 7px 1px; }
.brand-mark .app-icon { width: 22px; height: 22px; stroke-width: 1.55; }
.section-kicker, .page-context { margin: 0; color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.login-card .section-kicker { margin-top: 60px; }
.login-card h1 { margin: 11px 0 12px; color: var(--navy); font-family: var(--display); font-size: clamp(37px, 4vw, 49px); font-weight: 680; letter-spacing: -2.1px; line-height: .98; }
.subtitle { max-width: 385px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
form { margin-top: 30px; }
label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
input, textarea { width: 100%; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 13px 14px; color: var(--ink); background: #fff; line-height: 1.35; transition: border-color .18s, box-shadow .18s; }
input::placeholder, textarea::placeholder { color: #8fa0ae; }
input:hover, textarea:hover { border-color: #aebfcd; }
input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 125, 171, .11); outline: none; }
textarea { resize: vertical; }
.primary, .inline-primary { border: 0; border-radius: 7px; color: #fff; background: var(--blue); font-weight: 800; letter-spacing: -.1px; box-shadow: 0 4px 0 #0f668d; transition: transform .16s, background .16s, box-shadow .16s; }
.primary:hover, .inline-primary:hover { background: #0f6e98; transform: translateY(-1px); box-shadow: 0 5px 0 #0c5777; }
.primary:active, .inline-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #0c5777; }
.primary:disabled, .inline-primary:disabled { opacity: .58; box-shadow: none; transform: none; }
.primary { width: 100%; padding: 14px 18px; }
.error { min-height: 20px; margin: 11px 0 0; color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1.45; }
.demo-box { display: grid; gap: 12px; margin-top: 34px; padding: 16px; border: 1px solid #cfe5f2; border-left: 3px solid var(--cyan); border-radius: 7px; background: #f5fbff; color: var(--ink-soft); font-size: 12px; }
.demo-box > div:first-child { display: grid; gap: 2px; }
.demo-box strong { color: var(--navy); font-size: 12px; }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid #dcecf5; }
.demo-row button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; text-align: right; }
.demo-row button b { font-size: 15px; transition: transform .18s; }
.demo-row button:hover b { transform: translateX(3px); }
.hero { position: relative; display: grid; place-items: center; overflow: hidden; padding: 72px; color: #effaff; background: var(--navy); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(101,177,216,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(101,177,216,.11) 1px, transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.hero::after { position: absolute; right: -20%; bottom: -35%; width: min(620px, 70vw); aspect-ratio: 1; border: 1px solid rgba(56,189,248,.45); border-radius: 50%; box-shadow: 0 0 0 52px rgba(56,189,248,.05), 0 0 0 108px rgba(56,189,248,.035); content: ""; }
.hero-content { position: relative; z-index: 1; width: min(100%, 570px); animation: rise-in .7s .12s both; }
.eyebrow { margin-bottom: 23px; color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.hero h2 { max-width: 520px; margin-bottom: 22px; font-family: var(--display); font-size: clamp(40px, 5vw, 62px); font-weight: 620; letter-spacing: -3px; line-height: .99; }
.hero p { max-width: 480px; color: #bed5e5; font-size: 15px; line-height: 1.75; }
.hero-flow { display: flex; align-items: center; gap: 10px; margin-top: 47px; }
.flow-node { display: grid; gap: 4px; min-width: 116px; padding: 13px 14px; border: 1px solid rgba(151,215,246,.34); border-radius: 5px; background: rgba(13,48,73,.54); color: #edfaff; font-size: 11px; font-weight: 750; }
.flow-node i { color: var(--cyan); font-family: var(--mono); font-size: 9px; font-style: normal; }
.flow-line { width: 30px; height: 1px; background: var(--cyan); opacity: .7; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 23px; color: #a9c4d5; font-size: 11px; }
.hero-note span { width: 7px; height: 7px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 4px rgba(94,234,212,.1); }

/* Application shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; width: 270px; height: 100vh; flex-shrink: 0; padding: 28px 16px 18px; color: #cae0ed; background: var(--navy-deep); }
.sidebar .brand { margin: 0 9px; color: #f3fbff; }
.sidebar .brand-mark { color: var(--navy); }
.sidebar-rule { height: 1px; margin: 26px 9px 19px; background: rgba(159,205,229,.19); }
.role-label { margin: 0 11px 10px; color: #7fa6be; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 4px; }
.nav-button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid transparent; border-radius: 6px; color: #b8d1df; background: transparent; font-size: 13px; font-weight: 650; text-align: left; transition: background .16s, color .16s, border-color .16s; }
.nav-button:hover { color: #f3fbff; background: rgba(150,206,235,.08); }
.nav-button.active { border-color: rgba(56,189,248,.28); color: #f4fcff; background: #123c59; }
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; color: var(--cyan); }
.nav-icon .app-icon { width: 18px; height: 18px; transition: transform .16s ease; }
.nav-button:hover .nav-icon .app-icon, .nav-button.active .nav-icon .app-icon { transform: scale(1.08); }
.sidebar-footer { margin-top: auto; padding: 17px 9px 0; border-top: 1px solid rgba(159,205,229,.18); }
.identity { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #ebf7fb; font-size: 12px; font-weight: 700; }
.identity span { display: block; max-width: 170px; overflow: hidden; margin-top: 2px; color: #82a4b7; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(56,189,248,.56); border-radius: 6px; color: var(--cyan); background: #102f47; font-family: var(--display); font-weight: 800; }
.logout { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px; border: 1px solid rgba(159,205,229,.2); border-radius: 5px; color: #bad4e2; background: transparent; font-size: 11px; font-weight: 700; }
.logout:hover { border-color: rgba(56,189,248,.55); color: #fff; }
.content { width: 100%; min-width: 0; padding: 42px clamp(25px, 5vw, 74px) 64px; }
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-context { margin-bottom: 9px; }
.topline h1 { margin-bottom: 7px; color: var(--navy); font-family: var(--display); font-size: clamp(28px, 3vw, 37px); font-weight: 680; letter-spacing: -1.7px; line-height: 1; }
.topline p:not(.page-context) { margin-bottom: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.role-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-top: 5px; padding: 8px 10px; border: 1px solid #b9dfed; border-radius: 4px; color: #126b90; background: #effaff; font-size: 10px; font-weight: 800; }
.role-badge::before { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); content: ""; }

/* Workspace */
.work-summary { display: grid; grid-template-columns: repeat(3, minmax(135px,1fr)) auto; gap: 1px; margin-top: 35px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); box-shadow: 0 6px 18px rgba(21,50,78,.025); }
.work-summary > div { display: grid; align-content: center; min-height: 116px; padding: 20px 22px; background: var(--paper); }
.work-summary span { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.work-summary strong { margin: 5px 0 2px; color: var(--navy); font-family: var(--display); font-size: 31px; letter-spacing: -1.4px; line-height: 1; }
.work-summary small { color: #8496a6; font-size: 10px; }
.create-pr-button { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px; padding: 12px 17px; }
.create-pr-button span { color: inherit; font-size: 19px; font-weight: 500; }
.list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 39px 0 13px; }
.list-heading h2 { margin-bottom: 3px; color: var(--navy); font-family: var(--display); font-size: 20px; letter-spacing: -.7px; }
.list-heading p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.list-heading > span { color: #7890a1; font-family: var(--mono); font-size: 10px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-button { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-soft); background: #fff; font-size: 11px; font-weight: 700; transition: background .16s, border-color .16s, color .16s; }
.filter-button:hover, .filter-button.active { border-color: #91cbe4; color: #106e97; background: #eaf8ff; }
.inline-primary { padding: 11px 14px; font-size: 12px; white-space: nowrap; }
.pr-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.pr-table-header, .pr-row { display: grid; grid-template-columns: minmax(240px,1.55fr) minmax(125px,.75fr) minmax(105px,.55fr) minmax(140px,.8fr) 18px; gap: 16px; align-items: center; }.pr-record { position: relative; border-bottom: 1px solid var(--line); }.pr-record:last-child { border-bottom: 0; }
.pr-table-header { padding: 11px 74px 11px 20px; border-bottom: 1px solid var(--line); color: #7890a1; background: #f8fbfd; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pr-table-header span:nth-child(4) { text-align: right; }
.pr-row { width: 100%; padding: 16px 74px 16px 20px; border: 0; color: var(--ink); background: #fff; text-align: left; transition: background .15s; }
.pr-row:hover { background: #f4faff; }
.pr-primary { min-width: 0; }
.pr-row strong, .pr-row span { display: block; }
.pr-row strong { margin-bottom: 4px; color: var(--navy); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.pr-primary > span { overflow: hidden; color: var(--ink-soft); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pr-record-returned .pr-row { background: linear-gradient(90deg, #fff9f8, #fff 52%); }.pr-record-returned .pr-row:hover { background: #fff4f2; }.pr-rejection { display: -webkit-box; max-width: 480px; margin: 8px 0 0; overflow: hidden; color: #9f3940; font-size: 10px; font-weight: 650; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.pr-rejection span { display: inline; margin-right: 4px; color: #c34c53; font-weight: 900; }.pr-rejection b { margin-right: 4px; }
.pr-due span { color: #8b9ba8; font-size: 9px; font-weight: 700; }
.pr-due b { display: block; margin-top: 2px; color: var(--ink); font-size: 11px; white-space: nowrap; }
.pr-budget { color: var(--navy); font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; }
.row-arrow { color: #82a4b7; font-size: 24px; line-height: .7; }
.pr-delete { position: absolute; top: 50%; right: 18px; padding: 6px 8px; border: 1px solid #e9bec1; border-radius: 4px; color: #a4323a; background: #fff7f7; font-size: 10px; font-weight: 800; transform: translateY(-50%); }.pr-delete:hover:not(:disabled) { border-color: #d87980; background: #fdebed; }.pr-delete:disabled { opacity: .6; cursor: wait; }.workspace-action-error { margin: -4px 0 10px; }
.status-pill { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 5px 7px; border-radius: 3px; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.status-draft { color: #596579; background: #eef1f5; }.status-awaiting_quotation { color: #9a5b08; background: #fff4dd; }.status-comparing { color: #276da1; background: #e8f4fd; }.status-pending_approval { color: #7656a3; background: #f1eafd; }.status-approved { color: #16745c; background: #e3f6ed; }.status-rejected { color: #b03840; background: #fce9ea; }

/* Forms and PR detail */
.creation-layout { display: grid; grid-template-columns: minmax(220px,.56fr) minmax(480px,1.44fr); gap: 27px; max-width: 1000px; margin-top: 34px; }
.form-context { padding: 7px 8px; }.form-context h2 { margin: 12px 0; color: var(--navy); font-family: var(--display); font-size: 29px; font-weight: 680; letter-spacing: -1.4px; line-height: 1.04; }.form-context > p { margin-bottom: 29px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.creation-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }.creation-steps li { display: flex; align-items: flex-start; gap: 10px; opacity: .58; }.creation-steps li.active { opacity: 1; }.creation-steps li > span { width: 27px; height: 27px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #cbd8e2; border-radius: 50%; color: #748b9c; font-family: var(--mono); font-size: 9px; }.creation-steps li.active > span { border-color: var(--blue); color: #fff; background: var(--blue); }.creation-steps b, .creation-steps small { display: block; }.creation-steps b { margin-top: 1px; font-size: 11px; }.creation-steps small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.form-card, .detail-card { padding: 29px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.form-intro { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.step-number { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 5px; color: var(--blue); background: #e8f7ff; font-family: var(--mono); font-size: 10px; font-weight: 600; }.form-intro h2, .detail-card h2 { margin-bottom: 4px; color: var(--navy); font-family: var(--display); font-size: 20px; letter-spacing: -.7px; }.form-intro p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }.pr-form small { display: block; margin: -14px 0 19px; color: #7b91a1; font-size: 10px; line-height: 1.4; }.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 9px; }
.secondary { padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 750; transition: border-color .16s, background .16s; }.secondary:hover:not(:disabled) { border-color: #8fc9e3; background: #f2faff; }.secondary:disabled { color: #96a6b2; background: #f6f8fa; }
.danger-button { padding: 10px 13px; border: 1px solid #e9bec1; border-radius: 6px; color: #a4323a; background: #fff7f7; font-size: 12px; font-weight: 750; transition: background .16s, border-color .16s; }.danger-button:hover:not(:disabled) { border-color: #d87980; background: #fdebed; }.danger-button:disabled { opacity: .6; }
.back-link { margin-top: 27px; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 12px; font-weight: 800; }.back-link:hover { text-decoration: underline; }
.flash-message { display: flex; align-items: center; gap: 8px; max-width: var(--content-column); margin: 16px 0 -11px; padding: 11px 13px; border: 1px solid #a6ddcb; border-radius: 6px; color: #176b57; background: #edfbf5; font-size: 12px; font-weight: 700; }.flash-message span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: 11px; }
.detail-card { max-width: var(--content-column); margin-top: 28px; }.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }.detail-code { margin-bottom: 7px; color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.progress-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 27px 0; padding: 0; list-style: none; }.progress-rail li { position: relative; display: grid; gap: 7px; color: #8aa0ae; }.progress-rail li:not(:last-child)::after { position: absolute; top: 12px; left: 27px; right: 0; height: 1px; background: #d5e0e7; content: ""; }.progress-rail li > span { position: relative; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #cbd9e2; border-radius: 50%; color: #7c91a0; background: white; font-family: var(--mono); font-size: 8px; }.progress-rail b { max-width: 105px; font-size: 10px; line-height: 1.3; }.progress-rail li.done, .progress-rail li.current { color: var(--ink); }.progress-rail li.done::after { background: var(--blue); }.progress-rail li.done > span { border-color: var(--blue); color: #fff; background: var(--blue); }.progress-rail li.current > span { border-color: var(--blue); color: var(--blue); background: #eaf8ff; box-shadow: 0 0 0 4px rgba(56,189,248,.12); }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 25px 0; }.detail-grid div { min-width: 0; }.detail-grid dt { margin-bottom: 6px; color: #7d93a2; font-size: 10px; font-weight: 700; }.detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; font-weight: 800; }
.next-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid #cbe3ef; border-radius: 6px; background: #f2faff; }.next-action > div > span { color: var(--blue); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }.next-action h3 { margin: 5px 0 3px; color: var(--navy); font-family: var(--display); font-size: 16px; letter-spacing: -.4px; }.next-action p { max-width: 440px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }.detail-actions { margin-top: 21px; }.action-error { margin-top: 15px; }
.return-notice { display: flex; gap: 13px; margin: 22px 0; padding: 15px 16px; border: 1px solid #edc0c3; border-left: 4px solid #c64e55; border-radius: 6px; background: #fff7f6; color: #672d33; }.return-notice-mark { display: grid; width: 24px; height: 24px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #bf424a; font-family: var(--mono); font-size: 13px; font-weight: 900; }.return-notice p { margin: 0 0 4px; color: #a23d44; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.return-notice h3 { margin: 0 0 12px; color: var(--navy); font-family: var(--display); font-size: 17px; letter-spacing: -.35px; }.return-notice strong { display: block; margin-bottom: 5px; color: #7e3339; font-size: 10px; }.return-notice blockquote { margin: 0; color: #482e32; font-size: 12px; font-weight: 650; line-height: 1.55; white-space: pre-wrap; }.return-notice small { display: block; margin-top: 10px; color: #8a6063; font-size: 10px; line-height: 1.45; }

/* Quotations */
.notice { display: flex; gap: 11px; margin: 30px 0 20px; padding: 14px 16px; border: 1px solid #bde2f0; border-radius: 6px; color: #27667e; background: #edfbff; font-size: 12px; line-height: 1.55; }.notice > span { color: var(--blue); font-size: 16px; }.notice strong { color: var(--navy); }
.quote-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 17px 0 19px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.quote-header h2 { margin-bottom: 7px; color: var(--navy); font-family: var(--display); font-size: 20px; letter-spacing: -.6px; }.quote-header p:last-child { margin: 0; color: var(--ink-soft); font-size: 12px; }
.quote-layout { display: grid; grid-template-columns: minmax(260px,.82fr) minmax(320px,1.18fr); gap: 18px; }.quote-upload-panel, .quote-list-panel, .editor-card { padding: 23px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.quote-upload-panel h3, .quote-list-panel h3, .editor-card h3 { margin-bottom: 6px; color: var(--navy); font-family: var(--display); font-size: 17px; letter-spacing: -.45px; }.quote-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }.quote-list-heading h3 { margin-bottom: 0; }.quote-delete-all { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #e9bec1; border-radius: 4px; color: #a4323a; background: #fff7f7; font-size: 10px; font-weight: 800; }.quote-delete-all:hover:not(:disabled) { border-color: #d87980; background: #fdebed; }.quote-delete-all:disabled { opacity: .6; cursor: wait; }.quote-upload-panel > p, .editor-heading p { margin-bottom: 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }.quote-upload-panel form { margin-top: 20px; }.quote-upload-panel .inline-primary { width: 100%; }.quote-upload-panel input[type="file"] { padding: 10px; background: #f8fbfd; font-size: 11px; }
.quote-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }.quote-record:last-of-type { border-bottom: 0; }.quote-row { width: 100%; display: grid; grid-template-columns: 1fr auto 18px; gap: 12px; align-items: center; padding: 14px 0; border: 0; color: var(--ink); background: #fff; text-align: left; }.quote-row:hover strong { color: var(--blue); }.quote-row strong, .quote-row span { display: block; }.quote-row strong { margin-bottom: 4px; color: var(--navy); font-size: 12px; }.quote-row div span, .subtle-empty { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }.quote-state { padding: 5px 7px; border-radius: 3px; font-size: 9px; font-weight: 800; white-space: nowrap; }.quote-state.unconfirmed { color: #9a5b08; background: #fff4dd; }.quote-state.confirmed { color: #18775c; background: #e3f6ed; }.quote-delete { padding: 6px 8px; border: 1px solid #e9bec1; border-radius: 4px; color: #a4323a; background: #fff7f7; font-size: 10px; font-weight: 800; }.quote-delete:hover:not(:disabled) { border-color: #d87980; background: #fdebed; }.quote-delete:disabled { opacity: .6; cursor: wait; }
.confirm-modal-open { overflow: hidden; }.confirm-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 29, 49, .62); backdrop-filter: blur(3px); animation: source-review-fade .18s both; }.confirm-dialog { width: min(440px, 100%); display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 24px; border: 1px solid #efc5c8; border-radius: 10px; background: linear-gradient(130deg, #fff8f8, #fff 58%); box-shadow: 0 26px 70px rgba(41, 17, 22, .27); animation: source-review-rise .22s both; }.confirm-dialog-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #a4323a; background: #fce9ea; font-family: var(--display); font-size: 17px; font-weight: 800; }.confirm-dialog .section-kicker { margin-bottom: 6px; color: #a4323a; }.confirm-dialog h2 { margin: 0 0 6px; color: var(--navy); font-family: var(--display); font-size: 21px; letter-spacing: -.7px; }.confirm-dialog p:not(.section-kicker) { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }.confirm-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }.confirm-dialog-actions .danger-button { min-width: 74px; }
body.success-modal-open { overflow: hidden; }
.success-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 29, 49, .62); backdrop-filter: blur(3px); animation: source-review-fade .18s both; }
.success-dialog { width: min(458px, 100%); display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 27px; border: 1px solid #a6ddcb; border-radius: 11px; background: linear-gradient(135deg, #f1fcf6, #fff 58%); box-shadow: 0 28px 74px rgba(12, 63, 48, .26); animation: source-review-rise .22s both; }
.success-dialog-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); box-shadow: 0 0 0 6px rgba(22, 131, 106, .12); font-family: var(--display); font-size: 18px; font-weight: 800; }
.success-dialog .section-kicker { margin-bottom: 6px; color: #18775c; }
.success-dialog h2 { margin: 0 0 6px; color: var(--navy); font-family: var(--display); font-size: 21px; letter-spacing: -.7px; }
.success-dialog p:not(.section-kicker) { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.success-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 7px; }
.success-dialog-actions .inline-primary { min-width: 91px; padding: 10px 15px; }
body.analysis-loading-open { overflow: hidden; }.analysis-loading-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 29, 49, .67); backdrop-filter: blur(4px); animation: source-review-fade .18s both; }.analysis-loading-dialog { width: min(470px, 100%); padding: 34px 34px 30px; border: 1px solid rgba(143, 208, 233, .75); border-radius: 12px; color: var(--ink); background: linear-gradient(145deg, #effaff, #fff 55%); box-shadow: 0 30px 84px rgba(3, 20, 35, .38); text-align: center; animation: source-review-rise .22s both; }.analysis-loading-lottie { width: 96px; height: 96px; display: block; margin: -11px auto -7px; }.analysis-loading-lottie:not(:defined) { width: 74px; height: 74px; margin: 0 auto; border: 1px solid #b9ddea; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #dcf4fd 19% 38%, #eefaff 39%); animation: analysis-orbit 2.4s linear infinite; }.analysis-loading-dialog .section-kicker { margin: 20px 0 8px; color: var(--blue); }.analysis-loading-dialog h2 { margin: 0 0 9px; color: var(--navy); font-family: var(--display); font-size: 24px; letter-spacing: -.8px; }.analysis-loading-dialog > p:not(.section-kicker) { max-width: 340px; margin: 0 auto; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }.analysis-loading-status { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 24px -4px 0; padding: 11px 13px; border: 1px solid #c6e5f0; border-radius: 6px; color: #27667e; background: rgba(237, 250, 255, .82); font-size: 11px; font-weight: 700; line-height: 1.45; }.analysis-loading-status > span { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(56, 189, 248, .45); animation: analysis-pulse 1.4s ease-out infinite; }
.editor-card { margin-top: 18px; }.editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.editor-heading p { margin: 0; }.review-queue { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -2px 0 18px; padding: 10px 12px; border: 1px solid #b8dce9; border-radius: 6px; color: #27667e; background: #edfaff; font-size: 11px; }.review-queue > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }.review-queue-label { color: #5e8295; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.review-queue strong { color: var(--navy); font-size: 12px; }.review-queue > span { flex: 0 0 auto; padding-left: 12px; border-left: 1px solid #b8dce9; color: #176b8b; font-family: var(--mono); font-size: 10px; font-weight: 700; }.review-transition { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; padding: 10px 12px; border: 1px solid #a6ddcb; border-radius: 6px; color: #176b57; background: #edfbf5; font-size: 12px; font-weight: 700; animation: rise-in .28s both; }.review-transition > span, .review-complete-mark { display: grid; place-items: center; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--success); font-size: 11px; }.review-complete-card { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; border-color: #a6ddcb; background: linear-gradient(115deg, #f8fdfa, #ffffff 62%); }.review-complete-mark { width: 30px; height: 30px; font-size: 14px; }.review-complete-card .section-kicker { margin-bottom: 5px; color: #18775c; }.review-complete-card h3 { margin-bottom: 6px; }.review-complete-card p:not(.section-kicker) { max-width: 570px; margin-bottom: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }.review-complete-card .form-actions { justify-content: flex-start; margin-top: 15px; }.warning-box { margin-bottom: 19px; padding: 12px 14px; border: 1px solid #f0d290; border-radius: 6px; color: #82590d; background: #fff8e7; font-size: 12px; line-height: 1.55; }.items-heading { display: flex; align-items: center; justify-content: space-between; margin: 5px 0 9px; }.items-heading h4 { margin: 0; color: var(--navy); font-size: 13px; }.quote-items-header, .quote-item { display: grid; grid-template-columns: .7fr 2fr .65fr 1fr 1fr 30px; gap: 8px; align-items: center; }.quote-items-header { padding: 0 4px 5px; color: #7c91a0; font-family: var(--mono); font-size: 9px; font-weight: 600; }.quote-item { margin-bottom: 8px; }.quote-item input { min-width: 0; margin: 0; padding: 10px; font-size: 11px; }.remove-item { width: 28px; height: 28px; border: 0; border-radius: 5px; color: #ae3e45; background: #fce9ea; font-size: 19px; line-height: 1; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.quote-item .money-field { position: relative; min-width: 0; }.quote-item .money-field input { padding-right: 33px; font-variant-numeric: tabular-nums; }.money-field > span { position: absolute; top: 50%; right: 8px; color: #718898; font-family: var(--mono); font-size: 8px; font-weight: 700; pointer-events: none; transform: translateY(-50%); }

/* Source review: one workbench links the editable extraction with the visual PDF. */
body.source-review-open { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.source-review-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 29, 49, .62); backdrop-filter: blur(3px); animation: source-review-fade .18s both; }
.source-review-dialog { width: min(1420px, 100%); height: min(880px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(172, 211, 230, .7); border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(3, 20, 35, .35); animation: source-review-rise .22s both; }
.source-review-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex: 0 0 auto; padding: 20px 24px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, #f8fcff, #fff 54%); }
.source-review-dialog-header .section-kicker { margin-bottom: 6px; }.source-review-dialog-header h2 { margin: 0 0 5px; color: var(--navy); font-family: var(--display); font-size: 23px; letter-spacing: -.75px; }.source-review-dialog-header > div > p:last-child { max-width: 620px; margin: 0; overflow: hidden; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.source-review-close { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink-soft); background: #fff; font-size: 23px; line-height: 1; transition: border-color .15s, color .15s, background .15s; }.source-review-close:hover { border-color: #9ec9de; color: var(--navy); background: #eef9ff; }
.source-review-loading { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 14px; flex: 1; padding: 28px; color: var(--ink-soft); text-align: left; }.source-review-loading strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 13px; }.source-review-loading p { margin: 0; font-size: 12px; }.source-review-spinner { width: 28px; height: 28px; border: 3px solid #dceef6; border-top-color: var(--blue); border-radius: 50%; animation: source-review-spin .75s linear infinite; }
.source-review-layout { min-height: 0; display: grid; grid-template-columns: minmax(400px, .88fr) minmax(520px, 1.12fr); flex: 1; }.source-review-items, .source-preview-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }.source-review-items { border-right: 1px solid var(--line); background: #fbfdff; }.source-review-pane-heading { min-height: 106px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: #fff; }.source-review-pane-heading .section-kicker { margin-bottom: 5px; }.source-review-pane-heading h3 { max-width: 360px; margin: 0 0 4px; overflow: hidden; color: var(--navy); font-family: var(--display); font-size: 16px; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }.source-review-pane-heading p:not(.section-kicker) { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }.source-item-count, .source-page-counter { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #b8dce9; border-radius: 4px; color: #176b8b; background: #edfaff; font-family: var(--mono); font-size: 9px; font-weight: 700; white-space: nowrap; }
.source-review-table { min-height: 0; flex: 1; overflow: auto; padding: 8px 10px 10px; }.source-review-row { width: 100%; display: grid; grid-template-columns: 28px minmax(150px, 1fr) 92px 98px; gap: 10px; align-items: center; padding: 12px 10px; border: 1px solid transparent; border-bottom-color: #e4edf3; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }.source-review-row:hover, .source-review-row.active { border-color: #8fd0e9; background: #edfaff; box-shadow: inset 3px 0 0 var(--blue); }.source-review-row:focus-visible { position: relative; z-index: 1; }.source-row-index { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #c9dbe6; border-radius: 50%; color: #698496; background: #fff; font-family: var(--mono); font-size: 9px; font-weight: 700; }.source-review-row.active .source-row-index { border-color: var(--blue); color: #fff; background: var(--blue); }.source-row-detail { min-width: 0; }.source-row-detail strong, .source-row-detail small, .source-match-status { display: block; }.source-row-detail strong { overflow: hidden; color: var(--navy); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.source-row-detail small { margin-top: 3px; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.source-match-status { width: fit-content; max-width: 100%; margin-top: 5px; padding: 2px 5px; border-radius: 3px; font-family: var(--mono); font-size: 8px; font-weight: 700; line-height: 1.35; }.source-match-status.found { color: #176b8b; background: #dff4fd; }.source-match-status.missing { color: #8a671a; background: #fff2d6; }.source-row-money { min-width: 0; text-align: right; }.source-row-money small, .source-row-money b { display: block; }.source-row-money small { color: #7b91a1; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.source-row-money b { margin-top: 3px; overflow: hidden; color: var(--navy); font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }.source-review-edit-note { flex: 0 0 auto; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--ink-soft); background: #f5f9fc; font-size: 10px; line-height: 1.45; }.source-review-empty { display: grid; min-height: 150px; place-items: center; color: var(--ink-soft); font-size: 12px; text-align: center; }
.source-preview-pane { background: #e8f0f5; }.source-preview-heading { position: relative; z-index: 2; box-shadow: 0 3px 10px rgba(31, 69, 92, .05); }.source-preview-scroll { min-height: 0; flex: 1; overflow: auto; padding: 26px clamp(20px, 5vw, 64px) 48px; scroll-behavior: smooth; }.source-preview-page { position: relative; width: min(100%, 740px); margin: 0 auto 28px; padding: 27px 0 0; border: 1px solid #c6d5df; background: #fff; box-shadow: 0 11px 26px rgba(28, 55, 72, .18); }.source-preview-page:last-child { margin-bottom: 0; }.source-page-label { position: absolute; top: 0; left: 0; right: 0; height: 27px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid #dce6ee; color: #5c7789; background: #f7fafc; font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; }.source-page-canvas { position: relative; line-height: 0; }.source-page-canvas img { width: 100%; height: auto; display: block; }.source-row-highlight { position: absolute; z-index: 1; display: block; opacity: 0; border: 2px solid #047faa; border-radius: 3px; background: rgba(89, 211, 249, .28); box-shadow: 0 0 0 3px rgba(20, 125, 171, .15); pointer-events: none; transition: opacity .12s, box-shadow .12s, background .12s; }.source-row-highlight.active { opacity: 1; background: rgba(56, 189, 248, .34); box-shadow: 0 0 0 4px rgba(20, 125, 171, .2); }.source-row-highlight i { position: absolute; top: 50%; left: -11px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #147dab; box-shadow: 0 1px 3px rgba(9, 29, 49, .22); font-family: var(--mono); font-size: 9px; font-style: normal; line-height: 1; transform: translateY(-50%); }.source-review-error { display: flex; align-items: flex-start; gap: 14px; max-width: 470px; margin: auto; padding: 26px; text-align: left; }.source-review-error .card-icon { margin: 0; }.source-review-error strong { display: block; color: var(--navy); font-size: 14px; }.source-review-error p { margin: 6px 0 15px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
@keyframes source-review-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes source-review-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes source-review-spin { to { transform: rotate(360deg); } }
@keyframes analysis-orbit { to { transform: rotate(360deg); } } @keyframes analysis-pulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); } }
@media (prefers-reduced-motion: reduce) { .analysis-loading-lottie { display: none; } .analysis-loading-status > span { animation: none; } }

/* Drop zone */
.drop-zone { position: relative; margin-top: 14px; padding: 34px 20px; border: 2px dashed #b8d5e6; border-radius: 10px; background: #f7fbfe; text-align: center; transition: border-color .22s, background .22s, box-shadow .22s; cursor: pointer; }
.drop-zone:hover { border-color: #7ec2e4; background: #eef7fd; }
.drop-zone.drag-over { border-color: var(--cyan); background: #e0f4ff; box-shadow: 0 0 0 4px rgba(56,189,248,.15); }
.drop-zone.drag-over .drop-zone-icon { transform: translateY(-4px) scale(1.12); color: var(--blue); }
.drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.drop-zone-browse { pointer-events: auto; }
.drop-zone-icon { font-size: 32px; color: #7eb8d8; line-height: 1; transition: transform .25s, color .2s; }
.drop-zone-label { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.drop-zone-hint { margin: 0; color: #8fa0ae; font-size: 11px; }

/* File queue */
.file-queue { display: grid; gap: 6px; margin-top: 12px; }
.file-queue-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12px; transition: border-color .2s, background .2s; animation: rise-in .3s both; }
.file-queue-item.uploading { border-color: #7ec2e4; background: #f0f9ff; }
.file-queue-item.done { border-color: #a6ddcb; background: #f1fbf6; }
.file-queue-item.failed { border-color: #f0b3b7; background: #fef5f5; }
.file-queue-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.file-queue-icon { font-size: 18px; flex-shrink: 0; }
.file-queue-info div { min-width: 0; }
.file-queue-info strong { display: block; overflow: hidden; color: var(--navy); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.file-queue-info span { display: block; margin-top: 1px; color: #8fa0ae; font-size: 9px; }
.file-queue-remove { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 5px; color: #7890a1; background: #f0f4f7; font-size: 16px; line-height: 1; transition: color .16s, background .16s; }
.file-queue-remove:hover { color: #ae3e45; background: #fce9ea; }
.file-queue-status { flex-shrink: 0; padding: 3px 7px; border-radius: 3px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.uploading-status { color: #276da1; background: #e0f0fd; animation: pulse-status 1.2s infinite alternate; }
.done-status { color: #18775c; background: #e3f6ed; }
.failed-status { color: #b03840; background: #fce9ea; }
@keyframes pulse-status { from { opacity: .7; } to { opacity: 1; } }

/* Extracted quotation comparison */
.comparison-panel { margin-top: 18px; padding: 23px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.comparison-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }.comparison-heading .section-kicker { margin-bottom: 6px; }.comparison-heading h3 { margin-bottom: 5px; color: var(--navy); font-family: var(--display); font-size: 18px; letter-spacing: -.5px; }.comparison-heading p:not(.section-kicker) { max-width: 610px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }.comparison-heading > span { padding: 5px 7px; border-radius: 3px; color: #276da1; background: #e8f4fd; font-family: var(--mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
.comparison-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }.comparison-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 11px; }.comparison-table th, .comparison-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }.comparison-table thead th { color: #718898; background: #f7fafc; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: bottom; }.comparison-table th:first-child { min-width: 190px; text-align: left; }.comparison-table tbody th { color: var(--navy); font-size: 11px; }.comparison-table tbody th small { display: block; margin-top: 3px; color: #8196a4; font-family: var(--mono); font-size: 9px; font-weight: 500; }.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }.comparison-table .best-price { color: #176b57; background: #edf9f3; font-weight: 800; }.comparison-status { display: block; margin-top: 5px; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; }.comparison-status.confirmed { color: #18775c; }.comparison-status.unconfirmed { color: #9a5b08; }

/* Comparison workbench: grouped supplier columns mirror the source quotation. */
.comparison-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }.comparison-search { display: flex; align-items: center; min-width: 230px; flex: 1; gap: 9px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; color: #718898; background: #fff; }.comparison-search input { width: 100%; min-width: 0; margin: 0; padding: 10px 0; border: 0; background: transparent; font-size: 11px; }.comparison-search input:focus { outline: 0; }.supplier-chips { display: flex; flex-wrap: wrap; gap: 6px; }.supplier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #b8dce9; border-radius: 99px; color: #176b8b; background: #edfaff; font-size: 10px; font-weight: 700; }.supplier-chip[aria-pressed="false"] { border-color: var(--line); color: #8aa0ae; background: #fff; text-decoration: line-through; }.supplier-chip span { color: var(--cyan); font-size: 9px; }.comparison-table { min-width: 1100px; }.comparison-table thead th { border-color: #6d7f9c; color: #fff; background: #1d335f; text-align: center; text-transform: none; }.comparison-table thead tr:last-child th { padding-top: 8px; padding-bottom: 8px; background: #405275; }.comparison-table thead th:first-child { text-align: center; }.comparison-table th:nth-child(2) { min-width: 250px; text-align: left; }.comparison-table tbody td:first-child { color: #718898; text-align: center; }.comparison-table tbody th { min-width: 250px; text-align: left; white-space: normal; line-height: 1.45; }.comparison-table tbody td { font-variant-numeric: tabular-nums; }.comparison-table tfoot th, .comparison-table tfoot td { padding: 11px 13px; border: 0; color: #fff; background: #1d335f; font-weight: 800; }.comparison-table tfoot th { text-align: right; }.comparison-table tfoot td { text-align: center; }.comparison-table .best-price { box-shadow: inset 0 0 0 2px #c8e4d9; }.commercial-panel { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.commercial-panel h3 { margin: 0; padding: 20px 23px; color: var(--navy); font-family: var(--display); font-size: 18px; letter-spacing: -.5px; }.commercial-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 11px; }.commercial-table th, .commercial-table td { padding: 13px 17px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }.commercial-table thead th { color: #fff; background: #1d335f; font-size: 10px; }.commercial-table tbody th { min-width: 170px; color: var(--navy); }.commercial-table td { min-width: 180px; color: var(--ink-soft); }

.fuzzy-match-error { margin: -5px 0 12px; }.fuzzy-match-cell { display: grid; gap: 4px; margin-top: 7px; color: var(--ink-soft); font-size: 9px; font-weight: 500; line-height: 1.35; text-align: left; white-space: normal; }.fuzzy-match-status { display: inline-flex; align-items: center; width: fit-content; padding: 2px 5px; border-radius: 3px; font-family: var(--mono); font-size: 8px; font-weight: 700; line-height: 1.35; }.fuzzy-match-status.auto_matched, .fuzzy-match-status.manual_matched { color: #176b57; background: #e5f6ee; }.fuzzy-match-status.suggested { color: #9a5b08; background: #fff3db; }.fuzzy-match-status.unmatched, .fuzzy-match-status.rejected { color: #8a4b54; background: #fcebed; }.comparison-source-name { display: block; color: #718898; font-size: 9px; font-weight: 500; line-height: 1.35; }.fuzzy-match-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }.fuzzy-match-actions .secondary { min-height: 24px; padding: 3px 6px; font-size: 9px; }.fuzzy-match-actions select { max-width: 160px; min-height: 24px; padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: #fff; font: inherit; font-size: 9px; }.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Add unit to the review form so the extracted table can be corrected intact. */
.quote-items-header, .quote-item { grid-template-columns: .6fr 1.8fr .65fr .55fr 1fr 1fr 30px; }

/* Shared states */
.empty { display: grid; min-height: 350px; place-items: center; margin-top: 27px; padding: 34px; border: 1px dashed #b7cbd8; border-radius: 8px; color: var(--ink-soft); background: #fff; text-align: center; }.empty > div { max-width: 380px; }.empty h2 { margin-bottom: 7px; color: var(--navy); font-family: var(--display); font-size: 20px; }.empty p { margin-bottom: 16px; font-size: 12px; line-height: 1.6; }.card-icon { width: 35px; height: 35px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 6px; color: var(--blue); background: #e9f8ff; font-family: var(--mono); font-size: 16px; }.compact { min-height: 280px; margin-top: 0; border: 0; border-radius: 0; }.blocked { max-width: 540px; }.blocked .card-icon, .error-state .card-icon { color: #a66624; background: #fff1df; }.error-state { border-style: solid; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 960px) { .content { padding: 37px 31px 54px; }.sidebar { width: 224px; }.sidebar .brand { font-size: 20px; }.work-summary { grid-template-columns: repeat(3,1fr); }.create-pr-button { grid-column: 1 / -1; justify-self: start; margin: 14px 18px 18px; }.pr-table-header, .pr-row { grid-template-columns: minmax(190px,1.4fr) minmax(110px,.75fr) minmax(105px,.55fr) 18px; }.pr-table-header span:nth-child(4), .pr-row .pr-budget { display: none; }.creation-layout { grid-template-columns: 210px minmax(0,1fr); } }
@media (max-width: 720px) { .login-layout { display: block; }.login-panel { min-height: 100vh; padding: 36px 23px; }.login-card .section-kicker { margin-top: 44px; }.hero { display: none; }.shell { display: block; }.sidebar { position: static; width: 100%; height: auto; min-height: 0; padding: 15px 17px 12px; }.sidebar .brand { margin: 0; font-size: 19px; }.sidebar .brand-mark { width: 29px; height: 29px; font-size: 16px; }.sidebar-rule, .role-label, .sidebar-footer { display: none; }.sidebar nav { display: flex; gap: 5px; margin-top: 14px; overflow-x: auto; }.nav-button { width: auto; flex: 1 0 max-content; justify-content: center; gap: 7px; padding: 8px 10px; font-size: 11px; }.nav-icon { width: auto; font-size: 13px; }.content { padding: 29px 18px 46px; }.role-badge { margin-top: 15px; }.work-summary { grid-template-columns: 1fr 1fr; margin-top: 25px; }.work-summary > div { min-height: 97px; padding: 16px; }.work-summary > div:nth-child(3) { grid-column: 1 / -1; min-height: 82px; }.create-pr-button { grid-column: 1 / -1; justify-self: stretch; margin: 11px 12px 15px; }.list-heading { margin-top: 30px; }.list-heading > span { display: none; }.toolbar { margin-bottom: 11px; overflow: auto; }.filters { flex-wrap: nowrap; padding-bottom: 3px; }.filter-button { flex: 0 0 auto; }.pr-table-header { display: none; }.pr-row { grid-template-columns: 1fr auto; gap: 9px 12px; padding: 15px; }.pr-row > div:nth-child(2) { grid-column: 1; grid-row: 2; }.pr-row .pr-due { grid-column: 1; grid-row: 3; }.pr-row .row-arrow { grid-column: 2; grid-row: 1 / span 3; }.creation-layout { display: block; margin-top: 26px; }.form-context { display: none; }.form-card, .detail-card { padding: 20px; }.form-grid, .detail-grid { grid-template-columns: 1fr; gap: 0; }.detail-heading, .next-action, .quote-header, .editor-heading { align-items: stretch; flex-direction: column; }.progress-rail { gap: 8px; overflow-x: auto; padding-bottom: 4px; }.progress-rail li { min-width: 92px; }.progress-rail li:not(:last-child)::after { right: -8px; }.next-action .secondary { width: 100%; }.quote-layout { grid-template-columns: 1fr; }.comparison-panel { padding: 18px; }.comparison-heading { display: block; }.comparison-heading > span { display: inline-block; margin-top: 11px; }.review-queue { align-items: flex-start; flex-direction: column; gap: 7px; }.review-queue > span { padding: 0; border: 0; }.review-complete-card { grid-template-columns: 1fr; }.review-complete-card .form-actions, .review-complete-card .inline-primary { width: 100%; }.quote-items-header { display: none; }.quote-item { grid-template-columns: 1fr 1fr; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }.quote-item .item-name { grid-column: 1 / -1; }.quote-item .remove-item { grid-column: 2; justify-self: end; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Spec 4.5 Supplier Comparison & Recommendation Styles */
.comparison-view { width: 100%; animation: rise-in .4s both; }
.comparison-header-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); margin-bottom: 20px; }
.comparison-header-content h2 { margin: 6px 0 10px; color: var(--navy); font-family: var(--display); font-size: 24px; letter-spacing: -.6px; }
.pr-meta-row { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-soft); }
.pr-meta-row span b { color: var(--navy); }
.comparison-header-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.btn-sm { padding: 6px 12px; font-size: 11px; }

/* AI Recommendation Hero */
.comparison-workspace { width: 100%; }
.comparison-workspace > .detail-card { max-width: none; }
.ai-hero-card { position: relative; overflow: hidden; padding: 26px; border-radius: 10px; background: linear-gradient(135deg, #091d31 0%, #102a43 60%, #133959 100%); color: #fff; box-shadow: 0 14px 34px rgba(9, 29, 49, .28); margin-bottom: 22px; }
.comparison-workspace > .ai-hero-card { margin-top: 18px; }
.analysis-guidance { max-width: 720px; margin: 16px 0; padding: 13px 16px; border: 1px solid rgba(125, 211, 252, .45); border-radius: 7px; background: rgba(255, 255, 255, .08); color: #e2f1f8; font-size: 13px; line-height: 1.55; }
.analysis-guidance p { margin: 5px 0 0; }.analysis-guidance ul { margin: 8px 0 0; padding-left: 19px; }.analysis-guidance strong { color: #fff; }

/* Verified recommendation: a compact decision brief, not a generic AI summary. */
.recommendation-brief { margin-bottom: 0; padding: 22px 26px 20px; border: 1px solid #194562; border-radius: 10px; background: #09243c; }
.recommendation-brief-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: #a9c0d0; font-size: 11px; }
.verified-brief-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(184, 212, 228, .22); border-radius: 5px; color: #e6f0f6; background: rgba(255, 255, 255, .07); font-weight: 750; }
.recommendation-brief .section-kicker { margin-bottom: 7px; color: #79c7eb; }
.recommendation-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.recommendation-title-row h3 { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -1.1px; line-height: 1.08; }
.selected-supplier-badge { padding: 5px 9px; border-radius: 5px; color: #dcfaeb; background: rgba(22, 126, 90, .72); font-size: 11px; font-weight: 800; white-space: nowrap; }
.recommendation-signals { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.recommendation-signals li { padding: 7px 10px; border: 1px solid rgba(196, 219, 232, .16); border-radius: 6px; color: #eaf3f8; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 700; }
.recommendation-signals li::before { margin-right: 6px; color: #9bd8f4; content: "+"; }

.recommendation-ranking-card, .agent-evidence-card { max-width: none; margin-top: 18px; margin-bottom: 0; }
.recommendation-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.recommendation-section-heading .section-kicker { margin-bottom: 5px; }
.recommendation-section-heading h3 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 20px; letter-spacing: -.6px; }
.recommendation-section-heading > p { margin: 0; color: var(--ink-soft); font-size: 11px; text-align: right; }
.recommendation-ranking-table { min-width: 850px; }
.recommendation-ranking-table th:first-child { min-width: 84px; }
.recommendation-ranking-table th:nth-child(2) { min-width: 240px; text-align: left; }
.recommendation-ranking-table tbody tr.is-recommended { background: #f1faf5; }
.recommendation-ranking-table tbody tr.is-recommended th { color: #105f46; }
.recommendation-rank { color: var(--ink-soft); font-family: var(--mono); font-size: 11px; font-weight: 800; text-align: left !important; }
.recommendation-rank span { margin-left: 3px; color: #b7791f; }
.assessment-pill { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.assessment-pill.is-recommended { color: #0e6448; background: var(--decision-mint); }
.assessment-pill.has-risk { color: #a5442b; background: var(--decision-alert); }
.assessment-pill.is-verified { color: #34627d; background: #e7f2f8; }

.agent-evidence-card { padding: 24px 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.agent-evidence-card .recommendation-section-heading { margin-bottom: 12px; }
.recommendation-rationale { max-width: none; margin: 0 0 17px; color: var(--ink); font-size: 13px; line-height: 1.65; }
.agent-insight-intro { margin: 0 0 10px; color: var(--navy); font-size: 12px; font-weight: 750; }
.agent-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.agent-insight-card { min-height: 88px; padding: 13px 14px; border: 1px solid rgba(20, 50, 77, .06); border-radius: 7px; }
.agent-insight-card h4 { margin: 0 0 7px; color: var(--navy); font-size: 12px; }
.agent-insight-card p { margin: 0; color: #29465c; font-size: 11px; line-height: 1.55; }
.agent-insight-card.cost { background: var(--decision-mint); }
.agent-insight-card.delivery { background: var(--decision-sky); }
.agent-insight-card.warranty { background: var(--decision-violet); }
.recommendation-risk { margin-top: 13px; padding: 11px 13px; border: 1px solid #f3c7b2; border-radius: 6px; color: #7d3827; background: var(--decision-alert); font-size: 12px; line-height: 1.55; }
.recommendation-risk.is-clear { border-color: #b9e2ce; color: #186548; background: #ebf8f0; }
.recommendation-proof { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.recommendation-proof summary { cursor: pointer; color: var(--blue); font-weight: 800; }
.recommendation-proof .agent-claims { margin: 13px 0 0; }
.ai-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ai-badge-group { display: flex; align-items: center; gap: 14px; }
.ai-sparkle-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: rgba(56, 189, 248, .18); border: 1px solid rgba(56, 189, 248, .35); color: var(--cyan); font-size: 20px; flex-shrink: 0; }
.ai-section-kicker { color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ai-badge-group h3 { margin: 4px 0 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.ai-recommended-vendor { background: rgba(56, 189, 248, .22); color: #fff; padding: 3px 9px; border-radius: 4px; border: 1px solid rgba(56, 189, 248, .45); }
.ai-score-box { text-align: right; padding: 10px 18px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); flex-shrink: 0; }
.ai-score-big { font-family: var(--display); font-size: 32px; font-weight: 800; color: #5eead4; line-height: 1; }
.ai-score-big span { font-size: 14px; color: #94a3b8; }
.ai-score-lbl { display: block; margin-top: 4px; font-size: 10px; color: #b8d1df; }
.ai-summary-callout { margin: 18px 0; padding: 14px 18px; border-radius: 6px; background: rgba(255, 255, 255, .07); border-left: 4px solid var(--cyan); font-size: 13.5px; line-height: 1.65; color: #e2f1f8; }
.ai-rationale-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.rationale-box { padding: 15px 17px; border-radius: 8px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(255, 255, 255, .09); }
.rationale-box h4 { margin: 0 0 8px; color: var(--cyan); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.rationale-box p { margin: 0; color: #cbdbe6; font-size: 12px; line-height: 1.6; }
.ai-trace-details { padding: 12px 16px; border-radius: 8px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(56, 189, 248, .22); }
.ai-trace-details summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #e0f2fe; }
.trace-pill { padding: 3px 8px; border-radius: 99px; background: rgba(56, 189, 248, .2); color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.trace-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.trace-item { padding: 12px; border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.trace-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: var(--navy); font-size: 11px; font-weight: 800; display: grid; place-items: center; margin-bottom: 8px; }
.trace-body strong { display: block; margin-bottom: 4px; color: #f0fdfa; font-size: 11px; }
.trace-body p { margin: 0; color: #94a3b8; font-size: 10.5px; line-height: 1.45; }

/* Matrix Table */
.comparison-matrix-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); margin-bottom: 22px; }
.matrix-card-title { margin-bottom: 16px; }
.matrix-card-title h3 { margin: 4px 0 2px; color: var(--navy); font-family: var(--display); font-size: 19px; letter-spacing: -.5px; }
.matrix-card-title p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.matrix-main-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix-criteria-th { width: 220px; text-align: left; background: #f8fafc; padding: 12px 14px; font-family: var(--mono); font-size: 10px; color: #64748b; text-transform: uppercase; }
.matrix-supplier-th { padding: 14px 12px; background: #f8fafc; text-align: center; border-left: 1px solid var(--line); vertical-align: top; min-width: 220px; }
.matrix-recommended { background: #f2fbf6 !important; border-left: 2px solid #16836a !important; border-right: 2px solid #16836a !important; }
.matrix-supplier-th.matrix-recommended { background: #e7f7ee !important; border-top: 3px solid #16836a !important; }
.rec-badge { display: inline-block; background: #16836a; color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 3px; margin-bottom: 6px; font-family: var(--mono); }
.supplier-header-title { font-weight: 750; color: var(--navy); font-size: 12.5px; line-height: 1.35; margin-bottom: 4px; }
.score-tag { font-size: 11px; color: #147dab; font-family: var(--mono); }
.matrix-group-row td { background: #102a43; color: #fff; font-size: 11px; font-weight: 700; padding: 8px 14px; letter-spacing: .03em; }
.matrix-main-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); vertical-align: top; text-align: center; }
.matrix-main-table tbody td.criteria-name { font-weight: 700; color: var(--navy); background: #fcfdfe; text-align: left; border-left: 0; min-width: 190px; }
.matrix-price { font-size: 14px; font-weight: 800; color: var(--navy); }
.text-success { color: #16836a; font-weight: 700; }
.text-danger { color: #bd4350; font-weight: 700; }
.risk-pill { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; margin-top: 4px; }
.risk-low { background: #e6f7f0; color: #16836a; }
.risk-medium { background: #fef3c7; color: #b45309; }
.risk-high { background: #fee2e2; color: #dc2626; }
.compliance-tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-bottom: 6px; }
.compliance-tag.compliant { background: #e6f7f0; color: #16836a; }
.compliance-tag.warning { background: #fef3c7; color: #b45309; }
.compliance-tag.non_compliant { background: #fee2e2; color: #dc2626; }
.matrix-notes { margin: 4px 0 0 16px; padding: 0; font-size: 11px; color: #b45309; text-align: left; }
.strengths-list { margin: 0 0 6px 14px; padding: 0; font-size: 11px; color: #16836a; text-align: left; }
.drawbacks-list { margin: 0 0 0 14px; padding: 0; font-size: 11px; color: #bd4350; text-align: left; }
.best-price-cell { background: #edf9f3; font-weight: 800; color: #16836a; }

/* HITL Action Card */
.hitl-action-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border: 2px solid var(--blue); border-radius: 8px; background: #fff; box-shadow: var(--shadow); margin-bottom: 30px; }
.hitl-action-card h3 { margin: 0 0 4px; color: var(--navy); font-family: var(--display); font-size: 17px; }
.hitl-action-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.hitl-action-card.approved-card { border-color: #16836a; background: #f6fdf9; }
.review-submit-action { display: grid; justify-items: center; gap: 10px; margin: 36px 0 0; text-align: center; }
.btn-submit-approval { min-width: 242px; padding: 15px 28px; font-size: 14px; }
.review-submit-action .error { margin: 0; }
.rejection-alert { color: #dc2626 !important; font-weight: 600; margin-top: 4px !important; }
@media (max-width: 720px) { .review-submit-action .btn-submit-approval { width: min(100%, 320px); } }

/* Spec 4.6: Manager Decision Card (HITL) */
.hitl-manager-card { background: #ffffff; border: 2px solid #102a43; border-radius: 10px; padding: 26px 30px; box-shadow: 0 8px 24px rgba(16, 42, 67, 0.1); margin-bottom: 35px; }
.hitl-manager-header { margin-bottom: 20px; }
.decision-badge { display: inline-block; background: #102a43; color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px; letter-spacing: 0.05em; }
.hitl-manager-header h3 { margin: 0 0 4px; font-family: var(--display); font-size: 19px; color: var(--navy); }
.hitl-manager-header p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.hitl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
@media (max-width: 800px) { .hitl-form-grid { grid-template-columns: 1fr; } }
.select-vendor-dropdown { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--navy); font-weight: 600; background: #fafbfc; outline: none; }
.select-vendor-dropdown:focus { border-color: var(--blue); background: #fff; }
.form-text-muted { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.note-textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 12.5px; resize: vertical; box-sizing: border-box; }
.note-textarea:focus { border-color: var(--blue); }
.hitl-actions-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.btn-approve-action { background: #16836a; color: #fff; border: none; padding: 12px 24px; border-radius: 6px; font-size: 13.5px; font-weight: 750; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 6px rgba(22, 131, 106, 0.25); }
.btn-approve-action:hover { background: #126e59; transform: translateY(-1px); }
.btn-reject-action { background: #ffffff; color: #dc2626; border: 1.5px solid #dc2626; padding: 11px 20px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
.btn-reject-action:hover { background: #fee2e2; }
.error-card { background: #fef2f2; border: 1px solid #f87171; color: #b91c1c; padding: 10px 14px; border-radius: 6px; font-size: 12px; }

/* Spec 4.6: PO Document View */
.po-view-wrapper { max-width: 900px; margin: 0 auto 50px; }
.po-document { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); padding: 48px; position: relative; overflow: hidden; }
.po-watermark { position: absolute; top: 38%; left: 10%; transform: rotate(-25deg); font-size: 72px; font-weight: 900; color: rgba(220, 38, 38, 0.05); letter-spacing: 0.2em; pointer-events: none; user-select: none; font-family: var(--display); }
.po-doc-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 2px solid var(--navy); margin-bottom: 28px; }
.po-doc-brand h2 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; color: var(--navy); letter-spacing: 0.04em; }
.po-doc-brand p { margin: 0; font-size: 12px; color: var(--ink-soft); }
.po-doc-meta { text-align: right; font-size: 12px; line-height: 1.6; }
.po-status-badge { display: inline-block; background: #fef3c7; color: #b45309; border: 1px solid #f59e0b; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; font-family: var(--mono); margin-bottom: 6px; }
.po-number { font-size: 15px; color: var(--navy); margin-bottom: 2px; }
.po-vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.po-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; }
.po-box h4 { margin: 0 0 10px; font-size: 11px; font-family: var(--mono); color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.po-box p { margin: 0 0 6px; font-size: 12px; color: var(--ink); line-height: 1.4; }
.po-items-section { margin-bottom: 24px; }
.po-items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.po-items-table th { background: #102a43; color: #fff; padding: 10px 12px; font-weight: 700; border: 1px solid #102a43; font-size: 11.5px; }
.po-items-table td { padding: 11px 12px; border: 1px solid var(--line); vertical-align: top; }
.po-items-table tfoot td { background: #f8fafc; padding: 12px 14px; border: 1px solid var(--line); font-size: 13px; }
.po-total-amount { color: var(--navy); font-size: 15px; font-weight: 850; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.po-manager-note-box { background: #eff6ff; border-left: 4px solid #1d4ed8; padding: 12px 16px; border-radius: 0 6px 6px 0; margin-bottom: 22px; font-size: 12px; }
.po-manager-note-box strong { color: #1e40af; display: block; margin-bottom: 4px; }
.po-manager-note-box p { margin: 0; color: #1e3a8a; }
.po-warning-callout { display: flex; align-items: flex-start; gap: 12px; background: #fffbeb; border: 1px solid #fde68a; padding: 12px 16px; border-radius: 6px; margin-bottom: 30px; font-size: 11.5px; color: #92400e; }
.po-warning-callout .warn-icon { font-size: 16px; font-weight: 900; }
.po-warning-callout p { margin: 2px 0 0; }
.po-signatures-grid { display: flex; justify-content: space-between; margin-top: 40px; padding: 0 40px; }
.po-sig-col { text-align: center; font-size: 12px; color: var(--ink-soft); }
.sig-space { height: 70px; display: flex; align-items: center; justify-content: center; }
.sig-stamp { display: inline-block; border: 2px dashed #16836a; color: #16836a; font-weight: 800; font-size: 11px; padding: 4px 12px; border-radius: 4px; transform: rotate(-5deg); letter-spacing: 0.05em; }
.po-actions-bottom { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
@media print {
  body * { visibility: hidden; }
  .po-document, .po-document * { visibility: visible; }
  .po-document { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; padding: 0; }
  .po-actions-bottom, .back-link { display: none !important; }
}

@media (max-width: 980px) {
  .source-review-backdrop { padding: 14px; }
  .source-review-dialog { height: min(900px, calc(100dvh - 28px)); }
  .source-review-layout { grid-template-columns: minmax(330px, .82fr) minmax(400px, 1.18fr); }
  .source-review-row { grid-template-columns: 27px minmax(130px, 1fr) 80px; }
  .source-review-row .source-row-money:last-child { display: none; }
}

@media (max-width: 720px) {
  .source-review-backdrop { padding: 0; }
  .source-review-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .source-review-dialog-header { padding: 15px 17px; }
  .source-review-dialog-header h2 { font-size: 20px; }
  .source-review-layout { grid-template-columns: 1fr; grid-template-rows: minmax(235px, .75fr) minmax(330px, 1.25fr); overflow: auto; }
  .source-review-items { border-right: 0; border-bottom: 1px solid var(--line); }
  .source-review-pane-heading { min-height: 83px; padding: 13px 15px 11px; }
  .source-review-pane-heading h3 { max-width: 240px; font-size: 14px; }
  .source-review-table { padding: 5px 8px 7px; }
  .source-review-row { grid-template-columns: 25px minmax(0, 1fr) 76px; gap: 7px; padding: 9px 7px; }
  .source-row-detail strong { white-space: normal; }
  .source-review-edit-note { padding: 9px 15px; }
  .source-preview-scroll { padding: 16px 14px 30px; }
  .source-preview-page { margin-bottom: 18px; }
}


/* Verified workflow tables share the existing procurement surface. */
.agent-cost-table { min-width: 600px; }
.agent-cost-table th:nth-child(2) { min-width: 160px; text-align: right; }
.agent-cost-table tbody th { min-width: 140px; }
.agent-claims { padding-left: 20px; }
.agent-claims li { margin-bottom: 14px; line-height: 1.6; }
.agent-claims details { margin-top: 4px; font-size: 13px; }
.detail-card a[data-claim-link] { color: var(--blue); text-underline-offset: 3px; }
.agent-finance-fields { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; }
.agent-finance-fields legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
.required-mark { color: var(--danger); font-weight: 800; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 11px; font-weight: 700; line-height: 1.4; }
.form-field.has-error input, .form-field.has-error select, input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(196, 53, 53, 0.12); }
.form-field.has-error input:focus, .form-field.has-error select:focus { outline-color: var(--danger); }

@media (max-width: 720px) {
  .recommendation-brief { padding: 19px 18px; }
  .recommendation-brief-meta, .recommendation-section-heading { align-items: flex-start; flex-direction: column; }
  .recommendation-brief-meta { gap: 8px; }
  .recommendation-section-heading > p { text-align: left; }
  .recommendation-title-row h3 { font-size: 25px; }
  .recommendation-signals { display: grid; grid-template-columns: 1fr; }
  .agent-evidence-card { padding: 20px; }
  .agent-insight-grid { grid-template-columns: 1fr; }
  .recommendation-ranking-card { padding: 18px; }
}