/* Dedicated SEO tool pages: warm, readable, and usable without the landing-page app. */
.seo-tool-page { min-height: 100vh; background: var(--bg, #F6F3EC); color: var(--text, #171614); }
.seo-tool-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 72px; }
.seo-tool-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:56px; }
.seo-tool-brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.08em; }
.seo-tool-brand img { width:36px; height:36px; border-radius:10px; }
.seo-tool-nav-links { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; font-size:.9rem; }
.seo-tool-nav-links a { color:var(--text-secondary,#68645D); text-decoration:none; }
.seo-tool-nav-links a:hover { color:var(--accent,#B85C43); }
.seo-tool-lang { border:1px solid var(--border,#DED9D0); border-radius:999px; padding:7px 12px; color:var(--accent,#B85C43); background:transparent; text-decoration:none; }
.seo-tool-hero { max-width:820px; margin-bottom:28px; }
.seo-tool-eyebrow { color:var(--accent,#B85C43); font:600 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; }
.seo-tool-hero h1 { margin:12px 0 14px; font-size:clamp(2.2rem,6vw,4.8rem); line-height:1.02; letter-spacing:-.055em; }
.seo-tool-lead { max-width:720px; color:var(--text-secondary,#68645D); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.65; }
.seo-tool-privacy { margin:24px 0 30px; padding:14px 16px; border-left:3px solid var(--success,#3F7D55); background:var(--success-soft,#E6F0E9); color:var(--text,#171614); border-radius:0 12px 12px 0; }
.seo-tool-card { background:var(--surface-elevated,#fff); border:1px solid var(--border,#DED9D0); border-radius:20px; box-shadow:0 10px 30px rgba(23,22,20,.07); padding:clamp(20px,4vw,34px); margin:28px 0 64px; }
.seo-tool-card h2, .seo-tool-section h2 { margin:0 0 12px; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.03em; }
.seo-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.seo-tool-field { display:flex; flex-direction:column; gap:7px; }
.seo-tool-field label { font-size:.86rem; font-weight:650; color:var(--text-secondary,#68645D); }
.seo-tool-input, .seo-tool-select { width:100%; border:1px solid var(--border,#DED9D0); border-radius:10px; background:var(--surface,#FBF9F4); color:var(--text,#171614); padding:11px 12px; font:inherit; box-sizing:border-box; }
.seo-tool-input:focus, .seo-tool-select:focus { outline:3px solid rgba(184,92,67,.2); border-color:var(--accent,#B85C43); }
.seo-tool-textarea { min-height:240px; resize:vertical; font: .9rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-tool-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.seo-tool-button { border:1px solid var(--accent,#B85C43); border-radius:10px; padding:11px 16px; background:var(--accent,#B85C43); color:#fff; font:650 .95rem inherit; cursor:pointer; }
.seo-tool-button:hover { background:var(--accent-hover,#A94F38); }
.seo-tool-button.secondary { background:transparent; color:var(--accent,#B85C43); }
.seo-tool-status { min-height:1.45em; margin:14px 0 0; color:var(--text-secondary,#68645D); }
.seo-tool-output { margin-top:18px; padding:16px; border-radius:12px; background:#201e1b; color:#f6f3ec; white-space:pre-wrap; overflow:auto; min-height:60px; font:.86rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-tool-table-wrap { overflow:auto; margin-top:18px; }
.seo-tool-table { width:100%; min-width:620px; border-collapse:collapse; }
.seo-tool-table th, .seo-tool-table td { border-bottom:1px solid var(--border,#DED9D0); padding:10px 8px; text-align:left; vertical-align:middle; }
.seo-tool-table th { font-size:.78rem; color:var(--text-secondary,#68645D); text-transform:uppercase; letter-spacing:.06em; }
.seo-tool-table input { width:100%; min-width:76px; box-sizing:border-box; }
.seo-tool-score { font-weight:750; color:var(--accent,#B85C43); }
.seo-tool-result { margin-top:18px; padding:16px; border-radius:12px; background:var(--accent-subtle,#F0DDD6); }
.seo-tool-result strong { font-size:1.12rem; }
.seo-tool-section { max-width:820px; margin:0 auto 48px; }
.seo-tool-section p, .seo-tool-section li { color:var(--text-secondary,#68645D); line-height:1.75; }
.seo-tool-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; list-style:none; }
.seo-tool-step { border-top:2px solid var(--accent,#B85C43); padding-top:12px; }
.seo-tool-step b { display:block; color:var(--text,#171614); margin-bottom:6px; }
.seo-tool-example { border:1px solid var(--border,#DED9D0); border-radius:12px; padding:16px; background:var(--surface,#FBF9F4); }
.seo-tool-faq details { border-top:1px solid var(--border,#DED9D0); padding:16px 0; }
.seo-tool-faq summary { cursor:pointer; font-weight:700; }
.seo-tool-faq p { margin:9px 0 0; }
.seo-tool-footer { border-top:1px solid var(--border,#DED9D0); padding-top:24px; color:var(--text-secondary,#68645D); display:flex; gap:14px; flex-wrap:wrap; }
.seo-tool-footer a { color:var(--accent,#B85C43); }
@media (max-width:720px) { .seo-tool-shell { width:min(100% - 22px,1120px); padding-top:18px; } .seo-tool-nav { align-items:flex-start; margin-bottom:38px; } .seo-tool-nav-links { font-size:.82rem; gap:8px; } .seo-tool-grid, .seo-tool-steps { grid-template-columns:1fr; } .seo-tool-card { border-radius:14px; padding:18px; } }

/* Both tools share one calm EMIREVOX accent so the product feels like one system. */
.seo-tool-page--json, .seo-tool-page--matrix { --tool-accent:#A9563F; --tool-soft:#F1DFD7; }
.seo-tool-page--json .seo-tool-eyebrow, .seo-tool-page--json .seo-tool-footer a, .seo-tool-page--json .seo-tool-lang { color:var(--tool-accent); }
.seo-tool-page--matrix .seo-tool-eyebrow, .seo-tool-page--matrix .seo-tool-footer a, .seo-tool-page--matrix .seo-tool-lang { color:var(--tool-accent); }
.seo-tool-page--json .seo-tool-button { background:var(--tool-accent); border-color:var(--tool-accent); }
.seo-tool-page--matrix .seo-tool-button { background:var(--tool-accent); border-color:var(--tool-accent); }
.seo-tool-page--json .seo-tool-button.secondary,
.seo-tool-page--matrix .seo-tool-button.secondary { background:transparent; color:var(--tool-accent); }
.seo-tool-page--json .seo-tool-button.secondary:hover,
.seo-tool-page--matrix .seo-tool-button.secondary:hover { background:var(--tool-soft); color:var(--tool-accent); }
.seo-tool-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px, .42fr); gap:42px; align-items:end; max-width:none; }
.seo-tool-hero-copy { max-width:760px; }
.seo-tool-stand { border:1px solid var(--border,#DED9D0); border-radius:18px; padding:22px; background:linear-gradient(145deg, var(--tool-soft), var(--surface-elevated,#fff)); box-shadow:var(--evx-shadow-raised,0 8px 20px rgba(23,22,20,.07)); }
.seo-tool-page--matrix .seo-tool-stand { transform:none; }
.seo-tool-stand-label, .seo-tool-card-kicker { color:var(--tool-accent); font:700 .68rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.seo-tool-stand h2 { margin:0 0 18px; font-size:1.2rem; line-height:1.15; letter-spacing:-.035em; }
.seo-tool-stand ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.seo-tool-stand li { display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:start; font-size:.9rem; line-height:1.35; color:var(--text-secondary,#68645D); }
.seo-tool-stand li span { color:var(--tool-accent); font:700 .75rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-tool-card { position:relative; }
.seo-tool-card--json { border-top:4px solid var(--tool-accent); }
.seo-tool-card--matrix { border-top:4px solid var(--tool-accent); }
.seo-tool-card-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:20px; }
.seo-tool-card-heading h2 { margin-bottom:0; }
.seo-tool-live-dot { flex:none; border:1px solid color-mix(in srgb, var(--tool-accent) 35%, transparent); color:var(--tool-accent); border-radius:999px; padding:6px 9px; font:700 .64rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.seo-tool-output-wrap { margin-top:18px; border:1px solid #34302a; border-radius:12px; overflow:hidden; background:#201e1b; }
.seo-tool-output-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; color:#c9c0b5; font:700 .7rem ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.1em; }
.seo-tool-output-heading .seo-tool-button { padding:6px 9px; font-size:.72rem; }
.seo-tool-output-wrap .seo-tool-output { margin:0; border-radius:0; min-height:90px; }
.seo-tool-copy { background:transparent !important; color:inherit !important; border-color:currentColor !important; }
.seo-tool-table-note { color:var(--text-muted,#969087); font-size:.8rem; margin:12px 0 0; }
.seo-tool-status[data-state="success"] { color:var(--success,#3F7D55); }
.seo-tool-status[data-state="error"] { color:var(--error,#B34A45); }
.seo-tool-result { border-left:4px solid var(--tool-accent); background:var(--tool-soft); }
@media (max-width:820px) { .seo-tool-hero { grid-template-columns:1fr; gap:22px; } .seo-tool-stand { max-width:420px; transform:none !important; } }
@media (max-width:520px) { .seo-tool-card-heading { flex-direction:column; gap:10px; } .seo-tool-live-dot { align-self:flex-start; } }
/* EMIREVOX component layer: calm editorial palette, shadcn-like controls, no framework required. */
:root { --bg:#f5f1e8; --surface:#fffdf8; --surface-elevated:#fffdf9; --text:#201d19; --text-secondary:#70685e; --border:#ded6ca; --accent:#a9563f; --accent-hover:#8f4633; --accent-subtle:#f1dfd7; --success:#3d775b; --success-soft:#e8f1eb; --shadow:0 18px 50px rgba(55,42,30,.09); }
.seo-tool-page { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-optical-sizing:auto; background:radial-gradient(circle at 86% 0%, rgba(169,86,63,.07), transparent 32rem),var(--bg); }
.seo-tool-shell { padding-top:24px; }
.seo-tool-nav { margin-bottom:64px; }
.seo-tool-brand { font-size:0; letter-spacing:0; }
.seo-tool-brand img { width:42px; height:42px; box-sizing:border-box; padding:8px; object-fit:contain; border:1px solid rgba(32,29,25,.12); border-radius:12px; background:#201d19; filter:saturate(.8); }
.seo-tool-nav-links { font-size:.875rem; font-weight:600; }
.seo-tool-nav-links a { transition:color .18s ease, background .18s ease, border-color .18s ease; }
.seo-tool-lang { padding:8px 13px; background:rgba(255,253,248,.55); }
.seo-tool-hero { max-width:none; }
.seo-tool-eyebrow { font-size:.7rem; letter-spacing:.2em; color:var(--accent); }
.seo-tool-hero h1 { max-width:850px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:760; font-size:clamp(2.45rem,5.7vw,4.65rem); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.seo-tool-lead { max-width:680px; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.65; }
.seo-tool-privacy { display:flex; align-items:flex-start; gap:8px; max-width:720px; margin:24px 0 34px; box-shadow:0 5px 18px rgba(61,119,91,.06); }
.seo-tool-card { position:relative; background:rgba(255,253,248,.9); border-color:rgba(169,86,63,.18); border-radius:24px; box-shadow:var(--shadow); padding:clamp(22px,4vw,40px); margin-bottom:72px; }
.seo-tool-card:before { content:""; position:absolute; inset:0 0 auto; height:3px; border-radius:24px 24px 0 0; background:linear-gradient(90deg,var(--accent),#d39a6e 60%,transparent); opacity:.85; }
.seo-tool-card h2, .seo-tool-section h2 { font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:730; }
.seo-tool-card h2 { font-size:clamp(1.45rem,2.8vw,2.15rem); }
.seo-tool-input, .seo-tool-select { min-height:44px; border-radius:12px; border-color:#d8d0c4; background:#fffefa; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.seo-tool-input:hover, .seo-tool-select:hover { border-color:#c7a08f; }
.seo-tool-input:focus, .seo-tool-select:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 4px rgba(169,86,63,.13); background:#fff; }
.seo-tool-button { border-radius:12px; padding:12px 18px; box-shadow:0 7px 15px rgba(169,86,63,.18); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.seo-tool-button:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(169,86,63,.24); }
.seo-tool-button.secondary { box-shadow:none; border-color:#d4b5a7; }
.seo-tool-status { font-size:.9rem; }
.seo-tool-status.is-success { color:var(--success); }
.seo-tool-status.is-error { color:#a64036; }
.seo-json-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:6px; margin:0 0 12px; border:1px solid var(--border); border-radius:14px; background:#f8f3eb; }
.seo-json-tab, .seo-json-action { border:1px solid transparent; border-radius:9px; padding:8px 11px; color:var(--text-secondary); background:transparent; font:600 .82rem/1.1 inherit; cursor:pointer; transition:all .18s ease; }
.seo-json-tab:hover, .seo-json-action:hover { color:var(--text); background:#fffdf8; border-color:var(--border); }
.seo-json-tab.is-active { color:#fff; background:var(--accent); box-shadow:0 3px 8px rgba(169,86,63,.22); }
.seo-json-toolbar-spacer { flex:1; }
.seo-json-action { color:var(--accent); }
.seo-json-editor { display:grid; grid-template-columns:42px minmax(0,1fr); overflow:hidden; border:1px solid #d8d0c4; border-radius:14px; background:#25231f; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.seo-json-gutter { padding:16px 10px 16px 0; overflow:hidden; user-select:none; text-align:right; color:#8f877b; background:#2b2925; font:.9rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; }
.seo-json-editor .seo-tool-textarea { min-height:280px; border:0; border-radius:0; padding:16px; resize:vertical; color:#f5f1e8; background:#25231f; caret-color:#e1a487; font:.9rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-json-editor .seo-tool-textarea:focus { box-shadow:none; outline:0; }
.seo-json-badge { display:inline-flex; align-items:center; min-height:26px; margin:10px 0 0; padding:4px 9px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); background:#faf6ef; font-size:.78rem; font-weight:700; }
.seo-json-badge[data-state="success"] { color:var(--success); border-color:#b9d4c2; background:var(--success-soft); }
.seo-json-badge[data-state="error"] { color:#a64036; border-color:#e3b6ae; background:#fff0ed; }
.seo-tool-output { border:1px solid #3b3934; box-shadow:inset 0 1px 10px rgba(0,0,0,.13); }
.seo-tool-table-wrap { border:1px solid var(--border); border-radius:15px; background:#fffefa; }
.seo-tool-table { min-width:720px; }
.seo-tool-table th, .seo-tool-table td { padding:12px 10px; border-bottom-color:#e8e0d6; }
.seo-tool-table th { color:#81776c; font-size:.7rem; }
.seo-tool-table th[data-criterion] { min-width:142px; }
.seo-tool-table input { min-width:72px; }
.seo-tool-table tbody tr { transition:background .18s ease; }
.seo-tool-table tbody tr:hover { background:#fff8f1; }
.seo-matrix-range { display:block; width:100%; height:4px; margin-top:8px; accent-color:var(--accent); cursor:pointer; }
.seo-matrix-remove { float:right; width:22px; height:22px; margin-left:5px; padding:0; border:0; border-radius:7px; color:#a64036; background:#fff0ed; font-size:1.1rem; line-height:1; cursor:pointer; }
.seo-matrix-result-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.seo-matrix-winner-badge { padding:5px 9px; border-radius:999px; color:var(--success); background:var(--success-soft); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.seo-matrix-result-heading strong { font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:1.2rem; font-weight:750; }
.seo-matrix-result-score { margin-left:auto; color:var(--accent); font-weight:800; }
.seo-matrix-chart { margin-top:20px; padding-top:16px; border-top:1px solid rgba(169,86,63,.18); }
.seo-matrix-chart h3 { margin:0 0 12px; font-size:.78rem; color:var(--text-secondary); letter-spacing:.08em; text-transform:uppercase; }
.seo-matrix-bar-row { --bar-color:var(--accent); display:grid; grid-template-columns:minmax(86px,.8fr) minmax(120px,2fr) 48px; align-items:center; gap:10px; margin:9px 0; font-size:.82rem; }
.seo-matrix-bar-row[data-rank="1"] { --bar-color:#6f8060; }
.seo-matrix-bar-row[data-rank="2"] { --bar-color:#b27a45; }
.seo-matrix-bar-row[data-rank="3"] { --bar-color:#7b6b63; }
.seo-matrix-bar-row[data-rank="4"] { --bar-color:#92705d; }
.seo-matrix-bar-row[data-rank="5"] { --bar-color:#697b78; }
.seo-matrix-bar { height:9px; overflow:hidden; border-radius:99px; background:#eadfd4; }
.seo-matrix-bar i { display:block; height:100%; border-radius:inherit; background:var(--bar-color,var(--accent)); transition:width .45s ease, background-color .25s ease; }
.seo-matrix-bar-row b { color:var(--accent); text-align:right; }
.seo-tool-example, .seo-tool-faq details { background:rgba(255,253,248,.55); }
.seo-tool-section { max-width:860px; }
.seo-tool-step { border-top-width:3px; border-top-color:var(--accent); }
.seo-tool-step b { color:var(--accent); font-size:.78rem; letter-spacing:.14em; }
@media (max-width:720px) { .seo-tool-shell { width:min(100% - 28px,1120px); padding-top:16px; } .seo-tool-nav { margin-bottom:45px; } .seo-tool-brand img { width:38px; height:38px; } .seo-tool-nav-links { gap:6px; font-size:.78rem; } .seo-tool-hero h1 { font-size:clamp(2.45rem,12vw,4rem); line-height:1.01; } .seo-tool-card { border-radius:18px; padding:20px 14px; margin-bottom:54px; } .seo-tool-card:before { border-radius:18px 18px 0 0; } .seo-json-toolbar { gap:4px; } .seo-json-tab, .seo-json-action { padding:8px; font-size:.75rem; } .seo-json-toolbar-spacer { display:none; } .seo-json-editor { grid-template-columns:32px minmax(0,1fr); } .seo-json-gutter { padding-right:7px; font-size:.76rem; } .seo-json-editor .seo-tool-textarea { padding:14px 10px; font-size:.78rem; } .seo-matrix-result-score { margin-left:0; width:100%; } .seo-matrix-bar-row { grid-template-columns:minmax(72px,.7fr) minmax(80px,1.5fr) 42px; gap:7px; font-size:.74rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Calm interaction layer inspired by professional JSON and decision tools. */
.seo-reveal { opacity:0; transform:translateY(14px); transition:opacity .62s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms), transform .62s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
.seo-reveal.is-visible { opacity:1; transform:none; }
.seo-tool-hero-copy, .seo-tool-stand, .seo-tool-card, .seo-tool-section, .seo-tool-footer { will-change:opacity,transform; }
.seo-tool-stand, .seo-tool-card { transition:box-shadow .28s ease, border-color .28s ease; }
.seo-tool-stand:hover, .seo-tool-card:hover { box-shadow:0 20px 55px rgba(55,42,30,.12); border-color:rgba(169,86,63,.28); }
.seo-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.seo-json-toolbar { align-items:center; }
.seo-json-action { position:relative; display:inline-flex; align-items:center; gap:7px; }
.seo-json-action:before { content:""; width:6px; height:6px; border-radius:50%; background:#bca99b; transition:background .2s ease, transform .2s ease; }
.seo-json-action:hover:before, .seo-json-action.is-primary:before { background:var(--accent); transform:scale(1.35); }
.seo-json-toolbar .seo-json-action.is-primary { color:var(--accent); background:#fffdf8; border-color:#e3c6b8; }
.seo-json-view-tabs { margin-top:16px; }
.seo-json-view-tabs > .seo-json-view-tabs { margin-top:0; }
.seo-json-view-tab { border:0; border-bottom:2px solid transparent; padding:8px 12px; color:var(--text-secondary); background:transparent; font:700 .78rem inherit; cursor:pointer; transition:color .2s ease,border-color .2s ease; }
.seo-json-view-tab.is-active { color:var(--accent); border-color:var(--accent); }
.seo-json-tree { min-height:280px; max-height:420px; overflow:auto; padding:18px; border:1px solid #3b3934; border-radius:12px; color:#eee6dc; background:#25231f; font:.86rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-json-tree-list { margin:0; padding-left:20px; list-style:none; }
.seo-json-tree-list > li { margin:3px 0; }
.seo-json-tree summary { cursor:pointer; list-style:none; }
.seo-json-tree summary::-webkit-details-marker { display:none; }
.seo-json-tree summary:before { content:"▸"; display:inline-block; width:16px; color:#d39a6e; transition:transform .2s ease; }
.seo-json-tree details[open] > summary:before { transform:rotate(90deg); }
.json-tree-key { color:#e3a789; }
.json-tree-count { margin-left:9px; color:#9c9083; font-size:.75rem; }
.json-tree-value { color:#bcd79e; }
.seo-json-leaf { display:flex; gap:8px; padding-left:16px; }
.seo-json-statusbar { display:flex; justify-content:space-between; gap:10px; margin-top:10px; padding:8px 10px; border-top:1px solid var(--border); color:var(--text-secondary); font:600 .76rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.seo-json-stat[data-state="success"] { color:var(--success); }
.seo-json-stat[data-state="error"] { color:#a64036; }
.json-token-key { color:#e3a789; }
.json-token-string { color:#c8dcaa; }
.json-token-number { color:#d7b4e8; }
.json-token-boolean { color:#8cc9d6; }
.seo-tool-table tbody tr { transition:background .25s ease, box-shadow .25s ease, transform .25s ease; }
.seo-tool-table tbody tr.is-winner { background:linear-gradient(90deg,rgba(61,119,91,.13),rgba(61,119,91,.03)); box-shadow:inset 4px 0 var(--success); }
.seo-tool-table tbody tr.is-winner .seo-tool-score { color:var(--success); }
.seo-matrix-range { transition:filter .2s ease; }
.seo-matrix-range:hover { filter:brightness(.92); }
.seo-matrix-add { min-height:40px; }
.seo-matrix-remove { opacity:.55; transition:opacity .2s ease,transform .2s ease; }
.seo-matrix-remove:hover { opacity:1; transform:scale(1.08); }
.seo-matrix-chart { animation:seo-chart-in .48s cubic-bezier(.22,1,.36,1) both; }
.seo-matrix-bar i { transform-origin:left center; animation:seo-bar-in .7s cubic-bezier(.22,1,.36,1) both; }
.seo-result-pop { animation:seo-result-in .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes seo-chart-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes seo-bar-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes seo-result-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:720px) { .seo-reveal { transform:translateY(9px); } .seo-json-statusbar { font-size:.68rem; } .seo-json-tree { min-height:240px; } .seo-json-toolbar .seo-json-action { padding:7px 8px; } .seo-tool-table { min-width:760px; } }
@media (prefers-reduced-motion:reduce) { .seo-reveal, .seo-result-pop, .seo-matrix-chart, .seo-matrix-bar i { animation:none!important; transition:none!important; } }