/* =========================================================
   CIPIT — unelte.css
   Depinde de tokenii din site.css (--pad-x, paleta, gradientele)
   ========================================================= */

/* ---------- hero (același ritm ca .hero--audit) ---------- */
.hero--sub{
  background-image:var(--g-orchid);
  background-size:200% 200%;animation:drift 28s ease-in-out infinite;
  padding:calc(90px + clamp(40px,7vh,90px)) 0 clamp(74px,11vh,130px);
}
.hero--sub h1{max-width:15ch;font-size:clamp(40px,8.8vw,108px)}
.hero--sub .hero__lede{max-width:58ch;margin-bottom:0}

.tools-section{padding:clamp(78px,12vh,140px) 0 clamp(92px,14vh,164px)}

/* ---------- bara de unelte ---------- */
.toolbar{
  display:grid;gap:26px;margin-bottom:clamp(48px,7vh,76px);
  padding-bottom:clamp(34px,5vh,46px);border-bottom:1px solid var(--line);
}
.toolgroup{display:grid;gap:12px}
.toolgroup__row{display:flex;flex-wrap:wrap;gap:8px}
.toolgroup > b{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:#8b93a7;display:flex;align-items:center;gap:12px;
}
.toolgroup > b::after{content:"";flex:1;height:1px;background:var(--line)}

.tab{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:10px 17px;cursor:pointer;color:#4b5162;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.toolgroup:nth-child(1) .tab:hover{background:var(--pink-deep);color:#fff;border-color:var(--pink-deep)}
.toolgroup:nth-child(2) .tab:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.toolgroup:nth-child(3) .tab:hover{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep)}
.toolgroup:nth-child(4) .tab:hover{background:var(--violet-deep);color:#fff;border-color:var(--violet-deep)}
.tab[aria-selected="true"]{
  background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 6px 18px -8px var(--blue);
}

/* ---------- unealtă ---------- */
.panel[hidden]{display:none}
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,68px);align-items:start}
.tool__title{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.4vw,38px);letter-spacing:-.045em;margin:0 0 14px;padding-top:2px}
.tool__title::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:20px}
.tool__intro{margin:0 0 30px;color:#5b6172;max-width:46ch;font-size:16px;line-height:1.68}
.tool__intro code{font-family:var(--mono);font-size:13px;background:#fff;padding:2px 6px;border-radius:4px}

/* ---------- câmpuri ---------- */
.f{margin-bottom:17px}
.f label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#5c5f68;margin-bottom:7px}
.f input[type=text],.f input[type=number],.f select,.f textarea{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;font-family:var(--mono);font-size:14.5px;color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
.f textarea{font-family:var(--body);font-size:15.5px;min-height:150px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,65,194,.14);
}
.f input[type=color]{width:100%;height:50px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.f input[type=range]{width:100%;accent-color:var(--blue)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f-row--3{grid-template-columns:repeat(3,1fr)}
.f-row label{font-size:14px}

/* ---------- rezultate ---------- */
.out{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.out__row{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.out__row:last-child{border-bottom:none}
.out__row > span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5c5f68;flex:none}
.out__val{font-family:var(--mono);font-size:14.5px;text-align:right;word-break:break-all}
.out--code{padding:16px 17px;font-family:var(--mono);font-size:13px;line-height:1.85;white-space:pre-wrap;word-break:break-word}

.copy{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--blue);border:1px solid var(--blue);border-radius:99px;
  padding:6px 12px;cursor:pointer;color:var(--cream);flex:none;transition:background .2s,color .2s,border-color .2s;
}
.copy:hover{background:var(--ink);border-color:var(--ink)}
.copy.is-done{background:var(--teal-deep);border-color:var(--teal-deep)}

.preview-swatch{height:170px;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}
.gradient-preview{height:200px;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}

.drop{
  border:1px dashed #c3cbe0;border-radius:10px;padding:46px 22px;text-align:center;
  cursor:pointer;background:#fff;transition:background .2s,border-color .2s;
}
.drop:hover,.drop.is-over{background:#f2f5fb;border-color:var(--blue);border-style:solid}
.drop p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#5c5f68;line-height:1.8}
.drop input{display:none}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.chip{border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;padding:0;text-align:left}
.chip i{display:block;height:66px}
.chip span{display:block;padding:8px 10px;font-family:var(--mono);font-size:11px}
.chip.is-done span{background:var(--teal-deep);color:#fff}

.contrast-demo{border:1px solid var(--line);border-radius:10px;padding:28px 24px;margin-bottom:18px}
.contrast-demo p{margin:0 0 11px}
.contrast-demo p:last-child{margin:0;font-size:23px;font-weight:800;font-family:var(--display);letter-spacing:-.03em}

.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:5px 11px;border-radius:99px}
.badge--pass{background:var(--teal-deep);color:#fff}
.badge--fail{background:var(--pink-deep);color:#fff}

.big{font-family:var(--display);font-size:clamp(38px,6.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 10px}

.result{
  margin-top:20px;padding:17px 18px;border:1px solid var(--line);border-radius:10px;background:#f2f5fb;
  font-family:var(--mono);font-size:12px;line-height:1.85;
}
.result strong{font-weight:500}
.result a{color:var(--ink)}
.preview-img{margin-top:18px;border:1px solid var(--line);border-radius:10px;max-height:260px;object-fit:contain;width:100%;background:#fff}

.sizes{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.sizes__group{border-bottom:1px solid var(--line-soft)}
.sizes__group:last-child{border-bottom:none}
.sizes__group > b{
  display:block;padding:14px 16px 9px;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
}
.sizes__row{display:flex;justify-content:space-between;gap:14px;padding:8px 15px;font-size:14.5px}
.sizes__row:last-child{padding-bottom:14px}
.sizes__row span:last-child{font-family:var(--mono);font-size:13.5px;color:#5c5f68}

/* previzualizare Google — culorile imită SERP-ul, nu paleta CIPIT */
.serp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 21px}
.serp__url{font-size:13px;color:#4d5156;margin:0 0 4px;font-family:var(--body)}
.serp__title{font-size:20px;line-height:1.3;color:#1a0dab;margin:0 0 5px;font-family:var(--body);font-weight:400}
.serp__desc{font-size:14px;line-height:1.58;color:#4d5156;margin:0;font-family:var(--body)}

@media (max-width:860px){
  .tool{grid-template-columns:1fr}
  .toolbar{gap:14px}
  .f-row--3{grid-template-columns:1fr}
}