#crm{--crm-blue:#0b67b2;--crm-navy:#0b2e55;--crm-green:#138a56;--crm-orange:#e97817;--crm-red:#c53838;display:grid;gap:16px}
#crm[hidden]{display:none}
.crm-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border:1px solid #b8d4ee;border-radius:18px;color:#fff;background:linear-gradient(130deg,#092d55,#0b6db9 72%,#13946a);box-shadow:0 12px 30px #0b4d8128}
.crm-hero h2,.crm-hero p{margin:0}.crm-hero h2{font-size:26px}.crm-hero p{margin-top:5px;color:#d9efff}.crm-hero-actions{display:flex;flex-wrap:wrap;gap:8px}.crm-hero button{background:#fff;color:var(--crm-blue)}
.crm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.crm-metric{padding:16px;border:1px solid #bfd5e8;border-radius:14px;background:#fff;box-shadow:0 5px 14px #17375b12}.crm-metric small,.crm-metric strong{display:block}.crm-metric small{color:#61758b;font-weight:750}.crm-metric strong{margin-top:4px;color:var(--crm-navy);font-size:25px}.crm-metric.alert strong{color:var(--crm-red)}
.crm-stage-strip{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:8px;overflow-x:auto}.crm-stage{padding:11px;border:1px solid #c4d9eb;border-top:5px solid var(--stage-color,#0b67b2);border-radius:11px;background:#fff}.crm-stage strong,.crm-stage small{display:block}.crm-stage strong{font-size:18px;color:var(--crm-navy)}.crm-stage small{color:#61758b}
.crm-panel{padding:17px;border:1px solid #c3d8ea;border-radius:16px;background:#fff;box-shadow:0 5px 18px #17375b12}.crm-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 190px 190px auto;gap:9px;margin-bottom:13px}.crm-toolbar input,.crm-toolbar select{width:100%;min-height:43px;padding:9px 11px;border:2px solid #a9c6df;border-radius:9px;background:#fff}.crm-toolbar button{min-height:43px}
.crm-table-wrap{overflow:auto}.crm-table{width:100%;min-width:950px;border-collapse:collapse}.crm-table th{padding:9px;background:#e8f2fb;color:#244b70;text-align:left;font-size:12px}.crm-table td{padding:10px 9px;border-bottom:1px solid #d9e6f1;vertical-align:middle}.crm-table tr.crm-overdue{background:#fff3f3}.crm-table .crm-name strong,.crm-table .crm-name small{display:block}.crm-table .crm-name small{color:#708094}.crm-stage-select{min-width:125px;padding:7px;border:1px solid #9cbad4;border-radius:8px;background:#fff}.crm-priority{display:inline-block;padding:4px 8px;border-radius:20px;background:#e8f2fb;font-size:11px;font-weight:850}.crm-priority.High,.crm-priority.Urgent{color:#fff;background:var(--crm-red)}.crm-priority.Medium{color:#7b4600;background:#ffe4b4}.crm-due{font-weight:750}.crm-due.overdue{color:var(--crm-red)}.crm-actions{display:flex;flex-wrap:wrap;gap:5px}.crm-actions button{min-height:34px;padding:6px 9px;font-size:11px}.crm-actions .crm-note{background:var(--crm-green)}.crm-actions .crm-invoice{background:var(--crm-orange)}
.crm-empty{padding:32px;text-align:center;color:#65778b}
.crm-dialog{width:min(760px,94vw)}.crm-dialog .crm-dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:18px}.crm-dialog label{display:grid;gap:5px;font-weight:750}.crm-dialog label.wide{grid-column:1/-1}.crm-dialog input,.crm-dialog select,.crm-dialog textarea{width:100%;padding:10px;border:2px solid #a9c6df;border-radius:9px;background:#fff}.crm-dialog textarea{resize:vertical}.crm-dialog .crm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid #d7e4ef}.crm-dialog h2{margin:0}.crm-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;color:#fff;background:var(--crm-navy)}.crm-dialog-head button{min-width:38px;min-height:38px;padding:4px;background:#ffffff25}
.crm-activity-list{display:grid;gap:7px;max-height:220px;overflow:auto}.crm-activity{padding:9px 11px;border-left:4px solid var(--crm-blue);border-radius:7px;background:#edf5fc}.crm-activity strong,.crm-activity small{display:block}.crm-activity small{color:#65778b}
@media(max-width:1000px){.crm-metrics{grid-template-columns:1fr 1fr}.crm-toolbar{grid-template-columns:1fr 1fr}.crm-toolbar input{grid-column:1/-1}}
@media(max-width:600px){.crm-hero{align-items:flex-start;flex-direction:column}.crm-metrics{grid-template-columns:1fr 1fr}.crm-metric strong{font-size:20px}.crm-toolbar{grid-template-columns:1fr}.crm-toolbar input{grid-column:auto}.crm-dialog .crm-dialog-grid{grid-template-columns:1fr}.crm-dialog label.wide{grid-column:auto}}