/* Interface skin picker previews.
   The canonical skin token values live in themes.css; shared component color
   application lives in theme-components.css. This file only renders previews. */

/* Appearance previews: each card displays its own miniature environment rather
   than a single color swatch. */
.v3-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.v3-skin-option { grid-template-columns:minmax(0,1fr) 18px!important; grid-template-rows:72px auto!important; min-height:118px!important; gap:9px 8px!important; padding:10px!important; }
.v3-skin-option:hover { background:var(--surface-secondary)!important; }
.v3-skin-option.is-selected { background:var(--surface-primary)!important; }
.v3-skin-preview { grid-column:1/-1; display:grid; grid-template-columns:24% 1fr; width:100%; height:72px; overflow:hidden; border:1px solid color-mix(in srgb,var(--skin-preview-text) 14%,transparent); border-radius:8px; background:var(--skin-preview-bg); box-shadow:inset 0 1px color-mix(in srgb,var(--skin-preview-surface) 35%,transparent); }
.v3-skin-preview-sidebar { display:flex; flex-direction:column; gap:5px; padding:9px 5px; background:var(--skin-preview-sidebar); }
.v3-skin-preview-sidebar i { display:block; width:76%; height:4px; border-radius:4px; background:color-mix(in srgb,var(--skin-preview-surface) 46%,transparent); }
.v3-skin-preview-sidebar i:first-child { width:48%; height:7px; margin-bottom:4px; background:var(--skin-preview-surface); }
.v3-skin-preview-main { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:9px 1fr; gap:7px; padding:10px; }
.v3-skin-preview-main i { grid-column:1/-1; width:45%; height:5px; border-radius:4px; background:var(--skin-preview-text); opacity:.82; }
.v3-skin-preview-main b,.v3-skin-preview-main em { display:block; min-width:0; border:1px solid color-mix(in srgb,var(--skin-preview-text) 12%,transparent); border-radius:5px; background:var(--skin-preview-surface); box-shadow:0 2px 5px color-mix(in srgb,var(--skin-preview-text) 7%,transparent); }
.v3-skin-preview-main strong { position:absolute; right:10px; bottom:10px; width:26px; height:9px; border-radius:4px; background:var(--skin-preview-button); }
.v3-skin-option .v3-theme-name { align-self:center; font-size:11.5px; white-space:normal; }
.v3-skin-option .v3-theme-check { align-self:center; }
@media(max-width:880px){.v5-settings-page .v3-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.v5-settings-page .v3-skin-grid{grid-template-columns:1fr}.v3-skin-option{grid-template-rows:84px auto!important;min-height:130px!important}.v3-skin-preview{height:84px}}