/* Shared responsive workspace for the SVG and pixel character designers. */
body.character-tool {display:block;height:100dvh;overflow:hidden;}
.character-tool .designer-workspace {display:grid;grid-template-columns:minmax(0,1fr) 360px;width:100%;height:100%;min-height:0;}
.character-tool .designer-preview {grid-column:1;grid-row:1;min-width:0;min-height:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--tool-bg);}
.character-tool .designer-controls {grid-column:2;grid-row:1;width:100%;min-width:0;max-width:none!important;max-height:none;padding:16px;overflow:auto;border:0;border-left:1px solid var(--tool-line);font-size:14px;}
.character-tool .designer-controls button,.character-tool .designer-controls select,.character-tool .designer-controls input:not([type=range]):not([type=color]),.character-tool textarea {min-height:44px;font-size:14px;max-width:100%;}
.character-tool .designer-controls input[type=color] {width:48px;min-height:36px;flex:none;}
.character-tool .designer-controls input[type=range] {min-height:32px;width:100%;}
.character-tool .brand {font-size:18px;gap:8px;flex-wrap:wrap;}
.character-tool .designer-heading {font-size:18px;margin:0;text-align:center;}
.character-tool .hint {font-size:12px;line-height:1.5;max-width:460px;}
.character-tool .title,.character-tool .section-title {margin:14px 0 8px;}
.character-tool .medallion {width:min(440px,100%,calc(100dvh - 230px));height:auto;aspect-ratio:1;flex:none;}
.character-tool .caption .name {font-size:20px;overflow-wrap:anywhere;}
.character-tool .caption .sub {font-size:12px;overflow-wrap:anywhere;}
.character-tool .designer-import {display:grid;gap:8px;font-size:13px;}
.character-tool .designer-import input {width:100%;min-width:0;}
.character-tool #grid {width:min(465px,100%,calc(100dvh - 180px));height:auto;aspect-ratio:1;grid-template-columns:repeat(16,minmax(0,1fr));grid-template-rows:repeat(16,minmax(0,1fr));touch-action:none;user-select:none;}
.character-tool .cell {width:100%;height:100%;min-width:0;min-height:0;touch-action:none;border-radius:0;}
.character-tool #layerPicker button {min-height:44px;}
.designer-shortcuts {display:none;}
@media(max-width:800px) {
 body.character-tool {height:auto;min-height:100dvh;overflow:auto;}
 .character-tool .designer-workspace {display:flex;flex-direction:column;height:auto;}
 .character-tool .designer-preview {order:0;padding:24px 16px;gap:14px;}
 .character-tool .designer-controls {order:1;width:100%;max-width:none!important;overflow:visible;border-left:0;border-top:1px solid var(--tool-line);padding:16px;}
 .character-tool #grid {width:min(465px,100%);}
 .character-tool .medallion {width:min(360px,calc(100vw - 64px));}
 .designer-shortcuts {display:flex;position:sticky;top:52px;z-index:100;gap:8px;padding:8px 16px;background:var(--tool-panel);border-bottom:1px solid var(--tool-line);}
 .designer-shortcuts a {display:block;flex:1;padding:10px;text-align:center;border:1px solid var(--tool-line);border-radius:8px;text-decoration:none;}
 .designer-preview,.designer-controls {scroll-margin-top:118px;}
 .character-tool .row-buttons {flex-wrap:wrap;}
 .character-tool .row-buttons button {flex:1 1 130px;}
 .character-tool .color-row {font-size:14px;min-height:44px;}
 .character-tool .preset-row {flex-wrap:wrap;}
 .character-tool .preset-row select {min-width:150px;}
}