/* All presentation is scoped to the dedicated Patterns workspace. */
.editor-page #editor-patterns-preview { visibility: hidden; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; background: transparent; }
.editor-page #editor-patterns-preview[hidden],.editor-page #editor-patterns-panel[hidden] { display: none; }
.editor-page #editor-patterns-panel { position: fixed; z-index: 1010; width: 374.9px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 110px); overflow: auto; border: 1px solid #484848; border-radius: 5px; background: rgba(0,0,0,.8); color: #e7e7e7; box-shadow: 0 8px 28px #000a; font: 11px/1.35 system-ui,sans-serif; }
#editor-patterns-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #383838; cursor: move; touch-action: none; }
#editor-patterns-panel strong { font-size: 11px; letter-spacing: .07em; }
#editor-patterns-panel .patterns-title { display: flex; align-items: center; gap: 6px; }
#editor-patterns-panel .patterns-logo { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; }
#editor-patterns-panel .patterns-logo:empty { display: none; }
#editor-patterns-panel .patterns-logo > * { display: block; width: 20px; height: 20px; object-fit: contain; }
#editor-patterns-panel button:not(:where(#editor-patterns-close)),#editor-patterns-panel input,#editor-patterns-panel select { min-width: 0; min-height: 25px; margin: 0; border: 1px solid #454545; border-radius: 3px; padding: 3px 6px; background: transparent; color: #eee; font: inherit; }
#editor-patterns-panel option { background: #000; color: #eee; }
.editor-page #editor-patterns-panel button:not(:where(#editor-patterns-close)) { --premium-surface: #fff; --premium-text: #000; --premium-border: #c7c7c7; background: #fff; color: #000; cursor: pointer; }
#editor-patterns-panel button:not(:where(#editor-patterns-close)):hover { background: #fff; }
#editor-patterns-panel :focus-visible:not(:where(#editor-patterns-close)) { outline: 2px solid #bdbdbd; outline-offset: 2px; }
#editor-patterns-panel :disabled:not(:where(#editor-patterns-close)) { opacity: .45; cursor: default; }
#editor-patterns-panel .patterns-intro { margin: 8px 10px; color: #aaa; font-size: 10px; }
#editor-patterns-panel .patterns-family { min-width: 0; margin: 0; padding: 0 10px 8px; border: 0; }
#editor-patterns-panel .patterns-family :is(select,option) { font: 500 11px/1.35 system-ui,sans-serif; letter-spacing: normal; text-transform: none; }
#editor-patterns-panel .patterns-family select { background: #fff; color: #000; border-color: #c7c7c7; font-weight: 500; }
#editor-patterns-panel .patterns-family option { background: #000; color: #fff; font-weight: 500; }
#editor-patterns-panel .patterns-family option:checked { background: #fff; color: #000; }
#editor-patterns-panel .patterns-family select { box-sizing: border-box; height: 32px; min-height: 32px; }
#editor-patterns-panel .patterns-fields { margin: 0; padding: 0 10px; border: 0; display: grid; gap: 8px; }
#editor-patterns-panel label { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 0; color: #bcbcbc; font: inherit; }
#editor-patterns-panel label > span { flex-shrink: 0; }
#editor-patterns-panel select { width: 100%; }
#editor-patterns-panel .patterns-primary { display: grid; gap: 4px; margin: 0 10px 8px; padding-bottom: 8px; border-bottom: 1px solid #383838; }
#editor-patterns-panel .patterns-seed-fields,#editor-patterns-panel .patterns-seed-buttons { min-width: 0; margin: 0; padding: 0; border: 0; }
#editor-patterns-panel .patterns-seed .editor-slider { grid-template-columns: auto minmax(48px,1fr) auto; gap: 8px; }
#editor-patterns-panel .patterns-seed .editor-slider-label { grid-column: 1; }
#editor-patterns-panel input[name=seed] { width: 88px; }
#editor-patterns-panel .patterns-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#editor-patterns-panel .patterns-seed-buttons { display: flex; gap: 4px; }
#editor-patterns-panel .patterns-actions button { --premium-action-weight: 500 !important; font-weight: 500 !important; color: #000; }
#editor-patterns-panel .patterns-seed-buttons button { min-width: 26px; }
#editor-patterns-panel .patterns-tuning { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
#editor-patterns-panel .patterns-tuning label { display: grid; grid-template-columns: 1fr auto; gap: 2px; }
#editor-patterns-panel .patterns-tuning input { grid-row: 2; grid-column: 1 / -1; }
#editor-patterns-panel input[type=range] { padding: 0; width: 100%; min-height: 15px; height: 15px; border: 0; accent-color: #bdbdbd; background: transparent; }
#editor-patterns-panel output { color: #eee; font-variant-numeric: tabular-nums; font-size: 10px; }
#editor-patterns-panel .patterns-finish { display: grid; grid-template-columns: 1fr; }
#editor-patterns-panel .patterns-finish label:last-child { display: grid; grid-template-columns: 1fr auto; gap: 1px; }
#editor-patterns-panel .patterns-finish input[type=range] { grid-row: 2; grid-column: 1 / -1; }
#editor-patterns-panel .patterns-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 0 10px 8px; }
#editor-patterns-panel .patterns-card { display: flex; flex-direction: column; gap: 3px; padding: 3px; overflow: hidden; }
.editor-page #editor-patterns-panel button.patterns-card { --premium-surface: #000; --premium-text: #fff; background: #000; color: #fff; transition: none; }
.editor-page #editor-patterns-panel button.patterns-card[aria-pressed=true] { --premium-surface: #fff; --premium-text: #000; --premium-border: #000; background: #fff; color: #000; border-color: #000; outline: 1px solid #fff; outline-offset: 1px; }
#editor-patterns-panel .patterns-card canvas { display: block; width: 100%; height: 77px; object-fit: contain; border-radius: 1px; }
#editor-patterns-panel .patterns-card span { color: inherit; font: 9px/1.4 ui-monospace,monospace; }
#editor-patterns-panel .patterns-card:not([aria-pressed=true]) canvas[data-pattern-background=white],
#editor-patterns-panel .patterns-card[aria-pressed=true] canvas[data-pattern-background=black] { filter: invert(1); }
#editor-patterns-panel .patterns-status { min-height: 16px; margin: 8px 10px; color: #bcbcbc; font-size: 10px; }
#editor-patterns-panel footer { display: flex; justify-content: flex-end; gap: 4px; margin-left: auto; }
#editor-patterns-panel footer button { min-width: 54px; }
@media(max-height:700px) { #editor-patterns-panel .patterns-card canvas { height: 46px; } #editor-patterns-panel .patterns-tuning { gap: 3px 10px; } }

#editor-patterns-panel .patterns-status[hidden] { display:none; }

/* Keep the workspace title, live logo and close control above scrolling content. */
.editor-page #editor-patterns-panel > header { position: sticky; top: 0; z-index: 4; background: #080808; }