.glyph-generator { max-width: 900px; margin: 1.5rem auto; padding: 1rem; border: 1px solid #d7d7d7; border-radius: 10px; color: inherit; }
.glyph-generator__form { display: grid; gap: .75rem; }
.glyph-generator__form > label { font-weight: 600; }
.glyph-generator__text { width: 100%; max-width: 100%; box-sizing: border-box; padding: .75rem; border: 1px solid #999; border-radius: 5px; font: inherit; resize: vertical; }
.glyph-generator__controls { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.glyph-generator__background-label { display: grid; gap: .3rem; font-size: .95rem; }
.glyph-generator__background { min-width: 150px; padding: .55rem; font: inherit; }
.glyph-generator__submit { padding: .65rem 1rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; }
.glyph-generator__submit:disabled { opacity: .6; cursor: wait; }
.glyph-generator__note { margin: 0; font-size: .85rem; opacity: .8; }
.glyph-generator__status { margin-top: .75rem; }
.glyph-generator__result { margin-top: 1rem; overflow-x: auto; }
.glyph-generator__canvas { display: block; width: auto; max-width: 100%; height: auto; image-rendering: auto; border: 1px solid #eee; background: #fff; }
@media (max-width: 520px) { .glyph-generator { padding: .75rem; } .glyph-generator__controls { align-items: stretch; flex-direction: column; } .glyph-generator__submit { width: 100%; } }

.glyph-generator__debug { margin-top: 1rem; font-size: .9rem; }
.glyph-generator__debug summary { cursor: pointer; }
.glyph-generator__debug pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; background: #f5f5f5; border: 1px solid #ddd; max-height: 24rem; overflow: auto; font-size: .82rem; }

/* Glyphanelli theme-aware palette; font families deliberately inherit from the active theme. */
.glyphanelli { background: var(--ga-panel-bg, transparent); color: var(--ga-panel-text, inherit); border-color: var(--ga-border, #d7d7d7); font-family: inherit; }
.glyphanelli .glyph-generator__text, .glyphanelli .glyph-generator__background { background: var(--ga-input-bg, #fff); color: var(--ga-input-text, inherit); border-color: var(--ga-border, #999); font-family: inherit; }
.glyphanelli .glyph-generator__submit { background: var(--ga-button-bg, #222); color: var(--ga-button-text, #fff); font-family: inherit; }
.glyphanelli .glyph-generator__canvas { background: var(--ga-preview-bg, #fff); border-color: var(--ga-preview-border, #eee); }
.glyphanelli .glyph-generator__form, .glyphanelli label, .glyphanelli p, .glyphanelli button, .glyphanelli select, .glyphanelli textarea { font-family: inherit; }