/* ===== SOURCE: 01-core.css ===== */
: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{
  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;}

/* ===== SOURCE: 02-layout-settings.css ===== */
/* Theme picker */
.theme-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:8px;}
.theme-option{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:13px;padding:7px 9px;cursor:pointer;background:var(--card);font-size:11.5px;font-weight:700;color:var(--ink-soft);}
.theme-option.active{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.theme-swatch{
  width:30px;height:30px;border-radius:9px;cursor:pointer;flex:0 0 auto;
  border:2px solid var(--line); display:flex;align-items:center;justify-content:center;
  transition:transform .12s, border-color .12s;
}
.theme-swatch.active{border-color:var(--primary);}
.theme-swatch svg{width:15px;height:15px;color:#fff;opacity:0;}
.theme-swatch.active svg{opacity:1;}
.theme-grid.colors-only{grid-template-columns:repeat(auto-fit,44px);justify-content:center;gap:10px;margin:0;width:100%;max-width:100%;}
.theme-grid.colors-only .theme-option{width:44px;height:44px;padding:5px;justify-content:center;border-radius:13px;}
.theme-grid.colors-only .theme-swatch{width:30px;height:30px;}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;}
.settings-grid>.card{margin:0;height:100%;}
.settings-wide{grid-column:1/-1;}
.channel-add-grid{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:8px;margin-top:12px;align-items:stretch;}
.channel-add-grid select,.channel-add-grid input{width:100%;min-width:0;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px 13px;font:inherit;color:var(--ink);}
.platform-choice{display:flex;align-items:center;gap:8px;min-width:0;}
.platform-choice img{width:30px;height:30px;border-radius:9px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line-soft);}
.channel-picker-auto{display:grid;grid-template-columns:minmax(145px,.75fr) minmax(0,1.25fr);gap:8px;width:100%;min-width:0;}
.channel-picker-platform{display:flex;align-items:center;gap:7px;min-width:0;}
.channel-picker-platform img{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line-soft);display:none;}
.channel-picker-auto select{width:100%!important;min-width:0!important;min-height:46px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;font:inherit;color:var(--ink);}
@media (max-width:520px){.channel-picker-auto{grid-template-columns:1fr;}.channel-picker-platform img{width:28px;height:28px;}}
@media (max-width:620px){.channel-add-grid{grid-template-columns:1fr;}.channel-add-grid .btn{width:100%;}}


/* APK viewport fix: phone + tablet portrait always use a fixed visible viewport. */
@media (max-width:767px){
  body{padding:0;align-items:stretch;justify-content:stretch;}
  .device{width:100%;max-width:none;height:var(--app-height);min-height:0;max-height:var(--app-height);border-radius:0;border:none;box-shadow:none;}
  .topbar{padding-top:calc(18px + env(safe-area-inset-top));flex:0 0 auto;}
  .content{min-height:0;width:100%;max-width:720px;margin:0 auto;}
  .overlay{position:absolute;inset:0;}
  #onboarding .sheet{max-height:calc(var(--app-height) - 24px)!important;overflow-y:auto;margin:auto 12px!important;}
}
@media (min-width:421px) and (max-width:767px){
  .topbar{padding-left:28px;padding-right:28px;}
  .content{padding-left:24px;padding-right:24px;}
  .sheet{padding-left:24px;padding-right:24px;}
}
.settings-grid,.settings-grid>*,.card,.btn-row,.channel-add-grid,.platform-choice{min-width:0;max-width:100%;}
@media (max-width:620px){
  .settings-grid{grid-template-columns:minmax(0,1fr);}
  .settings-wide{grid-column:auto;}
  .settings-grid .btn-row{flex-wrap:wrap;}
  .settings-grid .btn-row>.btn{min-width:min(150px,100%);}
  .settings-grid [style*="display:flex"] input{min-width:0;}
}

@media (max-width:420px){
  body{padding:0;}
  .device{border-radius:0; min-height:var(--app-height); max-width:100%; border:none;}
  .settings-grid{grid-template-columns:1fr;}
  .settings-wide{grid-column:auto;}
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .theme-grid.colors-only{grid-template-columns:repeat(auto-fit,44px);}
  .date-field-grid,.date-field-grid.date-grid-with-action{grid-template-columns:minmax(0,1fr)!important;}
  .date-field-grid.date-grid-with-action>:last-child{width:100%;}
}
@media (max-width:560px){
  .sheet .date-field-grid,.sheet .date-field-grid.date-grid-with-action{grid-template-columns:minmax(0,1fr)!important;}
  .sheet .date-field-grid.date-grid-with-action>:last-child{width:100%;}
  .audit-filter-grid{grid-template-columns:minmax(0,1fr);}
}

/* ======================================================
   TABLET / PC LAYOUT (Poco Pad C1 & perangkat layar lebar)
   Menambahkan sidebar navigasi + area konten lebar, tanpa
   mengubah struktur HTML maupun logika JavaScript.
   ====================================================== */
