/* ============================================================
   Stock Take PL08 — PWA input app (ultra-premium, mobile-first)
   ============================================================ */
:root{
  --bg0:#05070f; --bg1:#0a0f1e; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10); --stroke2:rgba(255,255,255,.18);
  --ink:#eaf0ff; --ink2:#aeb9d6; --muted:#6f7ba0;
  --c1:#22d3ee; --c2:#6366f1; --c3:#a855f7; --c4:#ec4899;
  --ok:#34d399; --short:#fbbf24; --over:#38bdf8; --kurang:#fb7185;
  --grad:linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
  --glow:0 18px 50px -18px rgba(80,80,220,.5);
  --radius:22px; --r-sm:15px; --r-xs:11px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --font:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-theme="light"]{
  --bg0:#eef2fb; --bg1:#e7edfb; --panel:rgba(255,255,255,.78); --panel2:rgba(255,255,255,.94);
  --stroke:rgba(15,23,42,.09); --stroke2:rgba(15,23,42,.16);
  --ink:#0d1424; --ink2:#41506f; --muted:#7683a3; --glow:0 14px 40px -18px rgba(80,80,220,.3);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; height:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg0); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overscroll-behavior-y:contain;
  padding-top:var(--safe-t);
}
.aurora{position:fixed; inset:-25%; z-index:-2; filter:blur(70px); opacity:.6; pointer-events:none;
  background:
    radial-gradient(38% 38% at 12% 14%, rgba(34,211,238,.4), transparent 60%),
    radial-gradient(42% 42% at 88% 12%, rgba(168,85,247,.36), transparent 60%),
    radial-gradient(46% 46% at 78% 88%, rgba(99,102,241,.34), transparent 60%);
  animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-4%,0) scale(1.1)}}

/* ---- header ---- */
.hdr{position:sticky; top:0; z-index:30; padding:calc(12px + var(--safe-t)) 16px 12px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg0) 88%, transparent), transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hdr-row{display:flex; align-items:center; gap:11px}
.logo{width:40px; height:40px; border-radius:12px; flex:0 0 auto; position:relative; overflow:hidden; background:var(--grad); box-shadow:var(--glow)}
.logo::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 45%)}
.logo svg{position:relative; z-index:1; width:100%; height:100%}
.hdr .tt{flex:1; min-width:0}
.hdr .tt b{font-size:15px; font-weight:800; letter-spacing:.2px; display:block}
.hdr .tt small{font-size:11px; color:var(--ink2); font-weight:600; letter-spacing:.4px}
.status{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800;
  border:1px solid var(--stroke); background:var(--panel); white-space:nowrap}
.status .d{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok)}
.status.off .d{background:var(--kurang); box-shadow:0 0 8px var(--kurang)}
.status.off{color:var(--kurang)}
.iconbtn{width:38px; height:38px; border-radius:12px; border:1px solid var(--stroke); background:var(--panel); color:var(--ink);
  font-size:16px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; transition:.15s}
.iconbtn:active{transform:scale(.92)}
.who{display:flex; align-items:center; gap:8px; margin-top:9px; font-size:12px; color:var(--ink2)}
.who .badge{padding:5px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--stroke); font-weight:700}
.who .q{margin-left:auto; display:flex; gap:6px}
.who .q b{color:var(--ink)}

.wrap{max-width:560px; margin:0 auto; padding:6px 16px calc(30px + var(--safe-b))}

/* ---- cards & controls ---- */
.card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; margin:14px 0;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--glow)}
.card.tap{opacity:0; transform:translateY(16px); animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
label{display:block; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; margin:14px 0 7px}
label:first-child{margin-top:0}
input,textarea{width:100%; border:1.5px solid var(--stroke); border-radius:14px; padding:14px 15px; font-size:16px; font-family:inherit;
  background:var(--panel2); color:var(--ink); outline:none; transition:.18s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{border-color:var(--c2); box-shadow:0 0 0 4px rgba(99,102,241,.16)}
textarea{min-height:80px; resize:vertical; line-height:1.5}
.big-input{font-size:34px; font-weight:800; text-align:center; letter-spacing:-.5px; padding:16px}

.btn{position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:0; border-radius:16px;
  padding:16px; font-size:16px; font-weight:800; color:#04121a; background:var(--grad); cursor:pointer; letter-spacing:.2px;
  box-shadow:0 12px 30px -12px rgba(99,102,241,.7); transition:.15s; overflow:hidden}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%)}
