@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,700;1,400&display=swap');
:root {
  --orange:#F36A22; --orange-600:#DD5B16; --orange-700:#C24E10;
  --ink:#141414; --paper:#F4F1EA; --surface:#FFFFFF;
  --green:#3E7C59; --amber:#E8A33D;
  --border-1:#DED9CD; --text-1:#141414; --text-2:#5C574D; --text-3:#8A8478;
  --font-heading:'Google Sans Flex','Be Vietnam Pro',system-ui,sans-serif;
  --font-body:'Be Vietnam Pro',system-ui,sans-serif;
  --r-input:12px; --r-card:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,20,20,0.06); --sh-2:0 4px 16px rgba(20,20,20,0.08);
  --sh-orange:0 6px 20px rgba(243,106,34,0.30);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--text-1);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:14px}
h1,h2,h3{font-family:var(--font-heading);letter-spacing:-0.02em}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-2);font-weight:700}
.btn-primary{background:var(--orange);color:#fff;border:none;border-radius:var(--r-pill);padding:11px 22px;font:500 14px var(--font-heading);box-shadow:var(--sh-orange);cursor:pointer}
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:24px}
/* app frame */
.app{display:flex;min-height:100vh}
.side{width:224px;background:var(--ink);color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.logo{font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-0.02em;color:#fff;margin-bottom:6px;padding:0 10px}
.logo span{color:var(--orange)}
.side .tag{font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(255,255,255,0.45);padding:0 10px;margin-bottom:20px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,0.72);font-size:13.5px}
.nav-item.active{background:var(--orange);color:#fff;font-weight:500}
.nav-item svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;padding:28px 36px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.shop-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-1);border-radius:var(--r-pill);padding:8px 16px;font-size:13px;color:var(--text-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-3);font-weight:700;margin-bottom:10px}
.kpi .val{font-family:var(--font-heading);font-size:26px;font-weight:700;letter-spacing:-0.02em}
.kpi .chg{font-size:12px;margin-top:6px;color:var(--text-3)}
.chg.up{color:var(--green)} .chg.down{color:#B4452B}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-1);font-weight:700}
td{padding:13px 12px;border-bottom:1px solid #EFEBE2;font-size:13.5px}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;border-radius:var(--r-pill);padding:3px 12px;font-size:11.5px;font-weight:500}
.badge.on{background:rgba(62,124,89,0.12);color:var(--green)}
.badge.off{background:#ECE8DF;color:var(--text-2)}
.badge.warn{background:rgba(232,163,61,0.16);color:#9A6A1D}