:root { --navy:#173b84; --blue:#2468d4; --sky:#edf4ff; --ink:#172033; --muted:#64708a; --line:#dce4f0; --paper:#fff; --good:#16794f; --warning:#945604; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:320px; background:#f3f6fb; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { min-height:100vh; padding:18px; }.app { margin:0 auto; max-width:1540px; }.login-card { width:min(100%,450px); margin:8vh auto; background:#fff; border:1px solid #e3e9f2; border-radius:24px; box-shadow:0 22px 55px rgba(26,52,101,.14); padding:34px; }.brand-logo { display:block; height:auto; max-width:360px; width:100%; }.brand-logo.compact { width:218px; }
.eyebrow { color:var(--blue); font-size:.69rem; font-weight:850; letter-spacing:.11em; margin:0 0 7px; text-transform:uppercase; } h1 { font-size:clamp(1.55rem,2.8vw,2.2rem); line-height:1.1; margin:0 0 7px; } h2 { font-size:1.02rem; margin:0; } p { color:var(--muted); line-height:1.5; } label { display:block; font-size:.86rem; font-weight:700; margin:19px 0 7px; } input,select,textarea { background:#fff; border:1px solid #cbd7e8; border-radius:10px; color:var(--ink); font:inherit; padding:11px 12px; width:100%; } textarea { line-height:1.55; min-height:360px; resize:vertical; } input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,104,212,.13); outline:none; }
button { border:0; border-radius:10px; cursor:pointer; font:inherit; font-weight:760; padding:11px 14px; transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease; } button:hover:not(:disabled) { box-shadow:0 7px 15px rgba(23,59,132,.16); transform:translateY(-1px); } button:active:not(:disabled) { box-shadow:none; transform:translateY(0); } button:disabled { cursor:not-allowed; opacity:.5; }.primary { background:var(--blue); color:#fff; }.primary:hover:not(:disabled) { background:#1754b4; }.secondary { background:#edf3ff; color:var(--navy); }.secondary:hover:not(:disabled) { background:#dce9ff; }.text-button { background:transparent; color:var(--navy); padding:7px; }.text-button:hover:not(:disabled) { background:#edf3ff; }.form-error { color:#b52828; font-size:.88rem; min-height:1.2rem; margin:12px 0 0; }.form-success { background:#edf9f1; border-left:3px solid var(--good); border-radius:6px; color:var(--good); padding:9px 10px; }.login-card .primary { margin-top:24px; width:100%; }.primary span { padding-left:6px; }
.topbar { align-items:center; display:flex; justify-content:space-between; margin:0 0 13px; }.topbar-actions { align-items:center; display:flex; font-size:.88rem; font-weight:650; gap:10px; }.workspace-banner { align-items:center; background:linear-gradient(100deg,#163b84,#2866c9); border-radius:15px; color:#fff; min-height:86px; padding:16px 23px; }.workspace-banner .eyebrow,.workspace-banner p { color:#dce9ff; }.workspace-banner p { font-size:.86rem; margin:0; }
.portal-layout { align-items:start; display:grid; gap:16px; grid-template-columns:minmax(0,1fr) 325px; margin-top:16px; }.quote-workspace { min-width:0; }.type-picker { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:14px; }.quotation-type { background:#fff; border:1px solid #dbe4f2; color:var(--ink); min-height:76px; padding:12px 14px; text-align:left; }.quotation-type strong,.quotation-type span { display:block; }.quotation-type strong { font-size:.9rem; }.quotation-type span { color:var(--muted); font-size:.73rem; font-weight:500; margin-top:4px; }.quotation-type:hover { border-color:#85a9e7; }.quotation-type.active { background:#eaf2ff; border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); color:var(--navy); }
.draft-review-grid { align-items:start; display:grid; gap:16px; grid-template-columns:minmax(370px,.92fr) minmax(440px,1.08fr); }.card { background:var(--paper); border:1px solid #e0e7f1; border-radius:16px; box-shadow:0 8px 24px rgba(35,54,89,.055); padding:20px; }.card-heading { align-items:flex-start; display:flex; gap:9px; justify-content:space-between; }.step { color:var(--blue); display:block; font-size:.68rem; font-weight:850; letter-spacing:.12em; margin-bottom:4px; }.status-dot { background:#edf8f1; border-radius:999px; color:var(--good); font-size:.72rem; font-weight:800; padding:6px 9px; text-transform:capitalize; }.hint,.review-note { font-size:.82rem; }.composer-footer { align-items:center; color:var(--muted); display:flex; font-size:.76rem; justify-content:space-between; margin-top:10px; }
.identity-grid { display:grid; gap:9px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0 4px; }.identity-grid label,.conversation-label { font-size:.75rem; margin:0; }.identity-grid input { margin-top:5px; }.conversation-label { display:block; margin-top:13px; }.conversation-label textarea { margin-top:5px; }
.review { min-width:0; }.empty-state { align-items:center; display:flex; flex-direction:column; justify-content:center; min-height:430px; text-align:center; }.empty-icon { align-items:center; background:var(--sky); border-radius:50%; color:var(--blue); display:flex; font-size:2rem; height:65px; justify-content:center; width:65px; }.empty-state h2 { margin:16px 0 0; }.empty-state p { font-size:.88rem; max-width:300px; }.status-group { align-items:flex-end; display:flex; flex-direction:column; gap:6px; }.revision-label { color:var(--muted); font-size:.71rem; font-weight:750; }.pill { background:#fff2da; border-radius:999px; color:var(--warning); font-size:.72rem; font-weight:800; padding:6px 9px; text-transform:capitalize; }.summary-grid { display:grid; gap:0 14px; grid-template-columns:1fr 1fr; margin:15px 0; }.summary-grid div { border-bottom:1px solid var(--line); font-size:.83rem; padding:8px 0; }.summary-grid span { color:var(--muted); display:block; font-size:.66rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }.summary-grid strong { display:block; font-size:.83rem; margin-top:3px; }.warnings { margin:12px 0; }.warnings div { background:#fff5e5; border-left:3px solid #e69d2c; color:#754300; font-size:.8rem; margin:5px 0; padding:8px; }.extraction-note { background:#eef5ff; border-radius:8px; color:#31517d; font-size:.78rem; margin:9px 0; padding:8px 10px; }.table-wrap { overflow:auto; }.table-wrap table { border-collapse:collapse; font-size:.78rem; min-width:580px; width:100%; }.table-wrap th { background:#eef4ff; color:#405171; font-size:.66rem; letter-spacing:.04em; text-align:left; text-transform:uppercase; }.table-wrap td,.table-wrap th { border-bottom:1px solid var(--line); padding:9px 7px; vertical-align:top; }.table-wrap td:nth-child(n+4) { text-align:right; white-space:nowrap; }
.terms-card { background:#f1f6ff; border:1px solid #d7e4fa; border-radius:10px; margin:14px 0; padding:12px 14px; }.terms-label { color:var(--blue); display:block; font-size:.67rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.terms-card strong { display:block; font-size:.84rem; margin-top:4px; }.terms-card ul { color:#435171; font-size:.79rem; line-height:1.42; margin:8px 0 0; padding-left:18px; }.assistant-card { border-top:1px solid var(--line); margin-top:17px; padding-top:16px; }.assistant-card p { font-size:.8rem; margin:7px 0 10px; }.assistant-heading { align-items:center; display:flex; gap:10px; justify-content:space-between; }.conversation { background:#f7f9fd; border:1px solid var(--line); border-radius:10px; max-height:210px; min-height:76px; overflow:auto; padding:9px; }.message { border-radius:9px; font-size:.79rem; line-height:1.38; margin:5px 0; padding:7px 9px; }.message strong { display:block; font-size:.68rem; margin-bottom:3px; }.message span { white-space:pre-wrap; }.employee-message { background:#e7f0ff; margin-left:18px; }.assistant-message { background:#fff; border:1px solid #e0e7f2; margin-right:18px; }.conversation-empty { color:var(--muted); font-size:.78rem; margin:8px; }.chat-form,.history-search { display:flex; gap:8px; margin-top:9px; }.chat-form input,.history-search input { min-width:0; }.chat-form button,.history-search button { flex:none; }.review-actions { display:flex; gap:10px; margin-top:16px; }.approve { background:#e7f5ed; color:#126a42; }.downloads { align-items:center; display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }.downloads a { background:#edf3ff; border-radius:8px; color:var(--navy); font-size:.8rem; font-weight:800; padding:8px 10px; text-decoration:none; }
.records-panel { align-self:start; max-height:calc(100vh - 32px); min-height:0; position:sticky; top:14px; }.records-panel .hint { font-size:.76rem; margin:7px 0; }.history-list { display:grid; gap:6px; margin-top:10px; max-height:calc(100vh - 214px); overflow:auto; padding-right:2px; }.history-entry { align-items:flex-start; background:#f8faff; border:1px solid #e0e7f2; color:var(--ink); display:flex; justify-content:space-between; min-height:0; padding:8px 9px; text-align:left; width:100%; }.history-entry:hover { background:#edf3ff; }.history-entry strong,.history-entry small { display:block; }.history-entry strong { font-size:.79rem; line-height:1.15; }.history-entry small { color:var(--muted); font-size:.69rem; font-weight:500; line-height:1.2; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.history-entry small:nth-of-type(2) { display:none; }.history-entry em { color:var(--blue); font-size:.65rem; font-style:normal; font-weight:750; line-height:1.15; margin-left:7px; text-align:right; text-transform:capitalize; }.toast { background:#172b50; border-radius:10px; bottom:20px; color:#fff; left:50%; max-width:calc(100% - 32px); opacity:0; padding:12px 16px; pointer-events:none; position:fixed; transform:translate(-50%,15px); transition:.2s; z-index:5; }.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:1250px) { .portal-layout { grid-template-columns:minmax(0,1fr) 285px; }.draft-review-grid { grid-template-columns:minmax(330px,.9fr) minmax(390px,1.1fr); } }
@media (max-width:1040px) { .portal-layout { grid-template-columns:1fr; }.records-panel { max-height:none; min-height:0; position:static; }.history-list { max-height:350px; }.draft-review-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:780px) { .shell { padding:12px; }.topbar { align-items:flex-start; gap:10px; }.brand-logo.compact { width:170px; }.topbar-actions { align-items:flex-end; flex-direction:column; gap:1px; }.workspace-banner { min-height:0; padding:16px; }.type-picker,.draft-review-grid,.identity-grid { grid-template-columns:1fr; }.quotation-type { min-height:62px; }.card { padding:17px; }.summary-grid { grid-template-columns:1fr; }.composer-footer,.review-actions,.chat-form,.history-search { align-items:stretch; flex-direction:column; }.composer-footer .primary,.review-actions button,.chat-form button,.history-search button { width:100%; } textarea { min-height:300px; } }
.checkbox { align-items:center; display:flex; gap:8px; }.checkbox input { width:auto; }.admin-grid { display:grid; gap:16px; grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr); margin-top:16px; }.admin-grid > .card:last-child { grid-column:1 / -1; }.employee-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:16px; }.employee-card { background:#f7f9fd; border:1px solid var(--line); border-radius:10px; display:grid; gap:6px; padding:12px; }.employee-card.employee-authorized { background:linear-gradient(140deg,#f3fff8,#f7f9fd); border-color:#9bdbb8; box-shadow:inset 4px 0 0 var(--good); }.employee-card.employee-pending { border-left:4px solid #e5a12f; }.employee-card small { color:var(--muted); }.employee-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }.employee-card button { justify-self:start; padding:6px 8px; } pre { background:#f7f9fd; border:1px solid var(--line); border-radius:8px; max-height:180px; overflow:auto; padding:10px; white-space:pre-wrap; } @media (max-width:900px) { .admin-grid { grid-template-columns:1fr; }.admin-grid > .card:last-child { grid-column:auto; } }
.invitation-success { animation:success-in .35s ease-out; padding:22px 4px 10px; text-align:center; }.success-icon { align-items:center; background:#e3f7ea; border:5px solid #f4fcf7; border-radius:50%; color:var(--good); display:flex; font-size:2.1rem; font-weight:900; height:74px; justify-content:center; margin:0 auto 17px; width:74px; }.invitation-success h2 { font-size:1.3rem; line-height:1.25; margin:5px auto 10px; max-width:340px; }.invitation-success > p { font-size:.94rem; margin:8px auto; max-width:355px; }.success-next { background:#f1f7ff; border:1px solid #d5e3f9; border-radius:12px; margin:20px 0; padding:14px 16px; text-align:left; }.success-next strong { color:var(--navy); font-size:.84rem; }.success-next ol { color:#4f5e79; font-size:.83rem; line-height:1.55; margin:8px 0 0; padding-left:20px; } @keyframes success-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }