.adm{position:fixed; inset:0; z-index:200; background:var(--bg); color:var(--fg); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px);}
.adm[hidden]{display:none !important;}
.adm-top{display:flex; align-items:center; gap:10px; height:56px; padding-inline:var(--gut); border-bottom:1px solid var(--line); flex:0 0 auto;}
.adm-top b{font-family:var(--disp); text-transform:var(--disp-case); font-size:20px; flex:1; min-width:0;}
.peekback{position:fixed; right:var(--gut); bottom:calc(78px + env(safe-area-inset-bottom,0px)); z-index:190; box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
.peekback[hidden]{display:none;}
@media (min-width:900px){ .peekback{bottom:24px;} }
.adm-state{font-size:12px; font-weight:800; color:var(--accent); white-space:nowrap;}
.adm-tabs{display:flex; gap:6px; overflow-x:auto; padding:10px var(--gut); border-bottom:1px solid var(--line); flex:0 0 auto; scrollbar-width:none;}
.adm-tabs::-webkit-scrollbar{display:none;}
.adm-tabs button{flex:0 0 auto; min-height:36px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line2); background:none; font-weight:800; font-size:13px; color:var(--muted);}
.adm-tabs button.on{background:var(--fg); border-color:var(--fg); color:var(--bg);}
.adm-body{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.adm-in{max-width:760px; margin-inline:auto; padding:18px var(--gut) 28px;}
.adm-foot{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:var(--card);}
.adm-foot span{flex:1; font-size:12.5px; color:var(--muted); min-width:0;}
.adm-foot[hidden]{display:none;}

.ag{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:16px; margin-bottom:14px;}
.ag > h3{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.ag-item{border-top:1px dashed var(--line2); padding-top:12px; margin-top:12px;}
.ag-item:first-of-type{border-top:0; padding-top:0; margin-top:0;}
.ag-row{display:flex; gap:6px; justify-content:flex-end; margin-bottom:8px;}
.af{display:block; margin-bottom:10px;}
.af > span{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px;}
.ai{width:100%; min-height:44px; padding:0 12px; border-radius:var(--r-sm); border:1.5px solid var(--line2); background:var(--bg); font-size:16px;}
textarea.ai{min-height:78px; padding:10px 12px; resize:vertical; line-height:1.45;}
.ai:focus{outline:none; border-color:var(--accent);}
input[type=color].ai{padding:4px; height:44px;}
.bi{display:grid; gap:8px;}
.bi label{position:relative; display:block;}
.bi label i{position:absolute; top:50%; right:10px; transform:translateY(-50%); font-style:normal; font-size:10.5px; font-weight:800; color:var(--muted); pointer-events:none;}
.bi label.tall i{top:14px; transform:none;}
.bi .ai{padding-right:36px;}
@media (min-width:640px){ .bi{grid-template-columns:1fr 1fr;} .g2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;} .g3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px;} }
.sw{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-weight:700; font-size:14px; border-bottom:1px solid var(--line);}
.sw:last-child{border-bottom:0;}
.sw input{appearance:none; -webkit-appearance:none; width:44px; height:26px; border-radius:999px; background:var(--line2); position:relative; flex:0 0 auto; transition:background-color .15s; cursor:pointer;}
.sw input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s;}
.sw input:checked{background:var(--accent2);}
.sw input:checked::after{transform:translateX(18px);}
.mini{min-height:32px; padding:0 11px; border-radius:8px; border:1px solid var(--line2); background:var(--bg); font-size:12.5px; font-weight:800;}
.mini.warn{color:#c22; border-color:color-mix(in srgb, #c22 40%, var(--line2));}
.addbtn{width:100%; min-height:42px; border:1.5px dashed var(--line2); border-radius:var(--r-sm); background:none; font-weight:800; font-size:13.5px; color:var(--muted); margin-top:12px;}
.media{display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:center; margin-bottom:12px;}
.media .th{width:88px; height:66px; border-radius:8px; background:var(--raise); overflow:hidden; display:grid; place-items:center; font-size:11px; color:var(--muted);}
.media .th img,.media .th video{width:100%; height:100%; object-fit:cover;}
.media b{display:block; font-size:14px;}
.media small{display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}
.media .acts{display:flex; flex-wrap:wrap; gap:6px;}
.upl{position:relative; overflow:hidden;}
.upl input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.galed{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:8px;}
.galed div{position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--raise);}
.galed img{width:100%; height:100%; object-fit:cover;}
.galed button{position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center;}
.galed button .ic{width:14px; height:14px;}
.presets{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
@media (min-width:640px){ .presets{grid-template-columns:repeat(4,1fr);} }
.presets button{border:1.5px solid var(--line2); border-radius:var(--r-sm); background:var(--bg); padding:10px; text-align:left; font-weight:800; font-size:13px;}
.presets button.on{border-color:var(--accent);}
.presets span{display:flex; gap:4px; margin-bottom:8px;}
.presets span i{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.1);}

