*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}.app-header{padding:1rem 1.5rem;text-align:center}.header-subtitle{margin-top:.2rem}.github-ribbon{position:fixed;top:0;right:0;z-index:1000;width:12.1em;height:12.1em;overflow:hidden;pointer-events:none;font-size:16px}.github-ribbon a{position:absolute;top:3.23em;right:-3.23em;width:15.38em;padding:.4em 0;transform:rotate(45deg);text-align:center;text-decoration:none;white-space:nowrap;font-size:.75em;font-weight:700;letter-spacing:.08em;pointer-events:auto}@media (max-width: 500px){.github-ribbon{font-size:11px}}.app-main{max-width:1800px;margin:0 auto;padding:1rem}.tab-bar{display:flex;gap:0;margin-bottom:1rem}.tab-btn{border:none;padding:.7rem 1.4rem;cursor:pointer}.tab-btn-right{margin-left:auto}.tab-panel{display:none}.tab-panel.active{display:block}.printer-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}.printer-select{flex:1;min-width:200px;padding:.5rem .75rem;border-radius:var(--radius)}.status-msg{padding:.4rem .75rem;margin-bottom:.5rem;white-space:pre-wrap;word-break:break-word}.hidden{display:none!important}.main-grid{display:grid;grid-template-columns:340px 1fr;gap:1rem;align-items:start}@media (max-width: 1100px){.main-grid{grid-template-columns:1fr}}.preview-col{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.preview-wrap{overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px}.preview-canvas{max-width:100%;max-height:50vh;display:block}.upload-zone{display:flex;align-items:center;justify-content:center;padding:1rem;cursor:pointer;text-align:center}.controls-col{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:stretch}.controls-col>details{height:100%}@media (max-width: 1100px){.controls-col{grid-template-columns:repeat(3,1fr)}}@media (max-width: 700px){.controls-col{grid-template-columns:1fr}}details{overflow:hidden}.section-title{padding:.5rem .75rem;cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none}.section-title::-webkit-details-marker{display:none}details>*:not(summary){padding:.5rem .75rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;cursor:pointer;white-space:nowrap;border-radius:var(--radius)}.btn:disabled{cursor:not-allowed}.btn-small{padding:.3rem .6rem}.btn-large{padding:.6rem 1.4rem}.btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.btn-row{display:flex;gap:.4rem;flex-wrap:wrap}.slider-row{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:.5rem}.slider-label{white-space:nowrap}.slider-value{text-align:right}input[type=range]{width:100%}.toggle-row{display:flex;gap:.75rem;flex-wrap:wrap}.toggle{display:flex;align-items:center;gap:.35rem;cursor:pointer}.toggle input[type=checkbox]{width:15px;height:15px}.select-row{display:flex;align-items:center;gap:.5rem}.select-row label{min-width:60px}.select-row select{flex:1;padding:.3rem .5rem}.font-picker{position:relative;flex:1}.font-picker-label{display:block;padding:.3rem .5rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.font-picker-list{position:absolute;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;z-index:100}.font-picker-item{padding:.4rem .5rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-input{width:100%;padding:.4rem .6rem;resize:vertical}.zpl-toolbar{display:flex;gap:.5rem;align-items:center;margin-bottom:.75rem;flex-wrap:wrap}.zpl-toolbar .printer-select{flex:1;min-width:200px}.zpl-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:start}@media (max-width: 900px){.zpl-editor-grid{grid-template-columns:1fr}}.zpl-textarea{width:100%;height:60vh;padding:.5rem;resize:vertical;display:block}.zpl-preview-wrap{min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden}.zpl-preview-placeholder{padding:2rem;text-align:center}.zpl-inline-preview{max-width:100%;display:block}.font-preview-item{padding:.6rem 0}dialog{padding:0;max-width:95vw}.webcam-dialog,.zpl-dialog{padding:1.5rem}.webcam-content,.zpl-dialog-content{display:flex;flex-direction:column;gap:1rem}.webcam-video{width:100%;max-height:65vh}.webcam-actions{display:flex;justify-content:flex-end;gap:.75rem}.zpl-preview-img{max-width:100%}.tab-content{padding:.5rem 0}.tab-content h3{margin-bottom:.5rem;padding-left:.6rem}.tab-content h4{margin:.75rem 0 .25rem}.tab-content ol{padding-left:1.25rem}.about-stats{margin-bottom:1.5rem}.stats-table{border-collapse:collapse;width:auto;min-width:220px;margin-top:.5rem}.stats-table th,.stats-table td{padding:.3rem 1rem .3rem .4rem;text-align:left}.stats-count{text-align:right!important}.about-readme{margin-top:.5rem;padding-top:1rem}.about-readme h1{padding-left:.6rem;margin-bottom:.5rem}.about-readme h2{margin:1rem 0 .4rem;padding-left:.5rem}.about-readme h3{margin:.75rem 0 .3rem}.about-readme ul,.about-readme ol{padding-left:1.25rem;margin:.3rem 0 .6rem}.about-readme code{padding:.1em .35em;border-radius:3px}.about-readme pre{padding:.6rem .8rem;overflow-x:auto;margin:.5rem 0;border-radius:5px}.about-readme pre code{padding:0}.about-readme hr,hr{margin:.75rem 0}.config-editor-wrap{margin-bottom:.75rem;max-height:60vh;overflow:auto}.config-editor-wrap .cm-editor{height:100%}.config-editor-wrap .cm-editor.cm-focused{outline:none}.config-editor-wrap .cm-scroller{overflow:auto}.config-editor-wrap .cm-content{min-height:300px}.scan-results{margin-bottom:1rem}.scan-heading{margin:0 0 .5rem}.scan-empty{margin:.25rem 0 .75rem}.scan-result-item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.6rem .75rem;margin-bottom:.5rem}.scan-result-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}.scan-result-conn{word-break:break-all}.btn-sm{padding:.3rem .7rem;white-space:nowrap;flex-shrink:0}@font-face{font-family:"5x5Tami";src:url(/stikka-mqtt/assets/5x5-Tami-DGtKQE0O.ttf) format("truetype");font-weight:400;font-style:normal}:root{--accent: #d30707;--primary: #2e3192;--bg-elements: #ffffff;--bg-page: #f5f5f5;--border: #2e3192;--text: #2e3192;--dim: #6066a8}html,body{background:var(--bg-page);color:var(--text);font-family:Space Mono,Courier New,monospace;font-size:18px;text-transform:uppercase;letter-spacing:.04em}.app-header{background:var(--bg-elements);border-bottom:3px solid var(--primary)}.header-title{font-family:"5x5Tami",Space Mono,monospace;font-size:2.8rem;font-weight:700;color:var(--accent);letter-spacing:.08em;line-height:1}.header-subtitle{color:var(--primary);font-size:.75rem;font-weight:700;letter-spacing:.2em}.github-ribbon a{background:var(--accent);color:#fff;box-shadow:0 2px 5px #00000059;font-size:large}.github-ribbon a:hover,.tab-bar{background:var(--primary)}.tab-btn{background:none;border-right:2px solid rgba(255,255,255,.2);color:#ffffffbf;font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background .1s,color .1s}.tab-btn:hover{background:#ffffff1a;color:#fff}.tab-btn.active{background:var(--accent);color:#fff}.tab-btn-right-group{border-right:none;border-left:2px solid rgba(255,255,255,.2)}.printer-select{background:var(--bg-elements);border:2px solid var(--primary);color:var(--text);font-family:inherit;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.status-msg{font-weight:700;border-left:4px solid currentColor;text-transform:none;letter-spacing:normal}.status-ok{color:#1a8c1a;background:#e8f8e8}.status-err{color:var(--accent);background:#fce8e8}.preview-col{background:var(--bg-elements);border:2px solid var(--primary)}.preview-wrap{background:#ccc;border:1px solid #aaa}.preview-canvas{image-rendering:pixelated}.upload-zone{border:3px dashed var(--primary);color:var(--dim);font-weight:700;letter-spacing:.1em;background:var(--bg-elements);transition:border-color .15s,color .15s}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);color:var(--accent);background:#fff5f5}details{background:var(--bg-elements);border:2px solid var(--primary)}details>*+*{border-top:1px solid #c8caeb}.section-title{font-weight:700;color:var(--bg-elements);background:var(--primary);letter-spacing:.1em;font-size:.8rem}.btn{border:2px solid transparent;font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:opacity .15s}.btn:disabled{opacity:.45}.btn:not(:disabled):hover{opacity:.8}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-secondary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-brand{background:var(--accent);border-color:var(--accent);color:#fff}.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}.btn-danger{background:var(--accent);border-color:var(--accent);color:#fff}.btn-small{font-size:.75rem}.btn-large{font-size:.85rem}.slider-label{color:var(--dim);font-size:.75rem;font-weight:700}.slider-value{color:var(--dim);font-size:.75rem;font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--accent)}.toggle{color:var(--dim)}.toggle input[type=checkbox]{accent-color:var(--accent)}.toggle-text{font-size:.8rem;font-weight:700}.select-row label{color:var(--dim);font-size:.75rem;font-weight:700}.select-row select{background:var(--bg-elements);border:2px solid var(--primary);color:var(--text);font-family:inherit;font-size:.75rem;font-weight:700;text-transform:uppercase}.font-picker-label{background:var(--bg-elements);border:2px solid var(--primary);color:var(--text);font-size:1rem;text-transform:none;letter-spacing:normal}.font-picker-label:after{content:" ▾";font-family:inherit;font-size:.7rem;color:var(--dim)}.font-picker-list{background:var(--bg-elements);border:2px solid var(--primary);border-top:none}.font-picker-item{font-size:1rem;border-bottom:1px solid #e0e2f0;text-transform:none;letter-spacing:normal}.font-picker-item:last-child{border-bottom:none}.font-picker-item:hover{background:#f0f2ff}.font-picker-item.selected{background:var(--primary);color:#fff}.text-input{background:var(--bg-elements);border:2px solid var(--primary);color:var(--text);font-family:inherit;font-size:.85rem;font-weight:700;text-transform:none;letter-spacing:.02em}.text-input::placeholder{color:var(--dim);font-weight:400}.zpl-textarea{background:var(--bg-elements);border:2px solid var(--primary);color:var(--text);font-family:Space Mono,monospace;font-size:.82rem;text-transform:none}.zpl-preview-wrap{border:2px solid var(--primary);background:#888}.zpl-preview-placeholder{color:var(--dim);font-weight:700;letter-spacing:.1em}.zpl-preview-img{border:2px solid var(--primary)}.font-preview-item{border-bottom:1px solid #c8caeb;color:var(--primary);text-transform:none;letter-spacing:normal}dialog{background:var(--bg-elements);border:3px solid var(--primary);color:var(--text)}dialog::backdrop{background:#2e319280}.webcam-video{background:#000}.countdown{font-size:4rem;font-weight:900;text-align:center;color:var(--accent);-webkit-text-stroke:2px var(--primary)}.tab-content h3{color:var(--accent);border-left:4px solid var(--accent);letter-spacing:.1em}.tab-content h4{color:var(--primary);font-size:.8rem;letter-spacing:.1em}.tab-content p,.tab-content li{color:var(--dim);line-height:1.7;text-transform:none;letter-spacing:normal}.stats-table th,.stats-table td{border-bottom:1px solid #c8caeb;font-size:.88rem;text-transform:none;letter-spacing:normal}.stats-table th{color:var(--primary);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase}.stats-count{font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}.stats-total-row td{border-top:2px solid #c8caeb;font-weight:700;color:var(--primary)}.about-readme{border-top:2px solid #c8caeb}.about-readme h1{color:var(--accent);font-size:1.1rem;border-left:4px solid var(--accent)}.about-readme h2{color:var(--primary);font-size:.95rem;border-left:3px solid var(--primary);letter-spacing:.07em}.about-readme h3{color:var(--primary);font-size:.85rem;letter-spacing:.07em}.about-readme p,.about-readme li{color:var(--dim);line-height:1.7;text-transform:none;letter-spacing:normal;font-size:.88rem}.about-readme code{background:#eef;border-radius:3px;font-family:Space Mono,monospace;font-size:.82rem;text-transform:none;letter-spacing:normal}.about-readme pre{background:#eef}.about-readme pre code{background:none;font-size:.8rem}.about-readme a{color:var(--accent)}hr{border:none;border-top:2px solid #c8caeb}.config-editor-wrap{border:2px solid var(--primary);font-size:.82rem}.config-editor-wrap .cm-editor{font-family:Space Mono,Courier New,monospace;text-transform:none;letter-spacing:normal}.config-editor-wrap .tok-string{color:#1a8c1a}.config-editor-wrap .tok-number{color:var(--accent)}.config-editor-wrap .tok-keyword{color:var(--primary);font-weight:700}.config-editor-wrap .tok-propertyName{color:var(--primary)}.config-editor-wrap .tok-punctuation{color:#6066a8}.config-editor-wrap .cm-activeLine{background:#f0f0fc}.config-editor-wrap .cm-gutters{border-right:1px solid #c8caeb;background:#f5f5ff;color:var(--dim)}.config-editor-wrap .cm-activeLineGutter{background:#e8e8f8}.config-editor-wrap .cm-matchingBracket{background:#d8d8f8;outline:1px solid var(--primary)}.scan-heading{font-size:.9rem}.scan-empty{color:var(--dim);font-size:.9rem}.scan-result-item{border:2px solid var(--primary);background:var(--bg-elements)}.scan-result-info strong{font-size:.95rem}.scan-result-meta{font-size:.78rem;color:var(--dim);text-transform:none;letter-spacing:normal}.scan-result-conn{font-size:.75rem;font-family:Space Mono,monospace;text-transform:none;letter-spacing:normal}.btn-sm{font-size:.8rem}.esp32-flasher-tab .section-title{margin-bottom:0}.esp32-flasher-hint{font-size:.85rem}.esp32-flasher-tab .btn-row{margin:.6rem 0}.esp32-direct-flash-wrap{margin:.75rem 0;padding:.75rem;border:2px solid var(--primary);background:#f4f4ff}.esp32-direct-flash-wrap esp-web-install-button{display:inline-block}.esp32-flasher-cmd{width:100%;border:2px solid var(--primary);background:#eef;color:var(--text);text-transform:none;letter-spacing:normal;font-family:Space Mono,Courier New,monospace;font-size:.82rem;padding:.75rem;overflow-x:auto}