.cmp { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px; }
.cmp .cmp-h1 { font-size: 27px; line-height: 1.18; margin: 8px 0 20px; color: #211c17; letter-spacing: -0.01em; }
.cmp h2 { font-size: 20px; margin: 34px 0 12px; color: #211c17; }
.cmp p { font-size: 16px; line-height: 1.7; color: #43392f; margin: 0 0 14px; }
.cmp .cmp-intro { font-size: 17px; color: #43392f; }

.cmp .cmp-minis { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0 22px; }
.cmp .cmp-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; border: 1px solid #d8cfc0; background: #faf6ef; color: #211c17; padding: 14px 12px; }
.cmp .cmp-mini:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(33,28,23,0.09); }
.cmp .cmp-mini img { width: 100%; max-width: 200px; height: auto; object-fit: contain; background: #fff; border-radius: 6px; padding: 5px; }
.cmp .cmp-mini-brand { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7d6c; margin-top: 6px; }
.cmp .cmp-mini-name { font-weight: 800; font-size: 15px; }
.cmp .cmp-mini-score { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; background: #e0a64a; color: #1b1712; border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.cmp .cmp-vs { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #b8482a; }

.cmp .cmp-tablewrap { overflow-x: auto; }
.cmp .cmp-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.cmp .cmp-table th, .cmp .cmp-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e6ddce; font-size: 15px; vertical-align: top; }
.cmp .cmp-table thead th { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #6b6157; font-weight: 700; border-bottom: 2px solid #d8cfc0; }
.cmp .cmp-table tbody th { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #6b6157; font-weight: 400; width: 30%; }
.cmp .cmp-table td.cmp-win { color: #211c17; font-weight: 700; position: relative; }
.cmp .cmp-table td.cmp-win::after { content: "✓"; color: #4a7c37; font-size: 12px; margin-left: 6px; }
.cmp .cmp-scoretable td { min-width: 120px; }
.cmp .cmp-scorecell { white-space: nowrap; }
.cmp .cmp-bar { display: block; height: 7px; background: #e6ddce; border-radius: 999px; overflow: hidden; margin-bottom: 5px; }
.cmp .cmp-bar span { display: block; height: 100%; background: #b8482a; border-radius: 999px; }
.cmp .cmp-scorecell.cmp-win .cmp-bar span { background: #4a7c37; }
.cmp .cmp-total th, .cmp .cmp-total td { border-top: 2px solid #d8cfc0; font-weight: 800; font-size: 16px; }

.cmp .cmp-links { font-size: 14px; color: #6b6157; margin-top: 26px; }
.cmp .cmp-links a { color: #b8482a; }


.cmp-index { margin-top: 8px; }
.cmp-index h2 { font-size: 18px; margin: 26px 0 10px; color: #211c17; }
.cmp-index-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.cmp-index-list a { display: block; border: 1px solid #d8cfc0; background: #faf6ef; color: #211c17; padding: 11px 14px; font-size: 15px; }
.cmp-index-list a:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(33,28,23,0.09); }
.cmp-index-cta { margin: 6px 0 10px; }

@media (min-width: 680px) {
  .cmp .cmp-h1 { font-size: 33px; }
  .cmp-index-list { grid-template-columns: 1fr 1fr; }
}


html.theme-dark .cmp .cmp-h1, html.theme-dark .cmp h2, html.theme-dark .cmp-index h2 { color: #f6efe2; }
html.theme-dark .cmp p, html.theme-dark .cmp .cmp-intro { color: #cabfae; }
html.theme-dark .cmp .cmp-mini, html.theme-dark .cmp-index-list a { background: #1f1a15; border-color: #322a22; color: #ece4d7; }
html.theme-dark .cmp .cmp-table th, html.theme-dark .cmp .cmp-table td { border-bottom-color: #2a241e; }
html.theme-dark .cmp .cmp-table thead th { color: #b3a795; border-bottom-color: #3a3128; }
html.theme-dark .cmp .cmp-table tbody th { color: #b3a795; }
html.theme-dark .cmp .cmp-table td.cmp-win { color: #f6efe2; }
html.theme-dark .cmp .cmp-bar { background: #322a22; }
html.theme-dark .cmp .cmp-total th, html.theme-dark .cmp .cmp-total td { border-top-color: #3a3128; }
html.theme-dark .cmp .cmp-links { color: #b3a795; }