/**
 * Color Picker Tool Specific Styling
 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:transparent;color:#0f172a;line-height:1.6}
.color-card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.06);padding:32px;max-width:700px;margin:0 auto}
.color-title{font-size:20px;font-weight:700;margin-bottom:24px;color:#0f172a}
.color-preview{width:100%;height:160px;border-radius:12px;margin-bottom:24px;transition:all .2s ease;border:2px solid rgba(0,0,0,.06)}
.color-section{margin-bottom:20px}
.color-section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;color:#64748b}
.color-input-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.color-input-wrap{flex:1;min-width:100px}
.color-input-wrap label{display:block;font-size:11px;font-weight:600;color:#64748b;margin-bottom:4px;text-transform:uppercase}
.color-input-wrap input[type="text"]{width:100%;height:44px;border:1.5px solid #e2e8f0;border-radius:8px;padding:0 12px;font-size:14px;font-family:'Courier New',monospace;transition:all .2s ease;background:#fff;color:#0f172a}
.color-input-wrap input[type="text"]:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.color-input-wrap input[type="range"]{width:100%;accent-color:#4f46e5;cursor:pointer}
.color-btn{background:#4f46e5;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .2s ease;white-space:nowrap}
.color-btn:hover{background:#4338ca}
.color-btn.copied{background:#10b981!important}
.color-native{width:60px;height:44px;border:none;border-radius:8px;cursor:pointer;padding:2px;background:transparent}
.color-hex-row{display:flex;gap:10px;align-items:flex-end}
.color-hex-row .color-input-wrap{flex:1}
[data-theme="dark"] .color-card{background:#1e293b}
[data-theme="dark"] .color-input-wrap input[type="text"]{background:#0f172a;color:#e2e8f0;border-color:#334155}
[data-theme="dark"] .color-input-wrap input[type="text"]:focus{border-color:#818cf8}
[data-theme="dark"] .color-preview{border-color:rgba(255,255,255,.1)}