:root {
  --wb-bg: #f2f5f3;
  --wb-surface: #ffffff;
  --wb-surface-2: #f8faf9;
  --wb-text: #142019;
  --wb-muted: #68766d;
  --wb-border: #dbe5de;
  --wb-accent: #14833b;
  --wb-accent-dark: #0e692f;
  --wb-accent-soft: #eaf7ee;
  --wb-added: #117a3c;
  --wb-added-bg: #edf9f1;
  --wb-removed: #a13a32;
  --wb-removed-bg: #fff2f0;
  --wb-changed: #9a6200;
  --wb-changed-bg: #fff8e8;
  --wb-type: #6a49a5;
  --wb-type-bg: #f5f0ff;
  --wb-shadow: 0 12px 34px rgba(20,39,28,.07);
  --wb-radius: 15px;
  --wb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --wb-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--wb-bg); color: var(--wb-text); font-family: var(--wb-sans); }
a { color: inherit; }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }

.wb-shell { width: min(1560px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 22px; }
.wb-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.wb-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.wb-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg,#11813b,#28b85e); color: #fff; font-family: var(--wb-mono); font-weight: 900; box-shadow: 0 10px 24px rgba(20,131,59,.18); flex: 0 0 auto; }
.wb-brand-copy { min-width: 0; }
.wb-brand-copy strong { display: block; font-size: 1.18rem; letter-spacing: -.025em; }
.wb-brand-copy span { display: block; color: var(--wb-muted); font-size: .8rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-nav { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.wb-nav a { text-decoration: none; color: var(--wb-muted); font-size: .8rem; font-weight: 800; padding: 8px 10px; border-radius: 9px; }
.wb-nav a:hover { color: var(--wb-text); background: #e8eeea; }
.wb-nav a.is-current { color: var(--wb-accent-dark); background: var(--wb-accent-soft); border: 1px solid #b9dfc5; }
.wb-support { color: var(--wb-accent-dark) !important; border: 1px solid #c4dfcd; }

.wb-intro { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin: 4px 2px 14px; }
.wb-kicker { color: var(--wb-accent); font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.wb-intro h1 { margin: 5px 0 0; font-size: clamp(1.5rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.wb-intro p { color: var(--wb-muted); margin: 8px 0 0; line-height: 1.55; max-width: 820px; font-size: .92rem; }
.wb-local { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; white-space: nowrap; background: var(--wb-accent-soft); color: #496351; border: 1px solid #c8e5d1; font-size: .76rem; font-weight: 900; }
.wb-local::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #20aa54; box-shadow: 0 0 0 4px rgba(32,170,84,.09); }

.wb-card { background: var(--wb-surface); border: 1px solid var(--wb-border); border-radius: var(--wb-radius); box-shadow: var(--wb-shadow); }
.wb-toolbar { padding: 11px 12px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wb-toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-btn { border: 1px solid var(--wb-border); background: #fff; color: var(--wb-text); border-radius: 9px; padding: 8px 11px; font-size: .82rem; font-weight: 750; transition: .15s ease; }
.wb-btn:hover { border-color: #b6c9bb; transform: translateY(-1px); }
.wb-btn.primary { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); font-weight: 900; box-shadow: 0 7px 17px rgba(20,131,59,.14); }
.wb-btn.primary:hover { background: var(--wb-accent-dark); }
.wb-btn.danger { color: #a3261d; }
.wb-btn.subtle { background: var(--wb-surface-2); }
.wb-option { display: inline-flex; align-items: center; gap: 7px; color: var(--wb-muted); font-size: .8rem; font-weight: 700; }
.wb-option input { accent-color: var(--wb-accent); }

.compare-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-pane { overflow: hidden; min-width: 0; }
.compare-head { min-height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 13px; border-bottom: 1px solid var(--wb-border); background: linear-gradient(180deg,#fbfcfb,#f6f9f7); gap: 12px; }
.compare-head h2 { margin: 0; font-size: .9rem; }
.compare-head span { color: var(--wb-muted); font-size: .72rem; font-family: var(--wb-mono); }
.compare-pane textarea { width: 100%; height: 36vh; min-height: 330px; resize: vertical; border: 0; outline: 0; padding: 14px 15px; background: #fff; color: #17251c; font-family: var(--wb-mono); font-size: 13px; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 2; }
.compare-pane textarea:focus { box-shadow: inset 0 0 0 2px rgba(20,131,59,.08); }
.compare-pane textarea::placeholder { color: #9da9a1; }

.compare-summary { margin-top: 12px; padding: 13px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.summary-stat { padding: 12px; border: 1px solid var(--wb-border); border-radius: 12px; background: var(--wb-surface-2); min-width: 0; }
.summary-stat strong { display: block; font-size: 1.25rem; letter-spacing: -.03em; }
.summary-stat span { display: block; color: var(--wb-muted); font-size: .72rem; font-weight: 800; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }

.compare-results { margin-top: 12px; overflow: hidden; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--wb-border); background: linear-gradient(180deg,#fbfcfb,#f7f9f8); flex-wrap: wrap; }
.results-tabs { display: flex; gap: 6px; }
.results-tab { border: 1px solid var(--wb-border); border-radius: 8px; padding: 6px 9px; background: #fff; color: var(--wb-muted); font-size: .78rem; font-weight: 850; }
.results-tab.active { color: var(--wb-accent); border-color: #9fceb0; background: var(--wb-accent-soft); }
.result-tools { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.result-tools input { border: 1px solid var(--wb-border); background: #fff; color: var(--wb-text); border-radius: 8px; padding: 7px 9px; font-size: .78rem; min-width: 220px; outline: none; }
.result-tools input:focus { border-color: #9fceb0; box-shadow: 0 0 0 3px rgba(20,131,59,.06); }

.change-nav { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--wb-border); border-radius: 9px; background: #fff; padding: 3px; }
.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--wb-muted); font-weight: 900; }
.icon-btn:hover { background: var(--wb-accent-soft); color: var(--wb-accent-dark); }
.icon-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.change-position { min-width: 52px; text-align: center; color: var(--wb-muted); font: 700 .7rem var(--wb-mono); }

.change-filter { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--wb-border); background: #fcfdfc; flex-wrap: wrap; }
.change-filter-btn { border: 1px solid var(--wb-border); background: #fff; color: var(--wb-muted); border-radius: 999px; padding: 5px 9px; font-size: .7rem; font-weight: 850; line-height: 1; }
.change-filter-btn span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #eef2ef; color: #56655c; font-family: var(--wb-mono); font-size: .64rem; }
.change-filter-btn.active { color: var(--wb-accent-dark); border-color: #9fceb0; background: var(--wb-accent-soft); }
.change-filter-btn.active span { background: rgba(20,131,59,.11); color: var(--wb-accent-dark); }

.diff-columns { display: grid; grid-template-columns: 112px minmax(210px,1.2fr) minmax(180px,1fr) minmax(180px,1fr) 92px; border-bottom: 1px solid var(--wb-border); background: #f7faf8; color: #7d8a82; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .075em; }
.diff-columns span { padding: 8px 11px; min-width: 0; }
.diff-columns span:last-child { text-align: center; }

.diff-list { max-height: 48vh; overflow: auto; scroll-behavior: smooth; }
.diff-empty { padding: 34px 20px; text-align: center; color: var(--wb-muted); }
.diff-row { display: grid; grid-template-columns: 112px minmax(210px,1.2fr) minmax(180px,1fr) minmax(180px,1fr) 92px; gap: 0; border-bottom: 1px solid #edf1ee; align-items: stretch; position: relative; transition: box-shadow .16s ease, background .16s ease; }
.diff-row:last-child { border-bottom: 0; }
.diff-row.is-focused { box-shadow: inset 4px 0 0 var(--wb-accent), inset 0 0 0 1px rgba(20,131,59,.18); z-index: 1; }
.diff-cell { padding: 10px 11px; min-width: 0; font-size: .78rem; display: flex; align-items: center; }
.diff-status { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .67rem; }
.diff-status.added { color: var(--wb-added); background: var(--wb-added-bg); }
.diff-status.removed { color: var(--wb-removed); background: var(--wb-removed-bg); }
.diff-status.modified { color: var(--wb-changed); background: var(--wb-changed-bg); }
.diff-status.type { color: var(--wb-type); background: var(--wb-type-bg); }
.diff-status.unchanged { color: var(--wb-muted); background: #f7faf8; }
.diff-path { font-family: var(--wb-mono); color: #294034; overflow-wrap: anywhere; }
.diff-value { font-family: var(--wb-mono); color: #58675e; overflow-wrap: anywhere; background: #fcfdfc; }
.diff-value.before, .diff-value.after { border-left: 1px solid rgba(219,229,222,.55); }
.diff-row.added .diff-value.after { background: linear-gradient(90deg, rgba(237,249,241,.9), #fcfdfc 72%); color: #176b35; font-weight: 700; }
.diff-row.removed .diff-value.before { background: linear-gradient(90deg, rgba(255,242,240,.95), #fcfdfc 72%); color: #8f352e; font-weight: 700; }
.diff-row.modified .diff-value.before { background: linear-gradient(90deg, rgba(255,248,232,.85), #fcfdfc 72%); color: #79520a; }
.diff-row.modified .diff-value.after { background: linear-gradient(90deg, rgba(255,248,232,.85), #fcfdfc 72%); color: #6e4907; font-weight: 750; }
.diff-row.type .diff-value.before, .diff-row.type .diff-value.after { background: linear-gradient(90deg, rgba(245,240,255,.88), #fcfdfc 72%); color: #5c438d; }
.diff-row.type .diff-value.after { font-weight: 750; }
.diff-copy { justify-content: center; }
.diff-copy button { border: 1px solid var(--wb-border); background: #fff; border-radius: 7px; padding: 5px 7px; color: var(--wb-muted); font-size: .7rem; font-weight: 800; }
.diff-copy button:hover { border-color: #a9c8b2; color: var(--wb-accent-dark); background: var(--wb-accent-soft); }

.patch-wrap { padding: 0; }
.patch-wrap textarea { width: 100%; min-height: 340px; border: 0; resize: vertical; outline: 0; padding: 15px; font-family: var(--wb-mono); font-size: 13px; line-height: 1.55; background: #fcfefd; color: #173b25; }
.wb-message { margin: 0 0 12px; border: 1px solid var(--wb-border); background: #fff; border-radius: 10px; padding: 10px 13px; color: var(--wb-muted); font-size: .82rem; }
.wb-message.good { border-color: #b7dec2; background: #f2fbf4; color: #176b35; }
.wb-message.bad { border-color: #efbbb5; background: #fff5f4; color: #912018; }
.hidden { display: none !important; }

.wb-footer { margin-top: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; color: #7d8d83; font-size: .74rem; padding: 0 4px; }
.wb-footer-left { display: flex; flex-direction: column; gap: 4px; }
.wb-footer-left a { color: var(--wb-accent-dark); text-decoration: none; font-weight: 850; }
.wb-release { text-align: right; }
.footer-pageviews { margin-bottom: 3px; }

@media (max-width: 1060px) {
  .compare-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .diff-columns, .diff-row { grid-template-columns: 100px minmax(190px,1.2fr) minmax(160px,1fr) minmax(160px,1fr) 80px; }
}

@media (max-width: 900px) {
  .compare-editors { grid-template-columns: 1fr; }
  .compare-pane textarea { height: 31vh; min-height: 260px; }
  .diff-list { max-height: none; }
  .diff-columns { display: none; }
  .diff-row { grid-template-columns: 92px 1fr; }
  .diff-value, .diff-copy { grid-column: 2; }
  .diff-value::before { display: inline-block; min-width: 52px; margin-right: 8px; color: #849088; font-family: var(--wb-sans); font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
  .diff-value.before::before { content: 'Before'; }
  .diff-value.after::before { content: 'After'; }
  .diff-copy { justify-content: flex-start; padding-top: 0; }
}

@media (max-width: 680px) {
  .wb-shell { width: min(100% - 18px,1560px); padding-top: 12px; }
  .wb-topbar { align-items: flex-start; }
  .wb-nav a:not(.is-current):not(.wb-support) { display: none; }
  .wb-brand-copy span { max-width: 190px; }
  .wb-intro { flex-direction: column; align-items: flex-start; gap: 9px; }
  .wb-toolbar-group { width: 100%; }
  .wb-btn { flex: 1 1 auto; }
  .compare-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .result-tools { width: 100%; }
  .result-tools input { flex: 1 1 100%; width: 100%; min-width: 0; order: 3; }
  .change-nav { flex: 0 0 auto; }
  .change-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .change-filter-btn { white-space: nowrap; flex: 0 0 auto; }
  .wb-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wb-release { text-align: left; }
}