@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');
:root{--bg:#edf2ef;--panel:#fff;--side:#092a21;--side2:#0d3b2e;--accent:#b97825;--gold:#d4a017;--text:#18231f;--muted:#66736d;--line:#d6ddd9;--good:#16834b;--warn:#b97825;--bad:#b33939;--blue:#316a8c;--shadow:0 12px 32px rgba(8,39,31,.10)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:268px 1fr}.side{background:linear-gradient(180deg,var(--side),#061d17);color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}.side-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 20px;border-bottom:1px solid rgba(255,255,255,.13)}.side-brand img{width:54px;height:64px;object-fit:contain;background:#fff;border-radius:4px}.side-brand strong{font-family:Oswald,sans-serif;font-size:1.2rem;display:block}.side-brand span{font-size:.62rem;color:#c9d8d1}.nav-group{margin-top:16px}.nav-label{text-transform:uppercase;letter-spacing:.12em;color:#91aba0;font-size:.62rem;font-weight:800;padding:7px 9px}.nav-item{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#e8f1ed;padding:10px 11px;border-radius:7px;text-align:left;cursor:pointer;font-weight:700;font-size:.78rem}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.11);box-shadow:inset 3px 0 var(--gold)}.side-footer{margin-top:24px;padding:14px 8px;border-top:1px solid rgba(255,255,255,.13);font-size:.66rem;color:#a8bbb2}.main{min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:0 24px;position:sticky;top:0;z-index:30}.menu{display:none;border:1px solid var(--line);background:#fff;width:42px;height:42px}.search{flex:1;max-width:620px;position:relative}.search input{width:100%;border:1px solid var(--line);background:#f7f9f8;padding:11px 14px 11px 38px;border-radius:7px}.search:before{content:'⌕';position:absolute;left:14px;top:8px;font-size:1.3rem;color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;font-size:.72rem;font-weight:700}.avatar{width:38px;height:38px;border-radius:50%;background:var(--side2);color:#fff;display:grid;place-items:center;font-weight:800}.content{padding:24px;max-width:1650px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;font-weight:800}.page-head h1{font-family:Oswald,sans-serif;font-size:clamp(2rem,4vw,3.2rem);margin:.15rem 0}.muted{color:var(--muted);font-size:.8rem}.btn{border:0;border-radius:6px;background:var(--side2);color:#fff;padding:11px 15px;font-weight:800;font-size:.74rem;cursor:pointer}.btn.secondary{background:#fff;color:var(--side2);border:1px solid var(--line)}.metrics{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:12px;margin-bottom:18px}.metric{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 6px 20px rgba(8,39,31,.06);cursor:pointer;text-align:left}.metric span{font-size:.69rem;color:var(--muted);font-weight:700}.metric strong{font-family:Oswald,sans-serif;display:block;font-size:2rem;color:var(--side2);margin:6px 0}.metric small{color:var(--muted)}.dashboard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:16px}.stack{display:grid;gap:16px;align-content:start}.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.card h2{font-family:Oswald,sans-serif;font-size:1.35rem;margin:0}.list{display:grid;gap:8px}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:11px;background:#fbfcfb}.row strong{display:block;font-size:.81rem}.row p{margin:3px 0 0;color:var(--muted);font-size:.7rem}.pill{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:.62rem;font-weight:800}.pill.good{background:#daf2e4;color:#12683e}.pill.warn{background:#f7e8cf;color:#865116}.pill.bad{background:#f8dada;color:#8b2f2f}.pill.blue{background:#dcecf5;color:#285a76}.finance{display:grid;grid-template-columns:1fr 1fr;gap:9px}.finance div{border:1px solid var(--line);background:#f8faf9;border-radius:8px;padding:12px}.finance span{color:var(--muted);font-size:.68rem}.finance strong{display:block;font-family:Oswald,sans-serif;font-size:1.35rem;margin-top:5px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}.data-table{width:100%;border-collapse:collapse;background:#fff;min-width:780px}.data-table th,.data-table td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:.74rem}.data-table th{background:#f2f6f4;color:#52615a;text-transform:uppercase;letter-spacing:.04em;font-size:.61rem}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.empty{padding:42px;text-align:center;color:var(--muted)}.mobile-bottom{display:none}.customer-shell{min-height:100vh;background:var(--bg)}.customer-head{background:var(--side);color:#fff}.customer-head .inner{max-width:1280px;margin:auto;padding:16px 22px;display:flex;align-items:center;gap:15px}.customer-head img{width:62px;background:#fff;border-radius:4px}.customer-head strong{font-family:Oswald,sans-serif;font-size:1.35rem}.customer-nav{margin-left:auto;display:flex;gap:17px;font-size:.74rem;font-weight:700}.customer-main{max-width:1280px;margin:auto;padding:28px 22px}.welcome{background:linear-gradient(135deg,var(--side2),#17634a);color:#fff;border-radius:12px;padding:28px;display:flex;justify-content:space-between;gap:20px}.customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:16px}.login-page{min-height:100vh;background:linear-gradient(90deg,rgba(4,29,22,.95),rgba(4,29,22,.65)),url('assets/hero.svg') center/cover;display:grid;place-items:center;padding:24px}.login-card{width:min(1040px,100%);display:grid;grid-template-columns:.85fr 1.15fr;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.35);border-radius:10px;overflow:hidden}.login-brand{background:#f5f1e8;padding:42px;text-align:center}.login-brand img{width:240px;margin:auto}.login-form{padding:44px}.login-form h1{font-family:Oswald,sans-serif;font-size:3rem;color:var(--side2);margin:.2em 0}.login-form label{display:block;text-transform:uppercase;font-size:.64rem;font-weight:800;margin:12px 0 6px}.login-form input{width:100%;padding:13px;border:1px solid var(--line)}.notice{border-left:4px solid var(--gold);background:#fff7df;padding:12px;margin:14px 0;font-size:.74rem}
@media(max-width:1180px){.metrics{grid-template-columns:repeat(3,1fr)}.dashboard{grid-template-columns:1fr}.customer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{position:fixed;z-index:50;left:-280px;width:268px;transition:.2s}.app.side-open .side{left:0}.menu{display:block}.topbar{padding:0 14px}.chip{display:none}.content{padding:16px}.page-head{flex-direction:column}.page-head .btn{width:100%}.metrics{grid-template-columns:repeat(2,1fr)}.login-card{grid-template-columns:1fr}.login-brand{display:none}.customer-nav{display:none}.customer-grid{grid-template-columns:1fr}.welcome{flex-direction:column}.mobile-bottom{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);z-index:40}.mobile-bottom button{border:0;background:#fff;padding:12px 4px;font-size:.62rem;font-weight:700}.content{padding-bottom:72px}}
@media(max-width:480px){.metrics{grid-template-columns:1fr 1fr}.metric{padding:13px}.finance{grid-template-columns:1fr}.login-form{padding:28px 20px}.login-form h1{font-size:2.4rem}}