* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body { font-family: 'Inter', sans-serif; background: linear-gradient(145deg, #f8f9fe 0%, #e9edf5 100%); min-height: 100vh; padding: 30px 20px; display: flex; justify-content: center; align-items: flex-start; }
.container { max-width: 1200px; width: 100%; background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-radius: 32px; padding: 30px 30px 40px; box-shadow: 0 20px 60px rgba(0,20,40,0.12); overflow: visible; min-height: 100vh; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; flex-wrap: wrap; gap: 12px; }
h1 { font-size: 2.2rem; font-weight: 700; color: #0a1a2f; letter-spacing: -0.5px; display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 40px; height: 40px; vertical-align: middle; }
.btn-back { display: inline-block; padding: 10px 24px; background: #1a2b3f; color: #ffd966 !important; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: 0.3s ease; box-shadow: 0 4px 12px rgba(26,43,63,0.3); border: none; cursor: pointer; }
.btn-back:hover { background: #2d3a4f; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,43,63,0.4); text-decoration: none !important; }
.subtitle { font-size: 1rem; color: #4a5b6e; margin-bottom: 28px; border-left: 4px solid #2d7aff; padding-left: 16px; font-weight: 400; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center; }
.filter-btn { padding: 6px 16px; border: 1px solid #dce1eb; border-radius: 20px; background: white; color: #4a5b6e; font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: 0.2s; font-family: inherit; }
.filter-btn:hover { background: #f1f4fa; }
.filter-btn.active { background: #2d7aff; color: white; border-color: #2d7aff; }
.filter-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.filter-group-label { font-size: 0.8rem; color: #8a9bae; font-weight: 600; margin-right: 4px; }
.filter-btn-small { padding: 4px 12px; border: 1px solid #dce1eb; border-radius: 16px; background: white; color: #4a5b6e; font-weight: 500; font-size: 0.75rem; cursor: pointer; transition: 0.2s; font-family: inherit; }
.filter-btn-small:hover { background: #f1f4fa; }
.filter-btn-small.active { background: #2d7aff; color: white; border-color: #2d7aff; }
#loading-progress { display: none; text-align: center; padding: 20px; }
#loading-progress .progress-track { width: 100%; background: #e9edf5; border-radius: 30px; height: 20px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
#loading-progress .progress-bar { width: 0%; background: #2d7aff; height: 100%; transition: width 0.4s ease; border-radius: 30px; box-shadow: 0 0 10px rgba(45,122,255,0.3); }
#loading-progress .progress-text { margin-top: 8px; color: #4a5b6e; font-size: 0.95rem; font-weight: 500; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.controls .search { flex: 1; min-width: 180px; padding: 10px 16px; border: 1px solid #dce1eb; border-radius: 12px; font-size: 0.95rem; background: white; transition: 0.2s; font-family: inherit; outline: none; }
.controls .search:focus { border-color: #2d7aff; box-shadow: 0 0 0 3px rgba(45,122,255,0.15); }
/* Кнопки сортировки убраны, сортировка по заголовкам */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; background: white; box-shadow: 0 2px 12px rgba(0,0,0,0.02); margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 650px; }
th { background: #f8faff; color: #1a2b3f; font-weight: 600; padding: 14px 12px; text-align: left; border-bottom: 2px solid #eef2f8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; user-select: none; transition: background 0.2s; }
th:hover { background: #eef2f8; }
th.active { color: #2d7aff; }
td { padding: 12px 12px; border-bottom: 1px solid #f0f3f9; color: #1f2f44; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f6faff; }
.place { font-weight: 700; color: #0a1a2f; background: #f0f4fe; padding: 4px 10px; border-radius: 30px; display: inline-block; font-size: 0.8rem; min-width: 40px; text-align: center; }
.place-gold { background: #ffd966; color: #7a5d00; }
.place-silver { background: #e2e8f0; color: #3a4a5f; }
.place-bronze { background: #e6c9a8; color: #6f4a2c; }
.rating-value { font-weight: 600; }
.rating-max { font-weight: 700; color: #0a1a2f; }
.rating-delta-inc, .rating-delta-dec { font-size: 0.65rem; font-weight: 600; margin-left: 2px; }
.rating-delta-inc { color: #28a745; }
.rating-delta-dec { color: #dc3545; }
.footer-info { margin-top: 20px; font-size: 0.85rem; color: #4f647b; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 4px; }
.loading { text-align: center; padding: 50px 20px; color: #4f647b; font-size: 1rem; }
.error-msg { color: #c62828; background: #ffebee; padding: 18px 24px; border-radius: 16px; text-align: center; }
.error-msg button { margin-top: 12px; padding: 10px 28px; background: #1e88e5; color: white; border: none; border-radius: 30px; font-weight: 600; cursor: pointer; transition: 0.2s; font-family: inherit; }
.error-msg button:hover { background: #1565c0; }
@media (max-width: 640px) {
    .container { padding: 15px 10px 20px; }
    h1 { font-size: 1.4rem; }
    .controls { flex-direction: column; align-items: stretch; }
    td, th { padding: 8px 8px; font-size: 0.8rem; }
    .place { font-size: 0.7rem; min-width: 30px; }
    .header { flex-direction: column; align-items: stretch; }
    .btn-back { text-align: center; }
    .logo-icon { width: 32px; height: 32px; }
    .filters { gap: 4px; }
    .filter-btn { font-size: 0.75rem; padding: 4px 12px; }
    .filter-btn-small { font-size: 0.65rem; padding: 3px 8px; }
    .rating-delta-inc, .rating-delta-dec { font-size: 0.55rem; }
}