:root{--card-bg:#fff;--card-border:#e2e8f0;--card-shadow:0 10px 25px -5px rgba(0,0,0,.04),0 8px 10px -6px rgba(0,0,0,.04);--input-bg:#f8fafc;--input-border:#cbd5e1;--input-focus-border:#6366f1;--text-main:#1e293b;--text-muted:#64748b;--primary-color:#6366f1;--primary-hover:#4f46e5}.custom-picker-container{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--card-shadow);max-width:960px;padding:32px;position:relative;width:100%}.custom-picker-layout{display:grid;gap:24px;grid-template-areas:"comparison" "picker" "formats";grid-template-columns:1fr}.picker-left{display:flex;flex-direction:column;gap:20px;grid-area:picker;min-width:0}.picker-board-wrap{border:1px solid var(--card-border);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.04);overflow:hidden;width:100%}.picker-board{aspect-ratio:1/1;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,red);cursor:crosshair;position:relative;touch-action:none;width:100%}.picker-pointer{border:2.5px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 2px rgba(0,0,0,.3);height:18px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:18px}.picker-controls{background:#f8fafc;border:1px solid var(--card-border);border-radius:12px;gap:18px;padding:16px 20px 20px}.picker-controls,.slider-group{display:flex;flex-direction:column}.slider-group{gap:8px;position:relative}.slider-header{align-items:center;display:flex;justify-content:space-between}.slider-label{color:var(--text-main)}.slider-badge,.slider-label{font-size:.95rem;font-weight:600}.slider-badge{background:#fff;border:1px solid var(--card-border);border-radius:6px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding:2px 8px}.slider-track-wrap{padding:4px 0;position:relative;width:100%}.slider-track{border-radius:7px;cursor:pointer;height:14px;position:relative;touch-action:none;width:100%}.hue-track{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.alpha-track{background-color:#fff;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 0),linear-gradient(-45deg,#cbd5e1 25%,transparent 0),linear-gradient(45deg,transparent 75%,#cbd5e1 0),linear-gradient(-45deg,transparent 75%,#cbd5e1 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.alpha-gradient{border-radius:7px;bottom:0;left:0;position:absolute;right:0;top:0}.slider-thumb{background:radial-gradient(circle,#fff 0,#cbd5e1 100%);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.25);height:22px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:22px}.color-comparison{display:flex;gap:14px;grid-area:comparison}.compare-block{align-items:center;display:flex;flex:1;flex-direction:column;gap:6px}.prev-color-block{cursor:pointer;transition:transform .15s ease}.prev-color-block:hover{transform:translateY(-2px)}.color-preview{background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 0),linear-gradient(-45deg,#cbd5e1 25%,transparent 0),linear-gradient(45deg,transparent 75%,#cbd5e1 0),linear-gradient(-45deg,transparent 75%,#cbd5e1 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border:1px solid var(--card-border);border-radius:12px;box-shadow:inset 0 2px 4px rgba(0,0,0,.03);height:64px;overflow:hidden;position:relative;width:100%}.color-preview:after{background-color:var(--preview-color,#fff);border-radius:inherit;content:"";inset:0;position:absolute;transition:background-color .1s ease}.compare-label{color:var(--text-muted);font-size:.95rem;font-weight:600}.picker-right{grid-area:formats;min-width:0}.format-list,.picker-right{display:flex;flex-direction:column}.format-list{gap:16px}.format-item{display:flex;flex-direction:column;gap:6px}.format-item label{color:var(--text-muted);font-size:.95rem;font-weight:700;letter-spacing:.5px}.input-modern-wrap{align-items:center;display:flex;position:relative}.modern-input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text-main);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:500;outline:none;padding:10px 42px 10px 14px;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%}.modern-input:focus{background:#fff;border-color:var(--input-focus-border);box-shadow:0 0 0 3px rgba(99,102,241,.15)}.modern-input.input-error{background-color:#fef2f2!important;border-color:#ef4444!important}.btn-copy-integrated{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:8px;transition:color .15s,background-color .15s}.btn-copy-integrated:hover{background:#eef2ff;color:var(--primary-color)}.history-section{border-top:1px solid var(--card-border);margin-top:24px;padding-top:20px}.history-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.history-title{color:var(--text-muted);font-weight:600}.btn-clear-history{background:transparent;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:.95rem;padding:2px 6px;transition:color .15s}.btn-clear-history:hover{color:#ef4444}.history-grid{display:flex;flex-wrap:wrap;gap:12px;min-height:80px}.history-item{align-items:center;cursor:pointer;display:flex;flex-direction:column;position:relative;transition:transform .15s ease;width:76px}.history-item:hover{transform:translateY(-2px)}.history-swatch{background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 0),linear-gradient(-45deg,#cbd5e1 25%,transparent 0),linear-gradient(45deg,transparent 75%,#cbd5e1 0),linear-gradient(-45deg,transparent 75%,#cbd5e1 0);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.05);height:52px;width:76px}.history-hex{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.8rem;font-weight:500;margin-top:5px;white-space:nowrap}.history-del-btn{align-items:center;background:#fff;border:1px solid var(--card-border);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#64748b;cursor:pointer;display:flex;font-size:12px;font-weight:600;height:18px;justify-content:center;line-height:1;opacity:0;padding:0;position:absolute;right:-6px;top:-6px;transition:opacity .15s,background .15s,color .15s;width:18px}.history-item:hover .history-del-btn{opacity:1}.history-del-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}@media (max-width:767px){.custom-picker-container{padding:16px}.custom-picker-layout{row-gap:18px}.color-preview{height:44px}}@media (min-width:768px){.custom-picker-layout{column-gap:32px;grid-template-areas:"picker comparison" "picker formats";grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;row-gap:20px}.color-preview{height:64px}}