:root{--bg:#fff;--ink:#111;--sub:#4a5160;--card:#f1f3f7;--line:#c9ced8;--accent:#f2c500;--accent-ink:#111;--accent2:#d4380d;--good:#117a2b;--shapefill:#e6edf7;--chipbg:#fff;--chipink:#111;--chipact:#fff3cf;--bar:#fff;--danger:#b3261e}
[data-theme=dark]{--bg:#0b0c0e;--ink:#fff;--sub:#b5bcc9;--card:#1a1d22;--line:#3a404b;--shapefill:#36445a;--bar:#14161a;--chipact:#fff3cf;--danger:#ff7b72}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:19px;line-height:1.25;-webkit-text-size-adjust:100%;overflow-anchor:none}
body{min-height:100vh;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:12px;padding:12px 14px;width:100%;min-height:56px}
textarea{min-height:90px}
#bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;background:var(--bar);border-bottom:3px solid var(--accent);padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));min-height:62px}
#bar .ttl{flex:1;font-weight:800;font-size:20px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bar .ibtn{width:52px;height:52px;border-radius:14px;border:2px solid var(--ink);background:var(--card);font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
#bar .ibtn[hidden]{display:none}
#bar .savebtn{width:auto;flex:none;min-height:44px;padding:8px 14px;font-size:17px;margin:0}
#bar .savebtn[hidden]{display:none}
.logoplate{background:#fff;border-radius:8px;padding:2px 4px;display:flex;align-items:center;flex:none}
.logoplate img{display:block;height:40px;width:auto}
#view{padding:12px 12px 40px;max-width:640px;margin:0 auto}
#view.withtray{padding-bottom:40px}
html.trayon{scroll-padding-top:74px}
h2{font-size:22px;margin:16px 0 8px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;border-radius:16px;border:3px solid var(--ink);background:var(--card);font-weight:800;font-size:21px;padding:10px 14px;text-align:center}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--ink)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.small{min-height:52px;font-size:18px;border-width:2px;border-radius:12px}
.btn:disabled{opacity:.45}
.btn:active{transform:scale(.98)}
.big-actions{display:grid;gap:12px;margin:14px 0}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.muted{color:var(--sub);font-size:16px}
.note{background:var(--chipact);color:#111;border:2px solid #b8860b;border-radius:12px;padding:10px 12px;font-size:16px;margin:10px 0}
label.f{display:block;font-weight:700;font-size:16px;margin:12px 0 4px;color:var(--sub)}
/* company block */
.co{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.co .info{text-align:right;font-size:12.5px;line-height:1.3;color:var(--sub)}
.co .info b{color:var(--ink)}
.co img{height:56px;width:auto;display:block;margin-left:auto;background:#fff;border-radius:8px;padding:3px 6px}
/* form head */
.formhead{border:3px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.formhead h1{margin:0;font-size:22px;letter-spacing:.5px}
.det-sum{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;border:2px dashed var(--ink);border-radius:12px;padding:10px 12px;min-height:56px;font-weight:700;width:100%;background:var(--card);text-align:left}
.sheetnav{display:flex;align-items:center;gap:8px;margin:10px 0}
.sheetnav .btn{width:60px;min-height:56px;padding:0;font-size:26px;flex:none}
.sheetnav .mid{flex:1;text-align:center;font-weight:800;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;user-select:none;-webkit-user-select:none}
.fbox{position:relative;border:2.5px solid var(--ink);border-radius:8px;background:var(--bg);aspect-ratio:185/150;overflow:hidden;padding:0;display:flex;flex-direction:column;text-align:left;touch-action:pan-y;-webkit-touch-callout:none}
.fbox .strip{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-bottom:2px solid var(--ink);font-size:12.5px;font-weight:800;padding:2px 5px;min-height:22px;white-space:nowrap}
.fbox .strip .n{color:var(--sub)}
.fbox .body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.fbox .body svg{width:100%;height:100%;display:block;pointer-events:none}
.fbox.empty{border-style:dashed}
.fbox.empty .body{font-size:34px;color:var(--sub);font-weight:300}
.fbox.drop{outline:5px solid var(--accent2);outline-offset:-3px;background:var(--chipact)}
.fbox.armed-target{border-color:var(--accent2)}
.fbox.just-placed{outline:5px solid var(--accent2);outline-offset:-3px;background:var(--chipact)}
.fbox .ph{font-size:11px;color:var(--sub);text-align:center;padding:2px}
.tray{position:relative;z-index:5;background:var(--bar);border:3px solid var(--accent);border-radius:14px;padding:8px 8px 10px;margin:14px 0 8px}
.tray .hint{font-size:13px;color:var(--sub);text-align:center;margin-bottom:6px;font-weight:600}
.tray .hint b{color:var(--accent2)}
.strip-scroll{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px}
.thumb{flex:none;width:calc(25% - 6px);border:2.5px solid var(--ink);border-radius:10px;background:var(--bg);padding:2px 2px 4px;touch-action:manipulation;text-align:center;font-weight:800;font-size:13px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.thumb svg{width:100%;height:56px;display:block;pointer-events:none}
.thumb.armed{background:var(--accent);color:#111;border-color:var(--accent2);box-shadow:0 0 0 3px var(--accent2)}
.thumb.armed svg path{}
.tray > .btn{width:100%;margin-top:8px}
.tray-actions{display:flex;gap:8px;margin-top:8px}
.tray-actions .btn{margin-top:0;flex:1;width:auto;min-height:56px}
.trayrow{display:flex;gap:8px;align-items:center}
.trayrow .btn{min-height:56px;font-size:19px}
.ghost{position:fixed;z-index:100;width:96px;height:80px;pointer-events:none;border:3px solid var(--accent2);background:var(--chipact);border-radius:10px;opacity:.95;transform:translate(-50%,-70%);box-shadow:0 8px 20px rgba(0,0,0,.35);color:#111}
.ghost svg{width:100%;height:100%}
/* box editor */
.draw{border:3px solid var(--ink);border-radius:16px;background:var(--bg);padding:6px;position:relative}
.draw svg{width:100%;height:auto;display:block;aspect-ratio:220/180;touch-action:manipulation}
.draw .chip{cursor:pointer}
.hintline{text-align:center;font-weight:700;margin:8px 0;color:var(--sub);font-size:17px}
.steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:transparent}
.dot.on{background:var(--good);border-color:var(--good)}
.stepper{display:flex;gap:10px;align-items:stretch}
.stepper .btn{width:76px;flex:none;font-size:34px;min-height:68px}
.stepper .val{flex:1;border:3px solid var(--ink);border-radius:16px;font-size:38px;font-weight:900;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.cbtn{min-width:64px;min-height:60px;border:3px solid var(--ink);border-radius:14px;background:var(--bg);font-weight:900;font-size:21px;padding:4px 12px;flex:1 0 64px}
.cbtn.on{background:var(--accent);color:#111}
.cbtn small{display:block;font-size:11px;font-weight:700;opacity:.8}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tools .btn{font-size:18px;min-height:60px}
.stick{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--bar);border-top:3px solid var(--accent);padding:8px 12px max(10px,env(safe-area-inset-bottom))}
.stick .row{max-width:640px;margin:0 auto}
/* keypad */
.kp{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bar);border-top:4px solid var(--accent2);padding:8px 10px max(10px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.kp .in{max-width:520px;margin:0 auto}
.kp .top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.kp .top .t{flex:1;font-weight:900;font-size:19px}
.kp .top .x{width:48px;height:44px;border-radius:12px;border:2px solid var(--ink);background:var(--card);font-size:22px;font-weight:900}
.kp .disp{display:flex;gap:8px;margin-bottom:6px}
.kp .fld{flex:1;border:3px solid var(--line);border-radius:12px;padding:2px 10px;min-height:54px;background:var(--bg);text-align:left}
.kp .fld.act{border-color:var(--accent2);background:var(--chipact);color:#111}
.kp .fld small{display:block;font-size:12px;font-weight:800;color:var(--sub)}
.kp .fld.act small{color:#444}
.kp .fld .v{font-size:28px;font-weight:900;min-height:32px;white-space:nowrap;overflow:hidden}
.kp .fld.act .v:after{content:'';display:inline-block;width:3px;height:28px;background:var(--accent2);vertical-align:-4px;margin-left:2px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.kp .pre{display:flex;gap:5px;margin-bottom:6px}
.kp .pre button{flex:1;min-height:40px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font-weight:800;font-size:16px;padding:0}
.kp .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kp .keys button{min-height:50px;border:2px solid var(--ink);border-radius:12px;background:var(--bg);font-size:26px;font-weight:900;padding:0}
.kp .keys button.fn{background:var(--card);font-size:20px}
.kp .keys button.w2{grid-column:span 2}
.kp .keys button:active,.kp .pre button:active{background:var(--accent);color:#111}
.kp .ok{margin-top:8px;min-height:56px}
.kpopen .draw svg{width:auto;max-width:100%;max-height:calc(100vh - 62px - var(--kph,460px) - 70px);margin:0 auto}
/* modal / sheets */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.ov.full{align-items:stretch;background:var(--bg)}
.ov .pane{background:var(--bg);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:14px 12px max(14px,env(safe-area-inset-bottom))}
.ov.full .pane{border-radius:0;max-height:none;height:100%;max-width:none}
.pane h3{margin:0 0 10px;font-size:22px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcard{border:3px solid var(--ink);border-radius:14px;background:var(--bg);padding:4px 4px 8px;text-align:center;font-weight:800;font-size:14px}
.pcard svg{width:100%;height:86px;display:block;pointer-events:none}
.pcard b{display:block;font-size:20px}
.pcard.on{background:var(--accent);color:#111}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcell{border:3px solid var(--ink);border-radius:12px;min-height:84px;background:var(--bg);position:relative;overflow:hidden;font-weight:900;font-size:22px}
.mcell.cur{border-color:var(--accent2);background:var(--chipact);color:#111}
.mcell svg{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.mcell span{position:absolute;left:6px;top:2px;z-index:1;font-size:16px;background:var(--bg);color:var(--ink);border-radius:6px;padding:0 5px}
#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:14px;z-index:99;font-weight:700;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s;border:2px solid #fff}
#toast.show{opacity:1}
/* scan/send */
.photo{width:100%;border-radius:12px;border:3px solid var(--ink);display:block}
.prog{height:22px;border-radius:11px;border:2px solid var(--ink);overflow:hidden;background:var(--card)}
.prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.pages canvas{width:100%;height:auto;border:2px solid var(--line);border-radius:6px;display:block;margin:8px 0;background:#fff}
.addr{display:flex;gap:8px;flex-wrap:wrap}
.addr .a{display:flex;align-items:stretch;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--bg)}
.addr .a button{background:none;border:0;padding:10px 12px;font-weight:800;font-size:17px;min-height:52px}
.addr .a button.rm{border-left:2px solid var(--line);color:var(--danger);font-size:20px}
.addr .a.on{background:var(--accent);color:#111}
.tk{display:flex;gap:8px;align-items:stretch;margin:10px 0}
.tk .main{flex:1;text-align:left;border:3px solid var(--ink);border-radius:14px;background:var(--card);padding:10px 12px;min-height:72px}
.tk .main b{font-size:20px;display:block}
.tk .sm{width:60px;flex:none;border:3px solid var(--ink);border-radius:14px;background:var(--card);font-size:24px}
.tk .sm.d{border-color:var(--danger);color:var(--danger)}
.fabphoto{position:fixed;right:10px;top:76px;z-index:18;background:var(--accent);color:#111;border:3px solid var(--ink);border-radius:14px;min-height:50px;padding:0 12px;font-weight:900;font-size:16px}
.zoomov{position:fixed;inset:0;z-index:70;background:#000;overflow:auto;touch-action:pan-x pan-y pinch-zoom}
.zoomov img{width:100%;display:block}
.zoomov button{position:fixed;right:10px;top:10px;z-index:71;min-height:56px;padding:0 20px;border-radius:14px;border:3px solid #fff;background:#d4380d;color:#fff;font-weight:900;font-size:20px}
.inline-in{display:flex;gap:8px}
.inline-in input{flex:1}
.ocrrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;gap:8px}.seg .cbtn{flex:1}

.chips.g4{display:grid;grid-template-columns:repeat(4,1fr)}
/* misc items */
.misc{margin-top:18px;container-type:inline-size}

.mhead{display:none}
.mrow{display:grid;grid-template-columns:78px 1fr;grid-template-areas:"q m" "u a" "x x";gap:6px;border:2px solid var(--line);border-radius:14px;padding:8px;margin:8px 0;background:var(--card)}
.mrow .mq{grid-area:q;text-align:center;font-weight:800}.mrow .mm{grid-area:m}.mrow .mu{grid-area:u}.mrow .ma{grid-area:a;text-align:right}
.mrow .mact{grid-area:x;display:flex;gap:6px}
.mrow .mact button{flex:1;min-height:48px;border:2px solid var(--ink);border-radius:12px;background:var(--bg);font-size:20px;font-weight:900}
.mrow .mact button.d{color:var(--danger);border-color:var(--danger)}
.mrow .mact button:disabled{opacity:.3}
.mrow input,.mrow select{min-height:52px;padding:8px 10px}
.chips.mats .cbtn{flex:0 1 auto;font-size:16px;min-height:50px;font-weight:800}
.mtotal{font-size:22px;text-align:right;margin:8px 4px}
/* ---------- tablets: right palette sidebar (v7); 3-column fill-out from 960px up
   (left order-form card, center sheet + misc, right palette). Below 960px the
   order form stacks above the boxes so a 3-col 820 portrait does not shrink
   the 12 boxes below a usable tap size. Phone (<760) is unchanged. ---------- */
@media (min-width:760px){
  html,body{font-size:20px}
  html{scroll-padding-bottom:20px}
  #view{max-width:980px}
  #view.withtray{max-width:none;width:auto;display:block;margin:0 290px 0 0;padding:14px 18px 40px}
  #view.withtray > :not(.tray){width:100%;max-width:none;margin-left:0;margin-right:0}
  .tray{position:fixed;left:auto;right:0;top:62px;bottom:0;width:280px;margin:0;border:0;border-left:3px solid var(--accent);border-radius:0;display:flex;flex-direction:column;padding:10px;z-index:15;background:var(--bar)}
  .tray .strip-scroll{flex:1;flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;align-content:flex-start;gap:8px;padding-bottom:6px}
  .tray .thumb{width:calc(50% - 4px);touch-action:manipulation}
  .tray .thumb svg{height:78px}
  .tray .hint{font-size:14px}
  .tray .btn{margin-top:8px}
  .tray-actions{flex-shrink:0;flex-direction:row}
  .tray-actions .btn{width:auto;min-height:52px;font-size:18px}
  .fbox .strip{font-size:15px;min-height:28px}
  .fbox.empty .body{font-size:48px}
  .boxwrap .bleft .draw{max-width:720px;margin:0 auto}
  .sendwrap .pages canvas{max-width:760px;margin:8px auto}
  .pgrid{grid-template-columns:repeat(4,1fr)}
  .ov .pane{max-width:900px}
}
/* 3-column fill-out: left order form (sticky), center boxes + misc, right palette */
@media (min-width:960px){
  #view.withtray{display:grid;grid-template-columns:clamp(270px,26vw,300px) minmax(0,1fr);column-gap:16px;align-items:start}
  #view.withtray > .formhead{grid-column:1;grid-row:1 / span 30;align-self:start;position:sticky;top:76px;max-height:calc(100vh - 90px);overflow:auto;margin-bottom:0;z-index:4;padding:10px 12px}
  #view.withtray > .formhead .co{flex-direction:column;align-items:flex-start;gap:8px}
  #view.withtray > .formhead .co .colog{height:52px;margin-left:0}
  #view.withtray > .formhead .co .info{text-align:left;font-size:13px !important;line-height:1.35}
  #view.withtray > .formhead .row{flex-direction:column;align-items:flex-start;gap:4px;margin-top:10px}
  #view.withtray > .formhead h1{font-size:19px;letter-spacing:.3px}
  #view.withtray > .formhead .muted{text-align:left;font-size:18px}
  #view.withtray > .formhead .det-sum{min-height:56px;padding:10px 12px;font-size:18px;align-items:flex-start}
  #view.withtray > .formhead .ocrrow{grid-template-columns:1fr}
  #view.withtray > .formhead .inline-in{flex-wrap:wrap}
  #view.withtray > .formhead .inline-in .btn{width:100%}
  #view.withtray > .sheetnav,
  #view.withtray > #grid,
  #view.withtray > .muted,
  #view.withtray > .btn,
  #view.withtray > .misc{grid-column:2;max-width:none;width:auto}
  #view.withtray > .sheetnav{margin-top:0}
  #view.withtray > .misc{margin-top:18px;position:static;max-height:none;overflow:visible}
}
@media (min-width:1100px) and (orientation:landscape){
  #view{max-width:1240px}
  #view.withtray{max-width:none}
  #view.withtray .sheetnav{margin-top:0;margin-bottom:6px}
  #view.withtray .sheetnav .btn{min-height:48px}
  .boxwrap{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
  .boxwrap .bleft{position:sticky;top:76px}
  .sendwrap{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
  .kp{left:auto;right:0;top:62px;width:440px;border-top:0;border-left:4px solid var(--accent2);overflow:auto}
  .kpopen .draw svg{max-height:none;width:100%}
  .kpopen .boxwrap .bright{visibility:hidden}
}
@media (min-width:1000px) and (orientation:portrait){
  #view.withtray .grid{gap:10px}
}

@container (min-width:620px){
  .mhead{display:grid;grid-template-columns:80px 1fr 110px 120px 210px;gap:6px;font-weight:900;font-size:15px;padding:0 10px;color:var(--sub)}
  .mrow{grid-template-columns:80px 1fr 110px 120px 210px;grid-template-areas:"q m u a x";align-items:center}
}
.co .colog{height:58px;width:auto;display:block;background:#fff;border-radius:8px;padding:3px 6px;margin:0;flex:none}
.formhead .co .colog{height:50px}
.formhead h1{font-size:21px}
@media (min-width:400px) and (max-width:759px){.tray .thumb{width:calc(16.666% - 7px)}.tray .thumb svg{height:52px}}
@media (max-width:380px){.formhead h1{font-size:18px}}