@media (min-width:768px){
  body{align-items:center; padding:28px 20px;}
  .device{
    max-width:1220px;
    width:100%;
    height:calc(var(--app-height) - 56px);
    min-height:560px;
    max-height:900px;
    border-radius:26px;
    display:grid;
    grid-template-columns:236px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "nav top"
      "nav content";
    overflow:hidden;
    transition:grid-template-columns .22s ease;
  }
  .device.sidebar-collapsed{grid-template-columns:76px 1fr;}

  /* Sidebar navigasi (menggantikan bottom bar) */
  .navbar{
    grid-area:nav;
    position:relative;
    inset:auto;
    height:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    align-content:flex-start;
    gap:8px;
    padding:26px 14px calc(20px + env(safe-area-inset-bottom));
    background:var(--card);
    backdrop-filter:none;
    border-top:none;
    border-right:1px solid var(--line);
  }
  .navbar::before{
    content:'';
    display:block;
    width:58px;
    height:58px;
    margin:0 0 12px 8px;
    flex:0 0 58px;
    background-image:url('../assets/images/ellin-logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
  .sidebar-toggle{
    display:grid;place-items:center;position:absolute;right:12px;top:29px;width:30px;height:30px;
    border:1.5px solid var(--line);border-radius:10px;background:linear-gradient(145deg,#fff,var(--paper));color:var(--ink-soft);
    cursor:pointer;font-size:19px;line-height:1;z-index:2;transition:transform .2s,background .2s;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 4px 9px rgba(22,48,38,.13);
  }
  .sidebar-toggle:hover{background:var(--primary-tint);color:var(--primary);}
  .device.sidebar-collapsed .sidebar-toggle{right:23px;transform:rotate(180deg);}
  .device.sidebar-collapsed .navbar::before{visibility:hidden;height:50px;padding:0;}
  .device.sidebar-collapsed .navbar{padding-left:10px;padding-right:10px;}
  .device.sidebar-collapsed .navbtn{flex:0 0 auto;width:100%;justify-content:center;padding:10px 8px;gap:0;}
  .device.sidebar-collapsed .navbtn span{display:none;}
  .device.sidebar-collapsed .navbtn svg{width:42px;height:42px;}
  .device.sidebar-collapsed .navbtn.active{background:transparent;}
  .navbtn{
    flex:0 0 auto;
    width:100%;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-radius:13px;
    font-weight:600;
  }
  .navbtn:hover{background:var(--paper);}
  .navbtn.active{background:var(--primary-tint); color:var(--primary-dark);}
  .navbtn{--nav-accent:var(--primary);--nav-soft:var(--primary-tint);}
  .navbtn[data-tab="dashboard"]{--nav-accent:#0f8f7d;--nav-soft:#d9f5ef;}
  .navbtn[data-tab="kas"]{--nav-accent:#2474b5;--nav-soft:#e0effb;}
  .navbtn[data-tab="gudang"]{--nav-accent:#7654b5;--nav-soft:#eee7fb;}
  .navbtn[data-tab="barcode"]{--nav-accent:#a05a2c;--nav-soft:#f8eadf;}
  .navbtn[data-tab="laporan"]{--nav-accent:#cf416a;--nav-soft:#fde5ec;}
  .navbtn[data-tab="lainnya"]{--nav-accent:#5d6770;--nav-soft:#e9edf0;}
  .navbtn svg{
    width:40px;height:40px;padding:9px;border-radius:13px;color:var(--nav-accent);
    background:var(--nav-soft);border:1px solid var(--line);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),0 5px 10px rgba(24,42,58,.13);
    background:linear-gradient(145deg,#fff 3%,var(--nav-soft) 56%,color-mix(in srgb,var(--nav-accent) 24%,var(--nav-soft)));
    border:1px solid color-mix(in srgb,var(--nav-accent) 25%,#fff);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -2px -2px 5px color-mix(in srgb,var(--nav-accent) 13%,transparent),0 5px 10px color-mix(in srgb,var(--nav-accent) 19%,transparent);
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
    overflow:visible;
  }
  .navbtn:hover svg{transform:translateY(-2px);filter:saturate(1.08);}
  .navbtn.active svg{
    color:#fff;
    background:linear-gradient(145deg,color-mix(in srgb,var(--nav-accent) 72%,#fff),var(--nav-accent) 58%,color-mix(in srgb,var(--nav-accent) 72%,#000));
    border-color:color-mix(in srgb,var(--nav-accent) 72%,#fff);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -3px -3px 7px rgba(0,0,0,.16),0 7px 14px color-mix(in srgb,var(--nav-accent) 34%,transparent);
    transform:translateY(-1px);
  }
  .navbtn span{font-size:13.5px;}

  /* Header atas konten */
  .topbar{
    grid-area:top;
    justify-content:space-between;
    align-items:center;
    padding:22px 32px 16px;
    border-bottom:1px solid var(--line-soft);
    gap:0;
  }
  .topbar .greet, .topbar .store, .topbar .date{text-align:left;}

  /* Area konten utama */
  .content{
    grid-area:content;
    padding:24px 32px 60px;
    max-width:820px;
    width:100%;
    margin:0 auto;
  }

  /* FAB mengikuti sudut kanan-bawah area konten, bukan seluruh device */
  .fab{right:40px; bottom:40px;}

  /* Sheet & onboarding tampil sebagai modal di tengah layar, bukan bottom sheet */
  .overlay{align-items:center; justify-content:center; padding:24px;}
  .sheet{
    max-width:560px;
    width:100%;
    max-height:86vh;
    border-radius:22px;
    padding:10px 22px 22px;
    transform:translateY(12px) scale(.98);
    box-shadow:0 28px 70px rgba(5,12,9,.28);
  }
  .sheet.modal-wide{max-width:720px;}
  .sheet.modal-compact{max-width:440px;}
  .overlay.show .sheet{transform:translateY(0) scale(1);}
}

/* APK keyboard fix: --app-height sudah berisi tinggi layar yang benar-benar terlihat. */
body.keyboard-open .fab{display:none!important;}
body.keyboard-open .navbar{display:none!important;}
@media (min-width:768px){
  body.keyboard-open{padding:0;align-items:stretch;}
  body.keyboard-open .device{display:flex;flex-direction:column;width:100%;max-width:none;height:var(--app-height);min-height:0;max-height:var(--app-height);border-radius:0;border:none;}
  body.keyboard-open .topbar{display:none!important;}
  body.keyboard-open .content{flex:1;min-height:0;max-width:none;padding:0;}
  body.keyboard-open .overlay .sheet{max-width:720px;}
}
body.keyboard-open .overlay{
  align-items:flex-start!important;
  justify-content:center!important;
  padding:calc(8px + env(safe-area-inset-top)) 8px 8px!important;
}
body.keyboard-open .overlay .sheet{
  width:100%!important;
  margin:0!important;
  max-height:calc(var(--app-height) - 16px - env(safe-area-inset-top))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch!important;
  scroll-padding-top:64px;
  scroll-padding-bottom:32px;
}
body.keyboard-open .content{padding-bottom:18px;}

@media (min-width:1180px){
  .device{max-width:1320px;}
  .content{max-width:900px;}
}

/* ===== SOURCE: 03-gudang.css ===== */
/* Gudang: hierarchy khusus agar tidak terpengaruh alignment global */
.warehouse-search-panel{padding:0;margin-top:10px;background:transparent;border:none;}
.warehouse-search-panel .search-input-wrap input{background:var(--card);padding-top:12px;padding-bottom:12px;}
.warehouse-grid{display:grid;grid-template-columns:1fr;gap:10px;text-align:left;}
.warehouse-product{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:17px;
  padding:15px;cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s;overflow:hidden;text-align:left;
}
.warehouse-product:hover{transform:translateY(-1px);border-color:var(--line);box-shadow:0 10px 25px rgba(15,25,20,.08);}
.warehouse-product::after{content:'›';position:absolute;right:14px;bottom:12px;color:var(--slate);font-size:22px;line-height:1;}
.warehouse-product-head{display:flex;align-items:center;gap:11px;padding-right:2px;}
.warehouse-product-icon{
  width:42px;height:42px;border-radius:13px;background:var(--primary-tint);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:16px;flex-shrink:0;
}
.warehouse-product-photo{width:42px;height:42px;border-radius:13px;object-fit:cover;display:none;flex-shrink:0;background:var(--primary-tint);border:1px solid var(--line-soft);}
.warehouse-product-icon.has-photo{display:none;}
.warehouse-detail-head .warehouse-product-photo{width:54px;height:54px;border-radius:16px;border-color:rgba(255,255,255,.22);}
.product-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0;}
.warehouse-product-title{flex:1;min-width:0;}
.warehouse-product-title .name{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.warehouse-product-title .meta{font-size:10.5px;color:var(--slate);margin-top:3px;}
.warehouse-variants{margin-top:13px;padding-top:11px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:7px;}
.warehouse-variant-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;}
.warehouse-variant-preview .variant-name{color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.warehouse-variant-preview .variant-qty{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);white-space:nowrap;}
.warehouse-more{font-size:10.5px;color:var(--primary);font-weight:700;margin-top:1px;}
.warehouse-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px;}
.return-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px;}
.warehouse-action{min-height:58px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;display:flex;align-items:center;gap:11px;cursor:pointer;overflow:hidden;}
.warehouse-action:hover{border-color:var(--primary);transform:translateY(-1px);}
.warehouse-action-icon{width:34px;height:34px;border-radius:10px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;font-size:16px;font-weight:800;flex:0 0 auto;}
.warehouse-action-title{display:block;font-size:12px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.warehouse-action-sub{font-size:9.5px;color:var(--slate);margin-top:3px;line-height:1.25;}
.return-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.return-card{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:13px;text-align:left;cursor:pointer;min-width:0;}
.return-card:hover{border-color:var(--primary);transform:translateY(-1px);}
.return-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.return-product-photo{width:46px;height:46px;border-radius:12px;object-fit:cover;display:none;flex:0 0 auto;background:var(--primary-tint);border:1px solid var(--line-soft);}
.return-product-preview{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);}
.return-product-preview .return-product-photo{width:56px;height:56px;border-radius:14px;}
.return-card-title{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.return-card-meta{font-size:10px;color:var(--slate);margin-top:4px;line-height:1.45;}
.return-card-qty{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;}
.return-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line-soft);margin-top:11px;padding-top:10px;}
.return-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:800;background:var(--amber-tint);color:var(--amber);}
.return-status.done{background:var(--primary-tint);color:var(--primary);}
.audit-product-line{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft);}
.audit-product-line:last-child{border-bottom:0;}
.audit-product-icon,.audit-product-photo{width:36px;height:36px;border-radius:10px;grid-column:1;grid-row:1;flex:0 0 auto;}
.audit-product-icon{display:grid;place-items:center;background:var(--primary-tint);color:var(--primary);font-weight:800;font-size:12px;}
.audit-product-photo{display:none;object-fit:cover;border:1px solid var(--line-soft);background:var(--primary-tint);}
.audit-product-icon.has-photo{display:none;}
.audit-product-copy{min-width:0;line-height:1.35;}
.audit-product-copy b{display:block;font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audit-product-copy span{display:block;font-size:10px;color:var(--slate);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audit-product-qty{font-size:11px;font-weight:800;white-space:nowrap;color:var(--ink);}
.return-status.danger{background:var(--coral-tint);color:var(--coral);}
.sheet.return-popup{padding:8px 18px 22px;background:var(--paper);}
.return-popup h3{font-size:19px;text-align:left;margin:0 42px 6px 0;padding-left:44px;min-height:36px;display:flex;align-items:center;position:relative;}
.return-popup h3::before{content:'↩';position:absolute;left:0;width:34px;height:34px;border-radius:11px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;font-size:17px;font-weight:800;}
.return-popup .help-p{margin:8px 0 14px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--card);text-align:left;line-height:1.5;}
.return-popup .section-label{margin-top:16px;margin-bottom:7px;}
.return-popup .stock-form-block{border-color:var(--line);background:var(--card);}
.return-popup .field input,.return-popup .field select,.return-popup .field textarea{min-height:44px;background:var(--paper);}
.return-popup .field textarea{resize:vertical;}
.return-popup .grid2 .stat-card{min-height:82px;}
.return-popup .btn-row{gap:9px;margin-top:14px;}
.return-popup>.btn-block,.return-popup .stock-form>.btn-block{margin-top:14px;min-height:45px;}
.return-popup .card[style*="overflow"]{border-color:var(--line);scrollbar-width:thin;}
.marketplace-filter-card{margin-bottom:0;}
.marketplace-summary-grid{gap:14px;margin:16px 0 24px;}
.marketplace-summary-grid .stat-card{min-height:104px;padding:17px 15px;display:flex;flex-direction:column;justify-content:center;}
.marketplace-summary-grid+.section-label{margin-top:4px;}
@media (min-width:768px){
  .marketplace-summary-grid{gap:16px;margin-top:18px;margin-bottom:28px;}
  .marketplace-summary-grid .stat-card{min-height:116px;padding:20px 18px;}
}

.warehouse-detail-head{
  background:linear-gradient(145deg,var(--primary-dark),var(--primary));color:#fff;border-radius:17px;padding:16px;
  display:flex;align-items:center;gap:13px;margin-bottom:14px;text-align:left;
}
.warehouse-detail-head .warehouse-product-icon{background:rgba(255,255,255,.17);color:#fff;}
.warehouse-detail-head .name{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:800;}
.warehouse-detail-head .meta{font-size:11px;opacity:.82;margin-top:3px;}
.warehouse-detail-total{margin-left:auto;text-align:right;}
.warehouse-detail-total b{display:block;font-family:'Space Grotesk',sans-serif;font-size:18px;}
.warehouse-detail-total span{font-size:9px;opacity:.78;}
.warehouse-detail-list{border:1px solid var(--line-soft);border-radius:15px;overflow:hidden;background:var(--card);}
.warehouse-detail-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line-soft);text-align:left;}
.warehouse-detail-item:last-child{border-bottom:none;}
.warehouse-detail-item .variant-name{font-size:13px;font-weight:750;color:var(--ink);}
.warehouse-detail-item .variant-cost{font-size:10.5px;color:var(--slate);margin-top:3px;}
.warehouse-detail-item .variant-stock{text-align:right;}

.stock-form{text-align:left;}
.stock-form h3{text-align:left;margin-bottom:4px;}
.stock-form-intro{font-size:11.5px;color:var(--slate);margin-bottom:16px;}
.stock-form-block{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:13px;margin-bottom:10px;}
.stock-form-block-title{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:800;margin-bottom:11px;}
.stock-form .field{margin-bottom:11px;}
.stock-form .field:last-child{margin-bottom:0;}
.stock-form .field label{text-align:left;margin-left:2px;}
.stock-form .seg button.on{background:var(--primary);border-color:var(--primary);color:#fff;}
.stock-form-actions{position:sticky;bottom:-22px;background:linear-gradient(transparent,var(--paper) 20%);padding-top:18px;padding-bottom:2px;}
.batch-line{background:var(--card);border:1px solid var(--line-soft);border-radius:15px;padding:12px;margin-bottom:9px;position:relative;}
.batch-line-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:11px;color:var(--slate);font-weight:800;}
.batch-remove{border:none;background:var(--coral-tint);color:var(--coral);width:27px;height:27px;border-radius:9px;font-weight:800;cursor:pointer;}
.audit-badge{display:inline-flex;padding:4px 8px;border-radius:100px;font-size:9px;font-weight:800;letter-spacing:.03em;}
.audit-badge.ok{background:var(--primary-tint);color:var(--primary-dark);}
.audit-badge.pending{background:var(--amber-tint);color:var(--amber);}
.audit-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px;align-items:stretch;}
.audit-filter-grid.single{grid-template-columns:minmax(0,1fr);}
.audit-filter-grid>select,.audit-date-filter{width:100%;min-width:0;height:46px;min-height:46px;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;color:var(--ink);font:inherit;}
.audit-filter-grid>select{padding:0 12px;}
.audit-date-filter{position:relative;display:flex;align-items:center;padding:0 40px 0 13px;overflow:hidden;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.audit-date-filter::after{content:'▣';position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--slate);pointer-events:none;}
.audit-date-caption{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink);pointer-events:none;}
.audit-date-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;-webkit-appearance:auto!important;appearance:auto!important;}
@media (max-width:560px){.audit-filter-grid{grid-template-columns:minmax(0,1fr);}}

@media (min-width:680px){
  .warehouse-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .warehouse-action-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .return-action-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .return-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sheet.return-popup{max-width:720px;padding:10px 22px 24px;}
}

/* APK_PERF_OPTIMIZATION_V1: visual ringan untuk Android RAM 3–4 GB */
html.native-android *,html.native-android *::before,html.native-android *::after{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html.native-android .content{scroll-behavior:auto!important;}
html.native-android .card,html.native-android .stat-card,html.native-android .balance-card,
html.native-android .sheet,html.native-android .navbar,html.native-android .fab{
  transition-duration:.01ms!important;
}

/* Generic informational note */
.info-note{display:block;margin:0 0 12px;padding:11px 13px;border-radius:13px;font-size:12px;line-height:1.5;background:#eef8f4;color:#245b48;border:1px solid #cce7dc;}

/* ===== SOURCE: 04-kas-barcode-scan.css ===== */
/* ============ KAS: HUTANG & PIUTANG ============ */
.debt-summary-grid{align-items:stretch;}
.debt-summary-card{position:relative;overflow:hidden;transition:transform .14s,border-color .14s,box-shadow .14s;}
.debt-summary-card:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 9px 22px rgba(15,25,20,.08);}
.debt-action-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;}
.debt-due-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:10px;border:1px solid var(--line-soft);border-radius:12px;background:var(--paper);font-size:11.5px;color:var(--ink-soft);text-align:left;}
.debt-due-strip b{color:var(--ink);text-align:right;font-size:11px;}
.debt-list{display:flex;flex-direction:column;gap:9px;}
.debt-item{border:1.5px solid var(--line);border-radius:15px;padding:13px;background:var(--card);text-align:left;cursor:pointer;transition:transform .14s,border-color .14s;}
.debt-item:hover{transform:translateY(-1px);border-color:var(--primary);}
.debt-item.overdue{border-color:color-mix(in srgb,var(--coral) 42%,var(--line));}
.debt-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.debt-kind{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.02em;}
.debt-kind.debt{background:var(--coral-tint);color:var(--coral);}
.debt-kind.receivable{background:var(--primary-tint);color:var(--primary-dark);}
.debt-party{font-size:13.5px;font-weight:800;color:var(--ink);margin-top:6px;}
.debt-meta{font-size:10.5px;color:var(--slate);margin-top:3px;line-height:1.45;}
.debt-amount{text-align:right;white-space:nowrap;}
.debt-amount b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--ink);}
.debt-amount span{font-size:9.5px;color:var(--slate);}
.debt-progress{height:7px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-top:11px;}
.debt-progress>div{height:100%;border-radius:inherit;background:var(--primary);}
.debt-item.debt-row .debt-progress>div{background:var(--coral);}
.debt-payment-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft);text-align:left;}
.debt-payment-row:last-child{border-bottom:none;}
.debt-payment-row .date{font-size:10px;color:var(--slate);margin-top:2px;}
.debt-paid-note{margin-top:12px;padding:11px 13px;border-radius:13px;background:var(--primary-tint);color:var(--primary-dark);border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));font-size:12px;font-weight:700;text-align:center;}
.debt-payment-row .amount{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:800;white-space:nowrap;}
@media(max-width:520px){.debt-action-grid{grid-template-columns:1fr 1fr}.debt-action-grid .btn-primary{grid-column:1/-1}.debt-due-strip{align-items:flex-start;flex-direction:column}.debt-due-strip b{text-align:left}.debt-payment-row{grid-template-columns:minmax(0,1fr) auto}.debt-payment-row .btn{grid-column:1/-1;width:100%;}}


