.tools-container:has(.tool-page-open-graph-preview) {
  width: min(1280px, calc(100% - 32px));
  max-width: 1280px;
  padding-left: 28px;
  padding-right: 28px;
}
.tool-page.tool-page-open-graph-preview,
.shared-result-main.tool-page-open-graph-preview { width: 100%; max-width: 100%; min-width: 0; color: var(--tf-text); }
.tool-page-open-graph-preview [hidden] { display: none !important; }
.og-page, .og-results, .og-report, .og-table-wrap, .og-json { min-width: 0; max-width: 100%; }
.tool-page-open-graph-preview .tool-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "mark title back" "mark text back";
  column-gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.og-mark {
  grid-area: mark; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; background: #2459e0; color: #fff;
}
.tool-page-open-graph-preview .tool-header h1 { grid-area: title; margin: 0; font-size: 34px; line-height: 1.1; }
.tool-page-open-graph-preview .tool-description { grid-area: text; margin: 4px 0 0; }
.tool-page-open-graph-preview .tf-back { grid-area: back; align-self: start; }
.og-page { display: grid; gap: 20px; }
.og-card, .og-report {
  background: var(--tf-card); border: 1px solid var(--tf-line); border-radius: 16px; padding: 24px;
}
.og-card h2, .og-report h2, .og-report h3 { margin: 0; color: var(--tf-text); }
.tool-page-open-graph-preview .og-report h2 { font-size: 28px; line-height: 1.2; }
.og-help, .og-footnote, .og-expiry, .og-final, .og-platform-note, .og-field-source, .og-host { color: var(--tf-muted); line-height: 1.5; }
.og-label { display: block; margin: 16px 0 8px; font-size: 14px; font-weight: 650; }
.og-entry, .og-actions, .og-report-head, .og-preview-head, .og-section-head { display: flex; gap: 10px; align-items: center; }
.og-report-head, .og-preview-head, .og-section-head { justify-content: space-between; }
.og-entry .og-input { flex: 1; min-width: 0; }
.tool-page-open-graph-preview .og-input,
.shared-result-main.tool-page-open-graph-preview .og-input {
  width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--tf-line);
  background: #fff; color: #182b49; padding: 0 16px; font-family: inherit; font-size: 16px;
}
.og-submit, .og-share, .og-download, .og-actions button {
  border: 0; border-radius: 12px; background: #2459e0; color: #fff; min-height: 44px; padding: 0 16px;
  font: inherit; font-weight: 650; cursor: pointer;
}
.og-example { background: transparent; border: 0; color: #2459e0; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.tool-page-open-graph-preview .og-note,
.shared-result-main.tool-page-open-graph-preview .og-note,
.og-sample {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px;
  border-radius: 12px; background: #e8f1ff; color: #1d3f91;
}
.og-status-ico { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: #2459e0; color: #fff; font-size: 13px; flex: 0 0 22px; }
.og-footnote { margin: 16px 0 0; }
.tool-page-open-graph-preview .og-look {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 18px;
}
.tool-page-open-graph-preview .og-look article {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0; height: auto;
}
.tool-page-open-graph-preview .og-look h3 { display: block; margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.tool-page-open-graph-preview .og-look p { margin: 0; color: var(--tf-muted); font-size: 13px; line-height: 1.45; }
.og-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #e8efff; color: #2459e0; flex: 0 0 36px; }
.tool-page-open-graph-preview .og-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.tool-page-open-graph-preview .og-steps li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; height: auto;
}
.tool-page-open-graph-preview .og-steps li > span {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #2459e0; color: #fff; font-weight: 700;
}
.tool-page-open-graph-preview .og-steps strong { display: block; margin: 2px 0 4px; font-size: 15px; line-height: 1.3; }
.tool-page-open-graph-preview .og-steps li div span {
  display: block; width: auto; height: auto; margin: 0; background: none; color: var(--tf-muted); font-size: 14px; font-weight: 400; line-height: 1.45;
}
.tools-container:has(.tool-page-open-graph-preview) .og-related-head p { margin: 8px 0 16px; color: var(--tf-muted); }
.tools-container:has(.tool-page-open-graph-preview) .og-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tools-container:has(.tool-page-open-graph-preview) .og-rel {
  display: flex; gap: 12px; align-items: center; min-height: 84px; padding: 16px; border: 1px solid var(--tf-line);
  border-radius: 16px; text-decoration: none; color: inherit; background: var(--tf-card);
}
.tools-container:has(.tool-page-open-graph-preview) .og-rel .og-rel-icon {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; background: #eef3ff; color: #2459e0;
}
.tools-container:has(.tool-page-open-graph-preview) .og-rel-icon.meta { background: #eef3ff; color: #2459e0; }
.tools-container:has(.tool-page-open-graph-preview) .og-rel-icon.seo { background: #ecfdf3; color: #067647; }
.tools-container:has(.tool-page-open-graph-preview) .og-rel-icon.audit { background: #fff7ed; color: #9a3412; }
.tools-container:has(.tool-page-open-graph-preview) .og-rel strong,
.tools-container:has(.tool-page-open-graph-preview) .og-rel > span:not(.og-rel-icon),
.tools-container:has(.tool-page-open-graph-preview) .og-rel > span span { display: block; width: auto; height: auto; }
.tools-container:has(.tool-page-open-graph-preview) .og-rel span span { color: var(--tf-muted); font-size: 13px; line-height: 1.4; }
.og-error { color: #b42318; }
.og-banner { display: grid; gap: 4px; margin: 0; padding: 14px 16px; border-radius: 12px; background: #e8f1ff; color: #1d3f91; }
.og-banner.is-bad { background: #fef3f2; color: #b42318; }
.og-hero { display: grid; gap: 8px; margin-bottom: 18px; }
.og-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.og-chip { padding: 6px 10px; border-radius: 999px; background: #f4f7fb; font-size: 13px; }
.og-chip.is-ok { background: #e8f8ef; color: #067647; }
.og-chip.is-warn { background: #fff7ed; color: #9a3412; }
.og-chip.is-bad { background: #fef3f2; color: #b42318; }
.og-preview-block { margin-top: 8px; }
.og-viewport { display: flex; gap: 8px; }
.og-viewport button, .og-field-switch button, .og-meta-tabs button {
  min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tf-line);
  background: transparent; color: var(--tf-text); font: inherit; cursor: pointer;
}
.og-viewport button.is-selected, .og-field-switch button.is-selected, .og-meta-tabs button.is-selected { background: #2459e0; color: #fff; border-color: #2459e0; }
.og-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.og-social { min-width: 0; border: 1px solid var(--tf-line); border-radius: 16px; overflow: hidden; background: #fff; }
.og-social header, .og-copy, .og-field-source, .og-limit, .og-limit-note { padding: 12px 14px; }
.og-social header { display: flex; justify-content: space-between; font-weight: 700; }
.og-social header em { font-style: normal; color: var(--tf-muted); font-size: 12px; font-weight: 600; }
.og-media { background: #e8eef8; aspect-ratio: 1.91 / 1; overflow: hidden; }
.og-social-linkedin .og-media { aspect-ratio: 1.91 / 1; }
.og-social[data-layout="large"] .og-media { aspect-ratio: 2 / 1; }
.og-social[data-layout="unset"] .og-media { aspect-ratio: 16 / 9; }
.og-previews.is-mobile { grid-template-columns: 1fr; max-width: 420px; }
.og-previews.is-mobile .og-social-facebook .og-media { aspect-ratio: 1.5 / 1; }
.og-previews.is-mobile .og-social-linkedin .og-media { aspect-ratio: 1.6 / 1; }
.og-previews.is-mobile .og-social[data-layout="large"] .og-media,
.og-previews.is-mobile .og-social[data-layout="unset"] .og-media { aspect-ratio: 16 / 9; }
.og-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.og-media-empty { display: grid; place-items: center; color: #5c6b82; text-align: center; padding: 16px; font-size: 13px; }
.og-summary { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.og-summary .og-media { aspect-ratio: 1 / 1; height: 100%; }
.og-previews.is-mobile .og-summary { grid-template-columns: 72px minmax(0, 1fr); }
.og-copy h4, .og-copy p { margin: 0; }
.og-copy h4 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; line-height: 1.35;
}
.og-copy p:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--tf-muted); font-size: 13px; margin-top: 4px;
}
.og-host { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.og-field-source { margin: 0; border-top: 1px solid var(--tf-line); font-size: 12px; }
.og-limit-note { margin: 0; color: #9a3412; background: #fff7ed; font-size: 13px; }
.og-lower { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; margin-top: 18px; }
.og-table-wrap { overflow-x: auto; }
.og-table { width: 100%; border-collapse: collapse; }
.tool-page-open-graph-preview .og-table th,
.shared-result-main.tool-page-open-graph-preview .og-table th,
.tool-page-open-graph-preview .og-table td,
.shared-result-main.tool-page-open-graph-preview .og-table td {
  padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tf-line); overflow-wrap: anywhere;
}
.tool-page-open-graph-preview .og-table th,
.shared-result-main.tool-page-open-graph-preview .og-table th { background: #f5f7fb; color: #5c6b82; font-size: 13px; }
.og-image-panel, .og-recs, .og-export { margin-top: 18px; }
.og-image-panel dl { display: grid; gap: 8px; margin: 12px 0; }
.og-image-panel div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; }
.og-image-url { overflow-wrap: anywhere; font-weight: 650; }
.og-recs ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.og-recs li { padding: 12px 14px; border-radius: 12px; background: #f8fafc; }
.og-recs li.is-review { background: #fff7ed; }
.og-recs strong, .og-recs span, .og-recs em { display: block; }
.og-recs em { color: var(--tf-muted); font-style: normal; }
.og-meta-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.og-json { max-height: 280px; overflow: auto; padding: 12px; border-radius: 12px; background: #0f1728; color: #e8eefc; white-space: pre-wrap; }
.og-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.og-faq details { border-top: 1px solid var(--tf-line); padding: 12px 0; }
.og-faq summary { cursor: pointer; font-weight: 650; }
.og-focus:focus-visible, .og-submit:focus-visible, .og-input:focus-visible, .og-actions button:focus-visible,
.og-viewport button:focus-visible, .og-field-switch button:focus-visible, .og-meta-tabs button:focus-visible, .og-faq summary:focus-visible {
  outline: 2px solid #2459e0; outline-offset: 2px;
}
[data-theme="dark"] .tool-page-open-graph-preview .og-input,
[data-theme="dark"] .shared-result-main.tool-page-open-graph-preview .og-input { background: #070d18; color: #e8eefc; }
[data-theme="dark"] .og-social, [data-theme="dark"] .og-banner, [data-theme="dark"] .og-note, [data-theme="dark"] .og-sample { background: #13203a; color: #d6e4ff; }
[data-theme="dark"] .og-banner.is-bad, [data-theme="dark"] .og-recs li.is-review { background: #3a1714; color: #fecdca; }
[data-theme="dark"] .tool-page-open-graph-preview .og-table th,
[data-theme="dark"] .shared-result-main.tool-page-open-graph-preview .og-table th { background: #10192b; color: #9aabc4; }
@media (max-width: 900px) {
  .og-previews, .og-lower, .og-split, .tools-container:has(.tool-page-open-graph-preview) .og-rel-grid { grid-template-columns: 1fr; }
  .og-previews.is-mobile { max-width: none; }
}
@media (max-width: 860px) {
  .tool-page-open-graph-preview .tool-header { grid-template-columns: auto 1fr; grid-template-areas: "mark title" "text text" "back back"; }
  .tool-page-open-graph-preview .tool-header h1 { font-size: 28px; }
}
@media (max-width: 700px) {
  .og-entry, .og-actions, .og-report-head, .og-preview-head, .og-section-head { flex-direction: column; align-items: stretch; }
  .tool-page-open-graph-preview .og-look { grid-template-columns: 1fr; }
  .tool-page-open-graph-preview .og-table,
  .tool-page-open-graph-preview .og-table tbody,
  .tool-page-open-graph-preview .og-table tr,
  .tool-page-open-graph-preview .og-table td { display: block; width: 100%; }
  .tool-page-open-graph-preview .og-table thead { display: none; }
  .tool-page-open-graph-preview .og-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--tf-muted); }
  .og-image-panel div { grid-template-columns: 1fr; }
}