@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
--bg:#262415;
--paper:#5b5941;
--paper-2:#706d54;
--ink:#f5f1e4;
--ink-dim:#cac5ac;
--ink-faint:#948f78;
--line:#6f6c52;
--line-strong:#8a8768;
--accent:#f79f79;
--accent-bg:rgba(247,159,121,0.14);
--ok:#87b6a7;
--warn:#f7d08a;
--err:#e2665a;
--highlight:#e3f09b;
--serif:'Space Grotesk', var(--sans);
--sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65}
code{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.9rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:0.6rem}
.brand-title{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em}
.brand-sub{font-size:0.78rem;color:var(--ink-faint);font-family:var(--mono)}
.status-line{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--ink-dim)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.score-panel{margin:1.2rem 0;padding:1rem 1.2rem;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;display:flex;gap:1.1rem;align-items:center}
.score-number{font-family:var(--mono);font-size:2.1rem;font-weight:700;line-height:1;min-width:3ch;text-align:center;color:var(--accent)}
.score-body{flex:1;min-width:0}
.score-label{font-size:0.86rem;color:var(--ink);margin-bottom:0.3rem}
.score-body > div:nth-child(2){font-size:0.8rem;color:var(--ink-dim);margin-bottom:0.55rem}
.score-bar-track{height:5px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:999px;transition:width 0.4s ease;background:var(--highlight)}
.diff-panel{margin:0 0 1.2rem;padding:0.9rem 1.2rem;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.diff-heading{margin:0 0 0.4rem;font-size:0.74rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-faint);font-weight:600;font-family:var(--mono)}
#diff-summary{font-size:0.86rem}
#diff-summary.neutral{color:var(--ink-dim)}
#diff-summary.changed{color:var(--warn)}
#diff-summary ul{margin:0.5rem 0 0;padding-left:1.1rem;color:var(--ink);font-family:var(--mono);font-size:0.8rem}
#diff-summary li{margin-bottom:0.25rem}
.toolbar{margin:0 0 0.8rem;display:flex;gap:0.55rem;flex-wrap:wrap;align-items:center}
#search-input{flex:1;min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:0.5rem 0.7rem;font-family:var(--mono);font-size:0.85rem}
#search-input::placeholder{color:var(--ink-faint)}
#search-input:focus-visible{outline-color:var(--highlight)}
.toolbar-buttons{display:flex;gap:0.45rem;flex-wrap:wrap}
.btn{background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);padding:0.48rem 0.75rem;border-radius:3px;font-size:0.8rem;font-weight:600}
.btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.btn-primary{border-color:var(--accent);color:var(--accent)}
.btn-ghost{border-color:transparent;color:var(--ink-faint)}
.btn-ghost:hover{border-color:var(--err);color:var(--err);background:rgba(226,102,90,0.14)}
.btn-fill{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.btn-fill:hover{background:var(--highlight);border-color:var(--highlight);color:var(--bg)}
.btn-fill:disabled{background:var(--line-strong);border-color:var(--line-strong);color:var(--paper)}
.section-toggles{max-height:0;overflow:hidden;display:flex;flex-wrap:wrap;gap:0.3rem 0.9rem;border-radius:4px;transition:max-height 0.2s ease, padding 0.2s ease;margin-bottom:0.4rem}
.section-toggles.open{max-height:320px;padding:0.8rem 1rem;background:var(--paper);border:1px solid var(--line);overflow-y:auto}
.section-toggles label{display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;color:var(--ink-dim);cursor:pointer;font-family:var(--mono)}
.section-toggles input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px}
main#output{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0.8rem;align-items:start}
.section{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.section h2{margin:0;padding:0.55rem 0.85rem;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent);background:var(--accent-bg);border-bottom:1px solid var(--line);font-weight:700;font-family:var(--mono)}
.section table{width:100%;border-collapse:collapse}
.section td{padding:0.42rem 0.85rem;vertical-align:top;font-size:0.78rem;border-bottom:1px solid var(--line)}
.section tr:last-child td{border-bottom:none}
.section td.key{color:var(--ink-dim);white-space:nowrap;width:44%}
.section td.value{color:var(--ink);word-break:break-all;font-family:var(--mono);font-size:0.75rem}
.section td.value.pending{color:var(--ink-faint);font-style:italic;font-family:var(--sans)}
.section td.value.error{color:var(--err);font-family:var(--sans)}
.foot-note{margin:1.6rem 0 0;padding-top:0.9rem;border-top:1px solid var(--line);color:var(--ink-faint);font-size:0.76rem}
.foot-note code{color:var(--ink-dim);background:var(--accent-bg);padding:0.05rem 0.3rem;border-radius:3px}