:root{--nav:#102d4e;--nav2:#1e4d77;--ink:#173553;--muted:#69809b;--line:#dce7f2;--bg:#eef4fb;--blue:#2667aa;--orange:#fb653d;--card:#fff;--green:#13875c}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--bg)}button,input,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.cl-layout{min-height:100vh;display:grid;grid-template-columns:228px minmax(0,1fr)}.cl-sidebar{background:linear-gradient(#112e50,#153958);color:white;display:flex;flex-direction:column;padding:23px 14px;min-height:100vh;gap:4px}.cl-logo{padding:0 9px 34px}.cl-logo strong{font-size:22px;letter-spacing:-.7px}.cl-logo strong span{color:#ff6a43}.cl-logo small{display:block;color:#b8d0e7;font-size:10px;letter-spacing:.25px}.cl-side-label{color:#8bb8e0;font-size:10px;font-weight:750;letter-spacing:1px;padding:5px 10px 9px}.cl-side-link{display:flex;align-items:center;gap:13px;padding:12px;border-radius:9px;font-weight:600;font-size:13px;color:#d8e8fa}.cl-side-link:hover,.cl-side-link.selected{background:#275b8b;color:#fff}.cl-side-link:first-letter{font-size:17px}.cl-sidebar-bottom{margin-top:auto;padding:17px 9px 0;border-top:1px solid #ffffff25;color:#b9cddd;font-size:12px}.cl-sidebar-bottom strong{color:white}.cl-sidebar-bottom a{color:white;text-decoration:underline}.cl-main{min-width:0}.cl-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(98deg,#fff 55%,#e9f4ff);padding:21px clamp(18px,3vw,44px);border-bottom:1px solid var(--line)}.cl-head h1{font-size:25px;margin:0;letter-spacing:-.6px}.cl-eyebrow{color:#517ba2;font-weight:800;font-size:10px;letter-spacing:1.1px}.cl-head p{font-size:12px;color:var(--muted);margin:2px 0 0}.cl-profile{display:flex;align-items:center;gap:10px;flex-shrink:0}.cl-profile small{display:block;color:#788faa}.cl-avatar{width:36px;height:36px;border-radius:50%;background:#d3e5f7;color:#164d7e;display:grid;place-items:center;font-weight:800}.cl-outline,.cl-secondary{background:#fff;border:1px solid #cbdbea;border-radius:8px;padding:9px 13px;font-weight:700;color:#225781}.cl-outline:hover,.cl-secondary:hover{background:#eaf4ff}.cl-primary{background:var(--orange);border:0;border-radius:9px;color:#fff;font-weight:800;padding:12px 18px}.cl-primary:hover{background:#e65634}.cl-primary:disabled,.cl-secondary:disabled{opacity:.52;cursor:not-allowed}.cl-content{padding:25px clamp(16px,3vw,44px) 70px;max-width:1650px;margin:0 auto}.cl-toolbar{display:flex;gap:12px;margin-bottom:20px}.cl-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;flex:1;padding:0 15px;box-shadow:0 2px 12px #1b4b6a09}.cl-search span{font-size:23px;color:#7597b5}.cl-search input{border:0;outline:0;min-width:0;width:100%;padding:13px 0}.cl-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.cl-stat,.cl-panel,.cl-detail{border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 3px 20px #23496b0a}.cl-stat{padding:16px 18px;min-height:112px}.cl-stat small{color:var(--muted);display:block}.cl-stat strong{display:block;font-size:27px;margin:7px 0 0;letter-spacing:-.7px}.cl-stat span{font-size:11px;color:#7c92ac}.cl-panel,.cl-detail{padding:22px}.cl-panel-head,.cl-detail-head,.cl-between{display:flex;justify-content:space-between;align-items:center;gap:10px}.cl-panel-head h2,.cl-detail-head h2{font-size:18px;margin:0}.cl-muted{color:var(--muted);font-size:12px}.cl-table-scroll{overflow-x:auto}.cl-table{width:100%;border-collapse:collapse;text-align:left}.cl-table thead{background:#f1f6fb}.cl-table th{padding:12px 13px;font-size:12px;color:#68809c;font-weight:750}.cl-table td{padding:13px;border-bottom:1px solid #edf1f6;vertical-align:middle}.cl-table tr:last-child td{border-bottom:0}.cl-table td:first-child{font-weight:650}.cl-table .cl-name{background:none;border:0;text-align:left;color:#1c5d9c;font-weight:800;padding:0}.cl-table .cl-name:hover{text-decoration:underline}.cl-pill{display:inline-flex;font-size:11px;padding:4px 8px;font-weight:750;border-radius:99px;background:#e6f0fc;color:#28669e;white-space:nowrap}.cl-pill.ok{background:#e4f8ee;color:#127a51}.cl-pill.warn{background:#fff3dc;color:#ad6e12}.cl-pill.danger{background:#ffebeb;color:#b14443}.cl-empty{padding:38px 15px;text-align:center;color:#8295ae;background:#f7fafe;border-radius:10px;margin-top:16px}.cl-error{background:#fff0ed;color:#a33e2f;padding:15px;margin-bottom:15px;border:1px solid #ffcbbf;border-radius:10px}.cl-detail{margin-top:20px}.cl-detail-head{margin-bottom:16px}.cl-detail-head small{display:block;color:var(--muted)}.cl-tabs{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);padding-bottom:10px;flex-wrap:wrap;margin-bottom:17px}.cl-tab{border:0;background:#eff4fa;color:#456783;padding:9px 13px;border-radius:9px;font-size:12px;font-weight:750}.cl-tab.active{background:#19558b;color:#fff}.cl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cl-box{background:#f5f9fd;border:1px solid #dfebf5;border-radius:11px;padding:16px}.cl-box h3{font-size:14px;margin:0 0 9px}.cl-box p{margin:5px 0}.cl-counter{font-size:25px;font-weight:800}.cl-chat{height:270px;overflow-y:auto;background:#f6f9fd;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}.cl-bubble{max-width:82%;background:#fff;padding:10px 13px;border:1px solid #dfe8f2;border-radius:10px;align-self:start}.cl-bubble.mine{align-self:end;background:#e3f2ff}.cl-bubble small{display:block;font-size:10px;color:#8195ac;margin:0 0 3px}.cl-chat-compose{display:flex;gap:9px;margin-top:10px;align-items:stretch}.cl-chat-compose textarea{border:1px solid var(--line);border-radius:9px;flex:1;min-height:58px;resize:vertical;padding:12px;min-width:0}.cl-chat-compose button{align-self:flex-end}.cl-case-selector{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.cl-select{padding:10px 11px;background:#fff;border:1px solid #c8d9e8;border-radius:8px;min-width:190px;max-width:100%}.cl-user-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.cl-user-row:last-child{border-bottom:0}.cl-user-row b{display:block}.cl-user-row small{display:block;color:var(--muted)}.cl-chip{display:inline-flex;align-items:center;gap:6px;background:#edf6fd;border-radius:8px;padding:5px 9px;font-size:12px}.cl-toast{position:fixed;right:25px;bottom:20px;background:#143e61;color:white;box-shadow:0 8px 35px #1235;border-radius:10px;padding:14px 18px;z-index:10}.cl-actions{display:flex;gap:7px;flex-wrap:wrap}.cl-mini{font-size:11px;padding:7px 10px}.cl-hint{border-left:3px solid #e18e46;background:#fff8eb;border-radius:6px;color:#855626;font-size:12px;padding:10px 13px;margin:12px 0}.cl-readonly{opacity:.8}.cl-num{color:#1e6eaa;font-weight:750}
@media(max-width:1000px){.cl-layout{grid-template-columns:190px minmax(0,1fr)}.cl-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-head{padding:18px}.cl-content{padding:18px}.cl-profile .cl-outline{display:none}}@media(max-width:700px){.cl-layout{display:block}.cl-sidebar{min-height:0;flex-direction:row;align-items:center;gap:8px;padding:10px;flex-wrap:wrap}.cl-logo{padding:2px 5px}.cl-logo strong{font-size:17px}.cl-side-label,.cl-sidebar-bottom{display:none}.cl-side-link{font-size:11px;padding:7px}.cl-head{align-items:flex-start}.cl-head h1{font-size:20px}.cl-profile{font-size:11px}.cl-profile .cl-avatar{display:none}.cl-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-grid2{grid-template-columns:1fr}.cl-toolbar{flex-wrap:wrap}.cl-panel,.cl-detail{padding:14px}.cl-stat{padding:12px;min-height:95px}.cl-stat strong{font-size:24px}.cl-chat-compose{flex-direction:column}.cl-chat-compose button{align-self:flex-end}}


/* V7.1: data-dense business CRM, matching reference UI without placeholder data */
:root{--nav:#102b4a;--nav2:#215480;--ink:#273b50;--muted:#768aa1;--line:#dfe8f0;--bg:#f7f9fc;--blue:#2383c7;--orange:#f16d3e;--card:#fff;--green:#149d83}
[hidden]{display:none!important}
body{background:#f5f7fa;color:#253d55;font-size:13px}
.cl-layout{grid-template-columns:206px minmax(0,1fr)}
.cl-sidebar{position:sticky;top:0;height:100vh;min-height:0;gap:1px;background:linear-gradient(#102c4e,#153757);padding:22px 12px;z-index:3}
.cl-logo{padding-bottom:29px}.cl-logo strong{font-size:21px}.cl-side-link{font-weight:550;padding:11px 13px;border-radius:7px}.cl-side-link.selected{background:#214b76;border-left:3px solid #ff794c}.cl-nav-symbol{font-size:16px;width:19px;display:inline-flex;align-items:center;justify-content:center}
.cl-head{background:#fff;box-shadow:0 1px 0 #e4e9ef;padding:17px clamp(18px,2.4vw,34px);gap:18px;min-height:80px}
.cl-head h1{font-size:19px;font-weight:780;letter-spacing:-.25px}.cl-head .cl-eyebrow{font-size:9px}.cl-head p{font-size:11px}.cl-crumb{margin:0 5px;color:#9badbe}
.cl-profile{font-size:12px}.cl-outline{font-size:11px;border-color:#dde7f1;box-shadow:0 1px 3px #1424}.cl-avatar{background:#d9edf9}
.cl-content{max-width:1750px;padding:25px clamp(18px,2.4vw,34px) 55px}
.cl-workspace-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:19px}
.cl-section-kicker{font-size:10px;color:#8194a6;letter-spacing:.9px;font-weight:700}
.cl-workspace-top h2{margin:3px 0 1px;font-size:22px;letter-spacing:-.4px;color:#263c52}.cl-workspace-top p{margin:0;color:#7e90a5;font-size:12px}
.cl-quick-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cl-quick-actions button{border-radius:6px;padding:9px 12px;font-size:12px;font-weight:700;white-space:nowrap;min-height:36px}
.cl-green-outline{background:#fff;color:#138b70;border:1px solid #27b49a}.cl-green-outline:hover{background:#f0fbf8}
.cl-green-solid{color:#fff;background:#10a98a;border:1px solid #109d81;box-shadow:0 2px 6px #00997822}.cl-green-solid:hover{background:#098e75}
.cl-blue-solid{color:#fff;background:#278ac5;border:1px solid #2478ad}.cl-blue-solid:hover{background:#1c72aa}
.cl-registry{background:#fff;border:1px solid #e4eaf0;border-radius:9px;box-shadow:0 2px 11px #1c3f5a08;padding:16px 18px 7px}
.cl-registry-tools{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #ecf0f5}
.cl-search{flex:1 1 245px;max-width:450px;background:#fff;border:1px solid #d6e0ea;border-radius:6px;height:39px;box-shadow:none}
.cl-search input{padding:8px 0;font-size:12px}.cl-search:focus-within{border-color:#3896d0;box-shadow:0 0 0 3px #eaf4ff}
.cl-search span{font-size:19px}
.cl-filter{display:flex;flex-direction:column;gap:4px;color:#7b8da0;font-size:10px;font-weight:650}
.cl-filter select{min-width:145px;border:1px solid #dae4ed;border-radius:5px;background:#fff;padding:9px 12px;color:#345773;outline:none;font-size:12px;max-width:200px}
.cl-reset{background:none;border:0;color:#5c8eb7;padding:10px 6px;font-size:11px}.cl-reset:hover{text-decoration:underline}
.cl-icon-button{background:#f7f9fc;color:#4b708d;border:1px solid #dce5ed;border-radius:5px;padding:9px 12px;white-space:nowrap;font-size:12px}
.cl-summary{display:flex;align-items:center;gap:0;margin:0;padding:13px 0 11px;overflow-x:auto;border-bottom:1px solid #ecf0f5}
.cl-stat{border:0;box-shadow:none;border-radius:0;padding:3px 20px;min-height:38px;display:flex;align-items:center;gap:8px;border-right:1px solid #e8eef3;white-space:nowrap}
.cl-stat:first-child{padding-left:2px}.cl-stat:last-child{border:0}
.cl-stat-icon{display:grid;place-items:center;color:#258ac5;font-size:16px;background:#edf6fe;width:29px;height:29px;border-radius:7px}
.cl-stat-label{font-size:11px;color:#687f98}.cl-stat strong{font-size:17px;margin:0;color:#243f58}
.cl-directory-tabs{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:15px 0 10px}
.cl-directory-tabs button{font-weight:700;font-size:11px;color:#537491;background:#f2f6fa;border:1px solid #e3eaf1;border-radius:5px;padding:6px 11px}
.cl-directory-tabs button span{background:#e1e9f2;color:#6382a0;border-radius:4px;padding:2px 5px;margin-left:3px;font-size:10px}
.cl-directory-tabs button.active{background:#e1f5ef;color:#138e72;border-color:#b8e9db}.cl-directory-tabs button.active span{background:#bceadb;color:#138469}
.cl-registry .cl-panel{border:0;box-shadow:none;padding:0;border-radius:0}
.cl-panel-head{margin-bottom:11px;align-items:end}
.cl-panel-head h2{font-size:15px;letter-spacing:-.2px}.cl-panel-head p{font-size:11px;color:#8193a6;margin:3px 0 0}.cl-list-count{font-size:11px;color:#8495a6}
.cl-table{font-size:12px}.cl-table thead{background:#f6f8fb}.cl-table th{font-weight:700;color:#8194a8;font-size:11px;padding:9px 10px;border-bottom:1px solid #dfe7ef;white-space:nowrap}
.cl-table td{padding:11px 10px;border-bottom:1px solid #eef2f5;vertical-align:middle}
.cl-table tbody tr:nth-child(2n){background:#fcfdfe}
.cl-table tbody tr:hover{background:#f0f7fe}
.cl-table .cl-name{display:inline-flex;gap:8px;align-items:center;font-size:12px;white-space:nowrap;color:#246a9e}
.cl-table .cl-name:hover{text-decoration:none;color:#138f83}.cl-company-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:5px;background:#e6f0fa;color:#3480b8;font-size:13px}
.cl-inn{font-variant-numeric:tabular-nums;color:#4c657c}.cl-checkcell{width:28px;text-align:center!important;padding:8px 5px!important}
.cl-checkcell input{accent-color:#278dc5;width:14px;height:14px}
.cl-pill{border-radius:5px;padding:4px 7px;font-size:10px;font-weight:750}
.cl-pill.ok{background:#dcf5e9;color:#08895f}.cl-pill.warn{background:#fff3d8;color:#986b16}
.cl-row-actions{position:relative}
.cl-row-actions details{display:inline-block;position:relative}
.cl-row-actions summary{cursor:pointer;border:1px solid #bfd9ea;background:#fff;border-radius:5px;padding:6px 10px;font-weight:700;font-size:11px;color:#2779a9;white-space:nowrap;list-style:none}
.cl-row-actions summary::-webkit-details-marker{display:none}
.cl-actions-menu{position:absolute;z-index:6;top:calc(100% + 4px);right:0;width:195px;display:flex;flex-direction:column;padding:5px;background:#fff;border:1px solid #dce7f0;border-radius:7px;box-shadow:0 10px 24px #163c5630}
.cl-actions-menu button{font-size:11px;text-align:left;border:0;background:#fff;color:#42617a;padding:9px 10px;border-radius:4px;cursor:pointer}
.cl-actions-menu button:hover{background:#eaf5ff}
.cl-registry-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10px;color:#92a2b1;padding:12px 2px 7px;border-top:1px solid #edf1f5;margin-top:6px}
.cl-error{font-size:12px;margin-top:12px}
/* Client details: actual data in a large SaaS modal, not a separate blank page */
body.cl-modal-open{overflow:hidden}
.cl-detail{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0b213c93;padding:22px;border:0;border-radius:0;box-shadow:none;overflow:auto;margin:0}
.cl-modal-sheet{width:min(1190px,100%);max-height:calc(100vh - 44px);background:#fff;border:1px solid #d8e4ed;border-radius:9px;box-shadow:0 22px 65px #122c4c50;display:flex;flex-direction:column;overflow:hidden;min-height:320px}
.cl-modal-top{display:flex;justify-content:space-between;align-items:center;padding:11px 20px;background:#f9fbfc;border-bottom:1px solid #ebf0f4;flex:none}
.cl-modal-kicker{font-size:10px;color:#93a3b1;font-weight:780;letter-spacing:.7px}
.cl-close{width:30px;height:30px;display:grid;place-items:center;background:#fff;border:1px solid #dde7ed;border-radius:5px;font-size:22px;font-weight:300;color:#597188}
.cl-close:hover{background:#fdefed;color:#c64031}
.cl-detail-head{padding:17px 22px;flex:none;gap:18px}
.cl-detail-name-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cl-detail-head h2{font-size:23px;color:#213d53;line-height:1.2;letter-spacing:-.45px}
.cl-detail-head small{display:block;margin-top:5px;font-size:11px}
.cl-workflow{display:flex;min-width:0;margin:0 22px 0;flex:none;gap:2px}
.cl-workflow button{flex:1;white-space:nowrap;font-size:11px;font-weight:750;padding:10px 8px;background:#d9f2e8;border:0;color:#2c8f6c;cursor:pointer;min-width:0}
.cl-workflow button:first-child{border-radius:5px 0 0 5px}.cl-workflow button:last-child{border-radius:0 5px 5px 0}
.cl-workflow button.active{background:#169b7d;color:#fff}.cl-workflow button span{font-weight:850;font-size:9px;opacity:.8;margin-right:4px}
.cl-tabs{margin:0;padding:13px 22px 0;border-bottom:1px solid #e5edf3;gap:1px;flex:none}
.cl-tab{background:transparent;border-radius:0;padding:11px 14px;color:#607a8d;font-size:11px;font-weight:750;border-bottom:2px solid transparent}
.cl-tab:hover{color:#167cb5;background:#f6fafc}.cl-tab.active{background:transparent;color:#1789b0;border-bottom-color:#1689c5}
.cl-modal-content{padding:19px 22px 24px;overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
.cl-modal-content .cl-table th{font-size:10px}
.cl-grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cl-box{background:#fbfcfe;border-color:#e5edf3;padding:17px}
.cl-box h3{color:#334d61}.cl-counter{color:#1d689a}
.cl-chat{height:300px}
.cl-secondary{background:#fff;font-weight:700;border-color:#ccdeea}
.cl-hint{margin-top:0}
.cl-toast{z-index:100}
@media(max-width:1100px){.cl-layout{grid-template-columns:175px minmax(0,1fr)}.cl-sidebar{padding:18px 9px}.cl-stat{padding:3px 12px}.cl-registry-tools{gap:8px}.cl-filter select{min-width:130px}.cl-workspace-top{align-items:flex-start}.cl-quick-actions{gap:5px}}
@media(max-width:760px){.cl-layout{display:block}.cl-sidebar{position:static;height:auto;min-height:0;flex-direction:row;gap:4px;padding:8px 9px;flex-wrap:wrap}.cl-logo{padding:4px}.cl-logo strong{font-size:16px}.cl-nav-symbol{font-size:14px}.cl-side-link{font-size:10px;padding:7px}.cl-head{padding:15px 13px}.cl-head h1{font-size:18px}.cl-profile .cl-outline{display:none}.cl-content{padding:15px 10px}.cl-workspace-top{display:block}.cl-quick-actions{justify-content:flex-start;margin:12px 0}.cl-registry{padding:12px 9px}.cl-registry-tools{align-items:flex-end}.cl-search{max-width:none;flex:1 1 100%}.cl-filter{flex:1 1 135px}.cl-filter select{width:100%}.cl-summary{flex-wrap:wrap}.cl-stat{flex:1 0 42%;border-right:0;margin:4px 0}.cl-directory-tabs{gap:3px}.cl-directory-tabs button{font-size:10px;padding:6px}.cl-list-count{display:none}.cl-detail{padding:7px}.cl-modal-sheet{max-height:calc(100vh - 14px)}.cl-detail-head{padding:12px}.cl-detail-head h2{font-size:17px}.cl-workflow{margin:0 10px;overflow-x:auto}.cl-workflow button{flex:0 0 auto;padding:9px 7px}.cl-tabs{padding:7px 10px 0}.cl-tab{padding:8px;font-size:11px}.cl-modal-content{padding:13px 10px}.cl-grid2{grid-template-columns:1fr}.cl-registry-foot{font-size:9px}.cl-chat-compose{flex-direction:column}}