/* ============ BARCODE FIRST ============ */
.barcode-scan-card{border:1.5px solid var(--line);background:var(--card);border-radius:18px;padding:16px;text-align:left;}
.barcode-scan-hero{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.barcode-scan-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--primary-tint);color:var(--primary);font-size:24px;font-weight:900;flex:0 0 auto;}
.barcode-scan-title{font-size:15px;font-weight:800;color:var(--ink);}
.barcode-scan-sub{font-size:11px;color:var(--slate);line-height:1.45;margin-top:3px;}
.barcode-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;}
.barcode-input{min-width:0;width:100%;border:2px solid var(--primary);background:var(--paper);border-radius:13px;padding:13px 14px;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--ink);}
.barcode-input:focus{outline:none;box-shadow:0 0 0 3px var(--primary-tint);}
.barcode-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:7px 10px;border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;overflow-wrap:anywhere;}
.barcode-badge.new{background:var(--amber-tint);color:var(--amber);}
.barcode-lock-note{margin-top:9px;padding:9px 11px;border-radius:11px;background:var(--paper);border:1px solid var(--line-soft);font-size:10.5px;line-height:1.45;color:var(--slate);}
@media(max-width:520px){.barcode-input-wrap{grid-template-columns:1fr}.barcode-input-wrap .btn{width:100%;}}
.scan-cart-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;}
.scan-cart-summary .stat-card{padding:10px 8px;min-width:0;}
.scan-cart-summary .val{font-size:17px;}
.scan-cart-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.scan-cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line-soft);border-radius:14px;background:var(--card);text-align:left;}
.scan-cart-item .name{font-size:12.5px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scan-cart-item .meta{font-size:10px;color:var(--slate);margin-top:3px;line-height:1.45;}
.scan-cart-item .qty{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--primary);white-space:nowrap;}
.scan-cart-empty{padding:18px 12px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--slate);font-size:11.5px;}
.scan-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.scan-cart-summary .stat-card.scan-cart-clickable{cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s;}
.scan-cart-summary .stat-card.scan-cart-clickable:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 8px 18px rgba(20,30,25,.08);}
.scan-cart-more{width:100%;margin-top:2px;padding:11px 13px;border:1.5px dashed var(--primary);border-radius:13px;background:var(--primary-tint);color:var(--primary-dark);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;text-align:center;}
.scan-cart-more:hover{border-style:solid;}
.scan-cart-detail-overlay{position:fixed;inset:0;z-index:100500;background:rgba(12,18,15,.62);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px);}
.scan-cart-detail-overlay.show{display:flex;}
.scan-cart-detail-card{width:min(100%,620px);max-height:min(82vh,760px);overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 70px rgba(5,12,9,.32);display:flex;flex-direction:column;}
.scan-cart-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 13px;border-bottom:1px solid var(--line-soft);background:var(--card);}
.scan-cart-detail-head h3{margin:0!important;font-size:18px!important;text-align:left!important;}
.scan-cart-detail-head p{margin:4px 0 0;font-size:10.5px;color:var(--slate);text-align:left;}
.scan-cart-detail-close{width:34px;height:34px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink-soft);font-size:20px;cursor:pointer;flex:0 0 auto;}
.scan-cart-detail-list{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px;}
.scan-cart-detail-foot{padding:12px 14px 14px;border-top:1px solid var(--line-soft);background:var(--card);}
.scan-cart-price-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.55fr);gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line-soft);}
.scan-cart-price-line:last-child{border-bottom:0;}
.scan-cart-price-copy{text-align:left;min-width:0;}
.scan-cart-price-copy b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scan-cart-price-copy span{display:block;font-size:9.5px;color:var(--slate);margin-top:3px;line-height:1.4;}
.scan-cart-price-line .field{margin:0;}
@media(max-width:520px){.scan-cart-summary{grid-template-columns:1fr 1fr}.scan-cart-summary .stat-card:last-child{grid-column:1/-1}.scan-cart-price-line{grid-template-columns:1fr}.scan-cart-actions{grid-template-columns:1fr;}}

