/* LIVE Small-update 20: unified selectors and compact appearance panel. */
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-appearance-controls{
 box-sizing:border-box;width:min(760px,100%);margin:12px auto;padding:14px;
 border:1px solid #d9e3f0;border-radius:16px;background:#f7faff;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section{margin-top:15px;background:#f4f7fc;width:min(380px,100%);}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-heading,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-heading{
 margin:0 0 10px;text-align:center;font-size:19px;font-weight:800;color:#233d5a
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-help,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preset-help{
 text-align:center;font-size:12px;color:#5b6d82;line-height:1.5;margin:8px 0 12px
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section #clThemeMasterPreview{
 width:100%!important;height:210px!important;min-height:0!important;
 margin:0 auto!important;border-radius:12px;overflow:hidden
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section .cl-theme-master-board-wrap{
 height:calc(100% - 22px)!important;max-width:calc(100% - 22px)!important
}
/* Five controls: preset & board / background & display / pieces centred below. */
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 column-gap:18px!important;row-gap:12px!important;
 align-items:start!important;justify-items:center!important;
 width:min(520px,100%)!important;margin:0 auto!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-theme-control,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-theme-mix-choice,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-unified-display-choice{
 box-sizing:border-box!important;min-height:0!important;width:100%!important;
 min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:flex-start!important;gap:5px!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-theme-control>label,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-theme-mix-choice>label,
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-unified-display-choice>label{
 box-sizing:border-box!important;display:block!important;width:100%!important;
 height:20px!important;min-height:20px!important;line-height:20px!important;
 margin:0!important;padding:0!important;text-align:center!important;
 font-size:13px!important;font-weight:700!important;color:#304865!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid select{
 box-sizing:border-box!important;display:block!important;flex:none!important;
 width:min(var(--cl-theme-select-width,210px),100%)!important;min-width:0!important;
 max-width:100%!important;height:39px!important;min-height:39px!important;
 margin:0!important;padding:7px 28px 7px 12px!important;text-align:center!important;
 text-align-last:center!important;font-size:14px!important;
 border:1px solid #bacbe1!important;border-radius:9px!important;background:#fff!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-unified-pieces-choice{
 grid-column:1/-1!important;width:min(248px,100%)!important;justify-self:center!important;
}
/* Compact piece row and identical stacked shadow sliders. */
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-panel{
 border-top:1px solid #d8e2f0;margin-top:10px;padding-top:9px;
 display:flex;flex-direction:column;align-items:center;gap:8px;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-content{
 display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-heading{
 text-align:center;margin:0 0 2px;font-size:14px;color:#263e5c;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-picker{
 min-width:0;display:flex;flex-direction:column;align-items:center;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-picker #clThemePiecesPreview{
 box-sizing:border-box!important;display:grid!important;aspect-ratio:auto!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:auto!important;
 width:min(244px,100%)!important;max-width:244px!important;height:70px!important;min-height:0!important;
 gap:0!important;padding:0 4px 8px!important;margin:0 auto!important;
 align-items:center!important;justify-items:center!important;overflow:visible!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-picker #clThemePiecesPreview .cl-theme-piece-button{
 box-sizing:border-box!important;width:56px!important;height:56px!important;max-width:100%!important;
 max-height:56px!important;aspect-ratio:1!important;margin:0!important;overflow:visible!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-content .cl-piece-shadow-controls{
 box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
 width:min(300px,100%)!important;max-width:300px!important;gap:8px!important;
 margin:2px auto 0!important;padding:9px 12px!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-content .cl-piece-shadow-controls label{
 display:flex!important;flex-direction:column!important;box-sizing:border-box!important;
 width:100%!important;min-width:0!important;max-width:100%!important;gap:7px!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-content .cl-piece-shadow-controls input[type=range]{
 display:block!important;box-sizing:border-box!important;width:100%!important;
 min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;
}
/* Colour blind sits directly beneath the preferred pieces/sliders. */
body:not(.board-view) #view-settings #clThemesPanel .cl-unified-colour-panel>.cl-theme-colourblind{
 display:flex!important;align-items:center!important;justify-content:center!important;
 margin:4px auto 0!important;min-height:0!important;padding:4px!important;
 background:transparent!important;border:0!important;box-shadow:none!important;width:auto!important;
}
/* Apply stands alone at the centre; no reset button. */
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-final-actions{
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 align-items:center!important;gap:6px!important;margin:12px auto!important;width:100%!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-final-actions .cl-theme-apply-wrap{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 margin:0 auto!important;gap:4px!important;
}
body:not(.board-view) #view-settings #clThemesPanel .cl-theme-final-actions .cl-theme-apply{
 min-width:150px!important;
}
@media(max-width:560px){
 body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section,
 body:not(.board-view) #view-settings #clThemesPanel .cl-unified-appearance-controls{padding:12px;margin:10px auto}
 body:not(.board-view) #view-settings #clThemesPanel .cl-unified-preview-section #clThemeMasterPreview{
  height:clamp(150px,54vw,210px)!important;min-height:0!important;
 }
 body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid{
  grid-template-columns:1fr!important;row-gap:9px!important;
 }
 body:not(.board-view) #view-settings #clThemesPanel .cl-unified-controls-grid .cl-unified-pieces-choice{grid-column:1!important}
}