.gui-mode-toggle { display: flex; gap: 4px; margin: 0 12px; }
.gui-mode-toggle__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--color-border, #333); background: transparent; color: inherit; cursor: pointer; font-size: 12px; }
.gui-mode-toggle__btn.is-active { background: var(--color-accent, #6b8afd); color: #fff; }

.gui-card { position: relative; }
.gui-card__edit { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 4px; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: 11px; line-height: 20px; padding: 0; }
.gui-card__edit:hover { background: var(--color-accent, #6b8afd); }

#icon-editor-root { display: grid; grid-template-columns: 220px 1fr 260px; gap: 12px; height: 100%; min-height: 400px; }
.ie-list { overflow-y: auto; border-right: 1px solid var(--color-border, #333); padding-right: 8px; }
.ie-list__item { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; border: none; background: transparent; color: inherit; cursor: pointer; font-size: 12px; }
.ie-list__item:hover { background: var(--color-bg-card, #1a1e28); }
.ie-list__item.is-active { background: var(--color-accent, #6b8afd); color: #fff; }

.ie-canvas-wrap { position: relative; background: repeating-linear-gradient(45deg, #111 0 8px, #161616 8px 16px); border-radius: 8px; overflow: hidden; }
.ie-canvas { position: relative; width: 100%; height: 100%; min-height: 300px; }
.ie-baseline, .ie-ascent-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.25); }
.ie-baseline { background: rgba(255,80,80,.6); }
.ie-ascent-line { background: rgba(80,180,255,.6); }
.ie-glyph-img { position: absolute; image-rendering: pixelated; outline: 1px dashed rgba(255,255,255,.4); }
.ie-drag-handle { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent, #6b8afd); cursor: move; z-index: 5; }
.ie-resize-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--color-accent, #6b8afd); cursor: nwse-resize; z-index: 5; }
.ie-empty-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.4); font-size: 13px; }

.ie-props { display: flex; flex-direction: column; gap: 8px; padding-left: 8px; border-left: 1px solid var(--color-border, #333); }
.ie-props label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: rgba(255,255,255,.6); }
.ie-props input[type=number] { padding: 4px 6px; border-radius: 4px; border: 1px solid var(--color-border, #333); background: var(--color-bg-card, #1a1e28); color: inherit; }
.ie-props__actions { display: flex; gap: 6px; margin-top: 8px; }

.int-list { padding: 12px; }
.int-group { margin-bottom: 16px; }
.int-group h4 { margin: 0 0 6px; font-size: 12px; color: rgba(255,255,255,.6); }
#int-form-wrap { max-width: 360px; padding: 12px; }