* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  background: #0f1016; color: #d7d8e0; line-height: 1.5;
}
a { color: #ff66aa; text-decoration: none; }
a:hover { text-decoration: underline; }
header.topbar {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .8rem 1.5rem; background: #161821;
  border-bottom: 1px solid #232634; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 1.1rem; color: #fff; }
.brand span { color: #ff66aa; }
nav a { color: #b7b8c6; margin-right: .75rem; font-size: .9rem; }
.auth { margin-left: auto; }
main { max-width: 1080px; margin: 1.5rem auto; padding: 0 1.25rem; }
.card {
  background: #161821; border: 1px solid #232634;
  border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem;
}
h1, h2 { margin: .2rem 0 .8rem; color: #fff; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid #232634; }
th { color: #9498aa; font-weight: 500; }
tr:hover td { background: rgba(255,102,170,.05); }
.rank { color: #ff66aa; font-weight: 600; width: 3rem; }
footer { text-align: center; color: #555; margin: 2rem 0; font-size: .85rem; }
.muted { color: #8084a0; font-size: .9rem; }
.error { color: #ff5f5f; margin-bottom: .8rem; }
form.login { display: flex; flex-direction: column; gap: .8rem; max-width: 320px; }
form.login input {
  padding: .55rem .7rem; border: 1px solid #2b2f3f; border-radius: 8px;
  background: #0f1016; color: #d7d8e0;
}
form.login button {
  background: #ff66aa; border: 0; color: #fff; padding: .6rem .9rem;
  border-radius: 8px; cursor: pointer; font-weight: 600;
}
.flag { font-family: monospace; opacity: .8; margin-right: .35rem; font-size: .8rem; }

/* search в шапке */
header.topbar form.search { margin-left: 1rem; }
header.topbar form.search input {
  padding: .35rem .6rem; border-radius: 6px; border: 1px solid #2b2f3f;
  background: #0f1016; color: #d7d8e0; font-size: .85rem; width: 180px;
}

/* вкладки режимов */
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.tabs a {
  padding: .3rem .6rem; border-radius: 6px; background: #0f1016;
  border: 1px solid #232634; color: #b7b8c6; font-size: .82rem;
}
.tabs a:hover { text-decoration: none; border-color: #ff66aa; color: #fff; }
.tabs a.active { background: #ff66aa; color: #fff; border-color: #ff66aa; }

.chart-wrap { position: relative; height: 320px; }