.tool-container{font-family:'Inter',system-ui,sans-serif;color:var(--text-main,#1e293b);display:flex;flex-direction:column;gap:1.5rem}.tool-header{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width:768px){.tool-header{grid-template-columns:1fr 1fr}}.controls-card,.visualization-card,.export-section{background:var(--bg-card,#ffffff);padding:1.5rem;border-radius:1.5rem;box-shadow:0 4px 15px rgb(0 0 0 / .03)}.input-group{margin-bottom:1.5rem}.input-group:last-child{margin-bottom:0}.input-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text-muted,#64748b)}.color-picker-wrapper{display:flex;align-items:center;gap:1rem;background:var(--bg-input,#f8fafc);padding:.75rem;border-radius:1rem;border:2px solid var(--border-color,#e2e8f0);transition:border-color 0.2s}.color-picker-wrapper:focus-within{border-color:var(--primary-color,#3b82f6)}.color-swatch-input{width:40px;height:40px;border-radius:.75rem;flex-shrink:0;box-shadow:inset 0 2px 4px rgb(0 0 0 / .1)}.hex-input{flex:1;border:none;background:#fff0;font-size:1.25rem;font-family:monospace;font-weight:600;color:var(--text-main);outline:none;text-transform:uppercase}.form-select{width:100%;padding:1rem;border:2px solid var(--border-color,#e2e8f0);border-radius:1rem;background:var(--bg-input,#f8fafc);font-size:1rem;font-weight:600;color:var(--text-main);outline:none;cursor:pointer}.form-select:focus{border-color:var(--primary-color)}.btn-demo{background:var(--bg-secondary,#e2e8f0);border:none;width:40px;height:40px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);transition:background 0.2s}.btn-demo:hover{background:var(--bg-secondary-hover,#cbd5e1)}.visualization-card{display:flex;flex-direction:column;align-items:center;justify-content:center}.wheel-container{width:160px;height:160px;margin-bottom:1.5rem}.color-wheel{width:100%;height:100%;overflow:visible}.wheel-point{transition:cx 0.3s cubic-bezier(.4,0,.2,1),cy 0.3s cubic-bezier(.4,0,.2,1),fill 0.3s}.wheel-line{transition:x2 0.3s cubic-bezier(.4,0,.2,1),y2 0.3s cubic-bezier(.4,0,.2,1)}.contrast-info{width:100%;text-align:center;background:var(--bg-input,#f8fafc);padding:1rem;border-radius:1rem}.contrast-title{margin:0 0 .75rem 0;font-size:.85rem;font-weight:600;color:var(--text-muted)}.contrast-badges{display:flex;gap:1rem;justify-content:center}.contrast-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-weight:700;font-size:.9rem;transition:background-color 0.3s}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.color-card{background:var(--bg-card,#ffffff);border-radius:1.5rem;overflow:hidden;box-shadow:0 4px 15px rgb(0 0 0 / .03);display:flex;flex-direction:column}.card-header{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:background-color 0.3s}.card-hex{font-family:monospace;font-size:1.5rem;font-weight:800;margin-bottom:.5rem;z-index:2}.btn-copy-main{background:rgb(255 255 255 / .2);border:none;padding:.5rem 1rem;border-radius:.75rem;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);transition:background 0.2s;z-index:2;display:flex;align-items:center;gap:.5rem}.btn-copy-main:hover{background:rgb(255 255 255 / .4)}.shades-ramp{display:flex;flex-direction:column}.shade-row{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer;transition:background-color 0.2s}.shade-row:hover{background:rgb(0 0 0 / .05)}.shade-swatch{width:24px;height:24px;border-radius:.5rem;margin-right:1rem;flex-shrink:0}.shade-label{width:40px;font-size:.8rem;font-weight:700;color:var(--text-muted)}.shade-hex{font-family:monospace;font-size:.9rem;font-weight:600;color:var(--text-main)}.export-title{margin:0 0 1rem 0;display:flex;align-items:center;gap:.5rem}.export-buttons{display:flex;flex-wrap:wrap;gap:1rem}.btn{padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-secondary{background:var(--bg-input,#f1f5f9);color:var(--text-main)}.btn-secondary:hover{background:#e2e8f0}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-main,#1e293b);color:#fff;padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;opacity:0;transition:all 0.3s cubic-bezier(.68,-.55,.265,1.55);z-index:1000}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}