.color-tool{width:100%;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}.color-controls{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.primary-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem;background-color:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px}.color-picker-container{display:flex;flex-direction:column;gap:.5rem}.color-picker{width:80px;height:40px;border:none;border-radius:4px;cursor:pointer;padding:0}.hex-input-container{display:flex;flex-direction:column;gap:.5rem}.hex-input{width:120px;padding:.5rem;border:1px solid #e1e4e8;border-radius:4px;font-family:monospace;font-size:1rem}.random-color-btn{padding:.5rem 1rem;background-color:#0969da;color:white;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:background-color .2s;margin-left:auto}.random-color-btn:hover{background-color:#0860c1}.color-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.color-value-group{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background-color:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px}.color-value-group h3{margin:0;font-size:1rem;font-weight:600;color:#24292e}.rgb-inputs{display:flex;gap:.5rem;margin-bottom:.5rem}.number-input{display:flex;flex-direction:column;gap:.25rem}.number-input label{font-size:.8rem;color:#586069}.number-input input{width:60px;padding:.3rem .5rem;border:1px solid #e1e4e8;border-radius:4px;font-size:.9rem}.color-string{font-family:monospace;font-size:.9rem;color:#24292e;word-break:break-all}.preview-section{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.color-preview{width:100%;height:150px;border-radius:6px;border:1px solid #e1e4e8;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}.color-name{background-color:rgba(0,0,0,.7);color:white;padding:.5rem 1rem;border-radius:4px;margin-bottom:1rem;font-family:monospace}.copy-section{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px}.copy-format-selector{display:flex;gap:.5rem;align-items:center}.copy-format-selector select{padding:.5rem;border:1px solid #e1e4e8;border-radius:4px;font-size:.9rem;background-color:white}.copy-btn{padding:.5rem 1rem;background-color:#2ea44f;color:white;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:background-color .2s;margin-left:auto}.copy-btn:hover{background-color:#2c974b}.recent-colors{background-color:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px;padding:1rem}.recent-colors h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#24292e}.color-swatches{display:flex;flex-wrap:wrap;gap:.5rem}.color-swatch{width:40px;height:40px;border-radius:4px;border:1px solid #e1e4e8;cursor:pointer;transition:transform .2s}.color-swatch:hover{transform:scale(1.1)}@media (max-width:768px){.primary-controls{flex-direction:column;align-items:flex-start}.random-color-btn{width:100%;margin-left:0}.copy-section{flex-direction:column;align-items:flex-start}.copy-btn{width:100%;margin-left:0}}