/* PRO add-on for Meta Tags tool (keeps tools.css as base) */
.metaWrap{display:grid; gap:14px}
.metaHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.metaHeader h1{margin:0; font-size: clamp(22px, 3.2vw, 34px); font-weight: 950; letter-spacing: -.6px}
.metaHeader p{margin:6px 0 0; color: rgba(255,255,255,.72); font-weight: 650; line-height:1.6; max-width: 82ch}
.metaHeader__cta{display:flex; gap:10px; flex-wrap:wrap}

.seg{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(227,6,19,.10), transparent 60%),
    rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  padding: 16px;
  box-shadow: var(--shadow);
}
.seg h2{margin:0 0 10px; font-size: 16px; font-weight: 950}
.seg .hint{margin:6px 0 0; color: rgba(255,255,255,.65); font-weight: 650; line-height:1.6; font-size: 13px}

.grid2{display:grid; gap:14px}
@media (min-width: 980px){.grid2{grid-template-columns: 1.08fr .92fr; align-items:start}}

.controls{display:grid; gap:12px}
.row2{display:grid; gap:12px}
@media (min-width: 760px){.row2{grid-template-columns: 1fr 1fr}}

.counter{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px}
.counter span{color: rgba(255,255,255,.62); font-weight: 800; font-size: 12px}
.counter .ok{color: rgba(64,255,171,.92)}
.counter .warn{color: rgba(255,202,58,.95)}
.counter .bad{color: rgba(255,74,96,.95)}

.toggleRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.tog{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-weight: 900;
  color: rgba(255,255,255,.86);
}
.tog input{accent-color: var(--brand)}

.previewStack{display:grid; gap:12px}
.previewCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  padding: 14px;
}
.previewTitle{font-weight:950; margin:0 0 10px; font-size: 13px; color: rgba(255,255,255,.86); letter-spacing:.2px}

/* Google preview */
.googlePreview{
  background:#0f0f10;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 12px;
}
.gUrl{color:#a8c7fa; font-size: 12px; font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gTitle{color:#8ab4f8; font-size: 18px; line-height:1.25; font-weight: 700; margin-top: 4px}
.gDesc{color:#bdc1c6; font-size: 13px; line-height:1.45; margin-top: 6px}

/* Social preview */
.socialCard{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
  background:#121214;
}
.socialImg{aspect-ratio: 1200 / 630; width:100%; background: rgba(255,255,255,.05); display:grid; place-items:center; color: rgba(255,255,255,.55); font-weight: 800; font-size: 12px}
.socialBody{padding: 12px}
.socialDomain{color: rgba(255,255,255,.60); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing:.8px}
.socialTitle{margin: 6px 0 0; font-weight: 950; font-size: 14px; line-height:1.3}
.socialDesc{margin: 6px 0 0; color: rgba(255,255,255,.70); font-weight: 650; font-size: 13px; line-height:1.5}

.actionsBar{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px}
.outputWrap{display:grid; gap:10px}
.outputHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.outputHeader .small{margin:0}