:root{
  --ink:#101B2D; --ink-2:#182A45; --ink-3:#24375C;
  --paper:#F3F5F9; --card:#FFFFFF;
  --emerald:#149B72; --emerald-dark:#0E7A59; --emerald-soft:#E4F5EF;
  --amber:#F0A93B; --amber-soft:#FCF0DC;
  --coral:#E15A4C; --coral-soft:#FBE7E4;
  --line:#E4E7EE; --text:#1A2233; --text-mut:#6B7686;
  --radius:14px; --sidebar-w:236px;
}
*{box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--text);margin:0;}
h1,h2,h3,h4,h5,.brand{font-family:'Sora',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{text-decoration:none;color:inherit;}
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);color:#C9D2E3;position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:50;}
.brand{display:flex;align-items:center;gap:10px;padding:20px;color:#fff;font-weight:700;font-size:1.05rem;}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--emerald),#1FD8A4);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;color:#06231A;}
.sidebar-scroll{flex:1;overflow-y:auto;padding:6px 12px 18px;}
.nav-group-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;color:#5E6E90;padding:16px 10px 6px;font-weight:600;}
.nav-link-pos{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:.87rem;color:#B7C1D9;font-weight:500;margin-bottom:2px;border-left:2px solid transparent;}
.nav-link-pos i{font-size:1rem;width:18px;text-align:center;color:#7C8AAD;}
.nav-link-pos:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-link-pos.active{background:rgba(20,155,114,.16);color:#fff;border-left:2px solid var(--emerald);}
.nav-link-pos.active i{color:var(--emerald);}
.main-col{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:64px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:40;}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-mut);background:#fff;}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;}
.view-body{padding:22px 26px 60px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.page-head h2{font-size:1.35rem;font-weight:700;margin:0;}
.page-head .sub{color:var(--text-mut);font-size:.85rem;margin-top:2px;}
.btn-emerald{background:var(--emerald);border:none;color:#fff;font-weight:600;font-size:.85rem;}
.btn-emerald:hover{background:var(--emerald-dark);color:#fff;}
.btn-outline-ink{border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.85rem;background:#fff;}
.card-pos{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);}
.stat-card{padding:18px 20px;}
.stat-card .label{font-size:.76rem;color:var(--text-mut);font-weight:600;}
.stat-card .value{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;margin-top:6px;}
.icon-chip{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.chip-emerald{background:var(--emerald-soft);color:var(--emerald-dark);}
.chip-amber{background:var(--amber-soft);color:#96660E;}
.chip-coral{background:var(--coral-soft);color:var(--coral);}
table.tbl-pos{width:100%;font-size:.83rem;}
table.tbl-pos thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mut);font-weight:700;border-bottom:1px solid var(--line);padding:8px 10px;}
table.tbl-pos tbody td{padding:11px 10px;border-bottom:1px solid #F0F1F5;vertical-align:middle;}
.badge-status{font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:20px;}
.badge-paid{background:var(--emerald-soft);color:var(--emerald-dark);}
.badge-due{background:var(--coral-soft);color:var(--coral);}
.badge-partial{background:var(--amber-soft);color:#96660E;}
.receipt{background:#fff;border-radius:4px;box-shadow:0 10px 30px rgba(16,27,45,.12);padding:0 18px 18px;font-family:'JetBrains Mono',monospace;}
.receipt-head{text-align:center;padding:14px 0 10px;border-bottom:1px dashed #C7CCD8;}
.receipt-head .co{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;}
.receipt-line{display:flex;justify-content:space-between;font-size:.74rem;padding:7px 0;border-bottom:1px dashed #EEF0F4;}
.receipt-totals .row-t{display:flex;justify-content:space-between;padding:4px 0;font-size:.78rem;}
.receipt-totals .grand{font-size:1rem;font-weight:700;border-top:1px dashed #C7CCD8;margin-top:6px;padding-top:9px;}
.prod-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;cursor:pointer;}
.prod-card:hover{box-shadow:0 6px 18px rgba(16,27,45,.08);}
.prod-thumb{height:54px;border-radius:9px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--text-mut);margin-bottom:8px;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--ink),var(--ink-2));}
.login-card{background:#fff;border-radius:16px;padding:36px;width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35);}