*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,Arial,sans-serif;background:#f4f5f7;color:#1c1f24}
header{background:#1f3a5f;color:#fff;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
nav{display:flex;flex-wrap:wrap;gap:6px 14px}nav a{color:#dbe7f7;text-decoration:none}nav a:hover{color:#fff}
main{max-width:1000px;margin:0 auto;padding:14px}
.card{background:#fff;border-radius:8px;padding:14px;margin-bottom:14px;box-shadow:0 1px 2px #0002}
h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:0 0 10px}
input,select,button,textarea{font:inherit;padding:9px 10px;border:1px solid #c5cbd3;border-radius:6px;background:#fff;max-width:100%}
button,.btn{background:#1f3a5f;color:#fff;border:0;cursor:pointer;text-decoration:none;display:inline-block;padding:9px 14px;border-radius:6px}
button.sec,.btn.sec{background:#e3e7ec;color:#1c1f24}button.dgr{background:#b3261e}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.row>*{flex:1 1 140px}.row .fit{flex:0 0 auto}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:8px;border-bottom:1px solid #e6e9ee;text-align:left;vertical-align:top}
th{background:#eef1f5;font-size:13px}.scroll{overflow-x:auto}
.b{padding:2px 8px;border-radius:10px;font-size:12px;white-space:nowrap}
.b-aktif{background:#d9f2e0;color:#136c2e}.b-belum_verifikasi{background:#fff1cc;color:#8a5a00}
.b-keluar{background:#e6e6e6;color:#444}.b-perbaikan{background:#dbe8ff;color:#1b4a9c}
.stat{display:flex;flex-wrap:wrap;gap:8px}.stat a{flex:1 1 120px;text-decoration:none;color:inherit;background:#fff;padding:10px;border-radius:8px;box-shadow:0 1px 2px #0002}
.stat b{display:block;font-size:22px}.msg{padding:10px;border-radius:6px;margin-bottom:10px}
.ok{background:#d9f2e0}.err{background:#fde0de}.warn{background:#fff1cc}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 10px}.kv dt{color:#5b6472}.kv dd{margin:0}
.pager{display:flex;gap:8px;align-items:center;margin-top:10px}
#reader{width:100%;max-width:420px;margin:0 auto 10px}

/* ===== Mode mudah (HP, satu tangan) ===== */
input,select,button,textarea{font-size:17px;padding:13px 12px}
.big{width:100%;font-size:19px;padding:16px;border-radius:12px;font-weight:600}
.b-red_tag{background:#fde0de;color:#b3261e}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:17px}.who{font-size:14px}.who a{color:#dbe7f7}
.backlink{display:inline-block;padding:10px 4px;font-size:17px;color:#1f3a5f;text-decoration:none;font-weight:600}
.hello{font-size:18px;margin:6px 2px}.foot{text-align:center;margin-top:24px}
.tiles{display:grid;gap:14px;margin-top:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:#fff;color:#1c1f24;text-decoration:none;border-radius:18px;padding:22px 14px;min-height:150px;box-shadow:0 2px 6px #0002;border:2px solid transparent}
.tile:active{border-color:#1f3a5f;transform:scale(.98)}
.tile .ic{font-size:64px;line-height:1}.tile .tt{font-size:22px;font-weight:700}.tile small{color:#5b6472;font-size:14px}
.tiles.one .tile{min-height:55vh}
@media(min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
.hint{color:#5b6472;margin:0 0 10px;font-size:16px}.or{text-align:center;color:#5b6472;margin:12px 0 8px}
.machine .noreg{font-size:30px;font-weight:800;letter-spacing:1px;margin:0}.machine h2{font-size:19px;margin:2px 0 10px}
.bar{position:sticky;bottom:0;display:flex;gap:10px;padding:10px 0 12px;background:linear-gradient(rgba(244,245,247,0),#f4f5f7 30%)}
.bar .big{flex:1}.bar .big:first-child{flex:2}
.cb{position:relative}.cb input{width:100%}
.cb-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid #c5cbd3;border-radius:10px;max-height:45vh;overflow-y:auto;box-shadow:0 6px 18px #0003}
.cb-it{padding:15px 14px;border-bottom:1px solid #eef1f5;font-size:18px}.cb-it:active{background:#e3ecf8}.cb-it.red{color:#b3261e;font-weight:700}
.cb-empty{padding:14px;color:#5b6472}
.lab{display:block;font-weight:700;margin:2px 0 8px;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}.lbl2{width:100%;font-size:14px;color:#5b6472}
.chip{background:#e3ecf8;color:#1f3a5f;border-radius:20px;padding:10px 14px;font-size:16px}
.done{position:fixed;inset:0;background:#136c2e;color:#fff;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.done .chk{font-size:88px;line-height:1}.done .big{background:#fff;color:#136c2e;max-width:360px}
.done .dm{font-size:22px;font-weight:700}
.act{margin-bottom:10px}.act.on{outline:4px solid #f5a524}.act.redbtn{background:#b3261e}
.rb{display:flex;width:100%;text-align:left;justify-content:space-between;align-items:center;gap:8px;background:#fff;color:#1c1f24;border:1px solid #e0e4ea;margin-bottom:8px;padding:12px;border-radius:10px;font-size:16px}

/* ===== Halaman admin: kartu ringkas, tanpa geser ke kanan ===== */
.it{border:1px solid #e6e9ee;border-radius:10px;padding:10px;margin:0 0 10px;background:#fff}
.it.off{opacity:.6;background:#f3f4f6}
.it .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:6px}
.it .top b{font-size:16px}.it .top small{color:#5b6472;font-size:13px}.it .nm{color:#3a4350;margin-bottom:8px;font-size:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.it input,.it select,.it button{font-size:15px;padding:9px 10px;min-width:0;width:100%}
.it .acts{display:flex;gap:8px;align-items:center}.it .acts button{width:auto;flex:1;white-space:nowrap;padding:9px 4px;font-size:14px}
.it .acts label{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;flex:none}
.it .acts input[type=checkbox]{width:20px;height:20px;padding:0;flex:none}
details>summary{cursor:pointer;font-weight:700;padding:11px 12px;background:#e3ecf8;color:#1f3a5f;border-radius:8px;margin-bottom:10px;list-style:none}
details>summary::-webkit-details-marker{display:none}

/* ===== Antrean offline ===== */
.qb{background:#fff1cc;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:15px}
.qb.e{background:#fde0de}.qb button{padding:8px 12px;font-size:15px;margin-left:6px}
.done.q{background:#b26a00}.done .sub{font-size:17px;opacity:.95}
.cb-it.new{background:#e8f6ec;color:#136c2e;font-weight:600}

/* ===== Pilih mesin untuk cetak label ===== */
.rlist{max-height:55vh;overflow-y:auto;border:1px solid #e6e9ee;border-radius:10px;background:#fff}
.rrow{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-bottom:1px solid #eef1f5;font-size:15px;cursor:pointer}
.rrow input{width:22px;height:22px;flex:none;margin-top:2px;padding:0}
.rrow b{font-size:16px}.rrow small{display:block;color:#5b6472}
.sel-chip{display:inline-flex;align-items:center;gap:4px;background:#e3ecf8;color:#1f3a5f;border-radius:16px;padding:4px 6px 4px 10px;margin:0 6px 6px 0;font-size:14px}
.sel-chip button{padding:0 6px;background:none;color:#1f3a5f;font-size:16px;line-height:1}

/* ===== Formulir mesin ===== */
label.f{display:block;font-size:14px;color:#5b6472;margin:10px 0 4px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
form.frm input{width:100%}
details.card>summary{margin-bottom:6px}

/* ===== Admin: tab, daftar, lembar ubah ===== */
.adm{max-width:640px;margin:0 auto}
.ad-tabs{display:flex;gap:4px;padding:6px 0 10px}
.ad-tab{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;background:#e3e7ec;color:#3a4350;font-weight:600;font-size:15px;text-decoration:none}
.ad-tab.on{background:#1f3a5f;color:#fff}
.ad-ok,.ad-err{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 10px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px}
.ad-ok{background:#d9f2e0;color:#0f5a26}.ad-err{background:#fde0de;color:#8a1a14}
.ad-bar{display:flex;gap:8px;margin:4px 0 10px}
.ad-bar input{flex:1;min-width:0;height:44px;border:1px solid #c5cbd3;border-radius:10px;padding:0 12px;font-size:16px;background:#fff}
.ad-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:10px;background:#1f3a5f;color:#fff;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.ad-warn{display:block;min-height:44px;margin:0 0 4px;padding:12px;border-radius:10px;background:#fff1cc;color:#7a4a00;font-weight:600;font-size:14px;text-decoration:none}
.ad-gh{padding:16px 4px 6px;font-weight:700;font-size:12px;letter-spacing:.06em;color:#1f3a5f}
.ad-gh.o{color:#7a4a00}
.ad-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:0 16px;background:#fff;border-bottom:1px solid #e6e9ee;color:#1c1f24;text-decoration:none;font-weight:600;font-size:16px}
.ad-row small{display:block;font-weight:400;font-size:13px;color:#5b6472}
.ad-row.off{opacity:.6}
.ad-row.new{background:#d9f2e0}.ad-row.new small{color:#0f5a26}
.ad-tag{padding:2px 8px;border-radius:10px;background:#fde0de;color:#8a1a14;font-size:12px;font-weight:700}
.ad-ov{position:fixed;inset:0;background:rgba(28,31,36,.55);z-index:40}
.ad-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:640px;margin:0 auto;max-height:92vh;overflow-y:auto;background:#fff;border-radius:20px 20px 0 0;padding:12px 20px 24px}
.ad-handle{width:40px;height:4px;border-radius:2px;background:#c5cbd3;margin:0 auto 14px}
.ad-st{font-weight:700;font-size:20px}.ad-ss{font-size:14px;color:#5b6472;margin-top:2px}
.ad-lab{display:block;margin:14px 0 6px;font-weight:600;font-size:14px;color:#3a4350}
.ad-inp{display:block;width:100%;height:48px;border:1px solid #c5cbd3;border-radius:10px;padding:0 12px;font-size:16px;background:#fff}
.ad-hint{font-size:13px;color:#5b6472;margin-top:6px}
.ad-chk{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:6px;font-size:15px}
.ad-chk input{width:22px;height:22px;padding:0}
.ad-note{margin-top:12px;padding:12px;border-radius:10px;background:#e3ecf8;color:#1f3a5f;font-size:14px}
.ad-save{display:block;width:100%;height:52px;margin-top:16px;padding:0;border:0;border-radius:12px;background:#1f3a5f;color:#fff;font-weight:700;font-size:17px}
.ad-danger{display:block;width:100%;height:48px;margin-top:6px;padding:0;border:0;background:#fff;color:#8a1a14;font-weight:600;font-size:15px}
.ad-close{display:block;text-align:center;padding:12px;color:#5b6472;text-decoration:none}

.dm{max-width:960px;margin:0 auto}
.dm-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch}
.dm-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:20px;background:#e3e7ec;color:#3a4350;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.dm-chip b{font-size:13px;opacity:.8}
.dm-chip.on{background:#1f3a5f;color:#fff}
.dm-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dm-q{flex:1 1 200px;min-width:0;height:46px;border:1px solid #c5cbd3;border-radius:12px;padding:0 14px;font-size:16px;background:#fff}
.dm-sel{flex:1 1 140px;min-width:0;height:46px;border:1px solid #c5cbd3;border-radius:12px;padding:0 10px;font-size:15px;background:#fff}
.dm-go{height:46px;padding:0 20px;border:0;border-radius:12px;background:#1f3a5f;color:#fff;font-weight:700;font-size:15px}
.dm-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:760px){.dm-grid{grid-template-columns:1fr 1fr}}
.dm-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 1px 3px #0002}
.dm-main{display:block;padding:14px 14px 40px;color:#1c1f24;text-decoration:none}
.dm-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dm-no{font-size:22px;letter-spacing:.02em;color:#1f3a5f}
.dm-nm{display:block;margin-top:6px;font-weight:600;font-size:16px}
.dm-sub{display:block;margin-top:2px;font-size:13px;color:#5b6472}
.dm-loc{display:block;margin-top:8px;font-size:14px;font-weight:600;color:#1c1f24}
.dm-loc.no{color:#b25e00;font-weight:500}
.dm-det{position:absolute;right:8px;bottom:6px;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;background:#eef1f5;color:#3a4350;font-size:13px;font-weight:600;text-decoration:none}
.dm-empty{grid-column:1/-1;text-align:center;color:#5b6472;padding:30px 0}
.dm-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px;font-size:14px;color:#5b6472}
.dm-pg{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:12px;background:#1f3a5f;color:#fff;font-weight:600;text-decoration:none}
.dm-pic{display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.03em;color:#1f3a5f}

/* Daftar mesin: baris ringkas */
.dl{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0002;overflow:hidden}
.dl-row{display:flex;align-items:stretch;border-bottom:1px solid #eceff3}
.dl-row:last-child{border-bottom:0}
.dl-row:nth-child(even){background:#fafbfd}
.dl-main{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:1px;align-items:center;padding:7px 4px 7px 12px;color:#1c1f24;text-decoration:none}
.dl-no{grid-column:1;grid-row:1;font-size:16px;color:#1f3a5f;letter-spacing:.02em}
.dl-nm{grid-column:2;grid-row:1;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-st{grid-column:3;grid-row:1}
.dl-st .b{font-size:11px;padding:2px 8px}
.dl-meta{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 10px;font-size:12px;color:#5b6472;min-width:0}
.dl-loc{font-weight:600;color:#1c1f24}
.dl-loc.no{color:#b25e00;font-weight:500}
.dl-pic{font-weight:700;color:#1f3a5f}
.dl-pic:empty{display:none}
.dl-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 140px}
.dl-det{flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:#7a8494;font-size:24px;text-decoration:none;border-left:1px solid #eceff3}
@media(min-width:900px){
.dl-main{grid-template-columns:64px minmax(0,2.2fr) minmax(0,1.3fr) 90px minmax(0,1.3fr) 150px;padding:0 4px 0 14px;min-height:38px}
.dl-meta{display:contents}
.dl-no{grid-column:1;grid-row:1}
.dl-nm{grid-column:2;grid-row:1}
.dl-sub{grid-column:3;grid-row:1;flex:none}
.dl-pic{grid-column:4;grid-row:1}
.dl-loc{grid-column:5;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-st{grid-column:6;grid-row:1;justify-self:end}
}

.dl-row{scroll-margin-top:70px}
.dl-row:target{background:#fff6d6}

/* Label QR format pabrik: F4 210x330, 3 kolom x 9 baris = 27 label per lembar, 63x33 mm */
.labels{overflow-x:auto}
.pg{width:210mm;height:330mm;padding:4.9mm 0 0 7.4mm;box-sizing:border-box;background:#fff;display:grid;grid-template-columns:repeat(3,63mm);grid-template-rows:repeat(9,33mm);gap:3mm;justify-content:start;align-content:start;margin:0 auto 12px;box-shadow:0 1px 4px #0003;break-after:page;page-break-after:always;font-family:Arial,Helvetica,sans-serif;color:#000}
.lb{box-sizing:border-box;width:63mm;height:33mm;border:.3mm solid #000;background:#fff;display:grid;grid-template-columns:14mm 8mm 41mm;grid-template-rows:5.5mm 5mm 10mm 4.2mm 4.3mm 4mm;overflow:hidden}
.lb .c{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;line-height:1.15;min-width:0;border:0 solid #000}
.lb .q{grid-column:1;grid-row:1/3;border-right-width:.3mm}
.lb .q img,.lb .q canvas{width:9.5mm!important;height:9.5mm!important;display:block}
.lb .q img+canvas,.lb .q canvas+img{display:none}
.lb .pt{grid-column:2/4;grid-row:1;font-weight:700;font-size:8pt;border-bottom-width:.3mm}
.lb .no{grid-column:2;grid-row:2;font-weight:700;font-size:9pt;padding:0 .6mm;border-right-width:.3mm}
.lb .kd{grid-column:3;grid-row:2;font-size:8.5pt}
.lb .knm{grid-column:1/4;grid-row:3;font-size:7.5pt;padding:0 1mm;border-top-width:.3mm;border-bottom-width:.3mm}
.lb .al{grid-column:1/4;grid-row:4;font-style:italic;font-size:7pt;padding:0 1mm;border-bottom-width:.3mm;white-space:nowrap}
.lb .knm span,.lb .al span{display:block;max-height:100%;overflow:hidden}
.lb .kdok{grid-column:1;grid-row:5;font-weight:700;font-size:5.8pt;white-space:nowrap;border-right-width:.3mm;border-bottom-width:.3mm}
.lb .dj{grid-column:2;grid-row:5;font-weight:700;font-size:7pt;border-right-width:.3mm;border-bottom-width:.3mm}
.lb .dn{grid-column:3;grid-row:5;border-bottom-width:.3mm;display:grid;grid-template-columns:17mm 24mm;font-size:7pt;padding:0}
.lb .dn b,.lb .dn i{display:flex;align-items:center;justify-content:center;font-style:normal;min-width:0;overflow:hidden}
.lb .dn b{border-right:.3mm solid #000;font-size:7.5pt}
.lb .nl{grid-column:1;grid-row:6;font-weight:700;font-size:5.8pt;white-space:nowrap;border-right-width:.3mm}
.lb .av{grid-column:2/4;grid-row:6;font-weight:700;font-size:6.5pt;white-space:nowrap}
@page{size:210mm 330mm;margin:0}
.pg.a4{height:297mm;grid-template-rows:repeat(8,33mm)}
@media print{html,body{margin:0;padding:0;background:#fff;height:auto}header,.noprint,.backlink{display:none!important}main{padding:0!important;margin:0!important;max-width:none!important}.labels{overflow:visible;margin:0;padding:0}.pg{margin:0!important;box-shadow:none;height:329mm;overflow:hidden;break-inside:avoid}.pg.a4{height:296mm}.pg:last-child{break-after:auto;page-break-after:auto}}

.dl-ck{color:#136c2e;font-size:15px}

.fth{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.fti{position:relative;width:96px}.fti img{width:96px;height:96px;object-fit:cover;border-radius:8px;display:block;background:#eee}
.fti button{position:absolute;top:2px;right:2px;padding:0;width:26px;height:26px;border-radius:50%;background:#000a;color:#fff;font-size:14px;line-height:26px}.fti small{display:block;font-size:11px;color:#5b6472}
.fg{display:grid;gap:12px}.fg-i{background:#fff;border-radius:10px;box-shadow:0 1px 3px #0002;padding:12px;break-inside:avoid;page-break-inside:avoid}
.fg-i h3{margin:0 0 2px;font-size:17px}.fg-i .m{font-size:13px;color:#3a4350;margin-bottom:8px}.fg-i .m b{color:#1c1f24}
.fg-ph{display:flex;flex-wrap:wrap;gap:8px}.fg-ph figure{margin:0;flex:1 1 220px;max-width:340px}.fg-ph img{width:100%;border-radius:6px;display:block}.fg-ph figcaption{font-size:12px;color:#5b6472;margin-top:2px}
.fg-w{border-top:1px dashed #9aa3b0;margin-top:10px;padding-top:6px;font-size:12px;color:#5b6472}
@media(min-width:700px){.fg{grid-template-columns:1fr 1fr}}
@media print{.fg{display:block}.fg-i{box-shadow:none;border:1px solid #999;margin-bottom:10px}.fg-ph figure{max-width:60mm;flex:0 0 60mm}}
.ar{border-top:1px solid #e6e9ee;padding:10px 0}.ar-t{font-size:16px}.ar-m{font-size:14px;color:#3a4350;margin-top:2px}.ar-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}.ar-a .btn,.ar-a button{padding:8px 12px;font-size:15px}

.kc{display:inline-block;min-width:34px;text-align:center;background:#1f3a5f;color:#fff;border-radius:6px;padding:1px 7px;font-weight:700;font-size:14px;margin-right:4px}

.fm{margin:0 0 12px;text-align:center}.fm img{max-width:100%;max-height:260px;border-radius:8px;border:1px solid #dde2e8;display:block;margin:0 auto 4px}.fm small{color:#5b6472}