:root{--brand:#db2777;--brand2:#6366f1}
.cl .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.cl label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cl input:not([type=color]):not([type=range]):not([type=file]),.cl select{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;box-sizing:border-box}
.cl input[type=range]{width:100%;accent-color:var(--brand)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}.btnrow.center,.center{justify-content:center;text-align:center}
.btn.sm{padding:7px 12px;font-size:13px}.btn.big{padding:13px 24px;font-size:16px}.small{font-size:12px}.muted{color:var(--muted)}.h3{font-size:16px;margin:18px 0 8px}
.cpw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}@media(max-width:720px){.cpw{grid-template-columns:1fr}}
.sv{position:relative;border-radius:14px;overflow:hidden;touch-action:none}.sv canvas{width:100%;height:auto;aspect-ratio:3/2;display:block;cursor:crosshair}
.dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
.hue{-webkit-appearance:none;appearance:none;height:16px;border-radius:10px;margin:12px 0;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red)}
.hue::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #333}
.nat{width:44px;height:36px;border:0;background:none;padding:0}
.pic{max-width:100%;border-radius:12px;cursor:crosshair;margin-top:8px}
.sw1{height:110px;border-radius:16px;display:grid;place-items:center;font-size:26px;font-weight:800;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
.vals{display:grid;gap:6px;margin:10px 0}.cv{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer;text-align:start}
.cv span{width:46px;font-weight:700;color:var(--muted);font-size:12px}.cv code{flex:1;font-size:14px}.cv.ok{border-color:var(--ok)}
.tints{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.tints button{border:0;border-radius:8px;height:56px;font-size:10px;font-weight:700;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg)}
@media(max-width:600px){.tints{grid-template-columns:repeat(5,1fr)}}
.pal{display:grid;grid-template-columns:repeat(5,1fr);height:min(52vh,420px);border-radius:18px;overflow:hidden;margin:12px 0}
@media(max-width:600px){.pal{grid-template-columns:1fr;height:auto}.pc{min-height:80px}}
.pc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:14px 6px;gap:6px}
.pc .cd{border:0;background:rgba(255,255,255,.2);color:inherit;font-weight:800;font-size:18px;border-radius:10px;padding:6px 10px;cursor:pointer}.pc .lk{border:0;background:none;font-size:20px;cursor:pointer}.pc small{opacity:.8}
.phi{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:4px;padding:0;cursor:pointer}.phi i{width:22px;height:22px}
.hist summary{cursor:pointer;color:var(--muted);font-size:14px}
.gprev{height:min(40vh,320px);border-radius:18px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.2)}
.stops{display:grid;gap:8px}.st{display:flex;align-items:center;gap:8px}.st input[type=color]{width:46px;height:38px;border:0;background:none}.st input[type=text]{max-width:110px}.st b{width:44px;font-size:13px}.st button{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}
.code{background:var(--chip);border-radius:12px;padding:12px;white-space:pre-wrap;word-break:break-all;font-size:13px}
.pr{display:flex;gap:8px;align-items:center}.pr input[type=color]{width:46px;height:42px;border:0;background:none;flex:0 0 auto}
.cprev{border-radius:16px;padding:22px;margin:12px 0;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}.cprev b{font-size:28px;display:block;margin-bottom:6px}.cprev p{margin:0;font-size:16px;line-height:1.6}
.ratio{text-align:center;margin:8px 0}.ratio b{display:block;font-size:52px;font-weight:900}.ratio span{color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}.kv div{border-radius:12px;padding:10px;text-align:center}.kv b{display:block;font-size:16px}.kv span{font-size:12px;color:var(--muted)}
.kv .pass{background:rgba(18,161,80,.14)}.kv .pass b{color:var(--ok)}.kv .fail{background:rgba(229,56,59,.12)}.kv .fail b{color:var(--err)}
.chipc{border:0;border-radius:8px;padding:4px 10px;font-weight:700;cursor:pointer}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px dashed var(--line);border-radius:18px;padding:28px;cursor:pointer;text-align:center}.drop.over{border-color:var(--brand)}.drop .ico{font-size:36px}
.priv{text-align:center;color:var(--muted);font-size:13px}
.iwrap{text-align:center;margin:10px 0}.ic{max-width:100%;max-height:360px;border-radius:12px;cursor:crosshair}
.ipal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:10px 0}.ip{border:0;border-radius:14px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;cursor:pointer;text-align:start}.ip b{font-size:16px}.ip small{opacity:.85}