/* LinkJuicer Free Tools in the seobyruslan CI: square corners, neutral greys, purple accent,
   large form fields and section headings; compact tables and mono numbers in results. */

.ljft {
  --ljft-accent: #5d1fc1;
  --ljft-accent-bg: #f3edfc;
  --ljft-ink: #333;
  --ljft-muted: #6b6b6b;
  --ljft-quiet: #999;
  --ljft-line: #ddd;
  --ljft-panel: #f8f8f8;
  --ljft-sunk: #f0f0f0;
  --ljft-ok: #1f7a4a;
  --ljft-ok-bg: #e7f5ec;
  --ljft-mid: #8a5a00;
  --ljft-mid-bg: #fdf3e1;
  --ljft-bad: #b42318;
  --ljft-bad-bg: #fdecea;
  --ljft-info: #3b4a8a;
  --ljft-info-bg: #eceffa;
  --ljft-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --ljft-radius: 0;
  margin: 1.5em 0;
}
.ljft *, .ljft *::before, .ljft *::after { box-sizing: border-box; }

/* ---- Form ---- */
.ljft__label { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; font-weight: 700; margin-bottom: .45em; }
.ljft__hint { font-weight: 400; font-size: .85em; color: var(--ljft-muted); }
.ljft__row { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.ljft__url, .ljft__urls {
  flex: 1 1 16em; min-width: 0; width: 100%; padding: .75em 1em; font: inherit; font-size: 1.05em;
  border: 2px solid var(--ljft-line); border-radius: 0; background: #fff; color: inherit;
}
.ljft__urls { font-family: var(--ljft-mono); font-size: .85em; line-height: 1.5; min-height: 9em; resize: vertical; }
.ljft__url:focus, .ljft__urls:focus { outline: none; border-color: var(--ljft-accent); }
.ljft__counter { font-family: var(--ljft-mono); font-size: .8em; color: var(--ljft-muted); font-variant-numeric: tabular-nums; }
.ljft__counter--over { color: var(--ljft-bad); font-weight: 600; }
.ljft__controls { display: flex; gap: .75em; flex-wrap: wrap; align-items: center; margin-top: .6em; }
.ljft__go {
  padding: .85em 1.6em; font: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer;
  background: var(--ljft-accent); color: #fff; border: 0; border-radius: 0;
}
.ljft__go:hover { filter: brightness(1.08); }
.ljft__go:focus-visible { outline: 3px solid var(--ljft-accent-bg); outline-offset: 2px; }
.ljft__go:disabled { opacity: .6; cursor: progress; }

/* Segmented control for the run option (Mobile/Desktop). */
.ljft__opt { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 2px solid var(--ljft-line); border-radius: 0; overflow: hidden; margin: 0; padding: 0; }
.ljft__opt legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ljft__opt label { position: relative; margin: 0; }
.ljft__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ljft__opt span { display: block; padding: .7em 1.3em; cursor: pointer; color: var(--ljft-ink); background: #fff; }
.ljft__opt span:hover { color: var(--ljft-accent); }
.ljft__opt label + label span { border-left: 2px solid var(--ljft-line); }
.ljft__opt input:checked + span { background: var(--ljft-accent); color: #fff; }
.ljft__opt input:focus-visible + span { outline: 2px solid var(--ljft-accent); outline-offset: -2px; }

.ljft__turnstile { margin-top: .75em; }
.ljft__status { margin: .75em 0; min-height: 1.4em; color: var(--ljft-muted); }
.ljft__status--error { color: var(--ljft-bad); }
.ljft__rejected { margin: .5em 0; padding: .6em .8em; font-size: .9em; background: var(--ljft-mid-bg); border-radius: var(--ljft-radius); overflow-wrap: anywhere; }
.ljft__rejected ul { margin: .3em 0 0; padding-left: 1.2em; }

/* ---- Results: full-width area below form and sidebar (#ljft-results in the tool layout) ---- */
.ljft--results { margin: 0; }
.ljft--results > .ljft__result:not(:empty), .ljft--results > .ljft__rejected, .ljft--util.ljft--results > :first-child { margin-top: 50px; }

/* Bulk runs: heading + run meta left, summary + CSV right, then the table. */
.ljft__bulk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .75em 1.5em; flex-wrap: wrap; margin: 0 0 1em; }
.ljft__bulk-head .ljft__h { margin: 0 0 .15em; font-size: 1.75em; }
/* Single-URL reports: same head, findings summary as a large pill on the right. */
.ljft__res-head { align-items: center; }
.ljft__res-head > .ljft__pill { font-size: .95em; padding: .45em .9em; white-space: normal; }
.ljft__res-head + .ljft__section { margin-top: 0; }
.ljft__bulk-meta { margin: 0; color: var(--ljft-muted); }
.ljft__panel-actions { display: inline-flex; align-items: center; gap: 1.2em; }
.ljft__summary { font-size: 1.05em; color: var(--ljft-muted); }
.ljft__summary b { color: var(--ljft-ink); font-family: var(--ljft-mono); }
.ljft__summary b.ljft__v--ok { color: var(--ljft-ok); }
.ljft__summary b.ljft__v--mid { color: var(--ljft-mid); }
.ljft__summary b.ljft__v--bad { color: var(--ljft-bad); }
.ljft__btn-ghost { font: inherit; font-size: .95em; font-weight: 600; padding: .45em 1em; border: 2px solid var(--ljft-line); border-radius: 0; background: #fff; color: var(--ljft-ink); cursor: pointer; }
.ljft__btn-ghost:hover { border-color: var(--ljft-accent); color: var(--ljft-accent); }
.ljft__progress { height: 4px; margin: 0 0 1em; background: var(--ljft-sunk); }
.ljft__progress i { display: block; height: 4px; background: var(--ljft-accent); transition: width .4s ease; }
.ljft__note { margin: 0 0 1em; font-size: .9em; color: var(--ljft-muted); }

/* ---- Tables: square, 2px frame, grey head row ---- */
.ljft__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ljft__kv, .ljft__grid { width: 100%; border-collapse: collapse; font-size: .9em; }
.ljft__kv th, .ljft__kv td, .ljft__grid th, .ljft__grid td {
  text-align: left; vertical-align: middle; padding: .4em .7em; border-bottom: 1px solid var(--ljft-line); overflow-wrap: anywhere; white-space: pre-line;
}
.ljft__kv { font-size: 1em; border: 1px solid var(--ljft-line); background: #fff; }
.ljft__kv th, .ljft__kv td { padding: .9em 1.4em; }
.ljft__kv th { width: 22%; min-width: 9em; font-weight: 700; vertical-align: top; background: #f5f5f5; }
.ljft__kv tr:last-child th, .ljft__kv tr:last-child td { border-bottom: 0; }
.ljft__kv td.ljft__kv-aside { width: 1%; text-align: right; white-space: nowrap; vertical-align: top; }
.ljft__grid { border: 2px solid var(--ljft-line); background: #fff; }
.ljft__grid th, .ljft__grid td { padding: .8em 1.1em; }
.ljft__grid th { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ljft-muted); white-space: nowrap; background: #f5f5f5; border-bottom-width: 2px; }
.ljft__grid tr:last-child td { border-bottom: 0; }
.ljft__grid .ljft__r { text-align: right; }
.ljft__grid--bulk { font-size: 1em; }
.ljft__grid--bulk th, .ljft__grid--bulk td { padding-left: .85em; padding-right: .85em; } /* room for the Verlauf column */
.ljft__grid--bulk td { white-space: nowrap; color: var(--ljft-ink); }
.ljft__grid--bulk td:first-child { max-width: 26em; overflow: hidden; text-overflow: ellipsis; }
.ljft__grid--bulk tr:hover td { background: #f8f6fc; }
.ljft__sticky { position: sticky; left: 0; z-index: 1; background: #fff; }
.ljft__grid th.ljft__sticky { background: #f5f5f5; }
.ljft__sortable { cursor: pointer; user-select: none; }
.ljft__sortable:hover { color: var(--ljft-ink); }
.ljft__sortable[aria-sort="ascending"]::after { content: ' ▲'; }
.ljft__sortable[aria-sort="descending"]::after { content: ' ▼'; }
.ljft__pending td { color: var(--ljft-quiet); }
.ljft__url-cell { overflow-wrap: anywhere; }
.ljft__link { color: inherit; text-decoration: none; }
.ljft__link:hover { color: var(--ljft-accent); text-decoration: underline; }

/* Numbers: mono + tabular; only weak values carry colour. */
.ljft__num, .ljft__v, .ljft__grid--bulk td { font-variant-numeric: tabular-nums; }
.ljft__num, .ljft__v { font-family: var(--ljft-mono); font-size: .95em; }
.ljft__v--ok { color: var(--ljft-ok); }
.ljft__v--mid { color: var(--ljft-mid); }
.ljft__v--bad { color: var(--ljft-bad); font-weight: 600; }
.ljft__quiet { color: var(--ljft-quiet); }

/* Score: number + 0–100 bar */
.ljft__score { display: inline-flex; align-items: center; gap: .7em; }
.ljft__score .ljft__v { min-width: 1.6em; }
.ljft__scorebar { display: inline-block; width: 6em; height: 6px; background: var(--ljft-sunk); }
.ljft__scorebar i { display: block; height: 100%; }
.ljft__scorebar-fill--ok { background: var(--ljft-ok); }
.ljft__scorebar-fill--mid { background: #c98a12; }
.ljft__scorebar-fill--bad { background: var(--ljft-bad); }

.ljft__pill { display: inline-block; padding: .1em .6em; border-radius: 0; font-size: .8em; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ljft__pill--ok { background: var(--ljft-ok-bg); color: var(--ljft-ok); }
.ljft__pill--mid { background: var(--ljft-mid-bg); color: var(--ljft-mid); }
.ljft__pill--bad { background: var(--ljft-bad-bg); color: var(--ljft-bad); }
.ljft__pill--info { background: var(--ljft-info-bg); color: var(--ljft-info); }
.ljft__pill--quiet { background: var(--ljft-sunk); color: var(--ljft-muted); }
.ljft__grid--bulk td .ljft__pill { font-family: var(--ljft-mono); }
.ljft__grid--bulk td[colspan] .ljft__pill { font-family: inherit; white-space: normal; }

/* ---- Bulk detail rows: CrUX history ---- */
.ljft__expand-btn { font-size: .85em; padding: .3em .7em; white-space: nowrap; }
.ljft__grid--bulk tr.ljft__detail > td { white-space: normal; padding: 0; background: #fbfaff; }
.ljft__grid--bulk tr.ljft__detail:hover > td { background: #fbfaff; }
/* Sticky, so the panel stays in view while a wide table scrolls sideways. */
.ljft__hist { position: sticky; left: 0; width: var(--ljft-hist-w, 100%); max-width: 100%; padding: 1.2em 1.4em 1.4em; }
.ljft__hist-controls { display: flex; flex-wrap: wrap; gap: .6em 1em; margin: 0 0 1em; }
.ljft__opt--sm span { padding: .4em .9em; font-size: .9em; }
.ljft__hist .ljft__note { margin: 0 0 .6em; }
.ljft__legend { display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin: 0 0 .8em; font-size: .85em; color: var(--ljft-muted); }
.ljft__legend span { display: inline-flex; align-items: center; gap: .4em; }
.ljft__key { display: inline-block; flex: 0 0 auto; width: 14px; height: 2px; background: var(--ljft-accent); }
.ljft__key--box { width: 10px; height: 10px; }
.ljft__key--zones { width: 18px; height: 3px; background: linear-gradient(90deg, #b42318, #c98a12, #1f7a4a); }
.ljft__key--ok { background: var(--ljft-ok); }
.ljft__key--mid { background: #c98a12; }
.ljft__key--bad { background: var(--ljft-bad); }
.ljft__hist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19em, 1fr)); gap: 1em; margin: 0 0 1em; }
.ljft__hist-card { padding: .8em 1em .4em; background: #fff; border: 1px solid var(--ljft-line); }
.ljft__hist-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; margin: 0 0 .3em; }
.ljft__hist-head h4 { margin: 0; font-size: 1em; }
.ljft__hist-head h4 .ljft__quiet { font-family: inherit; font-weight: 400; font-size: .85em; }
.ljft__chart { display: block; width: 100%; height: auto; overflow: visible; }
.ljft__zone--ok { fill: var(--ljft-ok); opacity: .07; }
.ljft__zone--mid { fill: #c98a12; opacity: .09; }
.ljft__zone--bad { fill: var(--ljft-bad); opacity: .07; }
.ljft__chart-rule { stroke: var(--ljft-line); stroke-width: 1; stroke-dasharray: 3 3; }
.ljft__chart-x, .ljft__chart-y { font-size: 11px; fill: var(--ljft-muted); font-family: var(--ljft-mono); }
.ljft__chart-y { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; } /* readable over the line */
.ljft__chart-line { fill: none; stroke: var(--ljft-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ljft__chart-dot { fill: var(--ljft-accent); stroke: #fff; stroke-width: 2; }
.ljft__chart-hair { stroke: var(--ljft-ink); stroke-width: 1; opacity: .35; }
.ljft__seg--ok { fill: var(--ljft-ok); }
.ljft__seg--mid { fill: #c98a12; }
.ljft__seg--bad { fill: var(--ljft-bad); }
.ljft__hit { fill: transparent; cursor: crosshair; outline: none; }
.ljft__hit:focus-visible { fill: var(--ljft-accent); fill-opacity: .08; }
.ljft__tip { position: fixed; z-index: 10000; pointer-events: none; padding: .5em .7em; font-size: 13px; line-height: 1.45; background: #fff; color: var(--ljft-ink, #333); border: 1px solid #ddd; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.ljft__tip-row { display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.ljft__tip-row b { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.ljft__tip-row span { color: #6b6b6b; }
.ljft__tip .ljft__key { width: 12px; height: 2px; background: #5d1fc1; } /* outside .ljft: literal colours */
.ljft__tip .ljft__key--ok { background: #1f7a4a; }
.ljft__tip .ljft__key--mid { background: #c98a12; }
.ljft__tip .ljft__key--bad { background: #b42318; }

/* ---- Single-URL reports ---- */
.ljft__section { margin: 2.4em 0 1.25em; }
.ljft--util > .ljft__section:first-child, .ljft__result > .ljft__section:first-child { margin-top: 0; }
.ljft__opt + .ljft__hint { margin: .6em 0 0; }
/* Font family and weight come from the theme's global heading rule (Manrope 700). */
.ljft__h { margin: 0 0 .8em; letter-spacing: 0; font-size: 1.5em; line-height: 1.25; color: var(--ljft-ink); }
.ljft__section .ljft__section .ljft__h { font-size: 1.15em; }
.ljft__ok { color: var(--ljft-ok); }
.ljft__findings { list-style: none; padding: 0; margin: 0; }
.ljft__finding { border-left: 4px solid var(--ljft-quiet); padding: .6em .85em; margin-bottom: .5em; background: var(--ljft-panel); }
.ljft__finding--error { border-left-color: var(--ljft-bad); }
.ljft__finding--warning { border-left-color: #f79009; }
.ljft__finding--info { border-left-color: var(--ljft-quiet); }
.ljft__finding-head { display: flex; gap: .5em; flex-wrap: wrap; align-items: baseline; }
.ljft__sev { font-weight: 600; font-size: .8em; text-transform: uppercase; letter-spacing: .03em; }
.ljft__count { color: var(--ljft-muted); font-family: var(--ljft-mono); font-variant-numeric: tabular-nums; }
.ljft__examples { margin: .4em 0 0; padding-left: 1.2em; font-size: .9em; overflow-wrap: anywhere; }
.ljft__chain { padding-left: 1.4em; overflow-wrap: anywhere; }
.ljft__checked { margin: .75em 0 .5em; font-size: .85em; color: var(--ljft-muted); }

/* ---- Onpage mini tools ---- */
.ljft__icon { min-width: 1.9em; text-align: center; font-family: var(--ljft-mono); }
.ljft__expand summary { cursor: pointer; color: var(--ljft-muted); }
.ljft__expand summary:hover { color: var(--ljft-accent); }
.ljft__expand[open] summary { margin-bottom: .3em; }
.ljft__issues { margin: 0; padding-left: 1.1em; white-space: normal; }
.ljft__issue--required, .ljft__issue--format { color: var(--ljft-bad); }
.ljft__issue--recommended { color: var(--ljft-mid); }
.ljft__mono, .ljft__code { font-family: var(--ljft-mono); font-size: .85em; overflow-wrap: anywhere; white-space: pre-wrap; }
.ljft__grid td.ljft__word { overflow-wrap: normal; min-width: 8.5em; } /* break header names at hyphens only */
.ljft__grid td.ljft__wide { min-width: 11em; }
.ljft__note--inline { display: block; margin-top: .2em; font-size: .85em; color: var(--ljft-muted); }

/* Share previews */
.ljft__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 1em; }
.ljft__card-label { margin: 0 0 .35em; font-size: .8em; color: var(--ljft-muted); text-transform: uppercase; letter-spacing: .04em; }
.ljft__card { border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); overflow: hidden; background: #fff; }
.ljft__card--x { border-radius: 14px; }
.ljft__card-media { aspect-ratio: 1.91 / 1; background: var(--ljft-sunk); display: flex; align-items: center; justify-content: center; }
.ljft__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ljft__card-noimg { font-size: .85em; color: var(--ljft-quiet); }
.ljft__card-body { padding: .6em .8em; border-top: 1px solid var(--ljft-line); }
.ljft__card-site { font-size: .75em; color: var(--ljft-muted); text-transform: uppercase; }
.ljft__card-title { font-weight: 600; line-height: 1.3; margin: .15em 0; }
.ljft__card-desc { font-size: .85em; color: var(--ljft-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Headings tree */
.ljft__tree { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); background: #fff; }
.ljft__tree-item { padding: .3em .7em .3em calc(.7em + var(--lvl, 0) * 1.4em); border-bottom: 1px solid var(--ljft-line); overflow-wrap: anywhere; }
.ljft__tree-item:last-child { border-bottom: 0; }
.ljft__tree-item--issue { background: var(--ljft-mid-bg); }
.ljft__lvl { display: inline-block; min-width: 2.2em; margin-right: .5em; font-family: var(--ljft-mono); font-size: .75em; font-weight: 600; color: var(--ljft-accent); }

/* Counters */
.ljft__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .6em; margin: 0 0 1em; }
.ljft__stat { padding: .6em .8em; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); background: var(--ljft-panel); }
.ljft__stat b { display: block; font-family: var(--ljft-mono); font-size: 1.4em; font-variant-numeric: tabular-nums; }
.ljft__stat span { font-size: .8em; color: var(--ljft-muted); }
.ljft__stat--bad b { color: var(--ljft-bad); }
.ljft__toggle { display: inline-flex; gap: .4em; align-items: center; font-size: .9em; margin: 0 0 .5em; cursor: pointer; }

/* robots.txt viewer */
.ljft__lines { margin: 0; padding: .5em 0; list-style: none; background: #fff; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); font-family: var(--ljft-mono); font-size: .8em; max-height: 32em; overflow: auto; }
.ljft__lines li { display: flex; gap: .8em; padding: 0 .8em; white-space: pre-wrap; overflow-wrap: anywhere; }
.ljft__lines li > span:first-child { flex: 0 0 3em; text-align: right; color: var(--ljft-quiet); user-select: none; }
.ljft__lines li.is-decisive { background: var(--ljft-accent-bg); }
.ljft__lines li:target { outline: 2px solid var(--ljft-accent); outline-offset: -2px; }

/* DNS / mail / SSL tools */
.ljft__selector { flex: 0 1 12em; }
.ljft__grid td.ljft__nowrap, .ljft__grid td.ljft__num { white-space: nowrap; overflow-wrap: normal; }
.ljft__badges { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.ljft__record { margin: 0 0 1em; padding: .6em .8em; background: #fff; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); font-family: var(--ljft-mono); font-size: .85em; overflow-wrap: anywhere; white-space: pre-wrap; }
.ljft__keycards { display: grid; grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); gap: 1em; }
.ljft__keycard { border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); padding: .6em .8em; background: var(--ljft-panel); }
.ljft__keycard h4 { margin: 0 0 .4em; font-family: var(--ljft-mono); font-size: .95em; }
.ljft__lookups { font-family: var(--ljft-mono); font-size: .75em; color: var(--ljft-muted); margin-left: .5em; }

/* ---- Browser utilities ---- */
.ljft--util { color: var(--ljft-ink); }
.ljft--util .ljft__kv th { width: 1%; white-space: nowrap; overflow-wrap: normal; }
.ljft--util .ljft__opt { margin: 0 0 .6em; }
.ljft--util .ljft__bar .ljft__opt, .ljft--util .ljft__inline .ljft__opt { margin: 0; }
.ljft__field { margin: 0 0 .8em; min-width: 0; }
.ljft__field .ljft__url, .ljft__field .ljft__urls { width: 100%; }
.ljft__url--mono { font-family: var(--ljft-mono); font-size: .9em; }
.ljft__urls--text { font-family: inherit; font-size: 1em; }
.ljft__select { flex: 0 1 auto; width: auto; max-width: 100%; }
.ljft__check { display: inline-flex; gap: .45em; align-items: baseline; cursor: pointer; font-size: .95em; }
.ljft__check input { margin: 0; accent-color: var(--ljft-accent); }
.ljft__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .35em 1em; margin: 0 0 .8em; }
.ljft__checks .ljft__field { margin: 0; }
.ljft__inline { display: flex; flex-wrap: wrap; gap: .6em 1.2em; align-items: flex-end; margin: 0 0 .8em; }
.ljft__inline .ljft__field { margin: 0; }
.ljft__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ljft__pair .ljft__urls { min-height: 12em; }
/* Both columns as tall as the taller one (mono and text fonts differ in size); copy button below each. */
.ljft__pair > .ljft__field { display: flex; flex-direction: column; margin: 0; }
.ljft__pair > .ljft__field > .ljft__urls { flex: 1 1 auto; }
.ljft__pair { margin: 0 0 .8em; }
.ljft__field-foot { display: flex; justify-content: flex-end; margin-top: .5em; }
.ljft__bar { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin: 0 0 .8em; }
.ljft__out { margin: 0 0 .8em; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); background: #fff; overflow: hidden; }
.ljft__out-head { display: flex; justify-content: space-between; align-items: center; gap: .5em; flex-wrap: wrap; padding: .35em .7em; font-size: .85em; color: var(--ljft-muted); background: var(--ljft-panel); border-bottom: 1px solid var(--ljft-line); }
.ljft__out-label { font-weight: 600; }
.ljft__out-text { margin: 0; padding: .6em .8em; font-family: var(--ljft-mono); font-size: .85em; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24em; overflow: auto; }
.ljft__out.is-empty .ljft__out-text { color: var(--ljft-quiet); }
.ljft__err-line { margin: .4em 0 0; padding: .5em .8em; font-family: var(--ljft-mono); font-size: .8em; white-space: pre; overflow-x: auto; background: var(--ljft-bad-bg); border-radius: var(--ljft-radius); }
.ljft__findbox { margin: 0 0 .8em; }
.ljft__findbox .ljft__ok { margin: 0; }
.ljft__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; min-height: 8em; padding: 1em; text-align: center; border: 2px dashed var(--ljft-line); border-radius: var(--ljft-radius); background: var(--ljft-panel); color: var(--ljft-muted); cursor: pointer; }
.ljft__drop:hover, .ljft__drop.is-over, .ljft__drop:focus-within { border-color: var(--ljft-accent); background: var(--ljft-accent-bg); color: var(--ljft-ink); }
.ljft__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ljft__drop--sm { min-height: 4.5em; margin-top: .6em; }
.ljft__preview { max-width: 100%; max-height: 16em; display: block; margin: 0 0 .8em; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.ljft__meter { display: inline-block; font-family: var(--ljft-mono); font-size: .8em; font-variant-numeric: tabular-nums; padding: .1em .55em; border-radius: 0; background: var(--ljft-sunk); color: var(--ljft-muted); }
.ljft__meter--ok { background: var(--ljft-ok-bg); color: var(--ljft-ok); }
.ljft__meter--mid { background: var(--ljft-mid-bg); color: var(--ljft-mid); }
.ljft__meter--bad { background: var(--ljft-bad-bg); color: var(--ljft-bad); font-weight: 600; }
.ljft__fields5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; margin: 0 0 .8em; }
.ljft__fields5 .ljft__field { margin: 0; }
.ljft__fields5 .ljft__label { font-size: .8em; font-weight: 600; }
.ljft__big { font-family: var(--ljft-mono); font-size: 1.5em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ljft__explain { margin: 0 0 .8em; padding: .6em .8em; background: var(--ljft-accent-bg); border-radius: var(--ljft-radius); font-weight: 600; }

/* SERP preview: neutral card, no search-engine branding */
.ljft__serps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; }
.ljft__serp { max-width: 652px; padding: .9em 1em; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); background: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.ljft__serp--mobile { max-width: 380px; }
.ljft__serp-site { display: flex; gap: .55em; align-items: center; margin-bottom: .3em; }
.ljft__serp-fav { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ljft-sunk); color: var(--ljft-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ljft__serp-name { font-size: 14px; color: #202124; line-height: 1.3; }
.ljft__serp-crumb { font-size: 12px; color: #4d5156; line-height: 1.3; overflow-wrap: anywhere; }
.ljft__serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin: 0 0 .2em; white-space: nowrap; }
.ljft__serp--mobile .ljft__serp-title { font-size: 16px; white-space: normal; }
.ljft__serp-title span, .ljft__serp-desc span { display: block; }
.ljft__serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; }
.ljft__serp-empty { color: var(--ljft-quiet); font-style: italic; }

/* JSON tree */
.ljft__jtree { margin: 0; padding: .5em .8em; font-family: var(--ljft-mono); font-size: .8em; background: #fff; border: 1px solid var(--ljft-line); border-radius: var(--ljft-radius); overflow-x: auto; } /* no max-height: the whole tree is visible */
.ljft__jtree details { padding-left: 1.1em; }
.ljft__jtree > details { padding-left: 0; }
.ljft__jtree summary { cursor: pointer; margin-left: -1.1em; }
.ljft__jtree > details > summary { margin-left: 0; }
.ljft__jtree .ljft__jleaf { padding-left: 1.1em; white-space: pre-wrap; overflow-wrap: anywhere; }
.ljft__jk { color: var(--ljft-accent); }
.ljft__js { color: var(--ljft-ok); }
.ljft__jn { color: var(--ljft-info); }
.ljft__jb { color: var(--ljft-mid); }
.ljft__jz { color: var(--ljft-quiet); }
.ljft__jc { color: var(--ljft-quiet); }

@media (max-width: 640px) {
  .ljft__pair { grid-template-columns: minmax(0, 1fr); }
  .ljft__fields5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ljft__serp-title { white-space: normal; }
}

@media (max-width: 600px) {
  /* Label above value: three columns are too narrow on phones. */
  .ljft__kv tr { display: block; border-bottom: 1px solid var(--ljft-line); }
  .ljft__kv tr:last-child { border-bottom: 0; }
  .ljft__kv th, .ljft__kv td, .ljft__kv td.ljft__kv-aside { display: block; width: auto; min-width: 0; border-bottom: 0; text-align: left; padding: .6em 1em; }
  .ljft__kv td.ljft__kv-aside { padding-top: 0; }
  .ljft__kv td.ljft__kv-aside:empty { display: none; }
  .ljft--util .ljft__kv th { width: auto; }
  .ljft__grid--bulk td:first-child { max-width: 11em; }
  .ljft__go { flex: 1 1 100%; }
}