.levels-page { max-width: 1120px; margin-inline: auto; }
.levels-hero { padding: clamp(24px, 5vw, 56px); margin-bottom: 24px; border: 1px solid #514227; border-radius: 24px; background: radial-gradient(ellipse at 95% 0%, #443319 0, transparent 62%), #10131d; }
.levels-hero h1 { margin: 12px 0 18px; font-size: clamp(32px, 5vw, 60px); line-height: 1.08; letter-spacing: -.04em; }
.levels-hero h1 em { color: #f5cd61; font-style: normal; }
.levels-hero p { max-width: 640px; }
.levels-hero nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.levels-section { scroll-margin-top: 100px; padding: clamp(18px, 3vw, 32px); margin-block: 24px; }
.levels-section header { max-width: 800px; margin-bottom: 24px; }
.levels-section h2 { margin: 8px 0; }
.levels-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.levels-table th, .levels-table td { padding: 18px 12px; border-bottom: 1px solid #293044; vertical-align: middle; }
.levels-table thead th { color: #aebbd0; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.levels-table tbody th { color: #f4f5fa; font-weight: 650; }
.levels-table td:last-child { color: #f5cd61; font-weight: 700; text-align: right; white-space: nowrap; }
.levels-table thead th:last-child { text-align: right; }
.levels-table tr:last-child > * { border-bottom: 0; }
.level-medal { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; margin-right: 10px; color: #f5cd61; background: #352b1c; }
.level-bronze { color: #ffc494; background: #402b22; }
.level-silver { color: #e1e8f7; background: #30394b; }
.level-diamond { color: #85e7ff; background: #173340; }
.level-crown, .level-royal, .level-vip { color: #e7b4ff; background: #37213f; }
.level-legend { color: #ffe6a4; background: #51401f; }
.levels-example { border-color: #685223; }
.levels-equation { font-size: 18px; }
.levels-equation strong { display: block; margin-top: 12px; color: #f5cd61; font-size: clamp(24px, 4vw, 36px); }

@media (max-width: 600px) {
  .levels-hero { border-radius: 18px; }
  .levels-section { padding-inline: 14px; }
  .levels-table { font-size: 12px; }
  .levels-table th, .levels-table td { padding: 15px 5px; }
  .levels-table thead th { font-size: 10px; letter-spacing: 0; }
  .level-medal { width: 20px; height: 24px; margin-right: 5px; border-radius: 5px; }
  .levels-table tbody th { min-width: 84px; }
  .levels-table td:nth-child(2) { max-width: 138px; }
}