.character-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;justify-items:stretch;align-items:start;width:100%;margin:0 auto;max-width:100%}.character-card{min-width:0;max-width:none;width:100%;margin:0;box-sizing:border-box;padding:12px 0 0;background:#fff;border-radius:12px;transition:all .3s ease;cursor:pointer}.character-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.1)}.component-image{transition:all .3s ease;cursor:pointer;width:100px;height:100px;object-fit:contain}.component-image:hover{transform:scale(1.05)}.component-image.selected{border:3px solid #3b82f6;transform:scale(1.05)}.preview-container{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto 8px;overflow:hidden;background:#e5e7eb;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.preview-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.component-selection-layout{display:flex;align-items:flex-start;gap:20px;position:relative}.component-selection-left{flex:1 1 0;min-width:0;max-height:calc(100vh - 300px);overflow-y:auto;padding-right:16px;position:relative}.component-selection-preview-fixed{width:400px;max-width:40vw;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:24px;display:flex;flex-direction:column;align-items:center}@media (max-width:1100px){.component-selection-layout{flex-direction:column}.component-selection-preview-fixed{width:100%;max-width:100%;box-shadow:none;padding:16px 0;margin-top:24px}}.dark{background-color:#1a1a1a;color:#ffffff}.dark .bg-white{background-color:#2d2d2d}.dark .text-gray-800{color:#ffffff}.dark .text-gray-700{color:#e5e5e5}.dark .bg-gray-100{background-color:#1a1a1a}.dark .bg-gray-200{background-color:#3d3d3d}.dark .hover\\:bg-gray-300:hover{background-color:#4d4d4d}.dark .preview-container{background:#3d3d3d}.dark .component-selection-preview-fixed{background:#2d2d2d}