.tool-panel[hidden],.image-tool [hidden],.cvd-tool [hidden]{display:none!important;}
.color-tool-section{border-top:1px solid var(--line);}
.soft-tool{background:var(--surface-2);}
.image-tool,.cvd-tool{border:1px solid var(--line);background:var(--surface);}
.image-tool *,.cvd-tool *{box-sizing:border-box;}
.image-tool-head{display:grid;grid-template-columns:1fr minmax(260px,410px);gap:30px;padding:24px;border-bottom:1px solid var(--line);}
.image-tool-head h2{font-size:clamp(22px,3.5vw,34px);margin-top:8px;}
.image-tool-head p{font-size:14px;align-self:end;}
.image-tool-grid{display:grid;grid-template-columns:1.1fr .9fr;min-height:440px;}
.image-source{padding:24px;border-right:1px solid var(--line);min-width:0;}
.image-drop{min-height:390px;border:1px dashed var(--line-2);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;cursor:pointer;transition:border-color .16s,background .16s;}
.image-drop:hover,.image-drop.drag{border-color:var(--accent);background:var(--surface);}
.image-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.image-drop b{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--accent);}
.image-drop span{font-size:12px;color:var(--muted);margin-top:8px;max-width:300px;}
.image-sample{width:100%;border:1px solid var(--line);border-top:0;background:var(--surface);color:var(--accent);padding:10px;font:11px var(--mono);cursor:pointer;}
.image-sample:hover{background:var(--surface-2);}
.image-change{width:100%;border:1px solid var(--line);border-top:0;background:var(--surface);color:var(--text);padding:10px;font:11px var(--mono);cursor:pointer;}
.image-change:hover{color:var(--accent);}
.image-stage{position:relative;background:var(--surface-2);line-height:0;overflow:hidden;min-height:260px;}
.image-stage img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;margin:auto;user-select:none;}
.image-markers{position:absolute;inset:0;pointer-events:none;}
/* маркер пипетки: глубина — только контур в одну линию, без теней (правило DS) */
.image-marker{position:absolute;width:28px;height:28px;border:3px solid var(--surface);outline:1px solid var(--text);transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;font:500 10px/22px var(--mono);text-align:center;color:var(--surface);touch-action:none;}
.image-marker:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.12);}
.image-error{min-height:20px;color:var(--danger);font-size:12px;margin-top:8px;}
.image-output{padding:24px;min-width:0;}
.image-controls,.gradient-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;}
.image-controls select{font:12px var(--mono);border:1px solid var(--line);background:var(--surface);padding:9px 28px 9px 10px;color:var(--text);}
.image-empty{min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;padding:30px;}
.image-result-label{font:500 12px var(--mono);margin-top:20px;}
.extracted-swatches{display:grid;grid-template-columns:repeat(5,1fr);margin:22px 0;border:1px solid var(--line);}
.extracted-swatch{min-width:0;}
.extracted-swatch button{display:block;width:100%;height:150px;border:0;border-right:1px solid var(--line);cursor:pointer;}
.extracted-swatch:last-child button{border-right:0;}
.extracted-swatch span{display:block;font:11px var(--mono);padding:9px 5px;text-align:center;border-top:1px solid var(--line);white-space:nowrap;}
.extracted-swatches.compact{grid-template-columns:repeat(var(--count,4),1fr);margin:14px 0 18px;}
.extracted-swatches.compact .extracted-swatch button{height:64px;}
.image-actions{display:flex;flex-wrap:wrap;gap:9px;}
.gradient-controls{display:grid;grid-template-columns:1fr 1fr;align-items:end;}
.gradient-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;}
.gradient-controls input{grid-column:1/-1;width:100%;accent-color:var(--accent);}
.gradient-preview{height:190px;margin-top:22px;border:1px solid var(--line);}
.gradient-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line);font:500 12px var(--mono);}
.gradient-heading label{display:grid;grid-template-columns:auto minmax(90px,150px) 38px;align-items:center;gap:8px;font-weight:400;}
.gradient-heading input{width:100%;accent-color:var(--accent);}
.gradient-code{font:11px/1.6 var(--mono);background:var(--surface-2);border:1px solid var(--line);border-top:0;padding:11px;overflow-wrap:anywhere;color:var(--text);}
.cvd-inputs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);}
.cvd-input{padding:16px;border-right:1px solid var(--line);}
.cvd-input:last-child{border-right:0;}
.cvd-input label{display:block;font:11px var(--mono);color:var(--muted);margin-bottom:7px;}
.cvd-input-row{display:grid;grid-template-columns:38px 1fr;border:1px solid var(--line);height:42px;}
.cvd-input input[type=color]{width:38px;height:40px;border:0;border-right:1px solid var(--line);padding:4px;background:var(--surface);}
.cvd-input input[type=text]{min-width:0;width:100%;border:0;padding:0 8px;font:12px var(--mono);text-transform:uppercase;outline:0;}
.cvd-input input[type=text]:focus{box-shadow:inset 0 0 0 1px var(--accent);}
.cvd-modes{display:flex;flex-wrap:wrap;gap:8px;padding:18px 24px;border-bottom:1px solid var(--line);}
.cvd-modes button{font:11px var(--mono);padding:8px 11px;border:1px solid var(--line);background:var(--surface);cursor:pointer;}
.cvd-modes button:hover{border-color:var(--accent);color:var(--accent);}
.cvd-modes button.on{background:var(--accent);border-color:var(--accent);color:var(--text-inverse);}
.cvd-view{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line);}
.cvd-row{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);min-height:230px;}
.cvd-color{display:flex;align-items:flex-end;padding:10px 7px;font:10px var(--mono);overflow:hidden;}
.cvd-color span{background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);padding:3px 5px;}
.cvd-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;}
.cvd-foot b{font:500 15px var(--mono);}
.cvd-foot p{font-size:13px;margin-top:4px;max-width:650px;}
.cvd-note{font-size:11px;color:var(--muted);padding:0 24px 20px;}
.tool-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--text);color:var(--text-inverse);padding:9px 15px;font:12px var(--mono);opacity:0;pointer-events:none;transition:.2s;z-index:1300;}
.tool-toast.show{opacity:1;transform:translate(-50%,0);}
@media(max-width:820px){
  .image-tool-grid{grid-template-columns:1fr;}.image-source{border-right:0;border-bottom:1px solid var(--line);}
  .image-drop{min-height:280px;}.cvd-inputs{grid-template-columns:repeat(3,1fr);}.cvd-input:nth-child(3){border-right:0;}.cvd-input:nth-child(-n+3){border-bottom:1px solid var(--line);}
}
@media(max-width:620px){
  .image-tool-head{grid-template-columns:1fr;gap:12px;}.image-tool-grid{min-height:0;}.image-source,.image-output{padding:16px;}
  .extracted-swatches{grid-template-columns:1fr;}.extracted-swatch{display:grid;grid-template-columns:1fr 110px;}.extracted-swatch button{height:58px;border-right:0;}.extracted-swatch span{display:flex;align-items:center;justify-content:center;border-top:0;border-left:1px solid var(--line);}
  .extracted-swatches.compact{grid-template-columns:1fr;}.extracted-swatches.compact .extracted-swatch button{height:42px;}
  .gradient-controls{grid-template-columns:1fr;}.cvd-inputs{grid-template-columns:1fr 1fr;}.cvd-input,.cvd-input:nth-child(3){border-right:1px solid var(--line);border-bottom:1px solid var(--line);}.cvd-input:nth-child(2n){border-right:0;}.cvd-input:last-child{border-bottom:0;}
  .gradient-heading{align-items:flex-start;flex-direction:column;}.gradient-heading label{width:100%;grid-template-columns:auto 1fr 38px;}
  .cvd-view{grid-template-columns:1fr;}.cvd-row{min-height:170px;}.cvd-foot{align-items:flex-start;flex-direction:column;}.cvd-foot .btn{width:100%;justify-content:center;}
}

/* Tools density pass */
.image-tool-head{padding:30px}
.image-source,.image-output{padding:30px}
.image-controls,.gradient-controls{padding-bottom:22px;margin-bottom:4px}
.image-actions{gap:10px}
.gradient-heading{padding-top:24px;margin-top:24px}
.cvd-inputs{grid-template-columns:repeat(5,minmax(130px,1fr))}
.cvd-input{padding:18px}
.cvd-modes{gap:10px;padding:20px 24px}
.cvd-foot{padding:26px 24px}
@media(max-width:620px){
  .image-tool-head,.image-source,.image-output{padding:18px}
  .cvd-inputs{grid-template-columns:1fr}
  .cvd-input,.cvd-input:nth-child(2n),.cvd-input:nth-child(3){border-right:0}
}

/* Swiss consistency */
.image-tool,.cvd-tool,.image-drop,.image-stage,.gradient-preview,.gradient-code,.cvd-color span,.tool-toast{border-radius:0;box-shadow:none;}
.tool-toast{font-family:var(--mono);}
