:root{
  --app-height:100vh;
  --keyboard-height:0px;
  --apk-keyboard-height:0px;
  --paper:#F1F3EF;
  --card:#FFFFFF;
  --ink:#16241F;
  --ink-soft:#3F4E48;
  --primary:#0E6E55;
  --primary-dark:#0A5443;
  --primary-tint:#E3F1EB;
  --amber:#C9820F;
  --amber-tint:#FBF0DC;
  --coral:#C6392E;
  --coral-tint:#FBE7E4;
  --slate:#6E7871;
  --line:#DEDACD;
  --line-soft:#E9E6DB;
  --radius:18px;
  --bg-gradient-start:#E7E3D6;
  --bg-gradient-end:#DEDACC;
}
[data-theme="ocean"]{
  --paper:#EFF6FB;
  --card:#FFFFFF;
  --ink:#0F2A3D;
  --ink-soft:#2E4A5C;
  --primary:#1565A8;
  --primary-dark:#0D4A7A;
  --primary-tint:#DCEEF9;
  --amber:#C9820F;
  --amber-tint:#FBF0DC;
  --coral:#C6392E;
  --coral-tint:#FBE7E4;
  --slate:#5E7A8A;
  --line:#CDDBE5;
  --line-soft:#DAE6EE;
  --bg-gradient-start:#D6E5F0;
  --bg-gradient-end:#C8D9E8;
}
[data-theme="sunset"]{
  --paper:#FDF5EF;
  --card:#FFFFFF;
  --ink:#3D1F0F;
  --ink-soft:#5C3A2E;
  --primary:#C85A24;
  --primary-dark:#9E4318;
  --primary-tint:#FBE8DC;
  --amber:#B8860B;
  --amber-tint:#FBF0DC;
  --coral:#C6392E;
  --coral-tint:#FBE7E4;
  --slate:#8A6E5E;
  --line:#E5D5C8;
  --line-soft:#EEE2D8;
  --bg-gradient-start:#F0DFD0;
  --bg-gradient-end:#E8D3C2;
}
[data-theme="purple"]{
  --paper:#F5F0FB;
  --card:#FFFFFF;
  --ink:#1F1433;
  --ink-soft:#3D2E5C;
  --primary:#6B3FA0;
  --primary-dark:#522E80;
  --primary-tint:#EDE3F9;
  --amber:#C9820F;
  --amber-tint:#FBF0DC;
  --coral:#C6392E;
  --coral-tint:#FBE7E4;
  --slate:#7A6E8A;
  --line:#DDD5E8;
  --line-soft:#E8E0F0;
  --bg-gradient-start:#DDD2EE;
  --bg-gradient-end:#CFC2E2;
}
[data-theme="dark"]{
  --paper:#1A1E22;
  --card:#242A30;
  --ink:#E8ECF0;
  --ink-soft:#B0B8C0;
  --primary:#4ADE80;
  --primary-dark:#22C55E;
  --primary-tint:#1A3328;
  --amber:#FBBF24;
  --amber-tint:#33291A;
  --coral:#F87171;
  --coral-tint:#331A1A;
  --slate:#8A9098;
  --line:#3A4048;
  --line-soft:#2E343A;
  --bg-gradient-start:#111418;
  --bg-gradient-end:#1A1E22;
}
[data-theme="rose"]{
  --paper:#FFF3F6;--card:#FFFFFF;--ink:#3B1722;--ink-soft:#65404B;
  --primary:#C43D67;--primary-dark:#982B4D;--primary-tint:#FBE1E9;
  --amber:#C9820F;--amber-tint:#FBF0DC;--coral:#C6392E;--coral-tint:#FBE7E4;
  --slate:#896B74;--line:#E8CFD6;--line-soft:#F0DDE2;--bg-gradient-start:#F2D9E1;--bg-gradient-end:#EACBD5;
}
[data-theme="teal"]{
  --paper:#EEF9F8;--card:#FFFFFF;--ink:#103332;--ink-soft:#315755;
  --primary:#0F8B86;--primary-dark:#096963;--primary-tint:#D9F2F0;
  --amber:#C9820F;--amber-tint:#FBF0DC;--coral:#C6392E;--coral-tint:#FBE7E4;
  --slate:#62817F;--line:#C9E0DE;--line-soft:#DCEBEA;--bg-gradient-start:#D2EAE7;--bg-gradient-end:#C2DFDC;
}
[data-theme="indigo"]{
  --paper:#F1F3FC;--card:#FFFFFF;--ink:#171F45;--ink-soft:#38436B;
  --primary:#4154B3;--primary-dark:#30418F;--primary-tint:#E1E6FA;
  --amber:#C9820F;--amber-tint:#FBF0DC;--coral:#C6392E;--coral-tint:#FBE7E4;
  --slate:#687294;--line:#D0D5EA;--line-soft:#E0E4F1;--bg-gradient-start:#D7DCEF;--bg-gradient-end:#C8CFE7;
}
[data-theme="coffee"]{
  --paper:#F7F1EA;--card:#FFFDFC;--ink:#35261D;--ink-soft:#5C493D;
  --primary:#8A5A3B;--primary-dark:#68412B;--primary-tint:#EFE1D6;
  --amber:#B87915;--amber-tint:#F8EEDC;--coral:#B84536;--coral-tint:#F7E4E1;
  --slate:#817166;--line:#DED1C5;--line-soft:#EAE0D7;--bg-gradient-start:#E4D8CB;--bg-gradient-end:#D9CBBB;
}
[data-theme="gold"]{
  --paper:#FBF8ED;--card:#FFFFFF;--ink:#332B12;--ink-soft:#5B5130;
  --primary:#A77A12;--primary-dark:#7B590B;--primary-tint:#F5EBCB;
  --amber:#C9820F;--amber-tint:#FBF0DC;--coral:#C6392E;--coral-tint:#FBE7E4;
  --slate:#817757;--line:#E1D8B9;--line-soft:#ECE5CF;--bg-gradient-start:#EAE1C3;--bg-gradient-end:#DED2AC;
}
[data-theme="mono"]{
  --paper:#F3F4F5;--card:#FFFFFF;--ink:#1F2326;--ink-soft:#484F54;
  --primary:#4B5560;--primary-dark:#303840;--primary-tint:#E5E8EA;
  --amber:#A66A0A;--amber-tint:#F7EDDB;--coral:#B43A34;--coral-tint:#F7E5E3;
  --slate:#737B81;--line:#D7DBDE;--line-soft:#E6E8EA;--bg-gradient-start:#DDE0E2;--bg-gradient-end:#CED2D5;
}
[data-theme="midnight"]{
  --paper:#111827;--card:#1F2937;--ink:#F3F4F6;--ink-soft:#C5CBD4;
  --primary:#60A5FA;--primary-dark:#3B82F6;--primary-tint:#1D3553;
  --amber:#FBBF24;--amber-tint:#3A3018;--coral:#FB7185;--coral-tint:#3B1F28;
  --slate:#929CAA;--line:#3B4657;--line-soft:#2C3645;--bg-gradient-start:#080D16;--bg-gradient-end:#111827;
}
[data-density="compact"] .card{padding:12px 14px;margin-bottom:9px;border-radius:14px;}
[data-density="compact"] .row{padding:9px 0;}
[data-density="compact"] .section-label{margin-top:11px;margin-bottom:7px;}
[data-density="compact"] .stat-card{padding:11px 12px;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
body{
  font-family:'DM Sans',sans-serif;
  background:linear-gradient(180deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);
  color:var(--ink);
  text-align:center;
  height:var(--app-height);
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px 0;
}
.device{
  width:100%;
  max-width:412px;
  background:var(--paper);
  height:calc(var(--app-height) - 36px);
  min-height:0;
  max-height:calc(var(--app-height) - 36px);
  border-radius:34px;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -25px rgba(20,30,25,0.35);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
.num{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}

.topbar{
  padding:22px 20px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:12px;
}
.topbar .greet{font-size:12.5px; color:var(--slate); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.topbar .store{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin-top:2px; color:var(--ink);}
.topbar .date{font-size:12px; color:var(--slate); margin-top:4px;}

.stamp{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  border:2.5px dashed currentColor;
  transform:rotate(-8deg);
  flex-shrink:0;
  cursor:pointer;
  position:relative;
}
.stamp::after{
  content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid currentColor;opacity:.55;
}
.stamp .score{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; line-height:1;}
.stamp .lbl{font-size:7px; font-weight:700; letter-spacing:.08em; margin-top:1px;}
.stamp.sehat{color:var(--primary);}
.stamp.waspada{color:var(--amber);}
.stamp.kritis{color:var(--coral);}

.content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px calc(100px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:stable;}
.content::-webkit-scrollbar{display:none;}

.section-label{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); margin:22px 4px 10px;
}
.section-label:first-child{margin-top:6px;}
.section-label.collapsible-label{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.section-collapse-btn{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:999px;padding:5px 10px;font:inherit;font-size:9.5px;font-weight:800;letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;}
.section-collapse-btn:hover{border-color:var(--primary);color:var(--primary);}
.collapsible-section-body{overflow:hidden;}
.collapsible-section-body.is-collapsed{display:none;}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  border:1px solid var(--line-soft);
  text-align:center;
}
.section-label,.stat-card,.balance-card,.empty,.diffline,.health-bar-row,.prod-row,.pager-row,.help-p{text-align:center;}
.row .body{text-align:center;}
.balance-card .sub,.btn-row,.chips,.seg,.chipwrap,.theme-grid{justify-content:center;}
.card + .card{margin-top:10px;}

.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.stat-card{
  background:var(--card); border-radius:16px; padding:14px; border:1px solid var(--line-soft);
}
.stat-card .lbl{font-size:11px; color:var(--slate); font-weight:600;}
.stat-card .val{font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; margin-top:5px;}
.stat-card .mini{font-size:10.5px;color:var(--slate);margin-top:5px;line-height:1.35;}
.stat-card.wide{grid-column:1/-1;}
.up{color:var(--primary);}
.down{color:var(--coral);}

.balance-card{
  background:linear-gradient(150deg, var(--primary-dark), var(--primary));
  border-radius:20px; padding:20px; color:#EFFBF5;
}
.balance-card .lbl{font-size:11.5px; opacity:.85; font-weight:600; letter-spacing:.03em;}
.balance-card .val{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; margin-top:6px;}
.balance-card .sub{display:flex; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.2);}
.balance-card .sub div{flex:1;}
.balance-card .sub .lbl{font-size:10.5px;}
.balance-card .sub .val2{font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; margin-top:3px;}

.chart{display:flex; align-items:flex-end; gap:6px; height:86px; margin-top:4px;}
.chart .bar-wrap{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end;}
.chart .bars{width:100%; display:flex; gap:2px; align-items:flex-end; height:70px;}
.chart .bar{flex:1; border-radius:3px 3px 0 0; min-height:2px;}
.chart .bar.in{background:var(--primary);}
.chart .bar.out{background:var(--coral); opacity:.75;}
.chart .day{font-size:9px; color:var(--slate); font-weight:600;}
.chart .bar-wrap{cursor:pointer;border-radius:8px;padding:2px;transition:background .15s,transform .15s;}
.chart .bar-wrap:hover,.chart .bar-wrap.selected{background:var(--primary-tint);transform:translateY(-2px);}
.chart .bar-wrap.selected .day{color:var(--primary-dark);font-weight:800;}
.chart-day-detail{
  display:none;grid-template-columns:1.25fr repeat(3,minmax(0,1fr));gap:8px;align-items:stretch;
  margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--paper);
}
.chart-day-detail.show{display:grid;}
.chart-day-detail .chart-date,.chart-day-detail .chart-number{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:7px 9px;border-radius:9px;background:var(--card);}
.chart-day-detail small{font-size:9px;color:var(--slate);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.chart-day-detail b{font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.chart-day-detail{grid-template-columns:1fr 1fr}.chart-day-detail .chart-date{grid-column:1/-1;}}

.row{
  display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line-soft);
}
.row:last-child{border-bottom:none;}
.row .icn{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.row .icn svg{width:17px;height:17px;}
.row .body{flex:1; min-width:0;}
.row .ttl{font-size:14px; font-weight:600; color:var(--ink);}
.row .sub{font-size:11.5px; color:var(--slate); margin-top:1px;}
.row .amt{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; flex-shrink:0;}

.empty{text-align:center; padding:34px 16px; color:var(--slate);}
.empty .big{font-size:28px; margin-bottom:6px;}
.empty .t{font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.empty .s{font-size:12px; margin-top:3px;}

.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:600;
  background:var(--card); border:1px solid var(--line-soft); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.btn{
  border:none; border-radius:13px; padding:13px 16px; font-weight:700; font-size:14px;
  font-family:'DM Sans',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-outline{background:var(--card); color:var(--ink); border:1.5px solid var(--line);}
.btn-danger{background:var(--coral-tint); color:var(--coral);}
.btn-block{width:100%;}
.btn-row{display:flex; gap:10px; margin-top:4px;}

.prod-row{display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--line-soft);}
.prod-row:last-child{border-bottom:none;}
.prod-row .pname{font-weight:600; font-size:14px;}
.prod-row .pmeta{font-size:11.5px; color:var(--slate); margin-top:2px;}
.stock-pill{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
  padding:5px 11px; border-radius:100px;
}
.stock-pill.ok{background:var(--primary-tint); color:var(--primary-dark);}
.stock-pill.low{background:var(--amber-tint); color:var(--amber);}
.stock-pill.zero{background:var(--coral-tint); color:var(--coral);}

.health-bar-row{margin-top:12px;}
.health-bar-row .hlbl{display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; margin-bottom:6px;}
.health-track{height:8px; background:var(--line-soft); border-radius:100px; overflow:hidden;}
.health-fill{height:100%; border-radius:100px;}

.navbar{
  position:absolute; left:0; right:0; bottom:0;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:flex; padding:8px 6px calc(10px + env(safe-area-inset-bottom));
}
.navbtn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; border:none; background:none; cursor:pointer; color:var(--slate);
}
.navbtn svg{width:21px;height:21px;}
.navbtn span{font-size:10px; font-weight:700;}
.navbtn.active{color:var(--primary);}
.sidebar-toggle{display:none;}

.fab[hidden]{display:none!important;}

.fab{
  position:absolute; right:16px; bottom:78px;
  width:60px;height:60px;border-radius:18px;padding:0;
  background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 13px 25px -7px rgba(72,8,67,.5),inset 1px 1px 0 rgba(255,255,255,.7);
  cursor:pointer;z-index:5;transition:transform .16s ease,box-shadow .16s ease;
  overflow:visible;
}
.fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 17px 28px -7px rgba(72,8,67,.58);}
.fab:active{transform:translateY(1px) scale(.97);}
.fab img{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px;}
.fab::after{
  content:'+';position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;border:2px solid var(--card);
  font-size:17px;font-weight:500;line-height:1;box-shadow:0 5px 10px rgba(20,30,25,.3);
}