/* ============ SCAN SAFETY / PRODUCTION FLOW ============ */
.scan-feedback-line{margin-top:9px;min-height:34px;padding:8px 11px;border-radius:11px;border:1px solid var(--line-soft);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:750;color:var(--ink-soft);text-align:left;}
.scan-feedback-line .scan-feedback-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scan-feedback-line .scan-feedback-hint{font-size:9px;color:var(--slate);font-weight:650;white-space:nowrap;}
.barcode-scan-card.scan-pulse-ok{animation:scanPulseOk .28s ease;}
.barcode-scan-card.scan-pulse-error{animation:scanPulseError .38s ease;}
@keyframes scanPulseOk{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 35%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 20%,transparent)}100%{box-shadow:none}}
@keyframes scanPulseError{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.scan-cart-item .stock-remain{display:inline-block;margin-top:2px;font-weight:800;color:var(--primary-dark);}
.scan-cart-item .stock-remain.zero{color:var(--coral);}
.scan-cart-draft-note{margin-top:10px;padding:9px 11px;border-radius:11px;border:1px dashed var(--line);background:var(--paper);font-size:10px;line-height:1.45;color:var(--slate);text-align:left;}
.scan-modal-overlay{position:fixed;inset:0;z-index:100700;background:rgba(12,18,15,.68);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px);}
.scan-modal-card{width:min(100%,600px);max-height:min(86vh,780px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 28px 70px rgba(5,12,9,.36);text-align:left;}
.scan-modal-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--amber-tint);color:var(--amber);font-size:24px;font-weight:900;margin-bottom:11px;}
.scan-modal-card h3{margin:0 0 6px!important;text-align:left!important;}
.scan-modal-card .scan-code-box{margin:12px 0;padding:11px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;overflow-wrap:anywhere;}
.scan-review-items{display:flex;flex-direction:column;gap:7px;margin:10px 0;}
.scan-review-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line-soft);border-radius:12px;background:var(--card);}
.scan-review-row b{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scan-review-row span{display:block;font-size:9.5px;color:var(--slate);margin-top:2px;}
.scan-review-row strong{font-family:'Space Grotesk',sans-serif;font-size:15px;white-space:nowrap;}
.scan-review-summary{margin-top:11px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:4px 12px;}
.scan-review-warning{margin-top:10px;padding:9px 11px;border-radius:11px;background:var(--amber-tint);color:var(--amber);font-size:10.5px;font-weight:750;line-height:1.45;}
@media(max-width:520px){.scan-feedback-line{align-items:flex-start;flex-direction:column}.scan-feedback-line .scan-feedback-hint{white-space:normal}.scan-modal-card{padding:15px}.scan-cart-actions{grid-template-columns:1fr!important;}}

/* ===== SOURCE: 05-updater-barcode.css ===== */
/* ============ GITHUB RELEASE UPDATER ============ */
.update-status-box{margin-top:12px;padding:11px 13px;border-radius:13px;border:1px solid var(--line);background:var(--paper);font-size:12px;line-height:1.5;color:var(--ink-soft);}
.update-status-box.success{background:var(--primary-tint);border-color:color-mix(in srgb,var(--primary) 28%,var(--line));color:var(--primary-dark);}
.update-status-box.error{background:var(--coral-tint);border-color:color-mix(in srgb,var(--coral) 28%,var(--line));color:var(--coral);}
.update-progress{height:10px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-top:10px;}
.update-progress>div{height:100%;width:0;background:var(--primary);border-radius:inherit;transition:width .18s ease;}
.update-release-notes{white-space:pre-wrap;text-align:left;max-height:230px;overflow:auto;border:1px solid var(--line-soft);border-radius:13px;background:var(--card);padding:12px;font-size:12px;line-height:1.55;color:var(--ink-soft);}



/* ============ BARCODE CAMERA FALLBACK (BROWSER + NATIVE) ============ */
.barcode-camera-overlay{position:fixed;inset:0;z-index:100000;background:rgba(4,10,8,.96);display:flex;align-items:center;justify-content:center;padding:18px;}
.barcode-camera-card{width:min(100%,560px);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 24px 70px rgba(0,0,0,.45);}
.barcode-camera-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;text-align:left;}
.barcode-camera-head b{font-size:15px;color:var(--ink);}
.barcode-camera-head span{display:block;font-size:10px;color:var(--slate);margin-top:2px;}
.barcode-camera-video-wrap{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:4/3;}
.barcode-camera-video{display:block;width:100%;height:100%;object-fit:cover;}
.barcode-camera-guide{position:absolute;left:9%;right:9%;top:50%;height:32%;transform:translateY(-50%);border:2px solid #fff;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.18);pointer-events:none;}
.barcode-camera-guide::after{content:'';position:absolute;left:7%;right:7%;top:50%;height:2px;background:#ff5b5b;box-shadow:0 0 8px rgba(255,91,91,.9);}
.barcode-camera-status{font-size:11px;color:var(--ink-soft);margin-top:10px;text-align:center;line-height:1.45;}
.barcode-camera-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px;}

/* ============ BARCODE MASTER MENU ============ */
.barcode-master-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:10px 0 14px;}
.barcode-master-action{min-height:76px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;cursor:pointer;text-align:center;}
.barcode-master-action:hover{border-color:var(--primary);transform:translateY(-1px);}
.barcode-master-action .ico{font-size:22px;line-height:1;}
.barcode-master-action b{font-size:11.5px;}
.barcode-master-action small{font-size:9.5px;color:var(--slate);font-weight:600;line-height:1.3;}
.barcode-master-grid{display:grid;grid-template-columns:1fr;gap:10px;text-align:left;}
.barcode-master-card{border:1.5px solid var(--line);border-radius:17px;background:var(--card);padding:14px;text-align:left;min-width:0;}
.barcode-master-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;}
.barcode-master-name{font-size:14px;font-weight:850;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barcode-master-meta{font-size:10.5px;color:var(--slate);margin-top:3px;line-height:1.45;}
.barcode-master-code{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:850;letter-spacing:.035em;color:var(--ink);margin-top:10px;overflow-wrap:anywhere;}
.barcode-master-svg{margin-top:8px;width:100%;height:54px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;background:#fff;border-radius:9px;padding:5px 7px;border:1px solid var(--line-soft);}
.barcode-master-svg svg{display:block;max-width:100%;height:42px;}
.barcode-master-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);}
.barcode-kind{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:850;background:var(--primary-tint);color:var(--primary-dark);}
.barcode-kind.existing{background:var(--amber-tint);color:var(--amber);}
.barcode-master-buttons{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.barcode-master-buttons .btn{padding:8px 10px;font-size:10.5px;min-height:34px;}
.barcode-preview-label{width:min(100%,300px);margin:10px auto;padding:12px;border:1px dashed var(--line);border-radius:14px;background:#fff;color:#111;text-align:center;}
.barcode-preview-label .pname{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barcode-preview-label .pmeta{font-size:9.5px;margin-top:2px;color:#555;}
.barcode-preview-label .pcode{font-family:monospace;font-size:10px;font-weight:800;letter-spacing:.04em;margin-top:3px;}
.barcode-preview-label svg{display:block;margin:7px auto 0;max-width:100%;height:52px;}
@media(min-width:680px){.barcode-master-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.barcode-master-actions{grid-template-columns:1fr 1fr}.barcode-master-actions .barcode-master-action:last-child{grid-column:1/-1}.barcode-master-head{grid-template-columns:1fr}.barcode-master-head>div:last-child{text-align:left!important}.barcode-master-foot{align-items:flex-start;flex-direction:column}.barcode-master-buttons{justify-content:flex-start;width:100%;}.barcode-master-buttons .btn{flex:1;}}

/* ===== SOURCE: 06-auth.css ===== */
/* ============ AUTH LOGIN PURPLE ============ */

  * { box-sizing: border-box; }

  #loginScreen {
      --bg-color-off: #050505;
      --bg-color-on: #160a24;
      --lamp-off: #2c2c2c;
      --lamp-on: #b366ff;
      --glow: rgba(179, 102, 255, 0.35);
      --form-bg-off: transparent;
      --form-bg-on: #20102f;
      --text-color: #e0e0e0;

      position: fixed;
      inset: 0;
      font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--bg-color-off);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      transition: background-color 0.5s ease;
      color: var(--text-color);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 9999;
      margin: 0;
      padding: 16px;
  }

  #loginScreen.on {
      background-color: var(--bg-color-on);
  }

  #loginScreen .wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(24px, 5vw, 50px);
      align-items: center;
      justify-content: center;
      padding: clamp(24px, 5vw, 40px) clamp(20px, 6vw, 60px);
      border-radius: 24px;
      transition: box-shadow 0.6s ease, background-color 0.6s ease, border 0.6s ease;
      border: 1px solid transparent;
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 780px;
      box-sizing: border-box;
  }

  #loginScreen.on .wrapper {
      box-shadow: 0 0 80px var(--glow), inset 0 0 20px rgba(255, 255, 255, 0.05);
      background-color: var(--form-bg-on);
      border: 1px solid rgba(179, 102, 255, 0.3);
  }

  #loginScreen .bg-light {
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.8s ease;
      z-index: 0;
      pointer-events: none;
  }

  #loginScreen.on .bg-light {
      opacity: 1;
  }

  #loginScreen .lamp-section {
      position: relative;
      width: min(200px, 42vw);
      height: min(350px, 60vw);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      transform-origin: bottom center;
  }

  #loginScreen .lampshade {
      width: 170px;
      height: 130px;
      background-color: var(--lamp-off);
      clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
      position: relative;
      z-index: 3;
      transition: background-color 0.4s ease, box-shadow 0.4s ease;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #loginScreen.on .lampshade {
      background-color: var(--lamp-on);
      box-shadow: 0 50px 100px var(--glow);
  }

  #loginScreen .lampshade-top {
      position: absolute;
      top: -15px;
      width: 60px;
      height: 15px;
      background-color: #444;
      border-radius: 10px 10px 0 0;
      z-index: 2;
      transition: background-color 0.4s;
  }

  #loginScreen.on .lampshade-top {
      background-color: #333;
  }

  #loginScreen .face {
      position: absolute;
      bottom: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
  }

  #loginScreen .eyes {
      display: flex;
      gap: 35px;
  }

  #loginScreen .eye {
      width: 18px;
      height: 6px;
      background-color: transparent;
      border-bottom: 4px solid #777;
      border-radius: 50%;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  #loginScreen.on .eye {
      height: 18px;
      background-color: #222;
      border: none;
      border-radius: 50%;
      transform: translateY(-5px);
  }

  #loginScreen .blush {
      position: absolute;
      width: 12px;
      height: 6px;
      background-color: #e0b3ff;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.4s ease;
      top: 10px;
  }

  #loginScreen .blush.left { left: -20px; }
  #loginScreen .blush.right { right: -20px; }

  #loginScreen.on .blush { opacity: 0.6; }

  #loginScreen .mouth {
      width: 10px;
      height: 3px;
      background-color: #777;
      border-radius: 5px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  #loginScreen.on .mouth {
      width: 24px;
      height: 12px;
      background-color: transparent;
      border-bottom: 4px solid #222;
      border-radius: 50%;
      transform: translateY(-2px);
  }

  #loginScreen .base-pole {
      width: 14px;
      height: 160px;
      background: linear-gradient(to right, #333, #555, #333);
      position: relative;
      z-index: 1;
  }

  #loginScreen .base-bottom {
      width: 110px;
      height: 25px;
      background: linear-gradient(to bottom, #555, #222);
      border-radius: 15px 15px 5px 5px;
      box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  }

  #loginScreen .cord-container {
      position: absolute;
      top: 120px;
      left: 110px;
      z-index: 99999;
      width: 70px;
      height: 145px;
      padding: 15px;
      cursor: pointer;
      pointer-events: auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      touch-action: none;
      user-select: none;
  }

  #loginScreen button.cord-container {
      border: 0;
      background: transparent;
      outline: none;
  }

  #loginScreen .cord {
      width: 3px;
      height: 90px;
      background-color: #666;
      transition: height 0.15s ease-out;
      position: relative;
      pointer-events: auto;
  }

  #loginScreen .cord::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: -4.5px;
      width: 12px;
      height: 16px;
      background-color: #888;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      transition: background-color 0.3s;
  }

  #loginScreen .cord:hover::after {
      background-color: #aaa;
  }

  #loginScreen .cord-container:active .cord {
      height: 115px;
  }

  #loginScreen .form-section {
      width: min(320px, 88vw);
      opacity: 0.1;
      pointer-events: none;
      transition: opacity 0.5s ease, transform 0.5s ease;
      transform: translateY(15px);
      position: relative;
      height: 480px;
      max-height: min(480px, calc(100dvh - 110px));
      overflow: hidden;
      flex-shrink: 0;
  }

  #loginScreen.on .form-section {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
  }

  #loginScreen .form-slider {
      display: flex;
      width: 300%;
      height: 100%;
      align-items: stretch;
      transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  #loginScreen .form-slider.show-login { transform: translateX(0); }
  #loginScreen .form-slider.show-signup { transform: translateX(-33.333333%); }
  #loginScreen .form-slider.show-forgot { transform: translateX(-66.666667%); }

  #loginScreen .form-box {
      width: 33.333333%;
      height: 100%;
      padding: 10px 10px 14px;
      box-sizing: border-box;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(179, 102, 255, 0.45) transparent;
  }
  #loginScreen .form-box::-webkit-scrollbar {
      width: 6px;
  }
  #loginScreen .form-box::-webkit-scrollbar-thumb {
      background: rgba(179, 102, 255, 0.45);
      border-radius: 99px;
  }

  #loginScreen .form-box h2 {
      margin-top: 0;
      margin-bottom: 25px;
      font-size: 28px;
      font-weight: 600;
      text-align: center;
      color: #fff;
      transition: color 0.4s;
  }

  #loginScreen.on .form-box h2 {
      color: var(--lamp-on);
  }

  #loginScreen .input-group {
      margin-bottom: 18px;
      position: relative;
  }

  #loginScreen .input-group input {
      width: 100%;
      padding: 14px 15px;
      background-color: rgba(0, 0, 0, 0.3);
      border: 1px solid #444;
      border-radius: 12px;
      color: white;
      font-family: inherit;
      font-size: 14px;
      box-sizing: border-box;
      outline: none;
      transition: all 0.3s ease;
  }

  #loginScreen .input-group label {
      position: absolute;
      left: 15px;
      top: 14px;
      color: #888;
      font-size: 14px;
      transition: all 0.3s ease;
      pointer-events: none;
  }

  #loginScreen .input-group input:focus,
  #loginScreen .input-group input:not(:placeholder-shown) {
      border-color: var(--lamp-on);
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 10px rgba(179, 102, 255, 0.2);
  }

  #loginScreen .input-group input:focus + label,
  #loginScreen .input-group input:not(:placeholder-shown) + label {
      top: -9px;
      left: 10px;
      font-size: 12px;
      color: var(--lamp-on);
      background-color: var(--form-bg-on);
      padding: 0 5px;
      border-radius: 4px;
  }

  #loginScreen button.submit-btn {
      width: 100%;
      padding: 14px;
      margin-top: 10px;
      background-color: #444;
      color: #888;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  #loginScreen.on button.submit-btn {
      background-color: var(--lamp-on);
      color: #20102f;
      box-shadow: 0 5px 15px rgba(179, 102, 255, 0.4);
  }

  #loginScreen.on button.submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(179, 102, 255, 0.5);
      filter: brightness(1.1);
  }

  #loginScreen button.submit-btn:active {
      transform: scale(0.96);
  }

  #loginScreen .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      font-size: 13px;
  }

  #loginScreen .form-footer.center {
      justify-content: center;
  }

  #loginScreen .form-link {
      color: #888;
      text-decoration: none;
      transition: color 0.3s ease;
      cursor: pointer;
  }

  #loginScreen.on .form-link:hover {
      color: var(--lamp-on);
      text-decoration: underline;
  }

  #loginScreen .instruction {
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      color: #666;
      font-size: 14px;
      letter-spacing: 1px;
      white-space: nowrap;
      animation: login-bounce 2s infinite;
  }

  #loginScreen.on .instruction {
      display: none;
  }

  #loginScreen .auth-message {
      min-height: 18px;
      margin-top: 12px;
      font-size: 12px;
      text-align: center;
      color: #aaa;
  }

  #loginScreen .auth-message.error {
      color: #ff6b9e;
  }

  #loginScreen .auth-message.success {
      color: #e0b3ff;
  }

  #loginScreen .reset-step {
      display: none;
  }

  #loginScreen .reset-step.active {
      display: block;
  }

  #loginScreen .step-hint {
      font-size: 12px;
      color: #999;
      margin-bottom: 16px;
      text-align: center;
      line-height: 1.5;
  }

  @keyframes login-bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
      40% { transform: translateY(-10px) translateX(-50%); }
      60% { transform: translateY(-5px) translateX(-50%); }
  }

  /* Tablet */
  @media (max-width: 900px) and (min-width: 601px) {
      #loginScreen .wrapper {
          padding: 32px 36px;
          gap: 36px;
      }
      #loginScreen .form-box h2 {
          font-size: 25px;
      }
  }

  /* Mobile phones */
  @media (max-width: 600px) {
      #loginScreen .wrapper {
          padding: 28px 18px;
          gap: 18px;
          flex-direction: column;
      }
      #loginScreen .lamp-section {
          width: min(170px, 48vw);
          height: min(300px, 66vw);
      }
      #loginScreen .form-section {
          width: min(320px, 92vw);
          height: 500px;
          max-height: min(500px, calc(100dvh - 80px));
      }
      #loginScreen .form-box h2 {
          font-size: 24px;
      }
      #loginScreen .instruction {
          top: -34px;
          font-size: 12px;
      }
  }

  /* Small phones */
  @media (max-width: 360px) {
      #loginScreen .wrapper {
          padding: 22px 12px;
          gap: 14px;
      }
      #loginScreen .lamp-section {
          width: min(150px, 50vw);
          height: min(270px, 70vw);
      }
      #loginScreen .form-section {
          height: 520px;
          max-height: min(520px, calc(100dvh - 72px));
      }
      #loginScreen .input-group input {
          padding: 12px 13px;
          font-size: 13px;
      }
      #loginScreen button.submit-btn {
          padding: 12px;
          font-size: 15px;
      }
  }



#loginScreen.on .form-link{pointer-events:auto;position:relative;z-index:20;touch-action:manipulation;user-select:none;}

/* Integrasi login ke Inventori Ellin Hijab */
#loginScreen{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));}
#loginScreen[aria-hidden="true"]{display:none!important;}
#loginScreen .auth-account-note{font-size:11px;color:#9b8baa;text-align:center;margin-top:10px;line-height:1.5;}