/* Kiosk screen. Uses the SAME tokens as the admin and the phone app (app.css), so light and dark match everywhere. */
html,body{height:100%;margin:0}
body.kiosk{background:var(--bg);color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none}
.view{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2vh 3vw}
.view.d-none{display:none!important}
.logo{height:140px;margin-bottom:1rem;background:#fff;border-radius:16px;padding:8px}
.logo-sm{height:64px;background:#fff;border-radius:12px;padding:4px}
.kbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:1.2rem;padding:1.1vh 2vw;background:linear-gradient(90deg,var(--brand-dark),var(--brand));color:#fff;text-align:left}
.kbar .hd{flex:1}.store{font-size:1.5rem;font-weight:800;letter-spacing:.04em}.kname{opacity:.9;font-size:1.05rem}
.clock{text-align:right}.clock #clockTime,.clock #resTime{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums}.clock #clockDate{opacity:.9}
.kfoot{position:absolute;bottom:0;left:0;right:0;padding:1.2vh 2vw;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-top:1px solid var(--border);color:var(--muted)}
.stampk{font-size:.95rem}
.kbtn{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}.kbtn:hover{background:var(--border);color:var(--text)}
/* home: two panes */
.home{margin-top:9.5vh;margin-bottom:7vh;width:100%;height:calc(100% - 9.5vh - 7vh);display:grid;grid-template-columns:1.5fr 1fr;gap:2vw;padding:2vh 2vw 0;align-items:stretch}
.pane{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:2.2vh 2vw;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.scanpane{justify-content:flex-start;overflow:hidden}
.scanicon{font-size:clamp(3rem,9vh,5.5rem);color:var(--brand-text);line-height:1;margin-top:1vh}
.scanpane h1{font-size:clamp(1.8rem,4.6vh,3.2rem);font-weight:900;letter-spacing:.04em;margin:.4rem 0 0}
.scanpane h2{font-size:clamp(1rem,2.4vh,1.6rem);font-weight:600;color:var(--muted);margin:.2rem 0 1.4vh}
.scanbox{display:flex;gap:.7rem;align-items:center;width:100%;max-width:820px;font-size:1.6rem}
.scanbox>i{color:var(--muted)}.scanbox input{flex:1;height:4.2rem;font-size:1.4rem;border:2px solid var(--brand);border-radius:16px}
.scanbox .btn{height:4.2rem;font-weight:800;white-space:nowrap;border-radius:16px}
.scanmsg{min-height:2rem;font-size:1.2rem;font-weight:600;margin:.5rem 0;color:var(--warn)}.scanmsg.err{color:var(--danger)}
.results{width:100%;max-width:820px;overflow:auto;flex:1;text-align:left}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;border:1px solid var(--border);border-radius:14px;margin-bottom:.5rem;background:var(--surface-2);cursor:pointer;font-size:1.25rem}
.rrow:active{background:var(--brand-soft)}.rrow .n{font-weight:700}.rrow .n small{display:block;color:var(--muted);font-weight:400;font-size:.9rem}.rrow .p{font-weight:900;color:var(--brand-text);white-space:nowrap}
/* QR pane */
.qrpane{gap:.5rem}.qrhead{font-size:clamp(1.1rem,2.6vh,1.7rem);font-weight:800}
.qrbox{background:#fff;border-radius:20px;padding:14px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
#qr{width:min(30vh,26vw);height:min(30vh,26vw)}#qr svg{width:100%;height:100%}
.badge-status{font-weight:800;letter-spacing:.08em;border-radius:999px;padding:.2rem 1rem;background:var(--ok);color:#fff;display:inline-block}
.badge-status.bad{background:var(--danger)}.badge-status.wait{background:var(--warn);color:#fff}
.qrtext{color:var(--muted);font-size:1.05rem;margin:.2rem 0}.validity{font-size:.95rem;color:var(--muted)}
/* result */
.resultwrap{margin-top:9.5vh;margin-bottom:17vh;width:100%;height:calc(100% - 9.5vh - 17vh);display:flex;align-items:center;justify-content:center;padding:1vh 2vw}
.resultcard{align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);width:min(1200px,96vw);max-height:100%;overflow:auto;padding:2.5vh 3vw;display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:2.5vw;text-align:left}
.rimg{width:100%;max-height:26vh;object-fit:contain;border-radius:20px;background:var(--brand-soft)}
.rimg.noimg{display:flex;align-items:center;justify-content:center;font-size:5.5rem;color:var(--brand-text);height:20vh}
.rok{font-weight:800;letter-spacing:.08em;color:var(--brand-text);font-size:1rem}
.rname{font-size:clamp(1.6rem,4vh,2.8rem);font-weight:900;line-height:1.1;margin:.2rem 0}
.rmeta{color:var(--muted);font-size:1.1rem}
.rlbl{font-size:.9rem;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-top:.6rem}
.rprice{font-size:clamp(3rem,10vh,6.5rem);font-weight:900;color:var(--brand-text);line-height:1}
.rprice.promo{color:var(--promo)}.rreg{font-size:1.8rem;text-decoration:line-through;color:var(--muted)}
.rsave{display:inline-block;background:var(--ok-bg);color:var(--ok-fg);font-weight:800;font-size:1.4rem;border-radius:12px;padding:.2rem .9rem;margin-top:.4rem}
.rupd{display:inline-block;background:var(--warn-bg);color:var(--warn-fg);font-weight:800;border-radius:999px;padding:.15rem .8rem;font-size:.95rem;margin-bottom:.3rem}
.rgrid{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1rem;font-size:1.1rem}.rgrid span{display:block;color:var(--muted);font-size:.85rem}.rgrid b{font-weight:700}
.ralt{margin-top:.9rem;border-top:1px solid var(--border);padding-top:.7rem;font-size:1.05rem}
.ralt .t{font-weight:800}.ralt .a{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;cursor:pointer}.ralt .a b{color:var(--brand-text)}
.rnf{grid-column:1/-1;text-align:center;padding:4vh 0}.rnf i{font-size:6rem;color:var(--warn)}.rnf h2{font-size:clamp(2rem,5vh,3.4rem);font-weight:900;margin:.6rem 0}
.resfoot{flex-direction:column;justify-content:center;height:15vh;color:var(--text)}
.countbar{position:absolute;top:0;left:0;right:0;height:6px;background:var(--border)}#countFill{height:100%;background:var(--brand);width:100%}
.btn-xl{font-size:1.7rem;font-weight:800;padding:.8rem 3rem;border-radius:18px}
.conn{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--danger);color:#fff;padding:.4rem;text-align:center;font-weight:600}
.pair-form{display:flex;flex-direction:column;gap:.7rem;width:min(460px,90vw)}
.pindots{display:flex;gap:1rem;margin:1.2rem 0 .4rem}.pindots span{width:22px;height:22px;border-radius:50%;border:2px solid var(--text)}.pindots span.on{background:var(--accent);border-color:var(--accent)}
.pinmsg{min-height:1.8rem;color:var(--danger);font-weight:700;font-size:1.2rem}
.pinpad{display:grid;grid-template-columns:repeat(3,96px);gap:14px;margin-top:.6rem}
.pk{height:84px;border-radius:18px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:2rem;font-weight:800;box-shadow:var(--shadow)}.pk:active{background:var(--brand-soft)}
.setbox{width:min(720px,94vw);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1.5rem;max-height:96vh;overflow:auto;box-shadow:var(--shadow)}
.fs{display:flex;gap:.5rem}
@media (max-aspect-ratio: 1/1){.home{grid-template-columns:1fr;grid-template-rows:auto auto}.resultcard{grid-template-columns:1fr}#qr{width:min(24vh,50vw);height:min(24vh,50vw)}}

/* ---- on-screen keyboard (opened only with the Keyboard button; see js/vkeyboard.js) ---- */
#v-qr{--vkh:clamp(250px,42vh,420px)}
.vk-toggle{height:4.2rem;font-weight:800;white-space:nowrap;border-radius:16px;display:inline-flex;align-items:center;gap:.5rem;padding:0 1.2rem;background:var(--surface-2);border:2px solid var(--brand);color:var(--brand-text);font-size:1.2rem}
.vk-toggle:hover,.vk-toggle:focus-visible{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand)}
.vk-toggle.on{background:var(--brand);color:#fff}
.vk{position:absolute;left:0;right:0;bottom:7vh;height:var(--vkh);z-index:20;display:flex;flex-direction:column;gap:.5rem;padding:.7rem 1.2vw .8rem;background:var(--surface-2);border-top:2px solid var(--brand);box-shadow:0 -8px 24px rgba(0,0,0,.18);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.vk[hidden]{display:none}
.vk-row{flex:1 1 0;min-height:0;display:flex;gap:.5rem;justify-content:center}
.vk-key{flex:1 1 0;max-width:9rem;min-width:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);font-size:clamp(1.2rem,3.2vh,1.9rem);font-weight:800;line-height:1;box-shadow:0 2px 0 var(--border);touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}
.vk-key:active,.vk-key.on{background:var(--brand-soft);border-color:var(--brand);transform:translateY(1px);box-shadow:none}
.vk-wide{flex:1.5 1 0;max-width:12rem}
.vk-fn{flex:1.6 1 0;max-width:13rem;font-size:clamp(1rem,2.6vh,1.4rem);background:var(--surface-2)}
.vk-space{flex:5 1 0;max-width:none;font-size:clamp(1rem,2.6vh,1.4rem)}
.vk-enter{flex:2.2 1 0;max-width:16rem;background:var(--brand);border-color:var(--brand);color:#fff;font-size:clamp(1.1rem,3vh,1.6rem);box-shadow:0 2px 0 var(--brand-dark)}
.vk-enter:active{background:var(--brand-dark);border-color:var(--brand-dark)}
/* keyboard open: the home panes shrink above it so the field, results and navigation stay visible */
#v-qr.kb-open .home{margin-bottom:calc(7vh + var(--vkh));height:calc(100% - 9.5vh - 7vh - var(--vkh));padding-top:1vh}
#v-qr.kb-open .scanicon,#v-qr.kb-open .scanpane h2{display:none}
#v-qr.kb-open .scanpane h1{font-size:clamp(1.2rem,3vh,2rem);margin:0 0 .4rem}
#v-qr.kb-open .scanmsg{margin:.2rem 0;min-height:1.4rem}
#v-qr.kb-open .qrtext,#v-qr.kb-open .validity{display:none}
#v-qr.kb-open #qr{width:min(18vh,22vw);height:min(18vh,22vw)}
@media (max-aspect-ratio: 1/1){#v-qr.kb-open .qrpane{display:none}#v-qr.kb-open .home{grid-template-rows:1fr}.vk-key{border-radius:10px}}
@media (max-height:560px){#v-qr{--vkh:min(52vh,260px)}}

/* ---- offline mode / synchronisation indicators ---- */
.kbar{flex-wrap:wrap}
.modechip{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;border-radius:999px;padding:.25rem .8rem;background:rgba(255,255,255,.18);color:#fff;white-space:nowrap}
.modechip:empty{display:none}
.kbar .hd{min-width:0}
@media (max-aspect-ratio: 1/1){   /* portrait / narrow screens: keep the header one compact row (it is sized as 9.5vh) */
  .kbar{gap:.7rem}.store{font-size:1.15rem}.kname{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modechip{white-space:normal;max-width:32vw;font-size:.8rem;line-height:1.15;padding:.2rem .6rem}
  .kbar .clock{font-size:.85rem}.kbar .clock #clockTime,.kbar .clock #resTime{font-size:1.4rem !important}
}
.modechip::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.modechip.off::before{background:#FFC24B}.modechip.warn::before{background:#FFC24B}
.modechip.off{background:rgba(255,170,0,.28)}
.syncbar{flex:0 0 calc(100% + 4vw);order:9;margin:0 -2vw -1.1vh;padding:.35rem 2vw;font-size:1rem;font-weight:700;background:#fff3cd;color:#664d03;border-top:1px solid #ffe69c;text-align:left}
.syncbar.stale{background:#f8d7da;color:#58151c;border-top-color:#f1aeb5}
.syncbar small{display:block;font-weight:600;font-size:.9rem}
body.k-syncbar .home{margin-top:calc(9.5vh + 2.6rem);height:calc(100% - 9.5vh - 7vh - 2.6rem)}
body.k-syncbar .resultwrap{margin-top:calc(9.5vh + 2.6rem);height:calc(100% - 9.5vh - 17vh - 2.6rem)}
body.k-syncbar #v-qr.kb-open .home{margin-top:calc(9.5vh + 2.6rem);height:calc(100% - 9.5vh - 7vh - var(--vkh) - 2.6rem)}
body.k-syncbar.k-two .home{margin-top:calc(9.5vh + 4rem);height:calc(100% - 9.5vh - 7vh - 4rem)}
body.k-syncbar.k-two .resultwrap{margin-top:calc(9.5vh + 4rem);height:calc(100% - 9.5vh - 17vh - 4rem)}
body.k-syncbar.k-two #v-qr.kb-open .home{margin-top:calc(9.5vh + 4rem);height:calc(100% - 9.5vh - 7vh - var(--vkh) - 4rem)}
.offnote{margin-top:.8rem;padding:.5rem .8rem;border-radius:12px;background:#fff3cd;color:#664d03;font-size:1.05rem}
.offnote.stale{background:#f8d7da;color:#58151c}
.conn.noncat{background:#8a1c1c}