.overlay{
  position:absolute; inset:0; background:rgba(12,18,15,0.58);backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; z-index:20; opacity:0; pointer-events:none; transition:opacity .18s;
}
.overlay.show{opacity:1; pointer-events:auto;}
.sheet{
  background:var(--paper); width:100%; max-height:88%; border-radius:24px 24px 0 0;
  padding:8px 20px 22px; overflow-y:auto;position:relative;text-align:left;
  transform:translateY(20px); transition:transform .2s;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.overlay.show .sheet{transform:translateY(0);}
.sheet-handle{width:38px;height:4px;background:var(--line); border-radius:100px; margin:8px auto 14px;}
.sheet h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 42px 8px 0;line-height:1.25;text-align:left;}
.sheet>.help-p,.sheet>.stock-form>.stock-form-intro{margin-top:0;}
.sheet>.card,.sheet>.grid2,.sheet>.stock-form-block{margin-bottom:11px;}
.sheet .field{margin-bottom:12px;}
.sheet .btn{min-height:44px;}
.sheet-close{position:absolute;right:18px;top:15px;z-index:5;width:34px;height:34px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink-soft);font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 15px rgba(16,25,20,.08);}
.sheet-close:hover{border-color:var(--primary);color:var(--primary);}
.field{margin-bottom:14px;min-width:0;max-width:100%;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.02em;}
.field input, .field select, .field textarea{
  width:100%;min-width:0;max-width:100%; border:1.5px solid var(--line); background:var(--card); border-radius:12px;
  padding:11px 13px; font-size:14.5px; font-family:'DM Sans',sans-serif; color:var(--ink);
}
.field input[type="date"]{
  display:block;inline-size:100%;width:100%;min-inline-size:0;min-width:0;max-inline-size:100%;max-width:100%;
  min-height:46px;padding-left:13px;padding-right:10px;overflow:hidden;
  -webkit-appearance:none;appearance:none;
}
.field input[type="date"]::-webkit-date-and-time-value{display:block;width:100%;min-width:0;overflow:hidden;text-align:left;}
.field input[type="date"]::-webkit-calendar-picker-indicator{display:block;float:right;flex:0 0 auto;margin:0 0 0 auto;}
.date-field-grid{width:100%;min-width:0;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
.date-field-grid.date-grid-with-action{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;}
.date-field-grid>.field{min-width:0;max-width:100%;overflow:hidden;}
.sheet [style*="grid-template-columns"]{column-gap:12px!important;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary);}
.seg{display:flex; gap:8px;}
.seg button{
  flex:1; padding:11px; border-radius:12px; border:1.5px solid var(--line); background:var(--card);
  font-weight:700; font-size:13px; cursor:pointer; color:var(--ink-soft);
}
.seg button.on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.chipwrap{display:flex; flex-wrap:wrap; gap:8px;}
.chipwrap .cpick{
  padding:9px 13px; border-radius:100px; border:1.5px solid var(--line); background:var(--card);
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.chipwrap .cpick.on{background:var(--primary); border-color:var(--primary); color:#fff;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:11px 13px; background:var(--card); border:1.5px solid var(--line); border-radius:12px;}
.switch{width:42px;height:24px;border-radius:100px; background:var(--line); position:relative; cursor:pointer; transition:background .15s;}
.switch.on{background:var(--primary);}
.switch .dot{position:absolute; top:2px; left:2px; width:20px;height:20px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.switch.on .dot{left:20px;}

.toast{
  position:absolute; bottom:88px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:100px;
  font-size:13px; font-weight:600; z-index:40; opacity:0; pointer-events:none; transition:opacity .2s, bottom .2s;
  white-space:nowrap;
}
.toast.show{opacity:1; bottom:96px;}

.btn:disabled{opacity:.4; cursor:not-allowed;}
.searchbtn{
  width:38px;height:38px;border-radius:50%; flex-shrink:0;
  background:var(--card); border:1.5px solid var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.search-input-wrap{position:relative; margin-bottom:12px;}
.search-input-wrap svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--slate); pointer-events:none;}
.search-input-wrap input{width:100%; border:1.5px solid var(--line); background:var(--paper); border-radius:12px; padding:10px 13px 10px 34px; font-size:13.5px; font-family:'DM Sans',sans-serif; color:var(--ink);}
.search-input-wrap input:focus{outline:none; border-color:var(--primary);}
.variant-chip{display:inline-block; background:var(--paper); border:1px solid var(--line-soft); border-radius:100px; padding:3px 10px; font-size:10.5px; font-weight:600; margin:3px 5px 0 0; color:var(--ink-soft);}
.pager-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.pager-row span{font-size:11.5px; color:var(--slate); font-weight:600;}
.help-p{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 10px;}
.hr{height:1px; background:var(--line-soft); margin:16px 0;}
.diffline{display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-bottom:1px dashed var(--line);}
.diffline:last-child{border-bottom:none;}
.diffline b{font-family:'Space Grotesk',sans-serif;}

/* ======================================================
   Ellinhijab-Produksi: aliases dan komponen scope aktif.
   Basis visual tetap mengikuti Inventori Ellin Hijab.
   ====================================================== */
button,input,select,textarea{font:inherit;color:inherit;}
.top-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.sync-pill{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.sync-pill span{width:7px;height:7px;border-radius:50%;background:var(--amber);display:block;}
.avatar-button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;cursor:pointer;}
.card-title,.card .ttl{font-size:14px;font-weight:700;color:var(--ink);}
.card-sub{font-size:11.5px;color:var(--slate);line-height:1.5;margin-top:4px;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.warn{color:var(--amber);}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:5px 9px;font-size:9.5px;font-weight:800;background:var(--primary-tint);color:var(--primary-dark);white-space:nowrap;}
.badge.warn{background:var(--amber-tint);color:var(--amber);}
.badge.down{background:var(--coral-tint);color:var(--coral);}
.empty .icon{font-size:28px;margin-bottom:6px;}
.empty b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);}
.empty span{display:block;font-size:12px;margin-top:3px;}
.table-wrap{overflow:auto;border:1px solid var(--line-soft);border-radius:14px;background:var(--card);}
.data-table{border-collapse:collapse;width:100%;min-width:600px;font-size:12px;}
.data-table th,.data-table td{padding:10px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle;}
.data-table th{font-size:10px;text-transform:uppercase;letter-spacing:.055em;color:var(--slate);background:var(--paper);position:sticky;top:0;z-index:1;}
.data-table tr:last-child td{border-bottom:none;}
.flow-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 5px;scrollbar-width:none;justify-content:flex-start;}
.flow-strip::-webkit-scrollbar{display:none;}
.flow-node{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:13px;padding:9px 12px;font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.flow-node.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.sheet-actions .btn{flex:1;}
@media (max-width:520px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid3 .wide-mobile{grid-column:1/-1;}
  .sheet-actions{flex-direction:column;}
}