.input-row{display:flex;gap:.5rem}#char-input{text-align:center;font-size:1.6rem;font-weight:700;text-transform:uppercase;max-width:5rem}.char-pad{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.char-pad button{font-family:var(--mono);font-weight:700;min-width:2.4rem;padding:.45rem .5rem;color:var(--text-2);background:var(--surface-2);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:.2s}.char-pad button:hover{border-color:var(--accent);color:var(--accent)}.char-pad button.is-active{color:#fff;background:var(--accent);border-color:var(--accent)}.checkbox-field{margin-bottom:1rem}.checkbox-label{display:inline-flex!important;align-items:center;gap:.55rem;cursor:pointer;font-weight:600}.checkbox-label input{width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}.seg-preview{display:flex;justify-content:center;margin:1.25rem 0}.seg-wrap{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.6rem}#seg-svg .seg{fill:var(--border);stroke:var(--bg-2);stroke-width:1;transition:fill .15s}#seg-svg .seg.on{fill:var(--accent)}.grid.cols-3 .result{text-align:center;padding:.9rem .6rem;margin-top:0}.grid.cols-3 .big-value{font-size:clamp(1.1rem, 4vw, 1.6rem);line-height:1.15}.grid.cols-3 .badge{margin-top:.45rem}.result-main{border-color:var(--accent)}.result-main .btn-sm{margin-top:.6rem}.code-field{margin-top:1.25rem}#code-out{margin:0;white-space:pre-wrap;word-break:break-word}