#shade-panel{margin:18px 0;border:1px solid #ddd;padding:13px;background:#fff}
.shade-heading{font-size:13px;font-weight:600}
.shade-summary{font-weight:400;margin:0 0 0 8px;color:#56464b}
.shade-summary::before{content:'';display:inline-block;width:12px;height:12px;border:1px solid #cfc6c8;border-radius:50%;vertical-align:-2px;margin-right:5px;background:var(--selected-shade)}
.shade-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:12px}
.shade-grid button{display:grid;justify-items:center;gap:4px;min-height:40px;font-size:10px;padding:4px 0;border:1px solid #ddd;background:#fff}
.shade-grid button[aria-pressed=true]{border-color:#252525;box-shadow:inset 0 0 0 1px #252525;font-weight:700}
.shade-grid button span{width:19px;height:19px;border:1px solid #0002;border-radius:50%}
.shade-original{background:linear-gradient(135deg,#fff 45%,#ccc 46%,#ccc 54%,#fff 55%)}
.shade-note{font-size:11px;color:#5d5356;margin:10px 0 0}
@media(max-width:500px){.shade-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
#shade-series{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#shade-series button{min-height:36px;padding:6px 9px;border:1px solid #ccc;background:#fff;color:#292929;font-size:11px}
#shade-series button[aria-pressed=true]{background:#292929;border-color:#292929;color:#fff}