@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
  :root {
    --bg:#f0f4f9;--surface:#fff;--surface2:#f5f7fb;--surface3:#edf0f7;
    --border:#dde3ef;--border2:#c8d0e0;
    --accent:#4175e8;--accent-lt:#eef2fd;
    --green:#0ea86b;--green-lt:#e6f7f0;
    --orange:#e07b1a;--orange-lt:#fef3e6;
    --red:#d93b52;--red-lt:#fdeef1;
    --purple:#7c5cbf;--purple-lt:#f1eefb;
    --cyan:#0891b2;--cyan-lt:#e0f4f9;
    --amber:#b07d0a;--amber-lt:#fef9e6;
    --bio:#0a7a3e;--bio-lt:#edfdf4;
    --magenta:#a0428f;--magenta-lt:#f9ecf6;
    --indigo:#4c46b6;--indigo-lt:#ecebf8;
    --brown:#7a5230;--brown-lt:#f5eee8;
    --text:#1a2035;--text2:#5c6a85;--text3:#a0abbe;
    --radius:14px;--radius-sm:8px;
    --shadow:0 1px 3px rgba(26,32,53,.07),0 4px 16px rgba(26,32,53,.05);
    --shadow-lg:0 12px 40px rgba(26,32,53,.14),0 2px 8px rgba(26,32,53,.08);
    --font:'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh;}
  /* HEADER */
  .header{background:var(--surface);border-bottom:1px solid var(--border);padding:15px 28px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow);}
  .logo{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-.5px;}
  .logo-sub{font-size:11px;color:var(--text2);margin-top:2px;font-weight:500;}
  .hright{margin-left:auto;display:flex;gap:20px;align-items:center;}
  .hstat-val{font-size:18px;font-weight:800;color:var(--text);}
  .hstat-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
  .hdiv{width:1px;height:32px;background:var(--border);}
  /* DATE BAR */
  .datebar{display:flex;gap:10px;padding:10px 28px;background:var(--surface);border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap;}
  .datebar label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);font-weight:600;}
  .datebar input[type=date]{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:5px 10px;font-size:13px;font-family:var(--font);outline:none;}
  .datebar input[type=date]:focus{border-color:var(--accent);}
  .datesep{color:var(--text3);}
  .presets{display:flex;gap:5px;flex-wrap:wrap;}
  .preset{background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:4px 11px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);}
  .preset:hover{color:var(--accent);border-color:var(--accent);}
  .preset.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .datebar select{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:5px 10px;font-size:12px;font-family:var(--font);outline:none;font-weight:600;}
  .datebar select:focus{border-color:var(--accent);}
  .dateinfo{margin-left:auto;font-size:12px;color:var(--text2);font-weight:600;}
  /* TABS */
  .tabs{display:flex;gap:2px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--border);}
  .tab{padding:12px 20px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);border-bottom:3px solid transparent;transition:all .15s;user-select:none;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--accent);border-bottom-color:var(--accent);}
  /* MAIN */
  .main{padding:22px 28px;}
  .view{display:none;}
  .view.active{display:block;}
  /* KPI */
  .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:13px;margin-bottom:22px;}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
  .kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;}
  .kpi.blue::after{background:linear-gradient(90deg,#4175e8,#60a5fa);}
  .kpi.green::after{background:linear-gradient(90deg,#0ea86b,#34d399);}
  .kpi.orange::after{background:linear-gradient(90deg,#e07b1a,#fbbf24);}
  .kpi.red::after{background:linear-gradient(90deg,#d93b52,#f97316);}
  .kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:8px;font-weight:700;}
  .kpi-value{font-size:28px;font-weight:800;line-height:1;letter-spacing:-1px;color:var(--text);}
  .kpi-sub{font-size:11px;color:var(--text3);margin-top:5px;font-weight:500;}
  /* CHARTS */
  .charts-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:22px;}
  @media(max-width:1100px){.charts-row{grid-template-columns:1fr 1fr;}}
  .chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
  .chart-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:13px;}
  .chart-wrap{position:relative;height:195px;}
  /* FILTER BAR */
  .filter-bar{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap;align-items:center;}
  .filter-bar input,.filter-bar select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:7px 11px;font-size:13px;font-family:var(--font);outline:none;box-shadow:var(--shadow);}
  .filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent);}
  .filter-bar input{flex:1;min-width:200px;}
  /* MULTI-SELECT (checkbox popover over a hidden <select multiple>) */
  .ms{position:relative;}
  .ms select[multiple]{display:none;}
  .ms-btn{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:7px 11px;font-size:13px;font-family:var(--font);font-weight:500;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap;}
  .ms-btn::after{content:'▾';color:var(--text3);font-size:11px;}
  .ms-btn:hover{border-color:var(--border2);}
  .ms-btn:focus-visible{outline:none;border-color:var(--accent);}
  .ms-btn-on{border-color:var(--accent);color:var(--accent);font-weight:600;}
  .ms-menu{display:none;position:absolute;z-index:40;top:calc(100% + 5px);left:0;min-width:210px;max-height:340px;overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);}
  .ms-open .ms-menu{display:block;}
  .ms-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;}
  .ms-opt:hover{background:var(--surface2);}
  /* Undo the .filter-bar input box treatment, which is meant for the search field.
     Same reset as .filter-bar .inline-check input[type=checkbox] in app-chrome.css. */
  .ms-opt input{flex:0 0 auto;min-width:0;padding:0;border:none;background:none;box-shadow:none;accent-color:var(--accent);cursor:pointer;}
  /* Sticky so it stays reachable once the option list scrolls. */
  .ms-clear{position:sticky;bottom:-6px;width:100%;margin-top:4px;padding:8px;background:var(--surface);border:none;border-top:1px solid var(--border);color:var(--accent);font-size:12px;font-weight:600;font-family:var(--font);text-align:left;cursor:pointer;}
  .ms-clear:disabled{color:var(--text3);cursor:default;}
  .count-info{margin-left:auto;font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap;}
  .export-jobs-btn{white-space:nowrap;}
  .alt-status-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 13px;padding:8px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-size:11px;box-shadow:var(--shadow);}
  .alt-status-legend strong{color:var(--text);}
  /* TABLE */
  .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  .table-scroll{overflow-x:auto;}
  table{width:100%;border-collapse:collapse;min-width:980px;}
  thead th{background:var(--surface2);padding:10px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);font-weight:700;border-bottom:1px solid var(--border);}
  thead th.sortable{cursor:pointer;user-select:none;}
  thead th.sortable:hover{color:var(--accent);}
  thead th.gp-col{border-left:1px solid var(--border);}
  tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer;}
  tbody tr:last-child{border-bottom:none;}
  tbody tr:hover{background:var(--surface2);}
  tbody td{padding:9px 12px;vertical-align:middle;}
  tbody td.gp-col{border-left:1px solid var(--border);}
  /* Job-list column totals. Heavier top rule so it reads as a summary of the column
     rather than one more row of data. */
  tfoot td{padding:11px 12px;background:var(--surface2);border-top:2px solid var(--border2);font-weight:800;}
  tfoot td.gp-col{border-left:1px solid var(--border);}
  tfoot .tf-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);font-weight:700;}
  .job-name{font-weight:600;color:var(--text);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .job-num{font-size:10px;color:var(--text3);margin-top:2px;}
  .money{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;font-size:13px;}
  .money.pos{color:var(--green);}
  .money.neg{color:var(--red);}
  .money.warn{color:var(--orange);}
  .gp-cell{display:flex;flex-direction:column;gap:1px;}
  .gp-big{font-weight:800;font-size:13px;}
  .gp-sm{font-size:10px;font-weight:500;opacity:.7;}
  .gp-pos{color:var(--green);}
  .gp-neg{color:var(--red);}
  .gp-na{color:var(--text3);font-size:11px;}
  .gp-est-badge{font-size:9px;background:var(--amber-lt);color:var(--amber);border-radius:3px;padding:1px 4px;font-weight:700;vertical-align:middle;margin-left:3px;}
  /* STATUS / TAGS */
  .status{display:inline-block;padding:3px 8px;border-radius:99px;font-size:10px;font-weight:700;white-space:nowrap;}
  .status-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
  .st-Received{background:#e8edf5;color:#5c6a85;}
  .st-Scoped{background:var(--cyan-lt);color:var(--cyan);}
  .st-Pending-Approval{background:var(--purple-lt);color:var(--purple);}
  .st-Approved{background:var(--accent-lt);color:var(--accent);}
  .st-WIP{background:var(--orange-lt);color:var(--orange);}
  .st-Completed{background:var(--green-lt);color:var(--green);}
  .st-Closed{background:#e8edf5;color:#1a2035;}
  .st-Lost{background:var(--red-lt);color:var(--red);}
  .alt-status{display:inline-flex;align-items:center;padding:2px 8px;border-radius:5px;font-size:9px;font-weight:800;line-height:1.25;white-space:nowrap;border:1px solid transparent;}
  .alt-storage{background:var(--cyan-lt);color:var(--cyan);border-color:rgba(8,145,178,.25);}
  .alt-escalation{background:var(--red-lt);color:var(--red);border-color:rgba(217,59,82,.3);}
  .alt-escalation::before{content:'!';display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-right:4px;border-radius:50%;background:var(--red);color:#fff;font-size:8px;}
  .alt-other{background:var(--purple-lt);color:var(--purple);border-color:rgba(124,92,191,.2);}
  .tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;}
  .tag-ins{background:var(--accent-lt);color:var(--accent);}
  .tag-self{background:var(--green-lt);color:var(--green);}
  .tag-net{background:var(--orange-lt);color:var(--orange);}
  .tag-other{background:var(--surface3);color:var(--text2);}
  .tag-res{background:var(--accent-lt);color:var(--accent);}
  .tag-com{background:var(--orange-lt);color:var(--orange);}
  .sl-tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.3px;}
  .sl-WTR{background:var(--cyan-lt);color:var(--cyan);}
  .sl-REC{background:var(--green-lt);color:var(--green);}
  .sl-CON{background:var(--purple-lt);color:var(--purple);}
  .sl-CONCL{background:var(--magenta-lt);color:var(--magenta);}
  .sl-MLD{background:var(--orange-lt);color:var(--orange);}
  .sl-FIRE{background:var(--red-lt);color:var(--red);}
  .sl-GEN{background:var(--surface3);color:var(--text2);}
  .sl-ASB{background:var(--amber-lt);color:var(--amber);}
  .sl-BIO{background:var(--bio-lt);color:var(--bio);}
  .sl-CAP{background:var(--indigo-lt);color:var(--indigo);}
  .sl-MEC{background:var(--brown-lt);color:var(--brown);}
  .sl-SUB{background:var(--surface3);color:var(--text2);}
  .sl-{background:var(--surface3);color:var(--text3);}
  .mkt-tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;background:var(--surface3);color:var(--text2);}
  /* PAGINATION */
  .pagination{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--border);background:var(--surface2);}
  .pg-btn{background:var(--surface);border:1px solid var(--border);color:var(--text2);padding:5px 13px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font);transition:all .1s;}
  .pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .pg-btn:disabled{opacity:.3;cursor:default;}
  .pg-info{font-size:12px;color:var(--text2);}
  /* PEOPLE TAB */
  .people-topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .role-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .role-tab{padding:6px 14px;border-radius:99px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);background:var(--surface);border:1px solid var(--border);font-family:var(--font);transition:all .15s;box-shadow:var(--shadow);}
  .role-tab:hover{color:var(--accent);border-color:var(--accent);}
  .role-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;}
  .person-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .15s,border-color .15s;}
  .person-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border2);}
  .pc-hdr{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;}
  .pc-avatar{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0;color:#fff;}
  .av-PM{background:linear-gradient(135deg,#4175e8,#60a5fa);}
  .av-SR{background:linear-gradient(135deg,#0ea86b,#34d399);}
  .av-EST{background:linear-gradient(135deg,#7c5cbf,#a78bfa);}
  .av-CC{background:linear-gradient(135deg,#e07b1a,#fbbf24);}
  .av-COORD{background:linear-gradient(135deg,#0891b2,#22d3ee);}
  .av-DNA{background:linear-gradient(135deg,#1a2035,#5c6a85);}
  .pc-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px;}
  .pc-role{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;}
  .rb-PM{background:var(--accent-lt);color:var(--accent);}
  .rb-SR{background:var(--green-lt);color:var(--green);}
  .rb-EST{background:var(--purple-lt);color:var(--purple);}
  .rb-CC{background:var(--orange-lt);color:var(--orange);}
  .rb-COORD{background:var(--cyan-lt);color:var(--cyan);}
  .rb-DNA{background:#e8edf5;color:#1a2035;}
  .pc-jobcount{margin-left:auto;font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap;}
  .pc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
  .pc-stat{background:var(--surface);padding:12px 14px;border-top:1px solid var(--border);border-right:1px solid var(--border);}
  .pc-stat:last-child{border-right:none;}
  .pc-stat-val{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--text);}
  .pc-stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-top:2px;font-weight:600;}
  .pc-stat.green .pc-stat-val{color:var(--green);}
  .pc-stat.blue .pc-stat-val{color:var(--accent);}
  .pc-stat.red .pc-stat-val{color:var(--red);}
  .pc-stat2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
  .pc-stat2 .pc-stat{background:var(--surface2);}
  .pc-footer{padding:11px 18px;display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border-top:1px solid var(--border);}
  .status-pills{display:flex;gap:4px;flex-wrap:wrap;}
  .spill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;}
  .stage-money-pills{gap:5px;}
  .stage-money-pills .spill{display:inline-flex;gap:4px;align-items:center;padding:4px 8px;}
  /* Job count inside a stage pill. Translucent-dark so it reads against every stage
     background, and it inherits the pill's own text colour. */
  .spill-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;padding:1px 5px;border-radius:99px;background:rgba(26,32,53,.11);font-size:9px;font-weight:800;}
  .view-btn{background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;white-space:nowrap;}
  .view-btn:hover{background:#3060d0;}
  /* BASE MODAL */
  .overlay{display:none;position:fixed;inset:0;background:rgba(26,32,53,.42);z-index:200;backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px;}
  .overlay.open{display:flex;}
  .modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:840px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:mIn .22s cubic-bezier(.16,1,.3,1);}
  .modal-wide{max-width:940px;}
  @keyframes mIn{from{opacity:0;transform:scale(.96) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}
  .m-hdr{padding:20px 26px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,var(--surface),var(--surface2));}
  .m-title{font-size:20px;font-weight:800;color:var(--text);line-height:1.2;margin-bottom:4px;}
  /* Sits between the job title and its badges, present only when the customer is not
     just the job name again. */
  .m-customer{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;}
  .m-customer[hidden]{display:none;}
  .m-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  /* The job number, below the badges rather than trailing them. Quietest thing in the
     header: it is looked up deliberately, never scanned. */
  .m-num{font-size:11.5px;color:var(--text3);font-weight:500;margin-top:5px;}
  .m-num[hidden]{display:none;}
  /* Opens the composer below. Sized and shaped to match .m-close so the two read as
     a pair of header controls; the + rotates into an x while the composer is open. */
  .m-add{background:var(--surface3);border:1px solid var(--border);color:var(--text2);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font);transition:all .15s;}
  .m-add:hover{background:var(--accent-lt);color:var(--accent);border-color:var(--accent);}
  /* Deliberately NOT rotated into an x while open: it would sit next to the modal's
     own close and read as two ways to dismiss the same thing. It stays a "+" and
     takes a filled pressed state instead, the way a toolbar toggle does. */
  .m-add[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}
  .m-add[hidden]{display:none;}
  .m-close{background:var(--surface3);border:1px solid var(--border);color:var(--text2);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font);transition:all .15s;}
  .m-close:hover{background:var(--red-lt);color:var(--red);border-color:var(--red);}
  /* Pinned between the fixed header and the scrolling body, so it stays put however
     far down the job someone has read. flex-shrink:0 keeps it off the scroll. */
  .job-compose{padding:13px 26px 15px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
  .job-compose[hidden]{display:none;}
  /* Both field groups used to sit under content that needed separating from them.
     In the composer they are the only thing there, so the rule drops away. */
  .job-compose .note-add,.job-compose .stage-edit{margin-top:0;padding-top:0;border-top:none;}
  .m-body{padding:20px 26px;overflow-y:auto;flex:1;}
  .m-sec{margin-bottom:20px;}
  .m-sec-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--border);}
  /* GP CARDS */
  .gp-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
  .gp-card{border-radius:12px;padding:16px 18px;}
  .gp-card.budget{background:var(--accent-lt);border:1px solid rgba(65,117,232,.18);}
  .gp-card.actual{background:var(--green-lt);border:1px solid rgba(14,168,107,.18);}
  .gp-card.loss{background:var(--red-lt);border:1px solid rgba(217,59,82,.18);}
  .gp-card.neutral{background:var(--surface2);border:1px solid var(--border);}
  .gp-card.est-mode{background:var(--amber-lt);border:1px solid rgba(176,125,10,.2);}
  .gp-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px;}
  .gp-card.budget .gp-lbl{color:var(--accent);}
  .gp-card.actual .gp-lbl{color:var(--green);}
  .gp-card.loss .gp-lbl{color:var(--red);}
  .gp-card.neutral .gp-lbl{color:var(--text2);}
  .gp-card.est-mode .gp-lbl{color:var(--amber);}
  .gp-pct{font-size:40px;font-weight:800;line-height:1;letter-spacing:-2px;margin-bottom:3px;}
  .gp-card.budget .gp-pct{color:var(--accent);}
  .gp-card.actual .gp-pct{color:var(--green);}
  .gp-card.loss .gp-pct{color:var(--red);}
  .gp-card.neutral .gp-pct{color:var(--text2);}
  .gp-card.est-mode .gp-pct{color:var(--amber);}
  .gp-amt{font-size:14px;font-weight:700;opacity:.75;margin-bottom:4px;}
  .gp-formula{font-size:11px;color:var(--text3);font-weight:500;}
  /* The same GP cards, shrunk to ride in the modal header so the number the client
     opens a job for is visible before any scrolling. Reuses the .gp-card colour
     modifiers above; only the metrics change. */
  .gp-hdr{display:flex;gap:9px;flex-shrink:0;}
  .gp-hdr .gp-card{padding:8px 13px;border-radius:10px;min-width:100px;display:flex;flex-direction:column;justify-content:center;}
  .gp-hdr .gp-lbl{font-size:9px;letter-spacing:.5px;margin-bottom:3px;white-space:nowrap;}
  .gp-hdr .gp-pct{font-size:23px;letter-spacing:-1px;margin-bottom:1px;}
  .gp-hdr .gp-amt{font-size:11px;margin-bottom:0;}
  .gp-basis{font-weight:700;opacity:.7;}
  /* Below this the title needs the full width more than the GP cards need to sit
     beside it, so they drop onto their own row rather than squeezing the job name. */
  @media(max-width:720px){
    .m-hdr{flex-wrap:wrap;}
    .gp-hdr{order:3;width:100%;}
    .gp-hdr .gp-card{flex:1;}
  }
  /* ROLES / DETAIL */
  .roles-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
  .role-item{background:var(--surface2);border-radius:10px;padding:11px 13px;}
  .role-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:4px;font-weight:700;}
  .role-names{font-size:13px;font-weight:600;color:var(--text);}
  .role-empty{color:var(--text3);font-weight:400;}
  .d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .d-item{background:var(--surface2);border-radius:10px;padding:11px 13px;}
  .d-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:3px;font-weight:700;}
  .d-val{font-size:13px;font-weight:600;color:var(--text);}
  /* All seven figures on one row rather than two, so the money is a single band the
     eye crosses once. Values stay the loud element; the labels give up a little size
     to fit on one line each. */
  .fin-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
  .fin-item{background:var(--surface2);border-radius:9px;padding:8px 9px;min-width:0;}
  .fin-val{font-size:15px;font-weight:800;letter-spacing:-.5px;margin-bottom:1px;}
  .fin-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.2px;color:var(--text3);font-weight:700;white-space:nowrap;}
  /* Seven across needs the full-width modal. Narrower, it folds rather than shrinking
     the figures to unreadable. */
  @media(max-width:860px){.fin-grid{grid-template-columns:repeat(4,1fr);gap:9px;}}
  @media(max-width:560px){.fin-grid{grid-template-columns:repeat(2,1fr);}}
  .emp-list{display:flex;flex-wrap:wrap;gap:6px;}
  .emp-chip{background:var(--surface2);border:1px solid var(--border);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--text2);}
  /* INVOICES */
  .inv-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
  .inv-head{display:flex;align-items:center;gap:14px;}
  .inv-num{font-size:13px;font-weight:700;color:var(--text);}
  .inv-date{font-size:11px;color:var(--text3);}
  .inv-tax{font-size:11px;color:var(--text2);}
  .inv-right{margin-left:auto;text-align:right;}
  .inv-amt{font-size:16px;font-weight:800;color:var(--green);}
  .inv-due{font-size:11px;color:var(--text3);margin-top:1px;}
  /* JOB UPDATES (stage + log note writes back into PSA) */
  .stage-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
    border-top:1px dashed var(--border2);}
  .stage-edit[hidden]{display:none;}
  .je-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text3);}
  .stage-edit select,.stage-edit input[type=date],.note-add input,.note-add select,.note-add textarea{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);
    padding:6px 10px;font-size:12.5px;font-family:var(--font);outline:none;}
  .stage-edit select:focus,.stage-edit input:focus,.note-add input:focus,.note-add textarea:focus,
  .note-add select:focus{border-color:var(--accent);}
  .je-btn{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:var(--radius-sm);
    padding:6px 14px;font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;transition:filter .15s;}
  .je-btn:hover:not(:disabled){filter:brightness(1.07);}
  .je-btn:disabled{opacity:.55;cursor:default;}
  .je-status{font-size:11.5px;color:var(--text2);}
  .je-status.je-ok{color:var(--green);font-weight:600;}
  .je-status.je-err{color:var(--red);font-weight:600;}
  /* A To-Do that saved but did not reach PSA: the action worked, so this reads as a
     caveat rather than a failure. */
  .je-status.je-warn{color:var(--orange);font-weight:600;}
  /* Reveals finished To-Dos. Quiet by design — it is a way back to work already
     done, not an action competing with the outstanding items above it. */
  .todo-toggle{background:none;border:none;color:var(--text3);font-size:10.5px;font-weight:600;
    font-family:var(--font);cursor:pointer;padding:2px 4px;border-radius:5px;}
  .todo-toggle:hover{color:var(--accent);background:var(--surface2);}
  /* A write lands in PSA immediately but this view is snapshot-backed, so the
     stage track cannot show it as a real entry until the next sync. */
  .stage-pending{margin-top:9px;padding:7px 11px;border-radius:8px;background:var(--amber-lt);
    border:1px dashed var(--amber);color:var(--amber);font-size:11.5px;font-weight:600;}
  .note-add{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border2);
    display:flex;flex-direction:column;gap:8px;}
  .note-add[hidden]{display:none;}
  .note-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .note-add-row[hidden]{display:none;}
  /* Note / To-Do switch. Segmented rather than a checkbox: the two produce
     different things, and a tab makes that clearer than a modifier on one form. */
  .note-kind{display:flex;gap:4px;margin-bottom:9px;}
  .note-kind[hidden]{display:none;}
  .note-kind-tab{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text2);padding:5px 13px;font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;}
  .note-kind-tab[hidden]{display:none;}
  .note-kind-tab:hover{border-color:var(--border2);color:var(--text);}
  .note-kind-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  .note-add select#todoAssignee{flex:1;min-width:150px;}
  .note-add select[hidden]{display:none;}
  .note-add .todo-only .ms{position:relative;}
  .note-add input#noteSubject{flex:1;min-width:180px;}
  .note-add textarea{width:100%;resize:vertical;line-height:1.5;}
  /* PAYMENTS (GetReceivable2 allocations, listed under the invoice they pay) */
  .pay-list{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border2);}
  .pay-hdr{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text3);margin-bottom:6px;}
  .pay-row{display:flex;align-items:baseline;gap:12px;padding:4px 0;}
  .pay-row+.pay-row{border-top:1px solid var(--border);}
  .pay-left{min-width:0;}
  .pay-dt{font-size:11.5px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;}
  .pay-meta{font-size:10px;color:var(--text3);margin-top:1px;overflow-wrap:anywhere;}
  .pay-amt{margin-left:auto;font-size:13px;font-weight:700;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums;}
  /* SUB TABS */
  .sub-tabs{display:flex;gap:6px;margin-bottom:12px;}
  .sub-tab{padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);background:var(--surface2);border:1px solid var(--border);font-family:var(--font);transition:all .15s;}
  .sub-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .sub-view{display:none;}
  .sub-view.active{display:block;}
  /* LOG NOTES — newest first, grouped under a date heading. */
  .log-day{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text3);
    padding:4px 0 6px;margin-top:10px;border-top:1px solid var(--border);}
  .log-day:first-child{margin-top:0;border-top:none;padding-top:0;}
  .log-item{padding:11px 13px;background:var(--surface2);border-radius:9px;margin-bottom:7px;border:1px solid var(--border);
    border-left:3px solid var(--accent);}
  .log-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .log-subj{font-size:12.5px;font-weight:700;color:var(--text);}
  .log-dt{font-size:10px;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums;}
  .log-meta{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 0;}
  .log-meta:empty{display:none;}
  .log-topic{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--accent-lt);color:var(--accent);
    font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
  .log-author{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--surface3);color:var(--text2);
    font-size:9.5px;font-weight:700;}
  /* Notes carry their own line breaks; pre-wrap keeps PSA's formatting readable. */
  .log-note{font-size:12px;color:var(--text2);line-height:1.55;margin-top:7px;white-space:pre-wrap;overflow-wrap:anywhere;}
  .log-note.clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
  .log-note-empty{color:var(--text3);font-style:italic;}
  .log-more{margin-top:5px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font);
    font-size:11px;font-weight:700;color:var(--accent);}
  .log-more:hover{text-decoration:underline;}
  .cost-item{padding:10px 12px;background:var(--surface2);border-radius:9px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:1px solid var(--border);}
  .cost-phase{font-size:10px;color:var(--orange);font-weight:700;margin-bottom:2px;text-transform:uppercase;}
  .cost-vendor{font-size:12px;color:var(--text);font-weight:600;line-height:1.4;}
  .cost-desc{font-size:12px;color:var(--text2);line-height:1.4;}
  .cost-dt{font-size:10px;color:var(--text3);margin-top:2px;}
  .cost-val{font-size:15px;font-weight:800;color:var(--green);white-space:nowrap;}
  /* PERSON JOBS SUMMARY BAR */
  .pj-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--border);}
  .pj-kpi{background:var(--surface2);padding:14px 16px;border-right:1px solid var(--border);}
  .pj-kpi:last-child{border-right:none;}
  .pj-kpi-val{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);}
  .pj-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-top:2px;font-weight:600;}
  .pj-stage-summary{grid-column:1/-1;padding:11px 16px;background:var(--surface);border-top:1px solid var(--border);}
  .pj-stage-title{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:700;margin-bottom:7px;}
  /* STAGE TRACKING */
  .stage-track{display:flex;flex-direction:column;gap:0;}
  .stage-row{display:flex;align-items:stretch;gap:0;position:relative;}
  .stage-row:not(:last-child)::after{content:'';position:absolute;left:16px;top:32px;bottom:0;width:2px;background:var(--border);}
  .stage-dot-col{width:34px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding-top:8px;}
  .stage-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);flex-shrink:0;z-index:1;}
  .stage-dot.done{border-color:var(--green);background:var(--green-lt);}
  .stage-dot.current{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 3px var(--accent-lt);}
  .stage-dot.lost{border-color:var(--red);background:var(--red-lt);}
  .stage-content{flex:1;padding:6px 0 14px 4px;}
  .stage-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;}
  .stage-name{font-size:13px;font-weight:700;color:var(--text);}
  .stage-name.current{color:var(--accent);}
  .stage-name.done{color:var(--text2);}
  .stage-date{font-size:11px;color:var(--text3);font-weight:500;}
  .stage-dur{margin-left:auto;font-size:12px;font-weight:700;white-space:nowrap;padding:2px 8px;border-radius:99px;}
  .stage-value{font-size:12px;font-weight:800;color:var(--green);white-space:nowrap;background:var(--green-lt);padding:2px 8px;border-radius:99px;}
  .stage-dur.done{background:var(--green-lt);color:var(--green);}
  .stage-dur.current{background:var(--accent-lt);color:var(--accent);}
  .stage-dur.lost{background:var(--red-lt);color:var(--red);}
  .stage-sub{font-size:11px;color:var(--text3);font-weight:500;}
  /* Collapsed to the current stage. The rest of the history is rendered and hidden
     rather than left out, so expanding is a redraw of the same data, not a refetch. */
  .stage-track.collapsed .stage-row:not(.current){display:none;}
  /* With one row showing there is nothing below to connect to, so the rail that runs
     between the dots would just dangle off the bottom. */
  .stage-track.collapsed .stage-row::after{display:none;}
  .stage-track.collapsed .stage-row{cursor:pointer;}
  .stage-track.collapsed .stage-content{padding-bottom:2px;}
  /* END STAGE TRACKING */
  .inv-timing{display:flex;align-items:center;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .inv-timing-node{flex:1;padding:14px 16px;text-align:center;}
  .inv-timing-node-val{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;}
  .inv-timing-node-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:600;}
  .inv-timing-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4px;color:var(--text3);}
  .inv-timing-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 20px;border-left:1px solid var(--border);border-right:1px solid var(--border);min-width:110px;}
  .inv-timing-days{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1;}
  .inv-timing-days.fast{color:var(--green);}
  .inv-timing-days.slow{color:var(--orange);}
  .inv-timing-days.running{color:var(--accent);}
  .inv-timing-days.early{color:var(--purple);}
  .inv-timing-unit{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:2px;}
  .inv-timing-unit.fast{color:var(--green);}
  .inv-timing-unit.slow{color:var(--orange);}
  .inv-timing-unit.running{color:var(--accent);}
  .inv-timing-unit.early{color:var(--purple);}
  .inv-timing-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;margin-top:5px;display:inline-block;}
  .inv-timing-badge.running{background:var(--accent-lt);color:var(--accent);}
  .inv-timing-badge.fast{background:var(--green-lt);color:var(--green);}
  .inv-timing-badge.slow{background:var(--orange-lt);color:var(--orange);}
  .inv-timing-badge.early{background:var(--purple-lt);color:var(--purple);}
  .empty-state{text-align:center;padding:28px;color:var(--text3);font-size:13px;}

  /* DAYS IN STATUS */
  .days-cell{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap;letter-spacing:-.2px;border:1.5px solid transparent;}
  .days-0{background:#d1fae5;color:#065f46;border-color:#6ee7b7;}
  .days-1{background:#dcfce7;color:#166534;border-color:#86efac;}
  .days-2{background:#fef9c3;color:#854d0e;border-color:#fde047;}
  .days-3{background:#ffedd5;color:#9a3412;border-color:#fb923c;}
  .days-4{background:#fee2e2;color:#991b1b;border-color:#f87171;box-shadow:0 0 0 2px rgba(248,113,113,.2);}
  .days-na{color:var(--text3);font-size:11px;}
  .days-closed{background:var(--surface3);color:var(--text3);border-color:var(--border);font-weight:600;font-size:11px;}
  /* NEEDS ATTENTION */
  .attn-tab-pills{display:flex;gap:6px;flex-wrap:wrap;}
  .attn-pill{padding:5px 14px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-family:var(--font);transition:all .15s;}
  .attn-pill:hover{border-color:var(--accent);color:var(--accent);}
  .attn-pill.active{background:var(--red);color:#fff;border-color:var(--red);}
  .attn-pill.active.orange{background:var(--orange);border-color:var(--orange);}
  .attn-pill.active.amber{background:var(--amber);border-color:var(--amber);}
  .attn-pill.active.blue{background:var(--accent);border-color:var(--accent);}
  .attn-pill.active.purple{background:var(--purple);border-color:var(--purple);}
  .attn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;display:flex;align-items:flex-start;gap:16px;cursor:pointer;transition:box-shadow .15s,border-color .15s;box-shadow:var(--shadow);}
  .attn-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border2);}
  .attn-card-left{flex:1;min-width:0;}
  .attn-card-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
  .attn-card-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
  .attn-card-flags{display:flex;gap:6px;flex-wrap:wrap;}
  .flag-badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;}
  .flag-stale{background:#fdeef1;color:#d93b52;}
  .flag-no_estimate{background:#fef3e6;color:#e07b1a;}
  .flag-no_invoice{background:#fef9e6;color:#b07d0a;}
  .flag-no_notes{background:#e0f4f9;color:#0891b2;}
  .flag-no_activity{background:#f1eefb;color:#7c5cbf;}
  .flag-no_recent_note{background:#f1eefb;color:#7c5cbf;}
  .attn-card-right{text-align:right;flex-shrink:0;}
  .attn-days-big{font-size:22px;font-weight:800;letter-spacing:-.5px;}
  .attn-days-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:600;}
  /* COORDINATOR TAB */
  .cc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .15s,border-color .15s;}
  .cc-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border2);}
  .cc-card-hdr{padding:12px 18px;display:flex;align-items:center;gap:12px;background:var(--surface2);border-bottom:1px solid var(--border);}
  .cc-card-name{font-size:15px;font-weight:700;color:var(--text);}
  .cc-card-meta{font-size:12px;color:var(--text2);margin-top:2px;}
  .cc-card-body{padding:12px 18px;}
  .cc-last-note{font-size:12px;color:var(--text2);line-height:1.5;margin-top:4px;}
  .cc-last-note-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:3px;}
  .cc-flags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}

  ::-webkit-scrollbar{width:5px;height:5px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
  input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;}