.color-studio{min-height:100%;color:#252330}.color-studio-head{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 14px}.color-studio-head>div{display:flex;align-items:center;gap:9px}.color-studio-head button{width:30px;height:30px;border:0;border-radius:7px;background:#f3f1f5;color:#4f4956;font-size:17px}.color-studio-head h2{margin:0;font-size:16px}.color-studio-search{height:41px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:5px;border:1px solid #d3ced8;border-radius:9px;padding:0 8px;background:#fff}.color-studio-search:focus-within{border-color:#8b3dff;box-shadow:0 0 0 2px rgba(139,61,255,.12)}.color-studio-search input{width:100%;border:0;outline:0;font-size:10px}.color-studio-search button{height:27px;border:0;border-radius:6px;background:#7d2ae8;color:#fff;padding:0 9px;font-size:8px;font-weight:850}.color-studio-tools{display:flex;gap:8px;margin:11px 0 16px}.color-add,.color-eyedropper{height:35px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dcd7e1;border-radius:8px;background:#fff;color:#393440;font-size:8px;font-weight:800}.color-add{flex:1;position:relative}.color-add i{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);color:#fff;font-style:normal;font-size:13px}.color-add input{position:absolute;width:1px;height:1px;opacity:0}.color-eyedropper{width:39px;font-size:16px}.color-section{margin:0 0 18px}.color-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.color-section-head b{font-size:10px}.color-section-head small{color:#807987;font-size:7px}.color-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.color-grid.compact{grid-template-columns:repeat(8,1fr);gap:6px}.color-swatch{aspect-ratio:1;border:1px solid rgba(30,24,38,.11);border-radius:50%;background:var(--swatch);padding:0;box-shadow:0 1px 3px rgba(20,16,26,.08);position:relative}.color-swatch:hover{transform:scale(1.09);box-shadow:0 4px 9px rgba(26,18,38,.16)}.color-swatch.active:after{content:"";position:absolute;inset:-4px;border:2px solid #7d2ae8;border-radius:50%}.color-swatch.light{box-shadow:inset 0 0 0 1px #d9d5dd}.color-empty{grid-column:1/-1;margin:0;padding:9px;border-radius:7px;background:#f6f4f7;color:#77717c;font-size:8px;line-height:1.4}.brand-color-card{padding:11px;border:1px solid #e1dce5;border-radius:10px;background:linear-gradient(145deg,#fbfbfc,#f4f0f8)}.brand-color-card .color-section-head{margin-bottom:10px}.photo-color-status{display:flex;align-items:center;gap:7px;color:#77717d;font-size:8px}.photo-color-status i{width:15px;height:15px;border:2px solid #d7c7e9;border-top-color:#7d2ae8;border-radius:50%;animation:color-spin .7s linear infinite}@keyframes color-spin{to{transform:rotate(360deg)}}
/* Editable production gradients */
.gradient-card{padding:11px;border:1px solid #ddd7e6;border-radius:11px;background:#f8f7fb}.gradient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.gradient-swatch{height:48px;border:1px solid rgba(27,22,34,.12);border-radius:9px;background:var(--gradient);padding:0;position:relative;overflow:hidden;box-shadow:0 2px 6px rgba(25,19,34,.1);touch-action:manipulation}.gradient-swatch:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(25,19,34,.18)}.gradient-swatch span{pointer-events:none;position:absolute;left:6px;bottom:5px;padding:2px 5px;border-radius:4px;background:rgba(12,12,18,.62);color:#fff;font-size:6px;font-weight:850}.gradient-editor{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid #e4dfe9}.gradient-editor label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;height:31px;padding:0 7px;border:1px solid #d9d3df;border-radius:7px;background:#fff;font-size:7px;font-weight:800}.gradient-editor input[type=color]{width:20px;height:20px;padding:0;border:0;border-radius:50%;overflow:hidden;background:transparent}.gradient-editor .gradient-angle{grid-column:1/2;grid-template-columns:auto 1fr auto}.gradient-angle input{width:100%;min-width:0;border:0;outline:0;text-align:right;font-size:8px}.gradient-editor button{grid-column:2/3;border:0;border-radius:7px;background:#172630;color:#fff;font-size:7px;font-weight:850}.gradient-editor button:hover{background:#00aeb7}
.canvas-opacity-card{padding:12px;border:1px solid #c9dfe2;border-radius:10px;background:linear-gradient(145deg,#f7fcfd,#edf7f8)}.canvas-opacity-controls{display:grid;grid-template-columns:minmax(0,1fr) 54px 10px;align-items:center;gap:7px}.canvas-opacity-controls input[type=range]{width:100%;accent-color:#078c8a}.canvas-opacity-controls input[type=number]{box-sizing:border-box;width:54px;height:34px;border:1px solid #c5d8da;border-radius:7px;background:#fff;text-align:center;font-size:10px;font-weight:850}.canvas-opacity-controls span{font-size:9px;font-weight:900;color:#5d7278}.canvas-opacity-card>p{margin:8px 0 0;color:#6a7d82;font-size:7.5px;line-height:1.45}