:root{color-scheme:dark;--bg:#0d141b;--panel:#101b24;--panel2:#0c161f;--line:#294153;--text:#e7f0f7;--muted:#8ea5b6;--accent:#5bd2dc;--accent2:#178cad;--input:#0a131b;--danger:#f07474}
html[data-theme=light]{color-scheme:light;--bg:#fff;--panel:#f6fafc;--panel2:#fff;--line:#c8d9e3;--text:#173143;--muted:#617b8e;--accent:#147f84;--accent2:#0f7896;--input:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit;color:inherit}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--line)}.topbar h1{font-size:22px;margin:0 0 4px}.topbar p{margin:0;color:var(--muted);font-size:13px}.tabs{display:flex;gap:4px;background:var(--panel2);padding:4px;border:1px solid var(--line);border-radius:10px}.tab{border:0;background:transparent;padding:8px 14px;border-radius:7px;cursor:pointer}.tab.active{background:var(--accent2);color:white}.tab-panel{display:none;flex:1;min-height:0}.tab-panel.active{display:block}.workspace{height:100%;display:grid;grid-template-columns:280px minmax(360px,1fr) 300px;gap:12px;padding:12px}.panel{min-width:0;min-height:0;border:1px solid var(--line);background:var(--panel);border-radius:10px}.controls-panel,.output-panel{padding:14px;overflow:auto}.preview-panel{display:flex;flex-direction:column;overflow:hidden}.section-title{font-weight:700;margin:2px 0 10px;color:var(--accent)}.section-title:not(:first-child){margin-top:20px}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;padding:12px;border:1px dashed #4a7188;border-radius:9px;background:var(--panel2);cursor:pointer;text-align:center}.drop-zone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}.drop-zone span{font-size:12px;color:var(--muted)}label{display:flex;flex-direction:column;gap:6px;margin:10px 0;color:var(--muted);font-size:13px}input[type=text],input[type=number],select,textarea{width:100%;border:1px solid var(--line);background:var(--input);border-radius:6px;padding:8px 9px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check{flex-direction:row;align-items:center;gap:8px;color:var(--text)}.check input{accent-color:var(--accent2)}.emphasis{color:var(--accent)}.option-group{padding:2px 0}.slider-row{display:grid;grid-template-columns:52px 1fr 48px;align-items:center;gap:8px}.slider-row input{min-width:0}.slider-row output{text-align:right;color:var(--text)}.panel-head{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}.muted{color:var(--muted);font-size:12px}.preview-stage{position:relative;flex:1;min-height:300px;display:grid;place-items:center;padding:18px;overflow:auto;background-color:var(--panel2);background-image:linear-gradient(45deg,rgba(127,127,127,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(127,127,127,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(127,127,127,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(127,127,127,.08) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#previewCanvas{max-width:100%;max-height:100%;image-rendering:pixelated;box-shadow:0 0 0 1px var(--line);display:none}.empty-preview{color:var(--muted);text-align:center}.preview-meta{display:flex;gap:20px;padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.preview-meta b{color:var(--text)}button{border:1px solid var(--line);background:var(--panel2);padding:8px 11px;border-radius:6px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button.primary{background:var(--accent2);border-color:var(--accent2);color:#fff}button:disabled{opacity:.45;cursor:not-allowed}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.output-panel textarea{height:calc(100% - 230px);min-height:220px;resize:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5}.glyph-preview{flex:1;overflow:auto;padding:16px;display:flex;align-content:flex-start;flex-wrap:wrap;gap:12px;background:var(--panel2)}.glyph-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.glyph-card canvas{background:#000;image-rendering:pixelated;border:1px solid var(--line);min-width:48px;min-height:48px}.glyph-card span{font-size:12px;color:var(--muted)}
@media(max-width:980px){.workspace{grid-template-columns:260px minmax(320px,1fr)}.output-panel{grid-column:1/-1;max-height:320px}.output-panel textarea{height:180px;min-height:180px}}
@media(max-width:700px){.app-shell{height:auto;min-height:100vh;overflow:auto}.topbar{align-items:flex-start;flex-direction:column;padding:14px}.workspace{height:auto;grid-template-columns:1fr;padding:8px}.controls-panel,.output-panel{overflow:visible}.preview-panel{min-height:430px}.output-panel{grid-column:auto;max-height:none}.output-panel textarea{height:260px}.tabs{width:100%}.tab{flex:1}}

/* v3: output-type visibility and monochrome-source lock */
.field-hint{display:block;margin-top:2px;color:var(--accent);font-size:12px;line-height:1.45}
#colorMode:disabled{opacity:.72;cursor:not-allowed;background:color-mix(in srgb,var(--input) 86%,var(--line))}
#cOutputArea{margin-top:10px}
#cOutputArea[hidden],#arrayNameRow[hidden],.field-hint[hidden]{display:none!important}
#cOutputArea textarea{height:calc(100% - 48px);min-height:220px;margin-top:10px}
@media(max-width:980px){#cOutputArea textarea{height:180px;min-height:180px}}
@media(max-width:700px){#cOutputArea textarea{height:260px}}

/* v4: image data is generated automatically; keep only the download action. */
.button-row.single-action{grid-template-columns:1fr;}
.button-row.single-action button{width:100%;}