:root{
  --paper:#fbf7ef;
  --ink:#2b2b2b;
  --muted:#6b6b6b;
  --line:#ded6c6;
  --accent:#3b5a6b;     /* атласный синевато-серый */
  --accent2:#a7773a;    /* тёплый маркер */
  --card:#fffdf7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:18px}

.topbar{border-bottom:1px solid var(--line);background:linear-gradient(to bottom, #fffdf7, var(--paper))}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;letter-spacing:.6px}
.brand-sub{margin-left:10px;font-weight:500;color:var(--muted);font-size:13px}
.nav a{margin-left:14px;color:var(--ink);opacity:.85}
.nav a:hover{opacity:1}

h1{margin:10px 0 14px;font-size:28px}
h2{margin:0 0 10px;font-size:18px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px;margin:12px 0;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.muted{color:var(--muted)}
.list{margin:0;padding-left:18px}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;margin-right:8px;color:var(--muted);background:#fff}

.input{width:min(520px,100%);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.btn{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--accent);color:#fff;cursor:pointer}
.btn:hover{filter:brightness(1.05)}

.footer{border-top:1px solid var(--line);margin-top:22px}
.footer .wrap{color:var(--muted);font-size:13px}

/* ---- Grady layout: content + sidebar ---- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.maincol { min-width: 0; }
.sidecol { position: sticky; top: 14px; }

@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .sidecol { position: static; }
}

/* Cards in sidebar look slightly tighter */
.sidecol .card { padding: 12px; }
.sidecol h3 { margin: 0 0 8px 0; font-size: 16px; }

/* Small muted links list */
.side-links { margin: 0; padding-left: 18px; }
.side-links li { margin: 6px 0; }

/* ---- SVG bar chart helpers ---- */
.chart-wrap { overflow-x: auto; }
.bar-label { font-size: 12px; fill: #6b6258; }
.bar-grid { stroke: #eee5d5; stroke-width: 1; }

/* --- mobile fix: charts must not widen the page --- */
.wrap { overflow-x: hidden; }

.chart-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chart-wrap svg{
  display: block;
  width: 100%;
  height: auto;
  min-width: 920px; /* if bars are many — scroll inside block, not page */
}
.bar-label { font-size: 9px; fill: #6b6258; }

/* charts: always fit screen, no horizontal scrollbar */
.chart-wrap{
  overflow: hidden !important;
}

.chart-wrap svg{
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  display: block;
}

/* rank cards (v2) */
.rank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:820px){.rank-grid{grid-template-columns:1fr}}

.rank-card{
  border:1px solid #e3dccb;
  border-radius:16px;
  padding:12px 12px 10px;
  background:linear-gradient(180deg,#fefaf3 0%,#fbf4ea 100%);
  box-shadow:0 1px 0 rgba(63,58,52,.04);
}
.rank-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rank-label{font-size:12px;letter-spacing:.02em;color:#6b5a4a;text-transform:uppercase}
.rank-badge{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #e3dccb;
  background:#fefaf3;
  color:#6b5a4a;
  white-space:nowrap;
}

.rank-main{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.rank-num{font-size:28px;font-weight:800;line-height:1;color:#3f3a34}
.rank-of{font-size:12px;color:#6b5a4a}
.rank-of b{color:#3f3a34}

.rank-bar{margin-top:10px;height:8px;border-radius:999px;background:#efe6d7;overflow:hidden}
.rank-bar > i{display:block;height:100%;background:#9c6b3f;width:0%}

.rank-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.rank-foot .muted{font-size:12px;color:#6b5a4a}


.rank-card-link{display:block;text-decoration:none;color:inherit}
.rank-card-link:hover .rank-card{transform:translateY(-1px)}
.rank-card{transition:transform .12s ease, box-shadow .12s ease}
.rank-card-link:hover .rank-card{box-shadow:0 6px 18px rgba(63,58,52,.08)}