*{box-sizing:border-box}body{margin:0;background:#f4f7f3;color:#20392c;font:16px system-ui,sans-serif}main{max-width:1400px;padding:40px;margin:auto}aside{background:#254b34;padding:24px;display:flex;align-items:center;gap:30px;color:white}aside img{width:220px;filter:brightness(0) invert(1)}nav{display:flex;gap:24px;flex:1}aside a{color:white}a{color:#285d3c}h1{font-size:34px}h2{font-size:28px}p,small{color:#728375}small{display:block;margin-top:5px}.eyebrow{letter-spacing:2px;font-size:13px;font-weight:700}.card{background:white;border:1px solid #dce5dc;border-radius:18px;padding:28px;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}header{display:flex;align-items:center;justify-content:space-between}label{display:block;margin:12px 0}input,select,textarea{display:block;width:100%;padding:13px;margin-top:8px;border:1px solid #cad6c8;border-radius:9px;font:inherit;background:white;color:inherit}button,.button{display:inline-block;background:#254b34;color:white;border:0;border-radius:9px;padding:13px 22px;font:inherit;cursor:pointer;text-decoration:none}.secondary{background:#eef2ec;color:#254b34;padding:8px 12px;margin-top:8px}.error{color:#ad3428;background:#fff0ec;padding:16px;border-radius:12px}.notice{background:#e3efdf;padding:16px}.table{overflow-x:auto}table{width:100%;border-collapse:collapse;margin-top:24px}th,td{text-align:left;padding:16px;border-bottom:1px solid #e2e8df}th{background:#f6f8f3}.login{max-width:1000px;margin:7vh auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.login>img{width:100%}.login button{width:100%;margin-top:18px}@media(max-width:720px){main{padding:18px}aside{flex-wrap:wrap;gap:16px}aside img{width:180px}nav{flex-basis:100%}.login{grid-template-columns:1fr;gap:15px;margin:20px auto}.login>img{max-width:300px;margin:auto}.card{padding:20px}h1{font-size:27px}}

details{margin:18px 0}summary{cursor:pointer;color:#254e36;font-weight:600;padding:12px 0}article{border-top:1px solid #dce4dc;padding:12px 0}details[open] form{padding:16px;background:#f6f8f5;border-radius:12px}[hidden]{display:none!important}

#new-details{margin:24px 0}fieldset{border:1px solid #dce4dc;border-radius:12px;padding:20px;margin:16px 0}legend{font-weight:600;padding:0 8px}

.source-row{display:flex;align-items:end;gap:16px;border-top:1px solid #dce4dc;padding:16px 0}.source-row label{flex:1;margin:0}.source-row button{flex-shrink:0}@media(max-width:600px){.source-row{display:block}}

/* Desktop sidebar and mobile drawer */
.crm-shell{--sidebar-width:260px;padding-left:var(--sidebar-width)}
.crm-shell main{width:100%;min-width:0}
.crm-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100dvh;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:22px;padding:24px 18px;overflow-y:auto;z-index:30}
.brand-link{display:flex;align-items:center;min-height:70px;border-radius:8px}
.crm-sidebar .brand-link img{width:100%;max-width:224px}
.nav-icon{width:22px;height:22px;flex-shrink:0}
.crm-sidebar nav{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.crm-sidebar nav a,.crm-sidebar button{display:flex;align-items:center;gap:13px;padding:13px 14px;text-decoration:none;border-radius:10px;color:white}
.crm-sidebar nav a:hover,.crm-sidebar button:hover{background:#365e43}
.crm-sidebar nav a[aria-current="page"]{background:#ffffff20;box-shadow:inset 3px 0 #bfd583;font-weight:650}
.sidebar-toggle{background:transparent;text-align:left}
.sidebar-footer{margin-top:auto;border-top:1px solid #ffffff24;padding-top:16px}
.sidebar-footer p{color:#dfebdf;overflow-wrap:anywhere;padding:0 14px}
.sidebar-footer button{width:100%;background:transparent}
.crm-sidebar a:focus-visible,.crm-sidebar button:focus-visible{outline:2px solid #e2efae;outline-offset:3px}
.sidebar-collapsed{--sidebar-width:88px}
.sidebar-collapsed .crm-sidebar{padding:20px 12px}
.sidebar-collapsed .crm-sidebar .menu-label{display:none}
.sidebar-collapsed .crm-sidebar nav a,.sidebar-collapsed .crm-sidebar button{justify-content:center;padding:14px 8px}
.sidebar-collapsed .brand-link{min-height:70px}
.mobile-menu,.menu-backdrop{display:none}
@media(max-width:720px){
 .crm-shell,.crm-shell.sidebar-collapsed{padding-left:0;--sidebar-width:260px}
 .crm-shell main{padding-top:76px}
 .crm-sidebar{transform:translateX(-100%);padding:24px 18px}
 .menu-open .crm-sidebar{transform:translateX(0)}
 .sidebar-collapsed .crm-sidebar .menu-label{display:inline}
 .sidebar-collapsed .crm-sidebar nav a,.sidebar-collapsed .crm-sidebar button{justify-content:flex-start;padding:13px 14px}
 .mobile-menu{display:flex;align-items:center;gap:10px;position:fixed;top:12px;left:16px;z-index:20;box-shadow:0 2px 12px #20392c20}
 .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border-radius:0;background:#122a2390;z-index:25}
}

.client-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}.client-toolbar form{display:flex;align-items:end;gap:12px;flex:1}.client-toolbar label{margin:0;max-width:480px;flex:1}.client-toolbar>.secondary{margin:0;white-space:nowrap}#clients-table td{vertical-align:top;overflow-wrap:anywhere}#clients-table td>div+div{margin-top:12px}#clients-table tbody tr:hover{background:#fafcf8}.client-status{display:inline-block;padding:5px 10px;border-radius:20px;background:#edf3e9;font-size:13px}.client-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.client-actions form{margin:0}.client-action{display:inline-flex;align-items:center;gap:5px;padding:8px 9px;border:1px solid #dce5dc;background:white;color:#28533a;border-radius:8px;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}.client-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.client-action:hover{background:#eaf1e6;border-color:#8faa91}.client-action:focus-visible{outline:2px solid #28533a;outline-offset:3px}.archive-action{color:#986442}.archive-action:hover{background:#fff2e8;border-color:#cda47d}.columns-editor{margin-top:24px;padding:20px;border:1px solid #dce5dc;border-radius:12px;background:#f7faf5}.columns-editor h2{font-size:21px;margin-top:0}.column-option{display:grid;grid-template-columns:minmax(140px,1fr) 80px minmax(100px,2fr) 65px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid #e2e8df}.column-option label{display:flex;align-items:center;gap:10px;margin:0}.column-option input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#254b34}.column-option input[type=range]{padding:0;margin:0;accent-color:#254b34}.column-order{display:flex;gap:6px}.column-order button{margin:0;padding:6px 10px}.column-order button:disabled{opacity:.3;cursor:default}.column-option output{font-size:13px;color:#617664}@media(max-width:600px){.column-option{grid-template-columns:1fr 80px;gap:12px}.client-toolbar form{flex-wrap:wrap}.columns-editor{padding:12px}}
#clients-table mark{background:#f4e59b;color:inherit;border-radius:3px;padding:0 1px}#search-feedback{font-size:13px;min-height:20px;margin-bottom:0}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.catalog-grid>.card{margin:0}.catalog-grid h2{font-size:23px}.catalog-items{display:flex;flex-wrap:wrap;gap:12px}.catalog-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f4f7ef;border:1px solid #e0e8d6;border-radius:10px;padding:10px 12px}.catalog-item>span{flex:1}.catalog-item>form:not(.catalog-edit-form){margin:0}.catalog-item .secondary{margin:0;padding:5px 8px;background:transparent;font-size:22px}.catalog-item .catalog-delete{color:#af5546}.catalog-item button:disabled{opacity:.3;cursor:not-allowed}.catalog-item small,.catalog-edit-form{flex-basis:100%}.catalog-item small{font-size:11px;margin:0}.catalog-edit-form input{min-width:180px}@media(max-width:850px){.catalog-grid{grid-template-columns:1fr}}

/* Dashboard */
.dash-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.dash-heading h1{margin-bottom:8px}.dash-date{background:#e9eee4;padding:10px 16px;border-radius:24px;white-space:nowrap;color:#46604c}.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.dash-kpis .card{margin:0;border-top:4px solid #78905b;padding:24px}.dash-kpis strong{display:block;font-size:clamp(22px,2.2vw,34px);letter-spacing:-1px;margin:16px 0 8px}.dash-kpis em{font-size:16px;font-style:normal;font-weight:400}.dash-kpis small,.dash-footnote{color:#78877c;font-size:13px}.dash-period{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:30px 0 18px}.dash-period h2{font-size:21px;margin:0}.dash-period nav{display:flex;gap:4px;background:#e7ede5;border-radius:12px;padding:4px}.dash-period a{padding:8px 14px;text-decoration:none;white-space:nowrap;border-radius:9px;font-size:14px}.dash-period a[aria-current]{background:white;box-shadow:0 2px 8px #23473112}.dash-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.dash-chart.card{margin:0;padding:28px;min-width:0}.dash-chart h2{font-size:21px;margin:0 0 8px}.dash-chart>.muted{font-size:14px;margin-bottom:26px}.dash-columns{display:flex;gap:12px;overflow-x:auto;padding:10px 0 12px;align-items:end}.dash-column{flex:1;min-width:54px;text-align:center}.dash-bar-value{display:block;font-size:12px;white-space:nowrap;color:#4b6153;margin-bottom:8px}.dash-bar-track{height:150px;background:repeating-linear-gradient(to top,#e9eee8 0px,#e9eee8 1px,transparent 1px,transparent 50px);display:flex;align-items:end;justify-content:center;border-bottom:1px solid #d8e1d6}.dash-bar{width:65%;max-width:48px;border-radius:7px 7px 0 0;background:linear-gradient(#769766,#28543c);min-height:0}.dash-bar.gold{background:linear-gradient(#e7cc75,#b7963f)}.dash-column>small{display:block;font-size:11px;margin-top:10px;color:#7a887e}.dash-ranking{margin:20px 0}.dash-ranking>div:first-child{display:flex;justify-content:space-between;gap:16px;font-size:14px;margin-bottom:9px}.dash-ranking strong{white-space:nowrap}.dash-ranking small{font-weight:400;color:#829080}.dash-rank-track{height:10px;background:#f0f3ec;border-radius:8px;overflow:hidden}.dash-rank-track span{display:block;height:100%;border-radius:8px}.dash-empty{padding:40px 10px;text-align:center;color:#7a887e;background:#f7f9f5;border-radius:12px;line-height:1.8}.dash-footnote{line-height:1.6;margin-top:20px}@media(max-width:1100px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.dash-charts{grid-template-columns:1fr}.dash-chart.card{padding:20px}.dash-period{align-items:start;flex-direction:column}.dash-date{display:none}.dash-kpis{gap:10px}.dash-kpis .card{padding:16px}.dash-kpis strong{font-size:22px}.dash-kpis span{font-size:13px}}

.note-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 12px;padding:10px;background:#edf2e9;border-radius:12px}.note-toolbar button{background:white;color:#28543c;border:1px solid #d7e2d1;padding:8px 14px;margin:0}.note-toolbar button:hover{background:#dbe7d4}.note-content{min-height:320px;padding:22px;border:1px solid #cbd9c7;border-radius:10px;background:white;line-height:1.7;overflow-wrap:anywhere}.note-content:focus{outline:2px solid #759760}.note-content ul{list-style:disc;padding-left:28px}.note-content ol{list-style:decimal;padding-left:28px}#note-form>a{display:inline-block;margin:12px 20px}

.client-overview{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.client-overview .card{margin:0;padding:22px;min-width:0}
.client-overview h2{font-size:22px;margin:0 0 16px}
.client-overview h3{font-size:17px;margin:0 0 8px}
.client-overview p{margin:6px 0;overflow-wrap:anywhere}
.client-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:0}
.client-facts dt{font-size:12px;color:#728375;margin-bottom:4px}
.client-facts dd{margin:0;font-weight:550;overflow-wrap:anywhere}
.client-overview-devices{grid-column:1/-1}
.client-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.client-section-title{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.client-note{white-space:pre-wrap}
@media(max-width:850px){.client-overview{grid-template-columns:1fr}.client-device-grid{grid-template-columns:1fr}}