@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700&display=swap');
:root{--bg:#f4f5f1;--surface:#fdfefa;--text:#263b32;--muted:#7a847c;--border:#e5e9e1;--green:#3b795e;--soft:#edf3e9;--side:#f9faf6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,sans-serif;font-size:13px}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8fb99e;outline-offset:3px}a{color:inherit}aside{width:242px;background:var(--side);position:fixed;inset:0 auto 0 0;border-right:1px solid var(--border);padding:35px 23px;z-index:20;display:flex;flex-direction:column}.brand{font-family:Sora,sans-serif;font-size:32px;font-weight:600;display:flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:-1.8px}.brand-mark{font-size:0;position:relative;background:var(--green);color:#f5f8ef;width:33px;height:33px;border-radius:10px;display:grid;place-items:center}.brand-mark span{font-size:28px;line-height:1}.brand-dot{color:var(--green);margin-left:-10px}.workspace{border:1px solid var(--border);border-radius:10px;margin:33px 0;display:flex;align-items:center;gap:10px;padding:11px 8px}.workspace strong,.profile strong{font-size:11px;display:block}.workspace small,.profile small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.avatar-letter{width:31px;height:33px;background:#e5ebdb;border-radius:8px;display:grid;place-items:center;font-weight:800;flex-shrink:0}.workspace>span:last-child{margin-left:auto}.nav-caption{font-size:9px;letter-spacing:1.6px;color:var(--muted);margin:0 12px 13px}nav{display:grid;gap:7px}nav button{border:0;background:none;text-align:left;border-radius:8px;padding:12px;color:var(--muted);display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600}nav button>span{font-size:19px;width:22px}nav button.active,nav button:hover{background:#e9efe3;color:#36644e}nav b{margin-left:auto;background:#f9fcf5;border-radius:5px;font-size:10px;padding:2px 6px}.sidebar-bottom{margin-top:auto}.demo-card{margin-top:50px;border-radius:12px;background:#e9eedf;padding:16px;font-size:10px;font-weight:700;color:#536b4b}.live-dot{display:inline-block;width:6px;height:6px;background:#628e63;border-radius:50%;margin-right:6px}.demo-card p{font-family:Sora,sans-serif;font-size:17px;line-height:1.5;color:#314c35;margin:16px 0}.demo-card button{display:flex;justify-content:space-between;background:#f7f9f0;color:#425c3b;border:0;border-radius:6px;padding:10px;width:100%;font-size:10px}.profile{display:flex;align-items:center;gap:9px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.peach{background:#e9d9c2;font-size:10px}.app{margin-left:242px}header{height:75px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:var(--surface)}.breadcrumb{font-size:11px;color:var(--muted);display:flex;gap:15px;align-items:center}.breadcrumb strong{color:var(--text);font-weight:500}.header-right{display:flex;gap:23px;align-items:center}.demo-pill{font-size:10px;color:var(--muted)}.demo-pill i{width:5px;height:5px;background:#7c9a64;display:inline-block;border-radius:50%;margin-right:5px}#theme,#menu{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);width:31px;height:31px;font-size:18px}#menu{display:none}main{padding:36px 38px 18px;max-width:1740px;margin:auto}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:31px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#7d887c;margin-bottom:9px}h1{font-family:Sora,sans-serif;font-weight:500;font-size:28px;letter-spacing:-1.3px;margin:0 0 9px}h1>span{color:var(--green)}.page-heading p{margin:0;color:var(--muted);font-size:11px}.actions{display:flex;gap:9px;align-items:center}.actions select,.btn-export{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:10px 12px;font-size:10px;height:36px}.btn-export{background:#335e48;color:#f5f8ef;border-color:#335e48;display:flex;gap:8px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:24px}.metrics article{padding:20px 21px 17px;border:1px solid var(--border);background:var(--surface);border-radius:10px}.metric-label{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:14px}.metric-label>span{font-size:16px}.metrics strong{font-family:Sora,sans-serif;font-weight:500;font-size:27px;letter-spacing:-1px;display:block;margin-bottom:12px}.metrics strong span{font-size:20px;color:#8b958a}.positive{color:#527b50;font-size:9px;background:#edf4e9;border-radius:4px;padding:3px 5px}.metrics small{font-size:8px;color:var(--muted);margin-left:3px}.metric-track{height:3px;background:var(--border);margin-top:19px;border-radius:4px}.metric-track i{display:block;height:100%;background:#749977;border-radius:4px}.charts{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(290px,1fr);gap:23px;margin-bottom:24px}.panel{border:1px solid var(--border);border-radius:11px;background:var(--surface);overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:23px 24px 14px}h2{font-size:13px;font-weight:700;margin:0 0 5px}.panel-head p{font-size:10px;color:var(--muted);margin:0}.trend-pill{font-size:10px;padding:5px 8px;border-radius:5px;background:var(--soft);color:#50784d}.chart-summary{display:flex;justify-content:space-between;align-items:center;padding:4px 24px 23px;gap:10px}.chart-summary>strong{font-size:25px;letter-spacing:-1px;font-family:Sora,sans-serif;font-weight:500}.chart-summary>span{font-size:8px;color:var(--muted)}.chart-summary i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin:0 5px 1px 10px}.chart-summary i.previous{background:#cbd2bf}.line-chart{display:flex;padding:0 24px;gap:13px;height:207px}.y-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:8px;color:var(--muted);padding:14px 0 25px;min-width:42px}.plot{flex:1;min-width:0}.plot svg{width:100%;height:174px;overflow:visible}.grid{stroke:var(--border);stroke-dasharray:3 5;stroke-width:1;fill:none}.prior-line{stroke:#cbd2bf;stroke-dasharray:5 5;stroke-width:2;fill:none}.x-axis{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);padding-top:7px}.chart-foot{padding:13px 24px;font-size:8px;color:var(--muted);border-top:1px solid var(--border);display:flex;align-items:center;margin-top:13px}.chart-foot>span:last-child{margin-left:auto}.donut{width:174px;height:174px;margin:9px auto 22px;background:conic-gradient(#39765c 0 48%,#a8c5ae 48% 75%,#d6bb91 75% 93%,#dfdce8 93% 100%);border-radius:50%;position:relative;display:grid;place-items:center;transform:rotate(-90deg)}.donut>div{width:137px;height:137px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(90deg)}.donut small{font-size:9px;color:var(--muted)}.donut strong{font-family:Sora,sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px;margin:4px 0}.donut span{font-size:8px;color:var(--muted)}.legend{padding:0 24px 18px;display:grid;gap:12px}.legend>div{display:flex;justify-content:space-between;font-size:10px}.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:8px}.legend strong{font-size:10px;font-weight:600}.legend small{color:var(--muted);font-size:8px;font-weight:400;display:inline-block;width:65px;text-align:right}.table-panel .panel-head{padding-bottom:22px}.table-actions{display:flex;gap:14px;align-items:center}.table-actions input{border:1px solid var(--border);background:var(--bg);padding:9px 12px;font-size:10px;width:205px;border-radius:6px;color:var(--text)}.table-actions button{border:0;background:none;color:var(--text);font-size:10px}table{width:100%;border-collapse:collapse;font-size:11px}th{padding:11px 24px;background:var(--bg);color:var(--muted);font-size:9px;font-weight:500}td{padding:14px 24px;border-bottom:1px solid var(--border);white-space:nowrap}tbody tr:last-child td{border-bottom:0}.amount{text-align:right;font-weight:600}.customer{display:flex;gap:9px;align-items:center}.customer .avatar-letter{font-size:9px;width:28px;height:28px;border-radius:50%}.status{border-radius:5px;padding:4px 7px;font-size:9px;background:#edf4e9;color:#547b48}.status.pending{background:#faf0dd;color:#a4833d}.status.shipped{background:#ecf0f8;color:#6883a9}.order-id{font-size:10px;font-weight:600}.table-foot{border-top:1px solid var(--border);padding:13px 24px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;margin-top:27px;color:var(--muted);font-size:9px}footer>span:first-child{font-family:Sora,sans-serif;font-size:21px;letter-spacing:-1px;color:var(--text)}footer .brand-dot{margin:0}.footer-copy{font:9px Manrope,sans-serif;letter-spacing:0;margin-left:14px;color:var(--muted)}footer a{margin-left:12px;text-decoration:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(90px);opacity:0;background:#294b39;color:#f4f8ef;padding:14px 22px;border-radius:9px;transition:transform .2s,opacity .2s;z-index:50}#toast.visible{transform:translateX(-50%);opacity:1}body.dark{--bg:#1c2521;--surface:#232e27;--text:#e5ece2;--muted:#a2afa1;--border:#354337;--green:#9abf9a;--soft:#344532;--side:#202a23}body.dark nav button.active{background:#344532;color:#d2e4c7}body.dark .positive{background:#354932;color:#b9d6aa}body.dark .metrics strong span{color:#a5b6a0}body.dark .donut{filter:brightness(.9)}
@media(min-width:1600px){main{padding-top:45px}.charts{grid-template-columns:2.2fr 1fr}.line-chart{height:255px}.plot svg{height:220px}.donut{margin-top:20px;margin-bottom:28px;width:195px;height:195px}.donut>div{width:153px;height:153px}}@media(max-width:1200px){aside{width:210px;padding:30px 17px}.app{margin-left:210px}main{padding:28px 24px}.page-heading{align-items:flex-start;flex-direction:column}.charts{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}.metrics{gap:12px}.metrics article{padding:17px 15px}.metrics strong{font-size:23px}.metrics small{display:block;margin-top:7px}.chart-summary>strong{font-size:22px}.chart-summary>span{max-width:130px}header{padding:0 24px}td,th{padding-left:17px;padding-right:17px}}@media(max-width:900px){.charts{grid-template-columns:1fr}.channel-panel{display:grid;grid-template-columns:1fr 1fr}.channel-panel .panel-head{grid-column:1/-1}.legend{align-content:center;padding:20px 24px 30px 0}.donut{margin:10px auto 25px}.table-responsive{overflow:auto}.metrics{grid-template-columns:repeat(2,1fr)}.table-panel .panel-head{flex-wrap:wrap}.chart-summary>span{max-width:none}.metrics small{display:inline}.header-right{gap:12px}}@media(max-width:650px){aside{transform:translateX(-100%);width:242px;box-shadow:10px 0 30px #0002;transition:transform .2s}aside.open{transform:translateX(0)}.app{margin-left:0}#menu{display:block}header{height:64px;padding:0 18px}.breadcrumb{gap:10px;font-size:10px}.demo-pill{font-size:8px}.header-right{gap:10px}main{padding:27px 17px 20px}h1{font-size:25px}.eyebrow{font-size:8px}.page-heading p{font-size:10px;line-height:1.7}.page-heading{margin-bottom:23px}.actions{width:100%}.actions select{flex:1}.metrics{gap:10px;margin-bottom:17px}.metrics article{padding:16px 13px}.metrics strong{font-size:23px}.metrics strong span{font-size:15px}.metrics small{font-size:7px}.positive{font-size:8px}.metric-label{font-size:10px}.charts{gap:17px;margin-bottom:17px}.panel-head{padding:19px 17px 12px}h2{font-size:12px}.chart-summary{padding:5px 17px 17px}.chart-summary>strong{font-size:21px}.chart-summary>span{font-size:7px;max-width:112px;line-height:1.8}.line-chart{padding:0 14px;gap:5px}.y-axis{font-size:7px;min-width:37px}.x-axis{font-size:7px}.chart-foot{padding:13px 17px;font-size:7px}.chart-foot>span:last-child{display:none}.channel-panel{grid-template-columns:1fr 1fr}.donut{width:139px;height:139px;margin:10px auto 23px}.donut>div{width:108px;height:108px}.donut strong{font-size:25px}.legend{padding:10px 17px 20px 0;gap:13px}.legend>div{font-size:9px}.legend strong{font-size:9px}.legend small{display:none}.table-panel .panel-head{padding:19px 17px}.table-actions{width:100%;justify-content:space-between}.table-actions input{width:70%}.table-foot{padding:13px 17px;font-size:8px;gap:20px}.table-foot>span:last-child{max-width:130px;text-align:right}footer{font-size:8px;gap:20px}.footer-copy{display:none}footer>span:last-child{text-align:right}footer a{display:block;margin-top:5px}.sidebar-bottom{margin-top:25px}.demo-card{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}