.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
@media (min-width:640px){ .kpis{grid-template-columns:repeat(4,1fr);} }
.kpis div{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px;}
.kpis small{display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.kpis b{font-family:var(--mono); font-size:20px;}
.otools{display:grid; gap:8px; margin-bottom:10px;}
@media (min-width:640px){ .otools{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.stchips{display:flex; gap:6px; overflow-x:auto; margin-bottom:12px; scrollbar-width:none;}
.stchips button{flex:0 0 auto; min-height:34px; padding:0 12px; border-radius:999px; border:1.5px solid var(--line2); background:none; font-size:12.5px; font-weight:800; color:var(--muted);}
.stchips button.on{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.ord{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; margin-bottom:8px; display:grid; gap:6px;}
.ord-h{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.ord-h b{font-size:15px; min-width:0; overflow-wrap:anywhere;}
.ord-h .mono{font-size:12.5px; font-weight:700; color:var(--muted); flex:0 0 auto;}
.ord p{font-size:13px; color:var(--muted); overflow-wrap:anywhere;}
.ord p a{color:var(--fg);}
.ord-f{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px;}
.ord-f .mono{font-weight:700;}
.ord select{min-height:36px; border-radius:8px; border:1.5px solid var(--line2); background:var(--bg); font-weight:800; font-size:13px; padding:0 8px;}
.st-baru{color:var(--accent);} .st-dibayar{color:var(--accent2);} .st-batal{color:var(--muted);}
.empty{text-align:center; color:var(--muted); padding:36px 10px; font-size:14px;}
.subl{border-left:3px solid var(--tint); padding-left:12px; margin-top:6px;}
@media (min-width:640px){ .subl .g3{grid-template-columns:130px 1fr 1.4fr;} }
.hint2{display:block; font-size:12px; color:var(--muted); margin:-2px 0 8px;}
.ord .grp{color:var(--accent); font-weight:700;}
.guide{font-size:14.5px; line-height:1.6;}
.guide b{color:var(--accent);}
.kpi-warn{border-color:#9db4ea !important; background:#eef3ff !important;}
.kpi-warn b{color:#1d3f8f;}
.ord-a{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.mini.ok{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.kitok2{color:var(--accent);}
.st-semak{color:#1d3f8f;}
.rcpt{position:absolute; inset:0; z-index:5; background:rgba(0,0,0,.5); overflow-y:auto; padding:16px;}
.rc-in{background:var(--card); border-radius:var(--r); padding:16px; max-width:520px; margin:0 auto; display:grid; gap:10px; font-size:14px;}
.rc-h{display:flex; justify-content:space-between; align-items:center;}
.rc-in img{width:100%; border-radius:8px; background:#fff;}
.rc-a{display:flex; justify-content:flex-end; gap:8px;}
#scanVid{width:100%; max-height:320px; object-fit:cover; border-radius:var(--r-sm); background:#000; margin-bottom:10px;}
.scan-stat{font-weight:800; color:var(--accent); margin-bottom:10px;}
.scan-ok{border-left:4px solid var(--accent);}
.scan-warn{border-left:4px solid #d08a00; background:#fff8e6;}
.scan-done{border-left:4px solid #888; opacity:.85;}
.scan-st{font-weight:800 !important; color:var(--fg) !important;}
.upl2{position:relative; overflow:hidden; cursor:pointer;}
.upl2 input{position:absolute; inset:0; opacity:0; cursor:pointer;}
@media (max-width:420px){ .adm-top b{font-size:16px;} .adm-top .btn-sm{padding:0 10px;} }