.btn:not([disabled]):hover::after{animation:sheen 1.1s ease}
@keyframes sheen{to{transform:translateX(120%)}}
.btn:active{transform:translateY(2px) scale(.995)}
.btn[disabled]{opacity:.55; box-shadow:none}
.btn.sec{background:var(--panel2); color:var(--ink); border:1px solid var(--stroke2); box-shadow:none}
.btn.ok{background:linear-gradient(135deg,var(--ok),#22d3ee)}
.btn.ghost{background:transparent; color:var(--ink2); border:1px solid var(--stroke); box-shadow:none}
.btn.lg{padding:18px; font-size:17px; border-radius:18px}
.row{display:flex; gap:11px}
.row>*{flex:1}
.hint{font-size:12px; color:var(--muted); line-height:1.5}
.center{text-align:center}
.spin{width:18px; height:18px; border:2.5px solid rgba(0,0,0,.25); border-top-color:currentColor; border-radius:50%;
  display:inline-block; animation:sp .7s linear infinite}
[data-theme="dark"] .spin, :root:not([data-theme]) .btn .spin{border-color:rgba(0,0,0,.3); border-top-color:#04121a}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- login hero ---- */
.hero{text-align:center; padding:6px 0 4px}
.hero .mark{width:74px; height:74px; margin:0 auto 12px; border-radius:22px; background:var(--grad); position:relative; overflow:hidden; box-shadow:var(--glow)}
.hero .mark::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), transparent 48%)}
.hero .mark svg{position:relative; z-index:1; width:100%; height:100%}
.hero h1{font-size:24px; font-weight:900; margin:0 0 4px; letter-spacing:-.4px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:0; color:var(--ink2); font-size:13px}

/* ---- detail material ---- */
.mat-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:4px}
.mat-head .mh{flex:1; min-width:0}
.mat-head .mh .m{font-size:20px; font-weight:900; letter-spacing:-.3px}
.mat-head .mh .d{font-size:13px; color:var(--ink2); margin-top:2px}
.tag{display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; background:var(--panel2); border:1px solid var(--stroke); color:var(--ink2)}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--stroke); font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{font-weight:700; text-align:right}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:14px 0}
.stat{border-radius:16px; padding:14px; text-align:center; background:var(--panel2); border:1px solid var(--stroke)}
.stat .l{font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.stat .v{font-size:30px; font-weight:900; letter-spacing:-1px; margin-top:5px; font-variant-numeric:tabular-nums}
.stat.hl{background:var(--grad); color:#04121a; border-color:transparent}
.stat.hl .l{color:rgba(4,18,26,.75)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800}
.pill::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.pill.ok{background:rgba(52,211,153,.16); color:var(--ok)}
.pill.short{background:rgba(251,191,36,.18); color:var(--short)}
.pill.over{background:rgba(56,189,248,.18); color:var(--over)}
.pill.kurang{background:rgba(251,113,133,.18); color:var(--kurang)}
.statusbar{text-align:center; margin:8px 0 4px}
.callout{margin-top:12px; padding:12px 14px; border-radius:14px; font-size:12.5px; line-height:1.55;
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.28); color:var(--short)}
.callout.dev{background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.3); color:var(--c3)}

/* ---- photo ---- */
.photo-btn{display:flex; align-items:center; justify-content:center; gap:9px; padding:16px; border-radius:16px;
  border:1.5px dashed var(--stroke2); background:var(--panel2); color:var(--ink2); font-weight:700; font-size:14px; cursor:pointer}
