* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:#f5f7fa; color:#2d3748; padding-bottom:80px; }
.app { max-width:480px; margin:0 auto; padding:20px 16px 80px 16px; min-height:100vh; background:white; }
.auth-container { max-width:400px; margin:40px auto; padding:30px; background:white; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.auth-container h1 { text-align:center; margin-bottom:30px; }
.auth-form .form-group { margin-bottom:16px; }
.auth-form label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.auth-form input, .auth-form select { width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:12px; font-size:14px; }
.btn-primary, .btn-secondary { width:100%; padding:12px; border:none; border-radius:12px; font-weight:600; font-size:16px; cursor:pointer; margin-top:8px; }
.btn-primary { background:#4299e1; color:white; }
.btn-secondary { background:#edf2f7; color:#2d3748; }
.error { background:#fff5f5; color:#fc8181; padding:12px; border-radius:8px; margin-bottom:16px; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.user-info { display:flex; align-items:center; gap:8px; font-size:14px; }
.badge { background:#edf2f7; padding:4px 10px; border-radius:20px; font-size:12px; }
.coins { background: transparent; color: var(--text); }
.verified { background:#48bb78; color:white; }
.logout-btn { color:#fc8181; text-decoration:none; font-size:14px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.search-input, .filter-select { flex:1; min-width:120px; padding:10px 14px; border:1px solid #e2e8f0; border-radius:12px; background:#f7fafc; font-size:14px; }
.quiz-grid { display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.quiz-card { background:#f7fafc; border-radius:16px; padding:16px; position:relative; transition:transform 0.2s; }
.quiz-card:active { transform:scale(0.98); }
.quiz-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.quiz-header h3 { flex:1; margin:0; font-size:18px; }
.quiz-header h3 a { color:#2d3748; text-decoration:none; }
.quiz-header-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.btn-delete-top { background:transparent; border:none; font-size:18px; color:#fc8181; cursor:pointer; padding:0 2px; line-height:1; }
.btn-delete-top:hover { color:#f56565; }
.verified-badge { font-size:16px; }
.favorite-btn { background:none; border:none; font-size:20px; cursor:pointer; padding:0; }
.quiz-card p { color:#718096; font-size:14px; margin-bottom:10px; }
.quiz-meta { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:#718096; margin-bottom:10px; }
.quiz-meta span { background:#edf2f7; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.difficulty { font-weight:600; }
.difficulty.easy { background:#48bb78; color:white; }
.difficulty.medium { background:#ed8936; color:white; }/* ===== ПЕРЕМЕННЫЕ (по умолчанию светлая тема) ===== */
:root {
    --bg: #ffffff;
    --text: #2d3748;
    --text-light: #718096;
    --card: #f7fafc;
    --accent: #4299e1;
    --border: #e2e8f0;
}

/* ===== ОБЩИЕ СТИЛИ ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding-bottom:80px;
}
.app {
    max-width:480px;
    margin:0 auto;
    padding:20px 16px 80px;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
}
a { color: var(--accent); text-decoration:none; }
h1,h2,h3,h4,p,span,div { color: var(--text); }

/* ===== КАРТОЧКИ И БЛОКИ ===== */
.quiz-card, .profile-card, .stat-card, .played-item,
.faq-item, .leader-item, .achievement-card, .comment-item,
.preview-card, .avatar-item, .friend-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    color: var(--text);
}
.quiz-card:active { transform:scale(0.98); }

/* ===== КНОПКИ ===== */
.btn-play {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-play:active { background: #3182ce; }

/* ===== НАВИГАЦИЯ ===== */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    background:var(--bg);
    display:flex; justify-content:space-around;
    padding:10px 0;
    border-top:1px solid var(--border);
    max-width:480px; margin:0 auto;
    z-index:1000;
}
.nav-item {
    display:flex; flex-direction:column; align-items:center;
    color:var(--text-light); font-size:10px; gap:2px;
}
.nav-item .icon { font-size:20px; }
.nav-item.active { color:var(--accent); }

.section-nav {
    display:flex; gap:8px; flex-wrap:wrap;
    background:var(--card); padding:10px 12px;
    border-radius:12px; border:1px solid var(--border);
    margin:10px 0 16px;
}
.section-nav-btn {
    background:transparent; border:none;
    padding:8px 18px; border-radius:20px;
    font-weight:600; color:var(--text-light);
    cursor:pointer;
}
.section-nav-btn.active { background:var(--accent); color:white; }
.section-content { display:none; }
.section-content.active { display:block; }

/* ===== ПОЛЯ ВВОДА ===== */
input, textarea, select {
    background:var(--bg); color:var(--text);
    border:1px solid var(--border);
    border-radius:8px; padding:10px 14px;
    width:100%; font-size:14px;
}
textarea { resize:vertical; }

/* ===== ПРОЧЕЕ ===== */
.leader-header {
    display:flex; gap:10px; padding:6px 0;
    font-weight:700; border-bottom:2px solid var(--border);
}
.leader-item {
    display:flex; align-items:center; gap:10px; padding:6px 0;
    border-bottom:1px solid var(--border);
}
.leader-item .rank { width:40px; font-weight:bold; }
.leader-item .avatar { font-size:1.5em; width:36px; text-align:center; }
.leader-item .name { flex:1; color:var(--text); }
.leader-item .score { width:80px; text-align:right; }

.stats-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.stat-card {
    text-align:center; background:var(--card);
    padding:12px; border-radius:12px;
}
.stat-value { display:block; font-size:24px; font-weight:700; }
.stat-label { font-size:12px; color:var(--text-light); }

.played-item {
    display:flex; justify-content:space-between;
    padding:10px 14px; flex-wrap:wrap; gap:4px;
}
.played-title { font-weight:500; flex:2; min-width:100px; }
.played-score, .played-percent, .played-date { font-size:12px; }

.avatar-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.avatar-item {
    text-align:center; border:2px solid var(--border);
    padding:12px; border-radius:12px;
}
.avatar-item.purchased { border-color:#48bb78; }
.avatar-item.active { border-color:var(--accent); background:#ebf8ff; }

.progress-bar-level {
    width:100%; height:8px; background:var(--card);
    border-radius:4px; overflow:hidden; margin:4px 0;
}
.progress-bar-level .progress {
    height:100%; background:var(--accent); transition:width 0.5s;
}

/* ===== МЕДИА ===== */
@media (max-width:480px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .avatar-grid { grid-template-columns:repeat(2,1fr); }
    .played-item { flex-wrap:wrap; }
    .played-title { flex:1 1 100%; }
}
.difficulty.hard { background:#fc8181; color:white; }
.quiz-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.tag { background:#bee3f8; color:#2c5282; padding:2px 10px; border-radius:12px; font-size:12px; }
.btn-play { display:inline-block; background:#4299e1; color:white; padding:8px 20px; border-radius:20px; text-decoration:none; font-weight:600; font-size:14px; border:none; cursor:pointer; }
.btn-play:active { background:#3182ce; }
.btn-create { position:fixed; bottom:90px; right:20px; width:64px; height:64px; border-radius:50%; background:#4299e1; color:white; font-size:36px; border:none; box-shadow:0 4px 16px rgba(66,153,225,0.4); display:flex; align-items:center; justify-content:center; text-decoration:none; z-index:1000; cursor:pointer; transition:transform 0.2s; }
.btn-create:active { transform:scale(0.9); }
@media (max-width:480px) { .btn-create { width:58px; height:58px; font-size:30px; bottom:80px; right:16px; } }
.progress-bar { width:100%; height:6px; background:#edf2f7; border-radius:3px; margin-bottom:20px; overflow:hidden; }
.progress { height:100%; background:#4299e1; transition:width 0.3s; }
.question-card { display: none; animation:fadeIn 0.3s; }
@keyframes fadeIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
.question-text { font-size:18px; margin-bottom:16px; font-weight:500; }
.options { display:flex; flex-direction:column; gap:10px; }
.option { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f7fafc; border-radius:12px; cursor:pointer; transition:background 0.2s; }
.option:active { background:#edf2f7; }
.option input[type="radio"] { width:18px; height:18px; cursor:pointer; }
.option input[type="radio"]:checked + span { font-weight:600; color:#4299e1; }
.btn-submit { width:100%; padding:14px; background:#48bb78; color:white; border:none; border-radius:12px; font-weight:600; font-size:16px; margin-top:20px; cursor:pointer; }
.btn-submit:active { background:#38a169; }
.btn-cancel { background:#fc8181; color:white; padding:12px; border:none; border-radius:12px; font-weight:600; font-size:16px; cursor:pointer; width:100%; margin-top:10px; }
.btn-cancel:hover { background:#f56565; }
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal.show { display:flex; }
.modal-content { max-width:400px; padding:30px; background:white; border-radius:20px; max-height:80vh; overflow-y:auto; width:90%; }
.result-score { text-align:center; margin-bottom:20px; }
.result-score h3 { font-size:48px; color:#4299e1; margin:5px 0; }
.result-bar { width:100%; height:8px; background:#edf2f7; border-radius:4px; margin-top:10px; overflow:hidden; }
.result-progress { height:100%; background:#48bb78; transition:width 0.5s; }
.result-details { margin:20px 0; }
.result-item { display:flex; justify-content:space-between; padding:8px 12px; margin-bottom:4px; border-radius:8px; }
.result-item.correct { background:#f0fff4; color:#22543d; }
.result-item.wrong { background:#fff5f5; color:#742a2a; }
.coin-earned { text-align:center; margin:10px 0; font-size:18px; color:#ed8936; font-weight:bold; }
.modal .btn-play { display:block; text-align:center; width:100%; padding:10px; margin-top:8px; border:none; border-radius:12px; font-weight:600; cursor:pointer; }
.profile-card { text-align:center; padding:20px; background:#f7fafc; border-radius:16px; margin-bottom:20px; }
.profile-avatar { font-size:64px; margin-bottom:8px; }
.profile-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.stat-card { background:#f7fafc; padding:12px; border-radius:12px; text-align:center; }
.stat-value { display:block; font-size:24px; font-weight:700; color:#2d3748; }
.stat-label { font-size:12px; color:#718096; }
.profile-section { margin-top:20px; }
.profile-section h3 { margin-bottom:12px; }
.quiz-card.mini { display:flex; align-items:center; gap:10px; padding:12px; background:#f7fafc; border-radius:12px; margin-bottom:8px; flex-wrap:wrap; }
.played-list { display:flex; flex-direction:column; gap:6px; }
.played-item { display:flex; justify-content:space-between; padding:10px 14px; background:#f7fafc; border-radius:8px; font-size:14px; align-items:center; flex-wrap:wrap; gap:4px; }
.played-title { font-weight:500; flex:2; min-width:100px; color:#2d3748; text-decoration:none; }
.played-title:hover { color:#4299e1; text-decoration:underline; }
.played-score { color:#2d3748; }
.played-percent { font-weight:bold; color:#4299e1; }
.played-date { color:#718096; font-size:12px; }
.achievements-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.achievement-card { display:flex; gap:16px; padding:16px; background:#f7fafc; border-radius:16px; align-items:center; }
.achievement-card.locked { opacity:0.5; }
.achievement-icon { font-size:40px; }
.achievement-info h4 { font-size:16px; margin-bottom:4px; }
.achievement-info p { font-size:14px; color:#718096; }
.tier { font-size:12px; padding:2px 10px; border-radius:12px; display:inline-block; margin-top:4px; }
.tier.bronze { background:#cd7f32; color:white; }
.tier.silver { background:#c0c0c0; color:white; }
.tier.gold { background:#ffd700; color:#744210; }
.tier.platinum { background:#e5e4e2; color:#2d3748; }
.tier.diamond { background:#b9f2ff; color:#2c5282; }
.unlocked-badge { color:#48bb78; font-weight:600; }
.locked-badge { color:#fc8181; }
.avatar-shop h3 { margin-bottom:10px; }
.avatar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.avatar-item { background:#f7fafc; padding:12px; border-radius:12px; text-align:center; border:2px solid #e2e8f0; }
.avatar-item.purchased { border-color:#48bb78; }
.avatar-item.active { border-color:#4299e1; background:#ebf8ff; }
.avatar-info { margin-top:6px; }
.price { font-weight:bold; color:#ed8936; }
.active-badge { background:#4299e1; color:white; padding:4px 12px; border-radius:20px; font-size:12px; }
.buy-btn, .select-btn { font-size:13px; padding:4px 12px; }
.section-nav { display:flex; gap:8px; background:#f7fafc; padding:10px 12px; border-radius:12px; margin:10px 0 16px 0; justify-content:center; flex-wrap:wrap; border:1px solid #e2e8f0; }
.section-nav-btn { background:transparent; border:none; padding:8px 18px; border-radius:20px; font-size:14px; font-weight:600; color:#718096; cursor:pointer; transition:background 0.2s, color 0.2s; }
.section-nav-btn:hover { background:#edf2f7; }
.section-nav-btn.active { background:#4299e1; color:white; }
.section-content { display:none; padding-bottom:20px; }
.section-content.active { display:block; }
.community-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.category-tabs { display:flex; gap:8px; margin:12px 0; justify-content:center; flex-wrap:wrap; }
.cat-btn { background:#edf2f7; border:none; padding:6px 16px; border-radius:20px; font-weight:600; font-size:14px; color:#4a5568; cursor:pointer; transition:background 0.2s, color 0.2s; }
.cat-btn.active { background:#4299e1; color:white; }
.cat-btn:hover { background:#e2e8f0; }
.category-content { display:none; }
.category-content.active { display:block; }
.leader-table { margin-top:4px; }
.leader-table h3 { margin-bottom:8px; font-size:16px; color:#2d3748; }
.leader-header { display:flex; gap:12px; padding:6px 14px; background:#edf2f7; border-radius:8px; font-weight:700; color:#2d3748; margin-bottom:4px; font-size:13px; }
.leader-header .rank { width:30px; }
.leader-header .name { flex:1; }
.leader-header .score { width:80px; text-align:right; }
.leader-item { display:flex; gap:12px; padding:6px 14px; align-items:center; border-bottom:1px solid #edf2f7; }
.leader-item .rank { width:30px; font-weight:600; color:#4a5568; }
.leader-item .name { flex:1; color:#2d3748; text-decoration:none; }
.leader-item .name:hover { color:#4299e1; text-decoration:underline; }
.leader-item .score { width:80px; text-align:right; color:#2d3748; }
.faq-block { margin-top:10px; }
.faq-item { background:#f7fafc; padding:12px 16px; border-radius:12px; margin-bottom:12px; }
.faq-item h4 { color:#2d3748; margin-bottom:4px; }
.faq-item p { color:#4a5568; font-size:14px; line-height:1.5; }
.no-results { text-align:center; padding:40px 20px; color:#718096; font-size:18px; }
.students-list ul { padding-left:20px; }
.students-list li { margin-bottom:4px; }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:white; display:flex; justify-content:space-around; padding:10px 0; box-shadow:0 -2px 10px rgba(0,0,0,0.1); border-top:1px solid #e2e8f0; max-width:480px; margin:0 auto; z-index:1000; }
.nav-item { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#718096; font-size:10px; transition:color 0.2s; gap:2px; }
.nav-item .icon { font-size:20px; }
.nav-item.active { color:#4299e1; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:12px; font-size:14px; font-family:inherit; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.question-template { background:#f7fafc; padding:16px; border-radius:12px; margin-bottom:12px; }
.question-template input, .question-template select { width:100%; margin-bottom:8px; padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; }
.options-group { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.btn-save { background:#48bb78; color:white; border:none; padding:12px 24px; border-radius:12px; font-weight:600; font-size:16px; width:100%; cursor:pointer; }
.btn-save:active { background:#38a169; }
.btn-back { display:block; margin-top:16px; text-align:center; color:#718096; text-decoration:none; }

@media (max-width:480px) {
    .form-row { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .community-stats { grid-template-columns:1fr 1fr 1fr; }
    .played-item { flex-wrap:wrap; gap:4px; }
    .played-title { flex:1 1 100%; }
    .played-score, .played-percent, .played-date { font-size:12px; }
    .achievements-grid { grid-template-columns:1fr; }
}


body {
    background: var(--bg);
    color: var(--text);
}
.app {
    background: var(--bg);
}
.quiz-card, .profile-card, .stat-card, .played-item, .faq-item, .leader-item, .achievement-card, .comment-item, .friend-item {
    background: var(--card);
    border-color: var(--border);
}
.btn-play {
    background: var(--accent);
    color: white;
}
.section-nav-btn.active {
    background: var(--accent);
    color: white;
}
.leader-header, .category-tabs .cat-btn.active {
    background: var(--accent);
    color: white;
}
.progress-bar-level {
    background: var(--card);
    border: 1px solid var(--border);
}
/* ===== ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ ТЕМ ===== */
body { background: var(--bg) !important; color: var(--text) !important; }
.app, .container { background: var(--bg) !important; color: var(--text) !important; }
.preview-card, .profile-card, .stat-card, .played-item, .quiz-card.mini,
.comment-item { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-play { background: var(--accent) !important; color: white !important; }
.bottom-nav { background: var(--bg) !important; border-top-color: var(--border) !important; }
.nav-item.active { color: var(--accent) !important; }
h1, h2, h3, p, li, .label, .value { color: var(--text) !important; }
.played-title { color: var(--text) !important; }
.played-title:hover { color: var(--accent) !important; }
.profile-badges .badge { background: var(--card) !important; border: 1px solid var(--border); }
.profile-badges .coins { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.profile-badges .verified { background: #48bb78 !important; color: white !important; }

/* ===== ЭФФЕКТЫ ДОСТИЖЕНИЙ ПО РАНГУ ===== */
.achievement-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 16px;
    transition: transform 0.2s, box-shadow 0.3s;
}
.achievement-card.unlocked.bronze {
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
    background: linear-gradient(135deg, var(--card), rgba(205,127,50,0.08));
}
.achievement-card.unlocked.silver {
    border-color: #c0c0c0;
    box-shadow: 0 0 14px rgba(192,192,192,0.5);
    background: linear-gradient(135deg, var(--card), rgba(192,192,192,0.08));
}
.achievement-card.unlocked.gold {
    border-color: #ffd700;
    box-shadow: 0 0 18px rgba(255,215,0,0.55);
    background: linear-gradient(135deg, var(--card), rgba(255,215,0,0.12));
    animation: pulseGold 3s ease-in-out infinite;
}
.achievement-card.unlocked.platinum {
    border-color: #e5e4e2;
    box-shadow: 0 0 20px rgba(229,228,226,0.7), inset 0 0 20px rgba(229,228,226,0.15);
    background: linear-gradient(135deg, var(--card), rgba(229,228,226,0.15));
}
.achievement-card.unlocked.diamond {
    border-color: #b9f2ff;
    box-shadow: 0 0 24px rgba(185,242,255,0.8), 0 0 40px rgba(185,242,255,0.4);
    background: linear-gradient(135deg, var(--card), rgba(185,242,255,0.2));
    animation: pulseDiamond 4s ease-in-out infinite;
}
.achievement-card.unlocked:hover {
    transform: scale(1.03);
}
@keyframes pulseGold {
    0%,100% { box-shadow: 0 0 18px rgba(255,215,0,0.55); }
    50% { box-shadow: 0 0 28px rgba(255,215,0,0.85); }
}
@keyframes pulseDiamond {
    0%,100% { box-shadow: 0 0 24px rgba(185,242,255,0.8); }
    50% { box-shadow: 0 0 40px rgba(185,242,255,1); }
}
/* Закреплённые достижения рядом с аватаром */
.pinned-achievement {
    position: absolute;
    width: 56px;
    height: 56px;
    background: var(--card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 3px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}
.pinned-achievement:hover { transform: scale(1.1); }
.pinned-achievement.left { left: 20px; top: 30px; }
.pinned-achievement.right { right: 20px; top: 30px; }

.footer {
    padding: 20px 20px 50px 20px;
    background: var(--card);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--text);
    margin-top: 30px;
}


/* ============ PWA / мобильная адаптация ============ */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

.btn-play, .btn-primary, .btn-secondary, .btn-delete-top,
.section-nav-btn, .bottom-nav .nav-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav .nav-item {
    flex-direction: column;
    gap: 2px;
}

@media (hover: none) {
    .btn-play:active, .btn-primary:active,
    .btn-secondary:active, .option:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }
}

@media (max-width: 480px) {
    .showcase-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .avatar-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .achievements-grid { grid-template-columns: 1fr !important; }
    .level-card { min-width: 88px !important; padding: 8px !important; }
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
}

/* =====================================================
   ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ ТЕМЫ КО ВСЕМ ЭЛЕМЕНТАМ
   Перебивает все хардкодные цвета в style.css
   ===================================================== */

/* --- Общие --- */
body, html { background: var(--bg) !important; color: var(--text) !important; }
.app, .container, .auth-container { background: var(--bg) !important; color: var(--text) !important; }

/* --- Заголовки и тексты --- */
h1, h2, h3, h4, h5, h6,
p, span, div, label, strong, small, li, a,
.form-group label, .stat-value, .stat-label {
    color: var(--text);
}
a { color: var(--accent); }

/* --- Карточки и блоки --- */
.quiz-card, .profile-card, .stat-card, .played-item, .faq-item,
.leader-item, .achievement-card, .comment-item, .friend-item,
.preview-card, .avatar-item, .section-nav, .section-content,
.showcase-form, .showcase-item, .quiz-card.mini, .collection-card,
.rooms-actions, .join-card, .user-strip {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* --- Навигация сверху (section-nav) --- */
.section-nav {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
}
.section-nav-btn {
    background: transparent !important;
    color: var(--text) !important;
    border: none;
}
.section-nav-btn:hover {
    background: var(--border) !important;
}
.section-nav-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
}

/* --- Верхнее меню подразделов --- */
.section-switcher {
    background: var(--card) !important;
    border-color: var(--border) !important;
}
.section-switcher a {
    color: var(--text) !important;
}
.section-switcher a.active {
    background: var(--accent) !important;
    color: #fff !important;
}

/* --- Нижняя навигация --- */
.bottom-nav {
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
}
.nav-item {
    color: var(--text_light, var(--text)) !important;
}
.nav-item.active {
    color: var(--accent) !important;
}

/* --- Кнопки --- */
.btn-play, .btn-primary, .btn-submit, .btn-save {
    background: var(--accent) !important;
    color: #fff !important;
}
.btn-secondary, .btn-back, .btn-cancel, .btn-prev {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* --- Инпуты и формы --- */
input, textarea, select,
.form-group input, .form-group textarea, .form-group select,
.filter-select, .search-input, .class-select, .code-input {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--text_light, #718096);
    opacity: 0.7;
}

/* --- Бейджи --- */
.badge {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.badge.coins { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.badge.verified { background: #48bb78 !important; color: #fff !important; border: none !important; }

/* --- Таблицы топов --- */
.leader-header {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
}
.leader-table h3 { color: var(--text) !important; }

/* --- Прогресс-бар уровня --- */
.progress-bar-level {
    background: var(--card) !important;
    border: 1px solid var(--border);
}
.progress-bar-level .progress {
    background: var(--accent) !important;
}

/* --- Уровни --- */
.level-card {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.level-card.reached {
    border-color: var(--accent) !important;
}

/* --- Витрина --- */
.showcase-item {
    background: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* --- Табы типов витрины --- */
.showcase-type-btn {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.showcase-type-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* --- Темы --- */
.theme-card {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.theme-card.current {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.25) !important;
}

/* --- Аватары --- */
.avatar-item {
    background: var(--card) !important;
    border-color: var(--border) !important;
}
.avatar-item.active { background: var(--bg) !important; }

/* --- Достижения: обычные карточки по редкости остаются цветными,
       но фон всегда карточка темы --- */
.achievement-card { background: var(--card) !important; }
.achievement-card .ach-icon { background: var(--bg) !important; }

/* --- Модалки --- */
.modal-content, .modal-card, .filters-sheet {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* --- FAQ --- */
.faq-item { background: var(--card) !important; }
.faq-item h4 { color: var(--text) !important; }
.faq-item p { color: var(--text_light, var(--text)) !important; }

/* --- Друзья --- */
.friend-item { background: var(--card) !important; }

/* --- Мобильная нижняя навигация и прочее --- */
.nav-extra-btn {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.nav-extra-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
}

/* --- Комментарии --- */
.comment-item { background: var(--card) !important; border-color: var(--border) !important; }

/* --- Жалобы / flash --- */
.flash-msg {
    background: #f0fff4 !important;
    color: #22543d !important;
}

/* =====================================================
   ФИКСЫ ТЁМНОЙ ТЕМЫ — добавить в самый конец
   ===================================================== */

/* --- Плашки-мета: Математика, 6 класс, Лёгкая и т.д. --- */
.quiz-meta span,
.quiz-tags .tag,
.info-chip,
.chip,
.badge:not(.coins):not(.verified) {
    background: var(--border) !important;
    color: var(--text) !important;
    border: none !important;
}

/* --- Верифицированная плашка --- */
.verified-badge,
.not-verified-badge,
[class*="verified"] {
    background: #38a169 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
}
.not-verified-badge {
    background: var(--border) !important;
    color: var(--text) !important;
}

/* --- Кнопки: вернуть скругления --- */
.btn-play,
.btn-primary,
.btn-secondary,
.btn-cancel,
.btn-prev,
.btn-next,
.btn-submit,
.btn-save,
.btn-back,
.author-actions a,
.btn-row .btn-play,
.btn-row .btn-cancel {
    border-radius: 12px !important;
}

/* Отдельно для кнопки «Начать»/«Отмена» в превью — они flex --- */
.btn-row { gap: 10px !important; }
.btn-row .btn-play,
.btn-row .btn-cancel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 0 !important;
}

/* --- Контейнеры кнопок не должны быть квадратными --- */
.preview-card,
.btn-row,
.author-actions,
.comment-form,
.rooms-actions,
.join-card,
.filters-sheet,
.modal-card,
.room-card {
    border-radius: 16px !important;
}

/* --- Кнопки комнат --- */
.rooms-actions .btn-play,
.rooms-actions > a {
    border-radius: 14px !important;
    padding: 14px 0 !important;
}

/* --- Поля ввода / селекты --- */
input, textarea, select,
.code-input,
.search-input,
.class-select,
.filter-select,
.form-group input,
.form-group textarea,
.form-group select {
    border-radius: 12px !important;
}

/* --- Опции викторины --- */
.option,
.opt-btn,
.text-answer {
    border-radius: 12px !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 2px solid var(--border) !important;
}
.option.selected,
.opt-btn:hover {
    border-color: var(--accent) !important;
}
.opt-btn.correct { background: #1f4a2b !important; border-color: #48bb78 !important; color: #9ae6b4 !important; }
.opt-btn.wrong   { background: #4a1f1f !important; border-color: #fc8181 !important; color: #feb2b2 !important; }
.option.correct  { background: #1f4a2b !important; border-color: #48bb78 !important; }
.option.wrong    { background: #4a1f1f !important; border-color: #fc8181 !important; }

/* --- Флеш-сообщения --- */
.flash-msg {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.flash-msg.ok {
    border-color: #48bb78 !important;
    color: #9ae6b4 !important;
}

/* --- Активный бейдж аватара --- */
.avatar-item.active .badge.active-badge,
.badge.active-badge {
    background: var(--accent) !important;
    color: #fff !important;
}

/* --- Кнопки пагинации / сортировки в топах --- */
.pagination a,
.pagination span {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}

/* --- Модалка достижения --- */
.modal-card {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* --- Финальный аккорд: любой блок с фоном #edf2f7 → переменная --- */
[style*="edf2f7"],
[style*="f7fafc"] {
    background: var(--card) !important;
}

/* =====================================================
   ФИКС: контейнеры-обёртки НЕ должны иметь фона
   ===================================================== */
.section-content,
.rooms-actions,
.community-stats,
.category-grid,
.achievements-grid,
.theme-grid,
.avatar-grid,
.showcase-grid,
.stats-grid,
.leader-table,
.played-list,
.friends-list,
.filters,
.search-row,
.filters-row,
.profile-section,
.section-switcher {
    background: transparent !important;
    border: none !important;
}

/* =====================================================
   ФИКС: нижняя навигация — крупнее, ярче, читаемее
   ===================================================== */
.bottom-nav {
    padding: 8px 0 !important;
}
.bottom-nav .nav-item {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
    color: var(--text) !important;
    opacity: 0.75;
    padding: 4px 4px;
    gap: 2px;
    transition: opacity 0.15s, transform 0.15s;
    min-width: 0;
    flex: 1;
}
.bottom-nav .nav-item .icon {
    font-size: 20px !important;
}
.bottom-nav .nav-item .icon {
    font-size: 22px !important;
    line-height: 1;
    filter: saturate(1.15);
}
.bottom-nav .nav-item:hover {
    opacity: 1;
}
.bottom-nav .nav-item.active {
    color: var(--accent) !important;
    opacity: 1;
    font-weight: 700 !important;
}
.bottom-nav .nav-item.active .icon {
    transform: scale(1.12);
    filter: saturate(1.3) drop-shadow(0 0 6px var(--accent));
}

/* ===== КОИНЫ: убираем жёлтую заливку ===== */
.coins,
.badge.coins,
.profile-badges .coins {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    font-weight: 700 !important;
}

.coins, .badge.coins { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; }


/* Единая верхняя навигация */
.vx-tab {
    flex: 1; text-align: center; padding: 10px 8px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; text-decoration: none;
    color: var(--text) !important;
    font-weight: 600; font-size: 13px;
    transition: all 0.15s;
}
.vx-tab:hover { border-color: var(--accent); }
.vx-tab.active {
    background: var(--accent); color: #fff !important;
    border-color: var(--accent);
}

/* ============ ЕДИНЫЕ ТАБЫ (жёсткие размеры) ============ */
.vx-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: stretch !important;
}
.vx-tabs .vx-tab,
.vx-tab {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;

    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}
.vx-tabs .vx-tab:hover,
.vx-tab:hover { border-color: var(--accent) !important; }
.vx-tabs .vx-tab.active,
.vx-tab.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

    /* ========== МОДАЛКА: ФИЛЬТРЫ ========== */
    .modal-filters {
        display: flex; gap: 8px; margin-bottom: 10px;
    }
    .modal-search {
        flex: 1; padding: 10px 14px;
        border: 1px solid var(--border);
        background: var(--bg); color: var(--text);
        border-radius: 10px; font-size: 13px;
        font-family: inherit;
        box-sizing: border-box;
        min-width: 0;
    }
    .modal-search:focus { outline: none; border-color: var(--accent); }
    .modal-filter-select {
        padding: 10px 14px; border-radius: 10px;
        background: var(--bg); border: 1px solid var(--border);
        color: var(--text); font-size: 13px;
        font-family: inherit; cursor: pointer;
        max-width: 150px;
        box-sizing: border-box;
    }
    .modal-filter-select:focus { outline: none; border-color: var(--accent); }

    /* ========== ЗОНА ЗАГРУЗКИ ========== */
    .upload-zone { padding: 6px 0 4px; }
    .upload-dropzone {
        border: 2px dashed var(--border);
        border-radius: 14px;
        padding: 30px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
        color: var(--text);
    }
    .upload-dropzone:hover,
    .upload-dropzone.dragover {
        border-color: var(--accent);
        background: rgba(66,153,225,0.06);
    }
    .upload-dropzone p { margin: 6px 0 0 0; }
    .upload-preview {
        position: relative;
        display: inline-block;
        max-width: 100%;
        margin-top: 10px;
    }
    .upload-preview img {
        max-width: 100%;
        max-height: 300px;
        border-radius: 12px;
        display: block;
    }
    .upload-preview .rm-upload {
        position: absolute;
        top: 8px; right: 8px;
        background: rgba(0,0,0,0.65); color: #fff;
        border: none; border-radius: 50%;
        width: 28px; height: 28px;
        cursor: pointer; font-size: 14px;
        font-family: inherit;
        display: flex; align-items: center; justify-content: center;
        line-height: 1;
    }
    .upload-progress {
        text-align: center; padding: 10px;
        font-size: 13px; color: var(--accent);
        font-weight: 600;
    }

    /* ========== КАРТИНКА В ПОСТЕ ========== */
    .attach-image {
        display: block;
        margin-bottom: 10px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        cursor: zoom-in;
        background: var(--bg);
    }
    .attach-image img {
        display: block;
        width: 100%;
        max-height: 500px;
        object-fit: cover;
    }

    /* Превью картинки при создании поста */
    .attach-preview.has-image {
        padding: 0;
        background: transparent;
        border: none;
        position: relative;
        display: inline-block;
        max-width: 100%;
    }
    .attach-preview.has-image img {
        max-width: 200px;
        max-height: 150px;
        border-radius: 10px;
        display: block;
    }
    .attach-preview.has-image .rm {
        position: absolute;
        top: 6px; right: 6px;
        background: rgba(0,0,0,0.65); color: #fff;
        border-radius: 50%;
        width: 26px; height: 26px;
        padding: 0;
        display: flex; align-items: center; justify-content: center;
    }

    /* Лайтбокс */
    .lightbox {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.9);
        z-index: 10000;
        display: none;
        align-items: center; justify-content: center;
        padding: 20px;
        cursor: zoom-out;
    }
    .lightbox.show { display: flex; }
    .lightbox img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }
    .lightbox .close-lb {
        position: absolute; top: 20px; right: 20px;
        background: transparent; color: #fff;
        border: none; font-size: 32px;
        cursor: pointer; font-family: inherit;
        line-height: 1;
    }

    /* ===== СПИСОК ПРИКРЕПЛЕНИЙ В ФОРМЕ ===== */
    .attach-preview-list {
        background: var(--bg); border: 1px solid var(--border);
        border-radius: 12px; padding: 10px; margin-top: 10px;
    }
    .attach-preview-head {
        font-size: 12px; opacity: 0.7; font-weight: 700;
        margin-bottom: 8px; display: flex;
        justify-content: space-between; align-items: center;
    }
    .attach-preview-head .full { color: #fc8181; }
    .attach-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .attach-preview-item {
        position: relative;
        background: var(--card); border: 1px solid var(--border);
        border-radius: 10px; padding: 8px; text-align: center;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        min-height: 84px; justify-content: center;
        overflow: hidden;
    }
    .attach-preview-item .ic { font-size: 26px; }
    .attach-preview-item .t {
        font-size: 10px; font-weight: 700; line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        width: 100%;
    }
    .attach-preview-item img {
        max-width: 100%; max-height: 60px;
        border-radius: 6px; object-fit: cover;
    }
    .attach-preview-item .rm {
        position: absolute; top: 3px; right: 3px;
        background: rgba(0,0,0,0.65); color: #fff;
        border: none; border-radius: 50%;
        width: 20px; height: 20px; padding: 0;
        cursor: pointer; font-size: 12px;
        display: flex; align-items: center; justify-content: center;
        font-family: inherit; line-height: 1;
    }
    .attach-preview-item .rm:hover { background: #fc8181; }
    .modal-item-added {
        opacity: 0.5;
        cursor: default !important;
    }
    .modal-item-added::after {
        content: '✓ добавлено';
        margin-left: auto;
        font-size: 10px;
        color: #48bb78;
        font-weight: 800;
    }


/* ===== ФИКС: ровный bottom-nav ===== */
.bottom-nav {
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 6px 4px !important;
}

.bottom-nav .nav-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    min-width: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
    text-decoration: none !important;
    line-height: 1.1 !important;
}

/* ИКОНКА — ФИКСИРОВАННЫЙ РАЗМЕР ДЛЯ ВСЕХ */
.bottom-nav .nav-item .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    /* Убираем любые трансформации, которые ломают выравнивание */
    transform: none !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Метка под иконкой */
.bottom-nav .nav-item > span:last-child {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Активный — только цвет и лёгкое свечение, БЕЗ scale */
.bottom-nav .nav-item.active {
    color: var(--accent) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.bottom-nav .nav-item.active .icon {
    transform: none !important;
    filter: drop-shadow(0 0 6px var(--accent)) !important;
}

.bottom-nav .nav-item:hover {
    opacity: 1;
}

/* Оптимизация рендера длинных списков карточек.
   Браузер пропускает layout/paint для элементов вне экрана. */
.quiz-card,
.item-card,
.inv-card,
.collection-card,
.map-card,
.game-card,
.listing,
.duel-card,
.trade-card,
.case-card,
.leader-item,
.post {
    content-visibility: auto;
    contain-intrinsic-size: auto 160px;
}

/* ==== Двойные кнопки в карточке викторины ==== */
.quiz-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.quiz-card-actions .btn-play {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.quiz-card-actions .btn-play-secondary {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}
.quiz-card-actions .btn-play-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== Кнопка "?" — контекстная помощь ===== */
.page-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    margin-left: 8px;
    vertical-align: middle;
    transition: all 0.15s;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}
.page-help-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.1);
    background: rgba(66,153,225,0.08);
}

/* На страницах с фиолетовым header (арена) кнопка белая */
.arena-header .page-help-btn {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.arena-header .page-help-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: #fff;
    color: #fff;
}

/* ===== Сворачивание блоков ===== */
.collapsible {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.collapsible.collapsed {
    max-height: 300px;
}
.collapsible.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}
.collapsible-toggle {
    display: block;
    margin: 14px auto 0;
    padding: 10px 24px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    position: relative;
    z-index: 2;
}
.collapsible-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.collapsible-toggle:active {
    transform: scale(0.97);
}
.collapsible.collapsed::after {
    /* Плавное затухание внизу */
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    height: 80px;
}
/* ===== ЭТАП 11: широкая версия для ПК ===== */
@media (min-width: 768px) {
    .app {
        max-width: 1100px !important;
        padding: 30px 40px 100px !important;
        min-height: auto !important;
    }
    .bottom-nav {
        max-width: 1100px !important;
    }
    .footer {
        margin-top: 40px !important;
    }

    /* На ПК убираем искусственные узкие ограничения */
    .app,
    .container,
    .auth-container {
        max-width: 1100px !important;
    }

    /* Гриды карточек на ПК */
    .quiz-grid { grid-template-columns: repeat(2, 1fr); }
    .played-list, .my-quizzes-list { max-width: 100%; }
}

.avatar-orbit {
    position: relative;
}

/* Орбита с достижениями — выше эффекта-кольца */
.avatar-orbit .orbit-ring {
    z-index: 4;
}
.avatar-orbit .orbit-item {
    z-index: 5;
}

.avatar-orbit.effect-comet::before,
.avatar-orbit.effect-stars::before,
.avatar-orbit.effect-fire::before,
.avatar-orbit.effect-snow::before,
.avatar-orbit.effect-neon::before,
.avatar-orbit.effect-rainbow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 138px;
    height: 138px;
    margin: -69px 0 0 -69px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
}

/* ☄️ Комета — быстрое светящееся кольцо */
.effect-comet::before {
    border: 2px solid transparent;
    border-top-color: #63b3ed;
    border-right-color: rgba(99,179,237,0.4);
    box-shadow: 0 0 12px #63b3ed, inset 0 0 8px rgba(99,179,237,0.5);
    animation: vxOrbitSpin 1.2s linear infinite;
}

/* ⭐ Звёзды */
.effect-stars::before {
    border: 2px dotted #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.6);
    animation: vxOrbitSpin 6s linear infinite;
}

/* 🔥 Огонь */
.effect-fire::before {
    border: 2px solid #ed8936;
    box-shadow: 0 0 18px #ed8936, inset 0 0 10px #ed8936;
    animation: vxFirePulse 0.9s ease-in-out infinite, vxOrbitSpin 5s linear infinite;
}

/* ❄️ Снег */
.effect-snow::before {
    border: 2px dashed #a7d8ff;
    box-shadow: 0 0 12px rgba(167,216,255,0.6);
    animation: vxSnowPulse 2.4s ease-in-out infinite, vxOrbitSpin 10s linear infinite;
}

/* 💠 Неон */
.effect-neon::before {
    border: 2px solid #00ffc8;
    box-shadow: 0 0 20px #00ffc8, 0 0 40px #00ffc8, inset 0 0 20px #00ffc8;
    animation: vxNeonPulse 1.4s ease-in-out infinite;
}

/* 🌈 Радуга */
.effect-rainbow::before {
    border: none;
    background: conic-gradient(#fc8181, #ed8936, #f6e05e, #48bb78, #4299e1, #9f7aea, #fc8181);
    -webkit-mask: radial-gradient(circle, transparent 65px, #000 66px, #000 69px, transparent 70px);
    mask: radial-gradient(circle, transparent 65px, #000 66px, #000 69px, transparent 70px);
    animation: vxOrbitSpin 4s linear infinite;
}

@keyframes vxOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes vxFirePulse {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); transform: scale(1); }
    50%      { filter: hue-rotate(15deg) brightness(1.2); transform: scale(1.05); }
}
@keyframes vxSnowPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
@keyframes vxNeonPulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* На узких экранах — эффект чуть меньше */
@media (max-width: 480px) {
    .avatar-orbit.effect-comet::before,
    .avatar-orbit.effect-stars::before,
    .avatar-orbit.effect-fire::before,
    .avatar-orbit.effect-snow::before,
    .avatar-orbit.effect-neon::before,
    .avatar-orbit.effect-rainbow::before {
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
    }
    .effect-rainbow::before {
        -webkit-mask: radial-gradient(circle, transparent 55px, #000 56px, #000 59px, transparent 60px);
        mask: radial-gradient(circle, transparent 55px, #000 56px, #000 59px, transparent 60px);
    }
}