/* Hallmark · functional workbench · genre: modern-minimal · theme: Cobalt
 * nav: edge-aligned · footer: inline · no external fonts/assets
 * Pre-emit critique: P4 H5 E4 S5 R5 V4 */
:root{--paper:#f3f5f9;--surface:#fff;--ink:#172135;--muted:#5b6576;--line:#dce2ed;--accent:#2456d9;--accent-dark:#1741b3;--accent-soft:#eaf0ff;--green:#08734a;--green-soft:#e8f6ef;--red:#ad2935;--red-soft:#fff0f1;--amber:#936117;--amber-soft:#fff7e8;--focus:#0d47cf;--disabled:#cbd2df;--shadow:0 8px 26px rgba(25,45,80,.04);--sans:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;--mono:"Roboto Mono",Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-tap-highlight-color:transparent}.shell{width:min(calc(100% - 32px),580px);margin:0 auto;padding:22px 0 max(22px,env(safe-area-inset-bottom))}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;white-space:nowrap}button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default}.topbar,.section-top,.order-bottom,.order-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar{align-items:center;margin-bottom:20px}.brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}h1{font-size:25px;line-height:1.25;margin:6px 0 0;letter-spacing:-.04em;font-style:normal;overflow-wrap:anywhere}h2{font-size:16px;font-weight:650;margin:0;min-width:0;font-style:normal}.device-tag{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--muted)}.connection{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:14px}.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto}.connection.online{color:var(--green)}.connection.online .dot{background:var(--green)}.connection.offline{color:var(--red)}.connection.offline .dot{background:var(--red)}.order-panel,.edit-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}.section-top{margin-bottom:20px}.quiet{border:1px solid var(--line);border-radius:6px;min-height:38px;padding:6px 12px;background:var(--surface);color:var(--accent);font-size:13px}.quiet:hover{background:var(--accent-soft)}.quiet:disabled{color:var(--muted);opacity:.55}.order-meta{justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:18px}.order-meta>strong{font-size:24px;line-height:1.1;overflow-wrap:anywhere;min-width:0}.order-meta>span{color:var(--muted);font-size:12px}.order-meta .processed{margin-left:auto;background:var(--green-soft);color:var(--green);padding:4px 7px;border-radius:4px}.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.number{padding:12px 2px 10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);min-width:0}.number b{display:block;font-family:var(--mono);font-size:25px;line-height:1.05;font-weight:600}.number small{display:block;color:var(--muted);font-size:11px;margin-top:7px}.number:hover{border-color:var(--accent)}.number.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.number.selected small{color:var(--accent)}.number:disabled{opacity:.6}.order-bottom{border-top:1px solid var(--line);padding-top:15px;margin-top:17px;font-size:13px;color:var(--muted)}.order-bottom strong{font-family:var(--mono);font-size:22px;color:var(--ink);margin-left:6px}.timestamp{font-size:11px;color:var(--muted);margin:10px 0 0}.hint{font-size:11px;color:var(--muted)}.change-fields{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:12px;align-items:center}.change-fields label{display:block;font-size:12px;color:var(--muted);margin-bottom:9px}.change-fields output,.change-fields input{width:100%;display:block;height:62px;padding:12px 14px;line-height:36px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:30px;background:var(--paper);color:var(--ink);min-width:0}.change-fields input{background:var(--surface)}.change-fields input::placeholder{font-size:19px;color:var(--muted)}.change-fields input[aria-invalid=true]{border-color:var(--red);background:var(--red-soft)}.arrow{color:var(--muted);font-size:22px;margin-top:0}.field-hint{display:block;color:var(--muted);font-size:10px;line-height:1.5;min-height:30px;padding-top:7px}.field-hint.error{color:var(--red)}.preview{margin:12px 0 14px;font-size:13px;color:var(--muted);line-height:1.6;min-height:21px}.primary{display:block;width:100%;min-height:51px;padding:12px;background:var(--accent);color:var(--surface);border:1px solid var(--accent);border-radius:8px;font-size:16px;font-weight:650}.primary:hover:not(:disabled){background:var(--accent-dark)}.primary:disabled{background:var(--disabled);border-color:var(--disabled);color:var(--muted)}.primary.loading{background:var(--accent);color:var(--surface)}.result{border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px;background:var(--surface);overflow-wrap:anywhere}.result strong{font-size:15px}.result p{font-size:13px;line-height:1.7;margin:7px 0 0}.result.success{background:var(--green-soft);border-color:var(--green);color:var(--green)}.result.error{background:var(--red-soft);border-color:var(--red);color:var(--red)}.result.pending{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}.result button{margin-top:12px;margin-right:6px}.muted{font-size:12px;color:var(--muted);grid-column:1/-1}footer{padding:8px 3px 0;color:var(--muted);font-size:11px;line-height:1.7}footer span{font-weight:600}footer p{margin:3px 0 0}[hidden]{display:none!important}@media(max-width:350px){.shell{width:calc(100% - 24px)}.order-panel,.edit-panel{padding:14px}.numbers{gap:6px}.number b{font-size:22px}.change-fields{gap:8px}.hint{font-size:10px}.section-top{gap:6px}}@media(min-width:768px){.shell{padding-top:36px}.order-panel,.edit-panel{padding:24px}}