.thumb{width:100%; max-height:230px; object-fit:cover; border-radius:16px; border:1px solid var(--stroke); margin-top:10px; display:block}
.file-hide{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---- picker ---- */
.pick{padding:14px; border:1px solid var(--stroke); border-radius:15px; margin:9px 0; background:var(--panel2); cursor:pointer; transition:.15s}
.pick:active{transform:scale(.98); border-color:var(--c2)}
.pick b{font-size:15px; font-weight:800}
.pick .d{font-size:12.5px; color:var(--ink2); margin-top:2px}
.pick .p{font-size:11px; color:var(--muted); margin-top:3px}

/* ---- history ---- */
.hist-item{display:flex; align-items:center; gap:11px; padding:12px; border-radius:15px; background:var(--panel2); border:1px solid var(--stroke); margin:9px 0;
  opacity:0; transform:translateX(-10px); animation:slidein .4s forwards}
@keyframes slidein{to{opacity:1; transform:none}}
.hist-item .ic{width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:15px}
.hist-item .ic.ok{background:rgba(52,211,153,.16); color:var(--ok)}
.hist-item .ic.short{background:rgba(251,191,36,.18); color:var(--short)}
.hist-item .ic.over{background:rgba(56,189,248,.18); color:var(--over)}
.hist-item .ic.kurang{background:rgba(251,113,133,.18); color:var(--kurang)}
.hist-item .m{flex:1; min-width:0}
.hist-item .m b{font-size:13.5px; font-weight:800; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hist-item .m small{font-size:11.5px; color:var(--muted)}
.hist-item .sync{font-size:15px; flex:0 0 auto}
.sync.pending{opacity:.6; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

.sec-title{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink2); margin:4px 2px 2px; letter-spacing:.3px}
.sec-title .n{margin-left:auto; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--panel2); border:1px solid var(--stroke)}

/* ---- scanner overlay ---- */
.scan-ov{position:fixed; inset:0; z-index:80; background:#000; display:none}
.scan-ov.on{display:block}
.scan-ov video{width:100%; height:100%; object-fit:cover}
.scan-frame{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.scan-frame .box{width:74%; max-width:320px; aspect-ratio:1.5/1; border-radius:20px; position:relative;
  box-shadow:0 0 0 4000px rgba(0,0,0,.55)}
.scan-frame .box .cn{position:absolute; width:30px; height:30px; border:3px solid var(--c1)}
.scan-frame .box .cn.tl{top:-2px; left:-2px; border-right:0; border-bottom:0; border-radius:14px 0 0 0}
.scan-frame .box .cn.tr{top:-2px; right:-2px; border-left:0; border-bottom:0; border-radius:0 14px 0 0}
.scan-frame .box .cn.bl{bottom:-2px; left:-2px; border-right:0; border-top:0; border-radius:0 0 0 14px}
.scan-frame .box .cn.br{bottom:-2px; right:-2px; border-left:0; border-top:0; border-radius:0 0 14px 0}
.scan-frame .box .laser{position:absolute; left:8%; right:8%; height:2.5px; top:50%; background:var(--c1); box-shadow:0 0 14px var(--c1); animation:laser 2.4s ease-in-out infinite}
@keyframes laser{0%,100%{top:14%}50%{top:86%}}
.scan-top{position:absolute; top:calc(14px + var(--safe-t)); left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 16px}
.scan-top .t{color:#fff; font-weight:800; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.scan-close{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; border:0; font-size:20px; backdrop-filter:blur(8px)}
.scan-hint{position:absolute; bottom:calc(30px + var(--safe-b)); left:0; right:0; text-align:center; color:#fff; font-size:13px; opacity:.9; text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:calc(26px + var(--safe-b)); transform:translate(-50%,20px); z-index:90;
  background:var(--bg1); color:var(--ink); border:1px solid var(--stroke2); padding:13px 18px; border-radius:15px; font-size:14px; font-weight:600;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.6); opacity:0; transition:.28s cubic-bezier(.2,.8,.2,1); max-width:90%; display:flex; align-items:center; gap:9px}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.ok{border-color:rgba(52,211,153,.4)} .toast.ok .i{color:var(--ok)}
.toast.bad{border-color:rgba(251,113,133,.4)} .toast.bad .i{color:var(--kurang)}
.toast .i{font-size:17px}

/* ---- setup url ---- */
.setup{margin-top:12px; padding:13px; border-radius:14px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.25)}
.setup .st{font-size:12.5px; font-weight:800; color:var(--short); margin-bottom:8px}
.setup input{font-size:13px; padding:11px}

.hide{display:none !important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}