.theme-builder { min-width: 0; display: grid; gap: 28px; }
.theme-builder > header p { max-width: 78ch; margin: 12px 0 0; }
.theme-selection-panel { display: grid; gap: 16px; justify-items: start; }
.theme-selection-panel > label { width: 100%; }
.theme-builder header p, .theme-help, .theme-builder small { color: var(--mud-palette-text-secondary); line-height: 1.6; }
.theme-help { font-size: .85rem; margin: 10px 0 16px; }
.theme-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.theme-builder-controls { display: grid; gap: 28px; min-width: 0; }
.theme-builder fieldset { border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; padding: 24px; display: grid; gap: 24px; min-width: 0; }
.theme-builder legend { font-weight: 650; padding: 0 8px; }
.theme-builder label { display: grid; gap: 10px; font-size: .88rem; }
.theme-builder input:not([type=color]):not([type=checkbox]), .theme-builder select, .theme-builder textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; }
.theme-builder input[type=file] { padding: 8px!important; font-size: .8rem!important; }
.theme-builder input[type=range] { padding: 0!important; min-height: 32px; cursor: pointer; accent-color: var(--mud-palette-primary); }
.theme-builder input[type=color] { width: 100%; min-width: 50px; height: 40px; padding: 3px; background: transparent; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; cursor: pointer; }
.theme-builder input:focus-visible,.theme-builder select:focus-visible,.theme-builder textarea:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.theme-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.theme-preview-column { min-width: 0; align-self: stretch; }
.theme-preview-sticky { position: sticky; top: 95px; }
.theme-live-preview { overflow: hidden; border: 1px solid var(--mud-palette-lines-default); border-radius: 15px; padding: 16px; }
.theme-preview-header { padding: 14px; border-radius: 9px; margin-bottom: 12px; font-weight: 650; overflow-wrap: anywhere; }
.theme-preview-layout { display: grid; grid-template-columns: 100px minmax(0, 1fr); min-height: 310px; gap: 12px; }
.theme-preview-layout nav { display: flex; flex-direction: column; gap: 19px; padding: 14px 10px; border-radius: 9px; font-size: .8rem; overflow-wrap: anywhere; }
.theme-preview-layout nav small { font-size: .58rem; color: inherit; letter-spacing: .08em; }
.theme-preview-layout main { padding: 16px; border-radius: 9px; overflow-wrap: anywhere; }
.theme-preview-layout main h3 { font-size: 1.2rem; }
.theme-preview-layout main p { font-size: .8rem; line-height: 1.55; margin: 12px 0; }
.theme-preview-layout article { padding: 14px; border-radius: 10px; margin-top: 20px; font-size: .85rem; }
.theme-preview-layout article span { display: inline-block; padding: 7px; border-radius: 5px; font-size: .7rem; }
.theme-builder-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.theme-background-thumbnail { max-width: 100%; height: 95px; object-fit: contain; border-radius: 8px; }
@media (max-width: 1100px) { .theme-builder-grid { grid-template-columns: 1fr; } .theme-preview-sticky { position: static; } .theme-preview-column { grid-row: 1; } }
@media (max-width: 480px) { .theme-preview-layout { grid-template-columns: 72px minmax(0, 1fr); gap: 6px; } .theme-live-preview { padding: 8px; } .theme-preview-layout main { padding: 10px; } .theme-builder fieldset { padding: 18px; } }