:root{font-family:'DM Sans',Arial,sans-serif;color:#e9eeeb;background:#0d1111;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.skip{position:absolute;left:-9999px;top:12px;background:#fff;color:#111;padding:10px;z-index:10}
.skip:focus{left:12px}
.shell{min-height:100dvh;display:grid;grid-template-columns:254px minmax(0,1fr)}
.sidebar{border-right:1px solid #26302e;background:#101514;min-height:100dvh;padding:32px 18px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;padding:0 13px 54px}
.brand-mark{width:33px;height:33px;border:1px solid #acc8a8;border-radius:8px;color:#cfebcb;display:grid;place-items:center;font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-3px}
.brand-mark span{color:#a4db91}
.brand-name{font:700 16px 'Space Grotesk',sans-serif;letter-spacing:.13em}
.brand-name small{display:block;color:#7e928b;font:600 9px 'DM Sans',sans-serif;letter-spacing:.24em;margin-top:2px}
.nav-label,.side-overline,.eyebrow,.card-top,.breadcrumb,th{font-size:10px;letter-spacing:.18em;font-weight:700}
.nav-label{display:block;color:#677a73;padding:0 14px 14px}
.nav-link{display:flex;align-items:center;gap:13px;padding:13px 14px;margin:3px 0;border-radius:8px;color:#9caea6;font-weight:600;font-size:13px}
.nav-link:hover,.nav-link.active{background:#1b2721;color:#d2efcf}
.nav-link.active{box-shadow:inset 2px 0 #b7e5a6}
.nav-icon{font-size:17px;line-height:1}
.sidebar-bottom{margin-top:auto;padding:22px 16px;border:1px solid #2b3832;border-radius:12px;background:#17201b}
.side-overline{color:#9db791}
.sidebar-bottom strong{display:block;font:600 27px 'Space Grotesk',sans-serif;margin:14px 0 2px}
.sidebar-bottom strong span{font:500 12px 'DM Sans',sans-serif;color:#8d9e94}
.sidebar-bottom p{font-size:12px;line-height:1.6;color:#8e9d93;margin:0}
.main{min-width:0;background:radial-gradient(circle at 78% -15%,#18231c 0,transparent 35%),#0d1111}
.topbar{height:81px;border-bottom:1px solid #24302b;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.5vw,80px)}
.breadcrumb{color:#86998f}
.breadcrumb span{color:#4d6558;padding:0 8px}
.top-actions{display:flex;align-items:center;gap:10px;color:#9aad9e;font-size:12px}
.live-dot{width:7px;height:7px;background:#b1e89d;border-radius:50%;box-shadow:0 0 10px #b1e89d70}
.logout{border:0;background:none;color:#cfdecf;padding:8px 0 8px 17px;margin-left:12px;border-left:1px solid #344039}
.logout:hover{text-decoration:underline}
.page-heading,.hero-grid,.section-intro,.records,.fine-print,.orders-summary{max-width:1430px;margin-left:auto;margin-right:auto}
.page-heading{padding:53px clamp(24px,4.5vw,80px) 38px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.eyebrow{color:#a6c79c}
.page-heading h1,.login-wrap h1{font:600 clamp(30px,3vw,46px) 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:12px 0 10px}
.page-heading h1 .period{color:#718476;font-weight:400;font-size:.58em;white-space:nowrap}
.page-heading p,.login-wrap p{color:#8b9d91;font-size:14px;margin:0;line-height:1.6}
.period-control{border:1px solid #2b3932;border-radius:9px;display:flex;align-items:center;white-space:nowrap;background:#141b17;font-size:12px;color:#c8dac9}
.period-control a{padding:10px 14px;font-size:20px;line-height:12px;color:#accaa8}
.period-control span{padding:0 6px}
.hero-grid{padding:0 clamp(24px,4.5vw,80px);display:grid;grid-template-columns:minmax(0,1.42fr) minmax(270px,1fr);gap:18px}
.estimate,.usage{border:1px solid #334636;border-radius:15px;padding:28px 31px 25px;min-height:288px}
.estimate{background:radial-gradient(circle at 95% 7%,#38583b 0,transparent 48%),linear-gradient(120deg,#243b2d,#1d3126 75%)}
.usage{background:#161e1a;border-color:#2b3830}
.card-top{display:flex;align-items:center;justify-content:space-between;color:#b6d1ad;gap:10px}
.outline-badge{font-size:10px;letter-spacing:0;border:1px solid #9ac39470;border-radius:20px;padding:7px 10px;text-transform:none}
.estimate-value,.usage-value{font:500 clamp(48px,5.2vw,77px) 'Space Grotesk',sans-serif;letter-spacing:-.07em;line-height:1;margin:30px 0 9px}
.estimate-value span{font-size:30px;letter-spacing:-.05em;color:#bfd3b9}
.estimate p,.usage p{color:#aec3ae;font-size:13px;margin:0 0 27px}
.estimate-line,.usage-footer{border-top:1px solid #92b08c38;padding-top:12px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:#adc3ae}
.estimate-line strong,.usage-footer strong{font:600 15px 'Space Grotesk',sans-serif;color:#e4eee2;letter-spacing:0}
.usage-index{font:500 12px 'Space Grotesk',sans-serif;letter-spacing:0;color:#cadbc8}
.usage-value{font-size:58px;margin:39px 0 18px}
.usage-value span{font:500 17px 'DM Sans',sans-serif;letter-spacing:0;color:#a2b4a6}
.meter{height:7px;background:#344037;border-radius:20px;overflow:hidden;margin-bottom:15px}
.meter i{display:block;height:100%;background:#b7e79f;border-radius:20px}
.usage p{color:#98aa9d;margin-bottom:20px}
.section-intro{padding:46px clamp(24px,4.5vw,80px) 20px;display:flex;justify-content:space-between;align-items:end}
.section-intro h2,.records h2,.orders-summary h2{font:600 23px 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:8px 0 0}
.text-link,.track-link{color:#bce2ad;font-size:12px;font-weight:700}
.text-link span{padding-left:7px}
.text-link:hover,.track-link:hover{text-decoration:underline}
.records{margin:0 clamp(24px,4.5vw,80px);border:1px solid #29372f;border-radius:13px;background:#141b18;overflow:hidden}
.records-head{min-height:92px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.records-head h2{font-size:17px;margin:0 0 4px}
.records-head span{color:#7d9386;font-size:12px}
.search{display:flex;align-items:center;gap:8px}
.search label{position:absolute;left:-9999px}
.search input{background:#0f1512;color:#dce9dd;border:1px solid #344339;border-radius:7px;min-width:240px;padding:10px 12px;font-size:12px;outline:none}
.search input:focus{border-color:#a7cf9d}
.search button{background:#d0edc4;color:#17311c;border:0;border-radius:7px;padding:10px 13px;font-weight:700;font-size:12px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
thead{background:#101713}
th{color:#6f8576;padding:14px 24px}
td{border-top:1px solid #24312a;padding:17px 24px;color:#d8e5da;font-size:12px}
td strong{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;font-size:13px}
td small{display:block;color:#718879;margin-top:5px}
.retailer{text-transform:capitalize}
.muted{color:#84998b}
.status{display:inline-flex;padding:6px 9px;border:1px solid #424943;border-radius:5px;color:#a9b4a9;text-transform:capitalize;font-size:11px}
.status.confirmed{background:#23392a;border-color:#406947;color:#b9e5af}
.status.reconciling{background:#373124;border-color:#77633e;color:#e9cf9d}
.order-number{display:block;color:#dcebd8;font:600 12px 'Space Grotesk',sans-serif;margin-bottom:5px}
.track-link{font-size:11px}
.tracking-email{display:block;color:#819688;margin:4px 0;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.empty{padding:58px 20px;text-align:center;border-top:1px solid #26352b}
.empty span{font-size:31px;color:#a3c497}
.empty h3{margin:12px 0 5px;font:600 19px 'Space Grotesk',sans-serif}
.empty p{font-size:13px;color:#829787;margin:0}
.pages{padding:17px 24px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #26352b;color:#8ea393;font-size:12px}
.pages a{margin-left:12px;color:#bce2ad}
.fine-print{padding:18px clamp(24px,4.5vw,80px) 40px;color:#6f8374;font-size:11px;line-height:1.6}
.orders-summary{margin:0 clamp(24px,4.5vw,80px) 35px;background:#1b2b20;border:1px solid #37503a;border-radius:13px;padding:27px 31px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.orders-summary h2{font-size:25px}
.orders-summary p{color:#9eb39f;font-size:13px;margin:8px 0 0}
.orders-summary strong{font:600 48px 'Space Grotesk',sans-serif;white-space:nowrap}
.orders-summary strong span{font:500 13px 'DM Sans',sans-serif;color:#aac0a9}
.login-wrap{max-width:680px;margin:clamp(75px,11vh,140px) auto;padding:0 30px}
.login-wrap h1{font-size:clamp(47px,6vw,78px);line-height:1.02;margin:17px 0 23px}
.login-wrap h1 em{font-style:normal;color:#b9e3ac}
.login-wrap p{font-size:16px;max-width:460px}
.primary-btn{display:inline-flex;align-items:center;gap:37px;margin-top:37px;background:#cbefb9;color:#17321b;padding:15px 19px;border-radius:7px;font-size:13px;font-weight:700}
.primary-btn:hover{background:#e0f7d4}
.login-foot{font-size:12px;color:#708474;margin-top:18px}
.notice{border:1px solid #785645;color:#e8beae;padding:12px;margin-top:20px;border-radius:7px}
@media(max-width:900px){.shell{grid-template-columns:1fr}
.sidebar{min-height:0;padding:14px 20px;border-right:0;border-bottom:1px solid #26302e;display:block}
.brand{padding:0}
.sidebar-group{display:flex;gap:8px;margin-top:13px}
.sidebar-group .nav-label,.sidebar-bottom{display:none}
.nav-link{margin:0;padding:9px 11px;font-size:12px}
.topbar{height:57px}
.hero-grid{grid-template-columns:1fr}
.page-heading{padding-top:35px}
.records{margin-left:24px;margin-right:24px}
.orders-summary{margin-left:24px;margin-right:24px}
}
@media(max-width:600px){.topbar{padding:0 22px}
.page-heading{display:block}
.period-control{display:inline-flex;margin-top:22px}
.estimate,.usage{min-height:0}
.records-head{display:block}
.search{margin-top:16px}
.search input{min-width:0;width:100%}
.orders-summary{display:block}
.orders-summary strong{display:block;margin-top:17px}
.top-actions>span:not(.live-dot){display:none}
}


@media(max-width:1100px){.table-scroll{overflow:visible}
table,tbody{display:block}
thead{display:none}
tbody tr{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #293b2e;padding:14px 8px}
td{border:0;padding:7px 14px;white-space:normal}
td:first-child,td:last-child{grid-column:1/-1}
td strong{max-width:none}
td:nth-child(n+2):before{display:block;color:#708675;font-size:9px;letter-spacing:.15em;font-weight:700;margin-bottom:5px}
td:nth-child(2):before{content:"RETAILER"}
td:nth-child(3):before{content:"ITEMS"}
td:nth-child(4):before{content:"DATE"}
td:nth-child(5):before{content:"STATUS"}
td:nth-child(6):before{content:"ORDER"}
}
.sync-warning{max-width:1270px;margin:0 clamp(24px,4.5vw,80px) 22px;padding:13px 18px;border:1px solid #655c3d;background:#242318;border-radius:8px;color:#e6d6a9;display:flex;gap:14px;align-items:center;font-size:12px;line-height:1.5}.sync-warning strong{white-space:nowrap;color:#ffdf96}@media(max-width:600px){.sync-warning{display:block}.sync-warning strong{display:block;margin-bottom:4px}}