:root { --max: 1040px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.65; margin: 0; color: #111; background: #fff; }
a { color: #111; }
.small { color:#555; font-size:.95rem; }
main { max-width: var(--max); margin: 0 auto; padding: 20px; }

h1 { line-height:1.2; margin: 10px 0 8px; }
h2 { margin-top: 26px; }
h3 { margin-top: 16px; }
hr { border:0; border-top:1px solid #e6e8ee; margin: 18px 0; }

.card { border:1px solid #e6e8ee; border-radius: 14px; padding: 14px 16px; background:#fff; }
.note { background:#f6f7f9; border:1px solid #e6e8ee; padding: 14px 16px; border-radius: 10px; }
.warn { background:#fff7ed; border:1px solid #fed7aa; padding: 14px 16px; border-radius: 10px; }
.cta { background:#0b1220; color:#fff; padding: 16px 18px; border-radius: 12px; }
.cta a { color:#fff; font-weight:800; text-decoration: none; }

.tagrow { margin-top: 10px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { border:1px solid #e6e8ee; padding: 4px 8px; border-radius: 999px; font-size:.85rem; color:#333; background:#fafbfc; }

.layout { display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 920px){ .layout { grid-template-columns: 1.8fr 1fr; align-items:start; } }

.chart-wrap { border:1px solid #e6e8ee; border-radius:12px; padding:12px; background:#fff; }
.btn { cursor:pointer; }

.topnav { position: sticky; top: 0; z-index: 999; background: #fff; border-bottom: 1px solid #e6e8ee; }
.topnav .wrap { max-width: var(--max); margin: 0 auto; padding: 10px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nav-left { display:flex; align-items:center; gap:14px; flex-wrap: wrap; }
.brand { font-weight: 800; text-decoration:none; color:#111; white-space: nowrap; }
.menu { display:flex; gap: 10px; flex-wrap: wrap; }
.menu a { text-decoration:none; color:#111; font-size:.95rem; padding: 8px 10px; border-radius: 10px; border:1px solid transparent; }
.menu a:hover { border-color:#e6e8ee; background:#fafbfc; }
.nav-right { display:flex; align-items:center; gap:10px; }
.wa-btn { display:inline-block; padding: 9px 11px; border:1px solid #e6e8ee; border-radius:10px; text-decoration:none; color:#111; font-size:.95rem; white-space: nowrap; }
.wa-btn:hover { background:#fafbfc; }
.logo { width: 38px; height:38px; border-radius:10px; border:1px solid #e6e8ee; object-fit: contain; background:#fff; }

.flink { text-decoration:none; color:#111; font-size:.95rem; padding:8px 10px; border:1px solid #e6e8ee; border-radius:10px; background:#fafbfc; }
.flink:hover { background:#fff; }
.slink { text-decoration:none; color:#111; }
.srow { display:flex; flex-wrap:wrap; gap:10px; }
.sbadge { display:inline-flex; align-items:center; padding:8px 10px; border:1px solid #e6e8ee; border-radius:10px; background:#fff; font-size:.95rem; }

.search { width:100%; padding: 10px 12px; border:1px solid #e6e8ee; border-radius: 12px; font-size: 1rem; }

@media print {
  .topnav, .site-footer, .wa-btn, .menu { display: none !important; }
  main { max-width: 100% !important; }
  .card { border: none; padding: 0; }
}