/* =========================================================
   Hreflang Generator – Styles (Basis: assets/css/tool-ui.css)
   ========================================================= */
.hl-head, .hl-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) 34px; gap: 10px; }
.hl-head { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hl-rows { display: grid; gap: 10px; }
.hl-row { align-items: start; }
.hl-code, .hl-url { display: grid; gap: 4px; min-width: 0; }
.hl-row .tu-input.is-err { border-color: var(--err); }
.hl-row small { font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.hl-row small:empty { display: none; }
.hl-row small.is-ok { color: #0f7a52; }
.hl-row small.is-warn { color: #a8561a; }
.hl-row small.is-err { color: var(--err); }
.hl-fix { margin-left: 4px; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--blue); }
.hl-del { display: grid; place-items: center; width: 34px; height: 44px; border-radius: 9px; color: var(--muted); }
.hl-del:hover { color: var(--err); background: rgba(209,52,56,.08); }
.hl-del:disabled { opacity: .3; pointer-events: none; }
.hl-del .i { width: 16px; height: 16px; }
.hl-add { margin-top: 12px; }
.hl-pattern { margin-top: 16px; }
.hl-patternbody { display: grid; gap: 10px; margin-top: 10px; }
.hl-patternrow { display: flex; gap: 10px; }
.hl-patternrow .tu-input { flex: 1; min-width: 0; }
.hl code, .hl-where code { font-family: var(--mono); font-size: .9em; }
.hl-info { margin-top: 12px; }
.hl-info[hidden] { display: none; }
.hl-tabs { margin: 0; padding: 0; border: 0; }
.hl-where { margin-bottom: 8px; }
.hl-pre { max-height: 520px; font-size: 12.5px; white-space: pre; }
.hl-pre .c-tag { color: #f07178; } .hl-pre .c-attr { color: #ffcb6b; }
.hl-empty { color: #8f96b8; font-family: Inter, sans-serif; font-style: italic; }

@media (max-width: 560px) {
  .hl-head { display: none; }
  .hl-row { grid-template-columns: minmax(0, 1fr) 34px; padding: 10px; border-radius: 12px; background: rgba(15,19,48,.03); }
  .hl-url { grid-column: 1; grid-row: 2; }
  .hl-del { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .hl-patternrow { flex-direction: column; }
}