/* Palettes only: incumbent layout, spacing and fonts are preserved. */
html[data-design] body,html[data-design] .app{background:var(--bg)!important}
html[data-design] :is(.vk-topbar,.sidebar,.list-pane,.content-pane,.profile-pane,.section-head,.market-head,.notif-head,.stats-head,.settings-head-bar){background-color:var(--surface)!important;border-color:var(--border)!important}
html[data-design] :is(.wall-pane,.market-pane,.notif-pane,.stats-pane,.settings-pane){background-color:var(--bg)!important}
html[data-design] :is(.settings-group,.kpi-card,.chart-card,.market-card,.wall-card,.community-wall-block,.community-wall-profile){background-color:var(--surface)!important;border-color:var(--border)!important}
html[data-design] .snav-btn{color:var(--muted)!important}
html[data-design] .snav-btn.active{color:var(--accent-text)!important;background-color:var(--accent-soft)!important}
html[data-design] .snav-btn.active i{color:inherit!important;background-color:var(--accent-soft)!important}
html[data-design] :is(.settings-row,.notif-item,.composer,.chat-header){border-color:var(--border)!important}
html[data-design] .notif-item{background-color:var(--surface)!important}
html[data-design] .msg-row.out .msg-bubble{background-color:var(--accent-soft)!important;color:var(--text)!important}
html[data-design] .msg-row.in .msg-bubble{background-color:var(--surface)!important;color:var(--text)!important}
html[data-design] .msg-row:not(.sticker-only) .msg-meta{color:inherit}
/* Native checkbox semantics and measured incumbent boxes are preserved. */
html[data-design] input[type=checkbox][data-design-checkbox]{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box!important;width:var(--design-check-width)!important;height:var(--design-check-height)!important;min-width:0;min-height:0;border:0!important;padding:0!important;border-radius:var(--design-check-radius)!important;background-color:var(--surface)!important;background-image:none;box-shadow:inset 0 0 0 1px var(--muted);background-position:center;background-repeat:no-repeat;background-size:100% 100%}
html[data-design] input[type=checkbox][data-design-checkbox]:is(:checked,:indeterminate){background-color:var(--accent-fill)!important;box-shadow:none;background-image:var(--design-check-mark)}
html[data-design] input[type=checkbox][data-design-checkbox]:indeterminate{background-image:var(--design-check-minus)}
html[data-design] input[type=checkbox][data-design-checkbox]:disabled{opacity:.5}
html[data-design] input[type=checkbox][data-design-checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The picker alone adds layout; the rest of the application keeps its geometry. */
.design-settings-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:12px; align-items:start; }
.design-settings-row > .settings-row-info { padding-top:16px; }
.design-picker { min-width:0; width:100%; }
.design-picker summary { display:flex; align-items:center; gap:10px; min-height:64px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:10px; background:var(--input-bg); color:var(--text); cursor:pointer; list-style:none; }
.design-picker summary::-webkit-details-marker { display:none; }
.design-picker summary > .ti { flex:0 0 auto; color:var(--muted); }
.design-option-copy { display:block; flex:1; min-width:0; text-align:left; }
.design-option-copy strong { display:block; font-size:13px; font-weight:600; }
.design-option-copy small { display:block; margin-top:3px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.design-options { display:grid; gap:2px; max-height:360px; overflow-y:auto; overscroll-behavior:contain; padding:4px; margin-top:6px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); }
.design-option { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding:8px 6px; border:0; border-radius:6px; color:var(--text); background:transparent; font:inherit; cursor:pointer; }
.design-option:hover,.design-option[aria-selected=true] { background:var(--accent-soft); }
.design-selected-mark { flex:0 0 auto; color:var(--accent); visibility:hidden; }
.design-option[aria-selected=true] .design-selected-mark { visibility:visible; }
.design-picker summary:focus-visible,.design-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.design-mini { display:grid; flex:0 0 72px; width:72px; height:44px; box-sizing:border-box; grid-template-columns:24% 1fr; grid-template-rows:7px 1fr; gap:3px; padding:4px; overflow:hidden; border-radius:4px; background:var(--design-mini-bg); border:1px solid color-mix(in srgb,var(--design-mini-border) 20%,transparent); }
.design-mini i { grid-row:1/-1; background:var(--design-mini-nav); border-radius:1px; }
.design-mini b { background:var(--design-mini-surface); border-radius:1px; }
.design-mini em { background:var(--accent); border-radius:1px; margin-right:20%; }
.mini-forma,.mini-noir,.mini-transit { grid-template-columns:1fr; grid-template-rows:7px 1fr; }
.mini-forma i,.mini-noir i,.mini-transit i { grid-row:1; grid-column:1/-1; }
.mini-forma b,.mini-noir b,.mini-transit b { display:none; }
.mini-axis { grid-template-columns:12% 1fr; }
.mini-folio { grid-template-columns:18% 1fr; }
.mini-folio i { border-inline-end:1px solid var(--design-mini-border); }
.mini-contour i { margin:1px; border-radius:3px; }
@media(max-width:599px) {
 .design-settings-row { grid-template-columns:minmax(0,1fr); gap:8px; }
 .design-settings-row > .settings-row-info { padding-top:0; }
}