:root{--primary:#53c7aa;--primary-hover:rgb(130,230,200)}
[data-theme="bright"]{--primary:rgb(0,150,130);--primary-hover:rgb(0,130,110)}
.preview-area{display:flex;flex-direction:column;align-items:center;gap:16px}
.results{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;width:100%}
.glyph-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius)}
.glyph-cell svg{width:72px;height:72px}
.glyph-cell-label{font-size:10px;color:var(--text-secondary);text-align:center;word-break:break-all;max-width:100%}
.detect-summary{font-size:13px;line-height:1.8}
.detect-label{font-weight:600;color:var(--text)}
.axis-table{margin-top:10px;border-collapse:collapse;font-size:12px;width:100%}
.axis-table th{text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);color:var(--text-secondary);font-weight:500;font-size:11px}
.axis-table td{padding:4px 8px;border-bottom:1px solid var(--border);color:var(--text)}
.axis-slider-row{display:flex;align-items:center;gap:12px;width:100%;padding:4px 0}
.axis-slider-label{font-size:13px;font-weight:600;color:var(--primary);min-width:52px;font-family:monospace}
.axis-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:3px;outline:none;accent-color:var(--primary)}
.axis-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer}
.axis-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none}
.axes-sliders{width:100%;max-width:360px;display:flex;flex-direction:column;gap:4px}
.slider-value{font-size:13px;font-weight:600;color:var(--primary);min-width:36px;text-align:right}