:root{--mcs-bg:#0d0e12;--mcs-surface:#16181e;--mcs-surface-2:#1e2128;--mcs-border:#2c3038;--mcs-text:#f0f1f4;--mcs-muted:#8a8e9a;--mcs-accent:#3b82f6;--mcs-accent-hover:#60a5fa;--mcs-radius:20px;--mcs-radius-sm:12px;--mcs-shadow:0 10px 40px rgba(0,0,0,0.22);--mcs-focus:0 0 0 3px rgba(59,130,246,0.4);}
.mcs-tool{background:var(--mcs-surface);border:1px solid var(--mcs-border);border-radius:var(--mcs-radius);box-shadow:var(--mcs-shadow);padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem;}
.mcs-base{display:flex;flex-direction:column;gap:1rem;}
.mcs-swatch-wrap{display:flex;flex-direction:column;gap:0.375rem;}
.mcs-swatch-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--mcs-muted);}
.mcs-base-swatch{min-height:100px;border-radius:var(--mcs-radius-sm);border:2px solid var(--mcs-border);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;}
.mcs-base-swatch:hover{transform:scale(1.01);box-shadow:0 6px 20px rgba(0,0,0,0.25);}
.mcs-base-swatch:focus{outline:none;box-shadow:var(--mcs-focus);}
.mcs-inputs{display:flex;flex-direction:column;gap:0.75rem;}
.mcs-label{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--mcs-muted);}
.mcs-hex-row{display:flex;align-items:stretch;gap:0;border:1px solid var(--mcs-border);border-radius:var(--mcs-radius-sm);overflow:hidden;}
.mcs-hex-prefix{padding:0.75rem 0.5rem;font-size:1rem;font-weight:600;background:var(--mcs-surface-2);color:var(--mcs-muted);}
.mcs-hex{flex:1;min-width:0;padding:0.75rem 1rem;font-size:1rem;font-weight:600;background:var(--mcs-surface-2);border:none;color:var(--mcs-text);letter-spacing:0.05em;}
.mcs-hex::placeholder{color:var(--mcs-muted);opacity:0.7;}
.mcs-hex:focus{outline:none;}
.mcs-picker-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0.5rem;cursor:pointer;background:var(--mcs-surface-2);border-left:1px solid var(--mcs-border);}
.mcs-picker-text{font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--mcs-muted);}
.mcs-picker{width:44px;height:40px;padding:2px;border:none;border-radius:8px;cursor:pointer;background:transparent;}
.mcs-picker::-webkit-color-swatch-wrapper{padding:2px;}
.mcs-picker::-webkit-color-swatch{border:none;border-radius:6px;}
.mcs-picker::-moz-color-swatch{border:none;border-radius:6px;}
.mcs-rgb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;}
.mcs-rgb-label{display:flex;flex-direction:column;gap:0.25rem;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--mcs-muted);}
.mcs-num{width:100%;padding:0.5rem;font-size:0.875rem;font-weight:600;text-align:center;background:var(--mcs-surface-2);border:1px solid var(--mcs-border);border-radius:8px;color:var(--mcs-text);}
.mcs-num:focus{outline:none;box-shadow:var(--mcs-focus);border-color:var(--mcs-accent);}
.mcs-types{display:flex;flex-wrap:wrap;gap:0.5rem;}
.mcs-type{padding:0.625rem 1.125rem;font-size:0.875rem;font-weight:600;border:1px solid var(--mcs-border);border-radius:999px;background:var(--mcs-surface-2);color:var(--mcs-text);cursor:pointer;transition:border-color 0.2s,background 0.2s,color 0.2s;}
.mcs-type:hover{border-color:var(--mcs-accent);background:rgba(59,130,246,0.1);}
.mcs-type-active{border-color:var(--mcs-accent);background:rgba(59,130,246,0.2);color:var(--mcs-accent-hover);}
.mcs-controls{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.mcs-slider-group{display:flex;flex-direction:column;gap:0.5rem;}
.mcs-slider-row{display:flex;align-items:center;gap:0.75rem;}
.mcs-slider{flex:1;min-width:0;height:10px;-webkit-appearance:none;appearance:none;background:var(--mcs-surface-2);border-radius:999px;border:1px solid var(--mcs-border);}
.mcs-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--mcs-text);border:2px solid var(--mcs-accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.mcs-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--mcs-text);border:2px solid var(--mcs-accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.mcs-out{min-width:3.5rem;padding:0.375rem 0.5rem;font-size:0.875rem;font-weight:700;text-align:center;background:var(--mcs-surface-2);border:1px solid var(--mcs-border);border-radius:8px;color:var(--mcs-text);}
.mcs-palette-wrap{display:flex;flex-direction:column;gap:0.75rem;}
.mcs-palette-title{font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--mcs-muted);margin:0;}
.mcs-palette{display:flex;flex-wrap:wrap;gap:0.75rem;}
.mcs-palette .mcs-chip{flex:1 1 80px;min-width:80px;max-width:140px;display:flex;flex-direction:column;gap:0.5rem;border-radius:var(--mcs-radius-sm);overflow:hidden;border:1px solid var(--mcs-border);background:var(--mcs-surface-2);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;}
.mcs-palette .mcs-chip:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.mcs-palette .mcs-chip:focus{outline:none;box-shadow:var(--mcs-focus);}
.mcs-palette .mcs-chip-swatch{width:100%;aspect-ratio:1;min-height:64px;}
.mcs-palette .mcs-chip-hex{font-size:0.75rem;font-weight:600;color:var(--mcs-text);padding:0.375rem 0.5rem;text-align:center;word-break:break-all;}
.mcs-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.mcs-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:600;border-radius:var(--mcs-radius-sm);border:1px solid var(--mcs-border);background:var(--mcs-surface-2);color:var(--mcs-text);cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.1s;}
.mcs-btn:hover{border-color:var(--mcs-accent);background:rgba(59,130,246,0.1);}
.mcs-btn:active{transform:scale(0.98);}
.mcs-btn-primary{border-color:var(--mcs-accent);background:var(--mcs-accent);color:#fff;}
.mcs-btn-primary:hover{background:var(--mcs-accent-hover);border-color:var(--mcs-accent-hover);}
.mcs-content{margin-top:2rem;margin-bottom:2rem;padding:1.5rem;background:var(--mcs-surface-2);border:1px solid var(--mcs-border);border-radius:var(--mcs-radius);}
.mcs-content-title{font-size:1.25rem;font-weight:700;margin:0 0 0.75rem;color:var(--mcs-text);}
.mcs-content-p{margin:0 0 1rem;color:var(--mcs-muted);line-height:1.5;}
.mcs-content-h3{font-size:1rem;font-weight:600;margin:1rem 0 0.5rem;color:var(--mcs-text);}
.mcs-content-list{margin:0;padding-left:1.25rem;color:var(--mcs-muted);line-height:1.6;}
.bmc-color .container{--text-muted:var(--mcs-muted);}
@media (min-width:480px){.mcs-base{flex-direction:row;align-items:flex-start;}.mcs-swatch-wrap{flex:0 0 140px;}.mcs-base-swatch{min-height:120px;}.mcs-inputs{flex:1;min-width:0;}.mcs-tool{padding:1.5rem;gap:1.75rem;}}
@media (min-width:640px){.mcs-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}.mcs-palette .mcs-chip{max-width:none;}}
@media (min-width:768px){.mcs-controls{gap:1.5rem;}.mcs-palette .mcs-chip-swatch{min-height:80px;}}
@media (prefers-color-scheme:light){:root{--mcs-bg:#f4f5f8;--mcs-surface:#fff;--mcs-surface-2:#f0f2f6;--mcs-border:#e2e4ea;--mcs-text:#1a1c22;--mcs-muted:#5c5e68;--mcs-accent:#2563eb;--mcs-accent-hover:#1d4ed8;--mcs-shadow:0 4px 24px rgba(0,0,0,0.06);--mcs-focus:0 0 0 3px rgba(37,99,235,0.25);}}