:root{
  --green-900:#15563b;
  --green-800:#1f6f4b;
  --green-700:#1f8a5b;
  --green-600:#2fa36b;
  --green-500:#45b97d;
  --green-100:#ddf4e7;
  --green-050:#f7fcf9;
  --text:#1f2d26;
  --muted:#6c7c74;
  --border:#dce9e1;
  --panel:#ffffff;
  --warn:#e0a229;
  --bad:#c84a4a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--green-050);color:var(--text)}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:linear-gradient(180deg,var(--green-800),var(--green-900));padding:20px 14px;color:white;box-shadow:0 0 0 1px rgba(255,255,255,.03) inset}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 18px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand img{width:42px;height:42px;object-fit:contain;background:white;padding:6px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-size:20px;font-weight:800;letter-spacing:.3px;line-height:1.05}
.brand-sub{font-size:12px;opacity:.78;margin-top:3px}
.brand small,header small,.tr small,.alert small{display:block;font-size:12px;font-weight:400;opacity:.72;margin-top:3px}
aside button{width:100%;border:0;background:transparent;color:#d8efe1;padding:11px 12px;border-radius:10px;display:flex;gap:11px;align-items:center;margin:3px 0;font-size:14px;cursor:pointer;transition:.15s ease}
aside button i{font-style:normal;width:19px;text-align:center;font-size:17px}
aside button.active,aside button:hover{background:rgba(255,255,255,.12);color:white}
main{min-width:0}
header{height:70px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:3}
.header-left{display:flex;align-items:center;gap:12px}
.header-left img{width:40px;height:40px;object-fit:contain;background:#f3faf6;border:1px solid var(--border);padding:6px;border-radius:12px}
.user{width:36px;height:36px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;font-weight:700;color:var(--green-800)}
.header-right{display:flex;align-items:center;gap:12px}.offline{font-size:12px;color:#a73535;background:#fde8e8;padding:6px 9px;border-radius:20px}
section{padding:30px;max-width:1250px;margin:auto}.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px}.title h1{margin:2px 0;font-size:28px}.title p{margin:4px 0;color:var(--muted)}
button{cursor:pointer;transition:.15s ease}
.primary{background:var(--green-700)!important;color:white!important;border-color:var(--green-700)!important;box-shadow:0 8px 18px rgba(31,138,91,.18)}
.title button,.actions button{border:1px solid var(--border);background:white;border-radius:10px;padding:10px 14px;display:flex;gap:8px;align-items:center;color:var(--text)}
.title button:hover,.actions button:hover{transform:translateY(-1px);border-color:#bdd9c8}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0 30px}.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:white;border:1px solid var(--border);border-left:4px solid var(--green-700);border-radius:14px;padding:18px;box-shadow:0 12px 24px rgba(21,86,59,.04)}.card strong{font-size:26px;display:block}.card span{color:var(--muted);font-size:13px}.card.warn{border-left-color:var(--warn)}.card.bad{border-left-color:var(--bad)}
.actions{display:flex;gap:10px;margin:12px 0 28px;flex-wrap:wrap}
.panel{background:white;border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:15px;box-shadow:0 12px 24px rgba(21,86,59,.04)}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel h2,h2{font-size:17px;margin:0}
.link,.back{border:0;background:transparent;color:var(--green-700);font-weight:600}
.alert{display:grid;grid-template-columns:25px 1fr auto;gap:12px;align-items:center;border-top:1px solid #edf5ef;padding:13px 4px}.alert-icon{color:var(--warn)}.alert button{border:0;background:#eef8f2;color:var(--green-700);padding:7px 12px;border-radius:8px}
.toolbar{background:white;border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 24px rgba(21,86,59,.04)}.toolbar input{flex:1;border:0;outline:0;font-size:14px;background:transparent;color:var(--text)}.toolbar select{border:1px solid var(--border);padding:8px;border-radius:8px;background:white;color:var(--text)}
.table{margin-top:15px;background:white;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 12px 24px rgba(21,86,59,.04)}.tr{display:grid;grid-template-columns:130px 2fr 110px 1.3fr 110px;gap:12px;align-items:center;width:100%;padding:13px 16px;border:0;border-top:1px solid #edf5ef;background:white;text-align:left;color:inherit}.tr:not(.th):hover{background:#f9fcfa}.th{background:#f3faf6!important;font-size:12px;color:var(--muted);font-weight:700;border-top:0}.tr span:nth-child(4){display:flex;align-items:center;gap:4px}
.pill{display:inline-flex!important;width:max-content!important;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:700}.pill.ok{background:#e6f4ec;color:#27764a}.pill.warn{background:#fff3d9;color:#986810}.pill.bad{background:#fde8e8;color:#a73535}
.grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.info{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid #edf5ef;font-size:13px}.info span{color:var(--muted)}.lot{display:grid;grid-template-columns:1fr 80px 110px;gap:8px;padding:12px 0;border-top:1px solid #edf5ef;font-size:13px}.lot small{grid-column:1/-1;color:var(--muted)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}.bigicon{font-size:45px}
.hero-note{display:inline-flex;align-items:center;gap:10px;background:#edf8f1;border:1px solid var(--border);color:var(--green-800);padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600}
.hero-note img{height:18px;width:auto}
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  aside{position:fixed;z-index:5;bottom:0;left:0;right:0;height:68px;padding:6px;display:flex;justify-content:space-around;align-items:center}
  .brand{display:none}
  aside button{width:auto;display:grid;justify-items:center;gap:1px;font-size:9px;padding:6px}
  aside button:nth-of-type(n+5){display:none}
  header{padding:0 14px;height:64px}
  .header-left img{width:34px;height:34px;padding:4px}
  section{padding:18px 14px 86px}
  .title{align-items:flex-start;gap:10px;flex-direction:column}
  .cards,.cards.three{grid-template-columns:1fr 1fr}
  .actions{display:grid;grid-template-columns:1fr 1fr}.actions button{justify-content:center}
  .grid{grid-template-columns:1fr}
  .toolbar select{display:none}
  .table{overflow-x:auto}.tr{min-width:750px}
  .title h1{font-size:23px}
  .header-right .offline{display:none}
}