.tool-appearance-card { width:min(480px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; }
.tool-appearance-card .gc-head > button { background:transparent; border:0; color:inherit; font-size:24px; cursor:pointer; }
.tool-appearance-label { display:flex; flex-direction:column; gap:8px; margin:16px 0; font-size:14px; color:var(--text-main); }
.tool-appearance-preview { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:var(--surface-2); }
.tool-appearance-preview b { overflow-wrap:anywhere; }
.tool-appearance-preview .dc-tool-ico { width:42px; height:42px; }
.tool-color-list { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tool-color-list button { width:25px; height:25px; border-radius:50%; border:2px solid transparent; background:var(--tool-color); cursor:pointer; }
.tool-color-list button[aria-pressed="true"] { outline:2px solid var(--text-main); outline-offset:3px; }
.tool-color-list input { width:32px; height:32px; border:0; padding:0; background:transparent; cursor:pointer; }
.tool-icon-modes { display:flex; gap:4px; padding:4px; margin:20px 0 12px; background:var(--surface-2); border-radius:10px; }
.tool-icon-modes button { flex:1; padding:9px 4px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); cursor:pointer; }
.tool-icon-modes button[aria-pressed="true"] { background:var(--bg-card,#30343b); color:var(--text-main); }
.tool-icon-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; }
.tool-icon-grid[hidden], [data-icon-panel][hidden] { display:none; }
.tool-icon-grid button { display:flex; align-items:center; justify-content:center; min-width:0; height:38px; background:transparent; color:var(--text-main); border:1px solid transparent; border-radius:8px; font-size:23px; cursor:pointer; }
.tool-icon-grid button:hover, .tool-icon-grid button[aria-pressed="true"] { background:var(--surface-2); border-color:var(--primary,#7DD3FC); }
.tool-icon-grid svg { width:21px; height:21px; }
.tool-appearance-actions { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
html body #tool-appearance-editor .tool-appearance-actions .btn-primary { background:var(--ui-ink,#f3f4f6) !important; color:var(--ui-canvas,#151719) !important; }
.tool-appearance-error { color:#F87171; font-size:13px; min-height:0; }
.tool-appearance-error:empty { display:none; }
.tool-custom-png { width:24px; height:24px; object-fit:contain; border-radius:4px; flex:none; }
.tool-custom-emoji { display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; flex:none; }
.dc-hidden-row .tool-custom-emoji { flex:none; font-size:18px; }
.dc-hidden-row .tool-custom-png { width:20px; height:20px; }
.tool-appearance-preview .tool-custom-png { width:34px; height:34px; }
.tool-appearance-preview .tool-custom-emoji { font-size:30px; }
.dc-tool-ico[data-tool-color] { color:var(--tool-color) !important; }
.dc-body .dc-tool-row .dc-tool-ico[data-tool-color] svg,
.dc-body.tools-hidden .dc-tool-row.active .dc-tool-ico[data-tool-color] svg { color:var(--tool-color) !important; }
@media(max-width:440px) { .tool-icon-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }