/* schema_markup_generator — tool-specific design (form + live code editor). Shared: nav, footer, sidebars, ad script only. */
body[data-tool="schema_markup_generator"] {
  --sg-bg: #F6F7F9; --sg-card: #FFFFFF; --sg-ink: #0F1419; --sg-ink2: #4A5563; --sg-mute: #8792A2; --sg-line: #E3E7ED;
  --sg-ed: #0D1117; --sg-ed2: #161B22; --sg-edline: #21262D; --sg-k: #79C0FF; --sg-s: #A5D6FF; --sg-n: #FFA657; --sg-t: #FF7B72; --sg-p: #C9D1D9;
  --sg-ok: #1A7F37; --sg-warn: #B35900; --sg-bad: #CF222E; --sg-acc: #0969DA;
  --sg-sans: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --sg-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sg-bg); color: var(--sg-ink); font-family: var(--sg-sans);
}
body[data-tool="schema_markup_generator"] .dt-nav { background: var(--sg-card); border-bottom: 1px solid var(--sg-line); }
body[data-tool="schema_markup_generator"] .dt-nav .navbar-brand { color: var(--sg-ink); }
.dt-bare { display: block; width: 100%; flex: 1; }
.sgx { max-width: 1180px; margin: 0 auto; padding: 36px 20px 64px; }
.sg-hero h1 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; margin: 0; }
.sg-hero p { margin: 12px 0 0; font-size: 18px; color: var(--sg-ink2); max-width: 64ch; }

.sg { margin-top: 26px; }
.sg-types { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-types button { position: relative; border: 1px solid var(--sg-line); background: var(--sg-card); border-radius: 999px; padding: 7px 14px 7px 26px; font: inherit; font-size: 14px; font-weight: 600; color: var(--sg-ink2); cursor: pointer; }
.sg-types button::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sg-ok); }
.sg-types button.st-desktop::before, .sg-types button.st-sitename::before { background: #D4A72C; }
.sg-types button.st-retired::before, .sg-types button.st-none::before { background: #B4BCC8; }
.sg-types button:hover { border-color: var(--sg-ink2); }
.sg-types button[aria-pressed="true"] { background: var(--sg-ink); border-color: var(--sg-ink); color: #fff; }
.sg-types button:focus-visible { outline: 2px solid var(--sg-acc); outline-offset: 2px; }

.sg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; margin-top: 16px; align-items: start; }
.sg-left { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 14px; padding: 18px 20px 16px; }
.sg-status { margin: 0 0 14px; font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 8px; background: #DAFBE1; color: var(--sg-ok); }
.sg-status.desktop, .sg-status.sitename { background: #FFF8C5; color: #7D4E00; }
.sg-status.retired, .sg-status.none { background: #EEF1F4; color: var(--sg-ink2); }
.sg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.sg-f { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.sg-f > span, .sg-rl { font-size: 12px; font-weight: 600; color: var(--sg-ink2); }
.sg-wide { grid-column: 1 / -1; }
.sg-form input, .sg-form select, .sg-form textarea { width: 100%; border: 1px solid var(--sg-line); border-radius: 8px; background: #FBFCFD; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--sg-ink); }
.sg-form textarea { resize: vertical; font-family: var(--sg-sans); }
.sg-form input:focus, .sg-form select:focus, .sg-form textarea:focus { outline: none; border-color: var(--sg-acc); box-shadow: 0 0 0 3px rgba(9,105,218,.15); background: #fff; }
.sg-form input::placeholder, .sg-form textarea::placeholder { color: #A8B1BD; }
.sg-c { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--sg-ink); }
.sg-c input { width: auto; }
.sg-rows { display: flex; flex-direction: column; gap: 8px; }
.sg-row { display: grid; gap: 8px; align-items: start; }
.sg-qa { grid-template-columns: minmax(0, 1fr) 30px; } .sg-qa textarea { grid-column: 1; }
.sg-qa .sg-x { grid-column: 2; grid-row: 1 / span 2; }
.sg-cr { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 30px; }
.sg-hr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 30px; }
.sg-x { width: 30px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-mute); font-size: 18px; cursor: pointer; }
.sg-x:hover { background: #FFEBE9; color: var(--sg-bad); }
.sg-add { align-self: flex-start; border: 1px dashed var(--sg-line); background: transparent; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--sg-acc); cursor: pointer; }
.sg-reset { margin-top: 14px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--sg-mute); text-decoration: underline; cursor: pointer; padding: 0; }

.sg-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sg-ed { background: var(--sg-ed); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 36px rgba(13,17,23,.22); }
.sg-edbar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; background: var(--sg-ed2); border-bottom: 1px solid var(--sg-edline); }
.sg-dots { display: inline-flex; gap: 6px; } .sg-dots i { width: 10px; height: 10px; border-radius: 50%; background: #30363D; }
.sg-fn { font-family: var(--sg-mono); font-size: 12px; color: #8B949E; margin-right: auto; }
.sg-copy { border: 0; border-radius: 8px; background: #238636; color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.sg-copy:hover { background: #2EA043; }
.sg-code { margin: 0; padding: 16px 18px; max-height: 520px; overflow: auto; font-family: var(--sg-mono); font-size: 13px; line-height: 1.6; color: var(--sg-p); white-space: pre; tab-size: 2; }
.sg-code .k { color: var(--sg-k); } .sg-code .s { color: var(--sg-s); } .sg-code .n { color: var(--sg-n); } .sg-code .t { color: var(--sg-t); }
.sg-checks { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 14px; padding: 14px 16px; font-size: 14px; }
.sg-checks > b { display: block; margin-bottom: 8px; } .sg-checks .yes { color: var(--sg-ok); } .sg-checks .no { color: var(--sg-bad); }
.sg-checks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.sg-checks li { display: flex; align-items: baseline; gap: 6px; color: var(--sg-ink2); }
.sg-checks li i { flex: none; width: 14px; text-align: center; font-style: normal; font-weight: 700; }
.sg-checks li.ok i::before { content: "\2713"; color: var(--sg-ok); }
.sg-checks li.req i::before { content: "\2715"; color: var(--sg-bad); }
.sg-checks li.rec i::before { content: "\25CB"; color: #B4BCC8; }
.sg-checks li em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--sg-mute); }
.sg-checks li.req { color: var(--sg-ink); font-weight: 600; }
.sg-test { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-test a { font-size: 13px; font-weight: 600; color: var(--sg-acc); text-decoration: none; border: 1px solid var(--sg-line); background: var(--sg-card); border-radius: 8px; padding: 7px 12px; }
.sg-test a::after { content: " \2197"; }

.sg-adwrap { margin: 44px 0 8px; }
.sg-article, .sg-faq, .sg-more { max-width: 760px; margin: 0 auto; }
.sg-article { margin-top: 48px; font-size: 17px; line-height: 1.75; color: var(--sg-ink2); }
.sg-article h2, .sg-faq h2, .sg-more h2 { font-size: 27px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--sg-ink); margin: 52px 0 12px; }
.sg-article h2:first-child { margin-top: 0; }
.sg-article p { margin: 0 0 14px; } .sg-article b { color: var(--sg-ink); } .sg-article a { color: var(--sg-acc); }
.sg-article ul, .sg-article ol { padding-left: 1.2em; } .sg-article li { margin: 6px 0; }
.sg-article code { font-family: var(--sg-mono); font-size: 14px; background: #EEF1F4; padding: 1px 5px; border-radius: 4px; color: var(--sg-ink); }
.sg-table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--sg-line); border-radius: 12px; background: var(--sg-card); }
.sg-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sg-table th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--sg-mute); border-bottom: 1px solid var(--sg-line); }
.sg-table td { padding: 9px 12px; border-bottom: 1px solid #EEF1F4; color: var(--sg-ink); vertical-align: top; }
.sg-table tr:last-child td { border-bottom: 0; }
.sg-src { font-size: 15px; }
.sg-q { border-bottom: 1px solid var(--sg-line); }
.sg-q summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-size: 18px; font-weight: 700; }
.sg-q summary::-webkit-details-marker { display: none; }
.sg-q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--sg-mute); }
.sg-q[open] summary::after { content: "\2212"; }
.sg-q p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--sg-ink2); }
.sg-more > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-more a { display: block; text-decoration: none; padding: 14px 16px; border: 1px solid var(--sg-line); border-radius: 12px; background: var(--sg-card); color: var(--sg-ink); }
.sg-more a:hover { border-color: var(--sg-ink); }
.sg-more b { display: block; font-size: 15px; } .sg-more span { display: block; font-size: 13px; color: var(--sg-mute); margin-top: 2px; }

@media (max-width: 960px) {
  .sg-body { grid-template-columns: minmax(0, 1fr); }
  .sg-right { position: static; }
}
@media (max-width: 640px) {
  .sgx { padding: 24px 14px 48px; }
  .sg-hero h1 { font-size: 34px; } .sg-hero p { font-size: 16px; }
  .sg-types { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .sg-types button { flex: none; }
  .sg-left { padding: 16px 14px; }
  .sg-form { grid-template-columns: minmax(0, 1fr); }
  .sg-hr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; } .sg-hr select { grid-column: 1 / -1; }
  .sg-checks ul { grid-template-columns: minmax(0, 1fr); }
  .sg-code { max-height: 380px; font-size: 12px; }
  .sg-article { font-size: 16px; }
  .sg-article h2, .sg-faq h2, .sg-more h2 { font-size: 23px; margin-top: 40px; }
  .sg-more > div { grid-template-columns: minmax(0, 1fr); }
}