html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.boot { display: flex; justify-content: center; align-items: center; height: 100vh; }
.public-bg { min-height: 100vh; }
.public-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.public-corner { position: absolute; top: 8px; right: 8px; }
.company-banner { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; border-radius: 10px; }
.company-banner-top { border-radius: 0; }
.company-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.shell-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; margin-left: 4px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; color: #fff; font-weight: 700; cursor: pointer; }
.swatch:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.swatch-on { border-color: var(--mud-palette-text-primary); }
.color-input { width: 52px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
.preview-bar { color: #fff; padding: 12px 16px; font-weight: 600; }
.preview-btn { display: inline-block; color: #fff; padding: 8px 18px; border-radius: 8px; font-weight: 500; }
.gap-2 { gap: 8px; } .gap-3 { gap: 16px; }