/* Desktop N Token v1.12.0 — Shop colours + laptop / PC layout like Desktop N Shop (html.tk112) */
html.tk112{--bg:#f3f6fb;--card:#fff;--ink:#14213D;--mute:#69738A;--line:#DCE4F2;--tile:#fff;--brand:#0d2a6b;--brand2:#1F6FE5;--dnb-ink:#14213D;--dnb-mute:#69738A;--dnb-line:#DCE4F2;--dnb-acc-soft:#E8F1FF}
html.tk112 body{background:var(--bg);color:var(--ink)}
html.tk112 .top{background:linear-gradient(110deg,#0b1f55,#13307e);border-bottom:3px solid #FFD23F}
html.tk112 .btn.soft,html.tk112 .ghost,html.tk112 .dlg-x,html.tk112 .dnb-card .btn.soft,html.tk112 .dnb-tk .btn.soft{background:#eef2f8;color:#14213D}
html.tk112 .card{border-color:var(--line);border-radius:16px;box-shadow:0 1px 2px #0f1b3d0a,0 6px 18px #0f1b3d0d}
html.tk112 .tile{background:#fff;box-shadow:0 2px 8px #0f1b3d0f}
html.tk112 .tile.sel{background:#E8F1FF;border-color:#1F6FE5}
html.tk112 .tok{background:#fff;border-color:#c9d3e6}
html.tk112 .tk111 .dlg-card>.dlg-x,html.tk112 .dlg-card>.dlg-x{box-shadow:0 2px 8px #0f1b3d26}
html.tk112 .dlg{background:#0b1f5566}
html.tk112 .chip{border-color:var(--line)}
/* page title + ❓ */
.pt112{margin:2px 0 12px}.pt112-r{display:flex;align-items:center;gap:10px}
.pt112 h1{font-family:"Baloo 2",Nunito,sans-serif;font-size:1.55rem;line-height:1.15;margin:0;color:#0b1f55}
.pt112 p{margin:2px 0 0;color:var(--mute);font-size:.92rem}
.q112{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:15px;line-height:1;cursor:pointer;flex:none;box-shadow:0 1px 3px #0f1b3d14}
ol.h112{padding-left:22px;margin:6px 0 4px}ol.h112 li{margin:0 0 10px;line-height:1.45}
/* top bar extras */
.tb112{width:42px;height:42px}
.tb112-l{display:none;border:0;border-radius:12px;background:#ffffff26;color:#fff;font:inherit;font-weight:800;height:42px;padding:0 10px}
.tb112-l option{color:#14213D}
.tb112-k{display:none}
/* search */
.s112{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;margin:4px 0 8px}
.s112R{max-height:min(60vh,520px);overflow:auto}
.s112h{display:block;margin:10px 2px 4px;color:var(--mute);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.s112i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;margin:0 0 6px;min-height:48px;cursor:pointer}
.s112i b{flex:1}.s112i em{font-style:normal;color:var(--mute);font-weight:800}.s112i span{font-size:1.3rem}
/* settings list */
.sl112{padding:6px}
.sl112-r{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;border:0;border-top:1px solid var(--line);background:none;padding:12px 8px;min-height:62px;cursor:pointer}
.sl112-r:first-child{border-top:0}
.sl112-i{width:42px;height:42px;border-radius:12px;background:#E8F1FF;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}
.sl112-t{flex:1;min-width:0}.sl112-t b{display:block;font-size:1.02rem}.sl112-t small{display:block;color:var(--mute);line-height:1.3}
.sl112-go{font-size:1.5rem;color:#9aa6bf}
.sb112B{width:auto!important;flex:none!important;min-width:0!important;margin:0 0 12px;min-height:44px;justify-self:start;padding:10px 18px!important}
.h112{display:none!important}
#cl112,#cl112H{display:none}
.sb112{display:none}
/* ---------- 💻 laptop / PC ---------- */
@media (min-width:1000px){
 html.tk112 body{padding-left:248px;padding-bottom:24px}
 html.tk112 .top{position:fixed;left:0;right:0;top:0;z-index:30;height:64px;padding:10px 18px}
 html.tk112 #main{max-width:none;margin:0;padding:76px 8px 0}
 html.tk112 #hMenu{display:none}
 html.tk112 .tb112-l{display:inline-block}html.tk112 .tb112-k:not([hidden]){display:inline-block}
 html.tk112 .menu{display:none!important}
 .sb112{display:flex;flex-direction:column;gap:2px;position:fixed;left:0;top:64px;bottom:0;width:236px;overflow:auto;background:#fff;border-right:1px solid var(--line);padding:16px 12px 24px;z-index:20}
 .sb112-h{display:block;margin:14px 10px 6px;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#7a869f}
 .sb112-h:first-child{margin-top:4px}
 .sb112 button{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;font-weight:800;color:#14213D;border:0;background:none;border-radius:14px;padding:10px 12px;min-height:46px;cursor:pointer}
 .sb112 button:hover{background:#f1f5fc}
 .sb112 button.on{background:linear-gradient(110deg,#0b1f55,#1F6FE5);color:#fff;box-shadow:0 6px 16px #1f6fe540}
 html.tk112 .page{padding:14px 20px}
 html.tk112 .pt112 h1{font-size:1.75rem}
 /* Sell: items left, bill right */
 html.tk112 body.sell112 #main{padding-right:404px}
 html.tk112 body.sell112 .bar{position:fixed;left:auto;right:16px;top:80px;bottom:16px;width:376px;max-width:none;margin:0;border-radius:18px;border:1px solid var(--line);box-shadow:0 8px 28px #0f1b3d1a;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px}
 html.tk112 body.sell112 #cl112H{display:block;font-family:"Baloo 2",Nunito,sans-serif;font-size:1.35rem;font-weight:800;color:#0b1f55}
 html.tk112 body.sell112 #cl112{display:block;flex:1;overflow:auto;min-height:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0}
 .cl112-r{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px dashed #e3e9f4}
 .cl112-r:last-child{border-bottom:0}.cl112-e{font-size:1.2rem}.cl112-r em{font-style:normal;font-weight:900;min-width:64px;text-align:right}
 .cl112-q{display:inline-flex;align-items:center;gap:6px}.cl112-q i{font-style:normal;font-weight:900;min-width:22px;text-align:center}
 .cl112-q button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:900;font-size:16px;cursor:pointer}
 .cl112-0{color:var(--mute);text-align:center;margin:24px 8px}
 html.tk112 body.sell112 .bar-a{display:flex;flex-wrap:wrap;gap:6px}
 html.tk112 body.sell112 .bar-m{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 html.tk112 body.sell112 .bar-l b{font-size:1.9rem}
 html.tk112 body.sell112 .pay{display:flex}html.tk112 body.sell112 .pay button{flex:1;min-height:48px}
 html.tk112 body.sell112 .go{width:100%;min-height:56px;font-size:1.2rem}
 html.tk112 body:not(.sell112) .bar{display:none}
 html.tk112 .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 /* cards in 2 columns (Settings part, Today, Customers, Items, Monthly) */
 html.tk112 #pSet.sec112.on,html.tk112 #pToday.on{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
 html.tk112 #pSet.sec112.on>*,html.tk112 #pToday.on>*{margin:0}
 html.tk112 #pSet.sec112.on>.pt112,html.tk112 #pSet.sec112.on>.sb112B,html.tk112 #pSet.sec112.on>.stabs,html.tk112 #pToday.on>.pt112,html.tk112 #pToday.on>details,html.tk112 #pToday.on>.card:has(table),html.tk112 #pToday.on>.actions,html.tk112 #pToday.on>.btn,html.tk112 #pToday.on>.row{grid-column:1/-1}
 html.tk112 #pSet:not(.sec112) .sl112,html.tk112 #pSet:not(.sec112) .ab111,html.tk112 #pSet:not(.sec112)>.card[data-g112="about"]{max-width:760px}
 html.tk112 .dlg{padding-left:248px}
}