.trail-customizer{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;margin-bottom:20px;padding:22px;align-items:center}
.trail-customizer h2{font-size:18px}.trail-customizer p{font-size:12px;line-height:1.6;color:#9bafba;margin:8px 0 14px}
.trail-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.trail-swatches button{width:28px;height:28px;border-radius:50%;padding:0;background:var(--trail-color);border:3px solid #152129;box-shadow:0 0 0 1px #52616d;cursor:pointer}
.trail-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #e7f4e0}.trail-swatches button:focus-visible{outline:2px solid var(--green);outline-offset:4px}.trail-swatches button:disabled{cursor:default;opacity:.5}
.trail-customizer .trail-custom-color{display:flex;align-items:center;gap:12px;font-size:12px;color:#cbd8dc;margin:14px 0}.trail-custom-color input{width:46px;height:30px;padding:2px;cursor:pointer;border:1px solid #53626c;border-radius:5px;background:#172028}
.trail-save{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.trail-save .button{font-size:11px;min-height:34px;padding:8px 12px}.trail-save span{font-size:10px;line-height:1.5;color:#a7bb9d}.trail-customizer .form-error:empty{display:none}
.trail-preview-wrap{text-align:center;border:1px solid #354650;border-radius:8px;overflow:hidden;background-color:#13232b;background-image:linear-gradient(#263b423d 1px,transparent 1px),linear-gradient(90deg,#263b423d 1px,transparent 1px);background-size:16px 16px}
.trail-preview-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.trail-preview-wrap span{display:block;font:8px Consolas,monospace;letter-spacing:1.5px;color:#8ea7ad;padding:0 8px 12px}
@media(max-width:1100px){.trail-customizer{grid-template-columns:minmax(0,1fr) 160px;padding:18px}}
@media(max-width:600px){.trail-customizer{grid-template-columns:1fr}.trail-preview-wrap{width:100%;max-width:280px;justify-self:center}}