:root{--tcs-surface:#16181e;--tcs-surface-2:#1e2128;--tcs-border:#2c3038;--tcs-text:#f0f1f4;--tcs-muted:#8a8e9a;--tcs-accent:#0ea5e9;--tcs-accent-hover:#38bdf8;--tcs-radius:16px;--tcs-radius-sm:10px;--tcs-shadow:0 8px 32px rgba(0,0,0,0.2);--tcs-focus:0 0 0 3px rgba(14,165,233,0.35);}
.tcs-tool{background:var(--tcs-surface);border:1px solid var(--tcs-border);border-radius:var(--tcs-radius);box-shadow:var(--tcs-shadow);padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem;}
.tcs-base{display:flex;flex-direction:column;gap:1rem;}
.tcs-base-swatch-wrap{display:flex;flex-direction:column;gap:0.375rem;}
.tcs-swatch-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--tcs-muted);}
.tcs-base-swatch{min-height:88px;border-radius:var(--tcs-radius-sm);border:2px solid var(--tcs-border);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;padding:0;}
.tcs-base-swatch:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,0.25);}
.tcs-base-swatch:focus{outline:none;box-shadow:var(--tcs-focus);}
.tcs-base-inputs{display:flex;flex-direction:column;gap:0.75rem;min-width:0;}
.tcs-label{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--tcs-muted);}
.tcs-hex-row{display:flex;align-items:stretch;border:1px solid var(--tcs-border);border-radius:var(--tcs-radius-sm);overflow:hidden;}
.tcs-hex-prefix{padding:0.75rem 0.5rem;font-size:1rem;font-weight:600;background:var(--tcs-surface-2);color:var(--tcs-muted);}
.tcs-hex{flex:1;min-width:0;padding:0.75rem 1rem;font-size:1rem;font-weight:600;background:var(--tcs-surface-2);border:none;color:var(--tcs-text);letter-spacing:0.05em;}
.tcs-hex::placeholder{color:var(--tcs-muted);opacity:0.7;}
.tcs-hex:focus{outline:none;}
.tcs-picker-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0.5rem;cursor:pointer;background:var(--tcs-surface-2);border-left:1px solid var(--tcs-border);}
.tcs-picker-text{font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--tcs-muted);}
.tcs-picker{width:44px;height:40px;padding:2px;border:none;border-radius:8px;cursor:pointer;background:transparent;}
.tcs-picker::-webkit-color-swatch-wrapper{padding:2px;}
.tcs-picker::-webkit-color-swatch{border:none;border-radius:6px;}
.tcs-picker::-moz-color-swatch{border:none;border-radius:6px;}
.tcs-hue-row{display:flex;flex-direction:column;gap:0.5rem;}
.tcs-hue-wrap{display:flex;align-items:center;gap:0.75rem;}
.tcs-hue-slider{flex:1;min-width:0;height:8px;-webkit-appearance:none;appearance:none;background:var(--tcs-surface-2);border-radius:999px;border:1px solid var(--tcs-border);}
.tcs-hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--tcs-text);border:2px solid var(--tcs-accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.tcs-hue-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--tcs-text);border:2px solid var(--tcs-accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.tcs-hue-out{min-width:3rem;padding:0.375rem 0.5rem;font-size:0.875rem;font-weight:700;text-align:center;background:var(--tcs-surface-2);border:1px solid var(--tcs-border);border-radius:8px;color:var(--tcs-text);}
.tcs-mode{display:flex;flex-wrap:wrap;gap:0.5rem;}
.tcs-mode-btn{padding:0.5rem 1rem;font-size:0.8125rem;font-weight:600;border:1px solid var(--tcs-border);border-radius:999px;background:var(--tcs-surface-2);color:var(--tcs-text);cursor:pointer;transition:border-color 0.2s,background 0.2s,color 0.2s;}
.tcs-mode-btn:hover{border-color:var(--tcs-accent);background:rgba(14,165,233,0.12);}
.tcs-mode-active{border-color:var(--tcs-accent);background:rgba(14,165,233,0.18);color:var(--tcs-accent-hover);}
.tcs-triad{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;}
.tcs-triad-item{display:flex;flex-direction:column;gap:0.5rem;min-width:0;}
.tcs-triad-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--tcs-muted);}
.tcs-triad-swatch{width:100%;aspect-ratio:1;min-height:72px;border-radius:var(--tcs-radius-sm);border:2px solid var(--tcs-border);cursor:pointer;padding:0;transition:transform 0.15s,box-shadow 0.15s;}
.tcs-triad-swatch:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.2);}
.tcs-triad-swatch:focus{outline:none;box-shadow:var(--tcs-focus);}
.tcs-triad-hex{font-size:0.75rem;font-weight:600;color:var(--tcs-text);text-align:center;word-break:break-all;padding:0.25rem 0;}
.tcs-presets{display:flex;flex-direction:column;gap:0.5rem;}
.tcs-presets-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--tcs-muted);}
.tcs-presets-scroll{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch;}
.tcs-presets-scroll::-webkit-scrollbar{height:6px;}
.tcs-presets-scroll::-webkit-scrollbar-track{background:var(--tcs-surface-2);border-radius:999px;}
.tcs-presets-scroll::-webkit-scrollbar-thumb{background:var(--tcs-border);border-radius:999px;}
.tcs-preset{flex:0 0 auto;padding:0.5rem 1rem;font-size:0.8125rem;font-weight:600;border:1px solid var(--tcs-border);border-radius:999px;background:var(--tcs-surface-2);color:var(--tcs-text);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.tcs-preset:hover{border-color:var(--tcs-accent);background:rgba(14,165,233,0.12);}
.tcs-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.tcs-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.125rem;font-size:0.875rem;font-weight:600;border-radius:var(--tcs-radius-sm);border:1px solid var(--tcs-border);background:var(--tcs-surface-2);color:var(--tcs-text);cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.1s;}
.tcs-btn:hover{border-color:var(--tcs-accent);background:rgba(14,165,233,0.1);}
.tcs-btn:active{transform:scale(0.98);}
.tcs-btn-primary{border-color:var(--tcs-accent);background:var(--tcs-accent);color:#fff;}
.tcs-btn-primary:hover{background:var(--tcs-accent-hover);border-color:var(--tcs-accent-hover);}
.tcs-about{padding:1.5rem;background:var(--tcs-surface-2);border:1px solid var(--tcs-border);border-radius:var(--tcs-radius);margin-bottom:2rem;}
.tcs-about-title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem;color:var(--tcs-text);}
.tcs-about-p{margin:0 0 0.75rem;color:var(--tcs-muted);line-height:1.5;}
.tcs-about-list{margin:0;padding-left:1.25rem;color:var(--tcs-muted);line-height:1.6;}
.tcs-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);padding:0.75rem 1.25rem;border-radius:var(--tcs-radius-sm);background:var(--tcs-surface-2);border:1px solid var(--tcs-border);color:var(--tcs-text);font-size:0.875rem;font-weight:600;box-shadow:var(--tcs-shadow);transition:transform 0.25s ease;z-index:1000;}
.tcs-toast[data-show="true"]{transform:translateX(-50%) translateY(0);}
.bmc-color .container{--text-muted:var(--tcs-muted);}
@media (min-width:480px){.tcs-base{flex-direction:row;align-items:flex-start;}.tcs-base-swatch-wrap{flex:0 0 120px;}.tcs-base-swatch{min-height:100px;}.tcs-base-inputs{flex:1;min-width:0;}.tcs-triad-swatch{min-height:80px;}}
@media (min-width:640px){.tcs-triad{gap:1rem;}.tcs-triad-swatch{min-height:96px;}.tcs-tool{padding:1.5rem;gap:1.75rem;}}
@media (min-width:768px){.tcs-triad-swatch{min-height:110px;}}
@media (prefers-color-scheme:light){:root{--tcs-surface:#fff;--tcs-surface-2:#f4f5f8;--tcs-border:#e2e4ea;--tcs-text:#1a1c22;--tcs-muted:#5c5e68;--tcs-accent:#0284c7;--tcs-accent-hover:#0369a1;--tcs-shadow:0 4px 24px rgba(0,0,0,0.06);--tcs-focus:0 0 0 3px rgba(2,132,199,0.25);}}