{% extends "./layout.html" %}
{% block content %}
<style>
  .home-wrapper {
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 10px;
    position: relative;
    overflow-y: auto;
  }

  .home-wrapper::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    animation: rotateGlow 20s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  [data-theme="light"] .home-wrapper::before {
    display: none;
  }

  @keyframes rotateGlow {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .main-header {
    text-align: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 2px solid var(--border-accent);
    border-radius: 8px;
    background: var(--glass-light);
    position: relative;
    z-index: 1;
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .header-title-link {
    flex: 1;
    text-align: center;
    text-decoration: none;
  }

  .theme-toggle-btn {
    position: absolute;
    right: 0;
    background: var(--glass-medium);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--orange-primary);
    font-size: 1rem;
  }

  .theme-toggle-btn:hover {
    background: var(--glass-strong);
    border-color: var(--orange-primary);
    transform: scale(1.1);
  }

  /* Typing animation for header */
  .header-title {
    min-width: 280px;
    min-height: 1.8em;
    display: inline-block;
  }

  .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--orange-primary);
    margin-left: 2px;
    animation: blink 0.7s infinite;
    vertical-align: text-bottom;
  }

  @keyframes blink {

    0%,
    50% {
      opacity: 1;
    }

    51%,
    100% {
      opacity: 0;
    }
  }

  /* Additional header-title-link properties */

  .header-title-link:hover {
    transform: scale(1.05);
  }

  .header-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--yellow-glow);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    margin-bottom: 3px;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
  }

  [data-theme="light"] .header-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .header-title:hover {
    color: var(--text-accent);
    text-shadow: 0 0 18px rgba(255, 165, 0, 1);
  }

  .user-email {
    font-size: 0.8rem;
    color: var(--text-accent);
    text-shadow: 0 0 6px rgba(255, 165, 0, 0.5);
    font-weight: 600;
  }

  [data-theme="light"] .user-email {
    text-shadow: none;
  }

  .main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .left-column,
  .right-column {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-card);
  }

  [data-theme="light"] .left-column,
  [data-theme="light"] .right-column {
    backdrop-filter: none;
  }

  .column-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 12px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
  }

  [data-theme="light"] .column-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .world-selector {
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    position: relative;
  }

  .world-selector select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 140, 0, 0.3);
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    font-size: 0.8rem;
    cursor: pointer;
  }

  .world-selector select:focus {
    outline: none;
    border-color: #FFD700;
  }

  .checkbox-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
  }

  .checkbox-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #FF8C00;
  }

  .checkbox-container label {
    color: #FFA500;
    cursor: pointer;
    font-size: 0.8rem;
  }

  .launch-btn-container {
    text-align: center;
    margin-bottom: 15px;
  }

  .launch-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 3px solid #FFD700;
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(255, 140, 0, 0.6);
  }

  .launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 28px rgba(255, 140, 0, 0.8);
  }

  .site-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.15);
    border: 2px solid rgba(255, 140, 0, 0.5);
    color: #FFD700;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
  }

  .site-btn:hover {
    background: rgba(255, 107, 0, 0.25);
    border-color: #FFD700;
    text-decoration: none;
  }

  [data-theme="light"] .site-btn {
    color: #FF6B00;
    background: rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.4);
  }

  [data-theme="light"] .site-btn:hover {
    color: #FF6B00;
    background: rgba(255, 107, 0, 0.2);
  }

  .bottom-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 140, 0, 0.2);
  }

  .nav-btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 2px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 107, 0, 0.1);
    color: #FFA500;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .nav-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    border-color: #FFD700;
    color: #FFD700;
    text-decoration: none;
    transform: translateY(-1px);
  }

  /* Beta badge positioning fix */
  .nav-btn {
    position: relative;
    overflow: visible;
  }

  .nav-btn .beta-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 7px;
    padding: 1px 4px;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
  }

  /* AI Coach Highlight Button */
  .ai-coach-highlight {
    margin-bottom: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border: 2px solid rgba(139, 92, 246, 0.5);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
  }

  .ai-coach-highlight:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25));
    border-color: rgba(167, 139, 250, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
    text-decoration: none;
  }

  .ai-coach-highlight .beta-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .ai-coach-icon {
    font-size: 1.2rem;
  }

  .news-section {
    padding: 10px;
    background: var(--glass-medium);
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
  }

  /* Important info card styles */
  .important-info {
    background: rgba(255, 193, 7, 0.2);
    border: 2px solid rgba(255, 193, 7, 0.5);
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 12px;
    text-align: center;
  }

  .important-info-text {
    color: #ffc107;
    font-size: 0.9rem;
  }

  [data-theme="light"] .important-info-text {
    color: #333333;
  }

  .news-section::-webkit-scrollbar {
    width: 6px;
  }

  .news-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    border-radius: 3px;
  }

  .news-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .news-item {
    color: var(--text-accent);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-primary);
  }

  [data-theme="light"] .news-item {
    color: var(--text-primary);
  }

  .news-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .news-item i {
    color: var(--orange-primary);
    margin-right: 6px;
  }

  .news-item.loading {
    text-align: center;
    color: var(--text-accent);
    font-style: italic;
  }

  [data-theme="light"] .news-item.loading {
    color: var(--text-muted);
  }

  .news-item.loading i {
    margin-right: 8px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .main-content {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .header-title {
      font-size: 2rem;
    }

    .user-email {
      font-size: 1rem;
    }
  }

  .logo-header {
    text-align: center;
    margin-bottom: 12px;
    animation: logoAppear 0.6s ease-out;
  }

  @keyframes logoAppear {
    from {
      opacity: 0;
      transform: translateY(-10px) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .logo-img {
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.7));
    transition: all 0.4s ease;
  }

  .logo-img:hover {
    filter: drop-shadow(0 0 35px rgba(255, 215, 0, 0.9));
    transform: scale(1.08);
  }

  .user-name {
    font-size: 0.8rem;
    color: #FFA500;
    margin-top: 6px;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
  }

  .restart-alert {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    color: #FFC107;
    font-size: 0.75rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .selection-card {
    background: rgba(255, 107, 0, 0.08);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.1);
  }

  .card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFD700;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .form-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid rgba(255, 140, 0, 0.3);
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .form-select:focus {
    outline: none;
    border-color: #FFD700;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
  }

  .form-select option {
    background: #0a0a0a;
    color: #FFA500;
    padding: 6px;
  }

  .checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
  }

  .checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #FF8C00;
  }

  .checkbox-label {
    font-size: 0.75rem;
    color: #FFA500;
    cursor: pointer;
    user-select: none;
  }

  /* === МОДАЛЬНОЕ ОКНО ДОНАТОВ === */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: modalFadeIn 0.3s ease-out;
  }

  @keyframes modalFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .modal-container {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.98), rgba(30, 30, 30, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 140, 0, 0.4);
    border-radius: 20px;
    padding: 0;
    max-width: 440px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(255, 140, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: modalSlideIn 0.4s ease-out;
    position: relative;
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-50px) scale(0.9);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .modal-header {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 140, 0, 0.1));
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid rgba(255, 140, 0, 0.3);
  }

  .modal-title-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFD700;
    font-size: 1.1rem;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  }

  .modal-title-header .heart-icon {
    font-size: 1.3rem;
    color: #FFD700;
  }

  .modal-skip-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.1rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
  }

  .modal-skip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
  }

  .modal-content {
    padding: 10px 15px;
  }

  .modal-subtitle {
    color: white;
    font-size: 0.8rem;
    margin-bottom: 10px;
    text-align: left;
  }

  .modal-text {
    color: white;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    margin-bottom: 10px;
  }

  .modal-text p {
    margin: 0 0 8px 0;
    color: white;
  }

  .modal-text p:last-child {
    margin-bottom: 0;
  }

  .modal-highlight {
    color: #FFD700;
    font-weight: 700;
    font-size: 1rem;
    display: block;
    margin: 15px 0;
  }

  .modal-launch-section {
    text-align: center;
    margin: 10px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid rgba(255, 140, 0, 0.2);
  }

  .modal-launch-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .modal-launch-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6);
  }

  .modal-launch-btn:disabled {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    opacity: 0.85;
    cursor: not-allowed;
    transform: none;
    animation: pulseButton 1.5s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.3);
  }

  @keyframes pulseButton {

    0%,
    100% {
      box-shadow: 0 4px 15px rgba(255, 140, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.3);
    }

    50% {
      box-shadow: 0 4px 15px rgba(255, 140, 0, 0.6), 0 0 30px rgba(255, 140, 0, 0.5);
    }
  }

  .modal-launch-btn .play-icon {
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-right: 4px;
  }

  .modal-timer {
    display: inline-block;
    font-weight: 700;
    color: white;
  }

  .modal-scroll-down-btn {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
    position: relative;
  }

  .modal-scroll-down-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 140, 0, 0.5);
  }

  .modal-scroll-down-btn.pulse-arrow {
    animation: pulseArrow 1.5s ease-in-out infinite;
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  }

  .modal-scroll-down-btn.pulse-arrow i {
    animation: bounceArrow 1.5s ease-in-out infinite;
  }

  @keyframes pulseArrow {

    0%,
    100% {
      border-color: rgba(255, 215, 0, 0.6);
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
      transform: scale(1);
    }

    50% {
      border-color: rgba(255, 215, 0, 0.9);
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
      transform: scale(1.02);
    }
  }

  @keyframes bounceArrow {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(5px);
    }
  }

  .modal-donate-section {
    margin-top: 10px;
  }

  .modal-donate-title {
    color: #FFD700;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
  }

  .donate-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  .donate-button-large {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    animation: pulseGlow 3s ease-in-out infinite;
    border: 3px solid transparent;
  }

  .donate-button-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
  }

  .donate-button-large:hover::before {
    left: 100%;
  }

  .donate-button-large:hover {
    transform: translateY(-4px) scale(1.02);
    animation-play-state: paused;
  }

  .donate-text {
    flex: 1;
  }

  .donate-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    margin-bottom: 2px;
  }

  .donate-subtitle {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }

  /* Boosty крупная */
  .donate-boosty-large {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    border-color: rgba(255, 107, 157, 0.5);
  }

  .donate-boosty-large:hover {
    background: linear-gradient(135deg, #ff8fa3 0%, #e17085 100%);
    border-color: rgba(255, 107, 157, 0.8);
    box-shadow: 0 8px 35px rgba(255, 107, 157, 0.5);
  }

  /* CloudTips крупная */
  .donate-cloudtips-large {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.5);
  }

  .donate-cloudtips-large:hover {
    background: linear-gradient(135deg, #7c8ff0 0%, #8a5cb8 100%);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 8px 35px rgba(102, 126, 234, 0.5);
  }

  /* Patreon крупная */
  .donate-patreon-large {
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
    border-color: rgba(233, 30, 99, 0.5);
  }

  .donate-patreon-large:hover {
    background: linear-gradient(135deg, #f06292 0%, #ba68c8 100%);
    border-color: rgba(233, 30, 99, 0.8);
    box-shadow: 0 8px 35px rgba(233, 30, 99, 0.5);
  }

  /* Telegram крупная */
  .donate-telegram-large {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    border-color: rgba(255, 140, 0, 0.5);
  }

  .donate-telegram-large:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 8px 35px rgba(255, 140, 0, 0.5);
  }

  /* Анимация пульсирующего свечения */
  @keyframes pulseGlow {

    0%,
    100% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    }

    50% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 140, 0, 0.3);
    }
  }

  /* Responsive design */
  @media (max-width: 600px) {
    .modal-container {
      width: 98%;
      max-height: 90vh;
    }

    .modal-header {
      padding: 12px 15px 10px 15px;
    }

    .modal-title-header {
      font-size: 1.05rem;
    }

    .modal-content {
      padding: 12px 15px;
    }

    .modal-subtitle {
      font-size: 0.8rem;
      margin-bottom: 10px;
    }

    .modal-text {
      font-size: 0.8rem;
      margin-bottom: 12px;
    }

    .modal-text p {
      margin: 0 0 8px 0;
    }

    .modal-launch-section {
      margin: 12px 0;
      padding: 12px;
    }

    .modal-launch-btn {
      padding: 10px 20px;
      font-size: 0.9rem;
    }

    .modal-scroll-down-btn {
      padding: 8px;
      font-size: 0.8rem;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .donate-buttons-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .donate-button-large {
      padding: 10px 12px;
    }

    .donate-title {
      font-size: 0.85rem;
    }

    .donate-subtitle {
      font-size: 0.55rem;
    }
  }

  .launch-button {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 3px solid #FFD700;
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(255, 140, 0, 0.6), 0 0 40px rgba(255, 140, 0, 0.3);
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .launch-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
  }

  .launch-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(255, 140, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.5);
    border-color: #FFA500;
  }

  .launch-button:hover::before {
    left: 100%;
  }

  .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .action-btn {
    padding: 9px 12px;
    border-radius: 10px;
    border: 2px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 107, 0, 0.1);
    color: #FFA500;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .action-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    border-color: #FFD700;
    color: #FFD700;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 140, 0, 0.3);
  }

  .telegram-link {
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 10px;
  }

  .telegram-link a {
    color: #FFD700;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
  }

  .telegram-link a:hover {
    color: #FFA500;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    text-decoration: none;
  }


  /* === ИНФОРМАЦИОННАЯ КАРТОЧКА ПРО GHOSTS === */
  .info-card {
    margin-top: 15px;
    background: var(--glass-medium);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-orange);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
  }

  .info-content p {
    color: var(--yellow-bright);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .info-content p:last-child {
    margin-bottom: 0;
  }

  .info-note {
    margin-top: 15px;
    padding: 10px 12px;
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid rgba(79, 172, 254, 0.3);
    border-radius: 8px;
    color: #50A8FF;
    font-size: 0.7rem;
    text-align: center;
  }

  /* Анимация пульсирующего свечения */
  @keyframes pulseGlow {

    0%,
    100% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    }

    50% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 140, 0, 0.3);
    }
  }

  .home-wrapper::-webkit-scrollbar {
    width: 8px;
  }

  .home-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    border-radius: 4px;
  }

  @media (max-width: 600px) {
    .action-buttons {
      grid-template-columns: 1fr;
    }
  }

  /* === ОНЛАЙН В МИРАХ === */
  .online-worlds-card {
    margin-top: 15px;
    background: var(--glass-medium);
    border-radius: 8px;
    padding: 10px;
  }

  .online-worlds-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  [data-theme="light"] .online-worlds-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .online-total-badge {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    animation: pulseBadge 2s ease-in-out infinite;
  }

  @keyframes pulseBadge {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }
  }

  .worlds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .world-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
  }

  .world-item.active {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.4);
  }

  [data-theme="light"] .world-item.active {
    background: rgba(76, 175, 80, 0.1);
  }

  .world-item.active .world-count {
    color: #4CAF50;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  }

  [data-theme="light"] .world-item.active .world-count {
    text-shadow: none;
  }

  .world-icon {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
  }

  .world-name {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .world-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 18px;
    text-align: right;
  }

  .world-item.active .world-icon {
    animation: bounceIcon 1s ease-in-out infinite;
  }

  @keyframes bounceIcon {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-2px);
    }
  }

  @media (max-width: 600px) {
    .worlds-grid {
      grid-template-columns: 1fr;
    }
  }

  /* === СТАТИСТИКА СЕРВЕРА === */
  .server-stats-card {
    margin-top: 15px;
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-card);
  }

  .server-stats-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
  }

  [data-theme="light"] .server-stats-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .server-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .server-stat-box {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  [data-theme="light"] .server-stat-box {
    background: rgba(255, 107, 0, 0.05);
    border-color: rgba(255, 107, 0, 0.1);
  }

  .server-stat-icon {
    font-size: 1rem;
    color: #FF8C00;
    margin-bottom: 4px;
  }

  [data-theme="light"] .server-stat-icon {
    color: #FF6B00;
  }

  .server-stat-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--orange-primary);
    display: block;
  }

  .server-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* === ГРАФИК ОНЛАЙНА === */
  .online-chart-card {
    margin-top: 15px;
    background: linear-gradient(135deg, var(--glass-medium) 0%, rgba(255, 107, 0, 0.05) 100%);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 16px;
    border: 2px solid var(--border-primary);
    box-shadow: var(--shadow-card), 0 0 20px rgba(255, 140, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .online-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #FFD700, #FF8C00);
    background-size: 200% 100%;
    animation: gradientSlide 3s linear infinite;
  }

  @keyframes gradientSlide {
    0% {
      background-position: 0% 0;
    }

    100% {
      background-position: 200% 0;
    }
  }

  .online-chart-card:hover {
    border-color: rgba(255, 140, 0, 0.5);
    box-shadow: var(--shadow-card), 0 0 30px rgba(255, 140, 0, 0.2);
  }

  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary);
  }

  .chart-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .chart-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--yellow-glow);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  [data-theme="light"] .chart-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .chart-live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(0, 200, 0, 0.15);
    border: 1px solid rgba(0, 200, 0, 0.4);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #00E676;
    animation: livePulse 2s ease-in-out infinite;
  }

  .chart-live-dot {
    width: 6px;
    height: 6px;
    background: #00E676;
    border-radius: 50%;
    animation: liveDotPulse 1.5s ease-in-out infinite;
  }

  @keyframes livePulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }
  }

  @keyframes liveDotPulse {

    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
    }

    50% {
      transform: scale(1.1);
      box-shadow: 0 0 8px 2px rgba(0, 230, 118, 0.4);
    }
  }

  .period-toggle {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    padding: 4px;
    border: 1px solid rgba(255, 140, 0, 0.2);
  }

  .period-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .period-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
  }

  .period-btn.active {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    box-shadow: 0 3px 12px rgba(255, 140, 0, 0.5);
    transform: scale(1.02);
  }

  .chart-container {
    position: relative;
    height: 180px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
  }

  [data-theme="light"] .chart-container {
    background: rgba(255, 107, 0, 0.03);
  }

  .chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.8rem;
    gap: 10px;
  }

  .chart-loading i {
    font-size: 1.5rem;
    color: var(--orange-primary);
  }

  .chart-loading-text {
    animation: loadingTextPulse 1.5s ease-in-out infinite;
  }

  @keyframes loadingTextPulse {

    0%,
    100% {
      opacity: 0.5;
    }

    50% {
      opacity: 1;
    }
  }

  .chart-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    gap: 8px;
  }

  .chart-no-data i {
    font-size: 2rem;
    opacity: 0.4;
    color: var(--orange-primary);
  }

  .chart-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
  }

  .chart-stat {
    text-align: center;
    padding: 8px 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: all 0.3s ease;
  }

  .chart-stat:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.3);
    transform: translateY(-2px);
  }

  .chart-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--orange-primary);
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
  }

  .chart-stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .chart-stat.highlight .chart-stat-value {
    color: var(--yellow-glow);
  }

  .chart-refresh-indicator {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.6;
    white-space: nowrap;
  }

  .chart-refresh-indicator.refreshing {
    color: var(--orange-primary);
    opacity: 1;
  }

  .chart-refresh-indicator.refreshing i {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* === MAINTENANCE BANNER === */
  .maintenance-banner {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.15));
    border: 2px solid rgba(255, 193, 7, 0.5);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    animation: pulseMaintenance 2s ease-in-out infinite;
    text-align: center;
  }

  @keyframes pulseMaintenance {

    0%,
    100% {
      border-color: rgba(255, 193, 7, 0.5);
      box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
    }

    50% {
      border-color: rgba(255, 193, 7, 0.8);
      box-shadow: 0 0 25px rgba(255, 193, 7, 0.4);
    }
  }

  .maintenance-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .maintenance-text {
    color: #FFC107;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
  }

  [data-theme="light"] .maintenance-text {
    color: #E65100;
  }

  .maintenance-countdown {
    color: #FFD700;
    font-size: 0.85rem;
    font-weight: 600;
  }

  [data-theme="light"] .maintenance-countdown {
    color: #FF8C00;
  }

  /* === ДРУЖЕСТВЕННЫЕ КАНАЛЫ === */
  .friendly-channels-card {
    margin-top: 10px;
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .friendly-channels-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-primary);
  }

  [data-theme="light"] .friendly-channels-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  /* Info Tooltip */
  .info-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 4px;
  }

  .info-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background: #1a1a1a;
    color: #ffffff !important;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border: 2px solid #ff6b00;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 99999;
    pointer-events: none;
  }

  .info-tooltip .tooltip-text a {
    color: #ff8c00 !important;
    font-weight: 700;
    text-decoration: underline;
  }

  .info-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  /* No arrow - cleaner look */
  .info-tooltip .tooltip-text::after {
    display: none;
  }

  .friendly-channels-grid {
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
  }

  .channels-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .channel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 140, 0, 0.03) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.25);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
  }

  .channel-item.active {
    opacity: 1;
    pointer-events: auto;
  }

  .channel-item:hover {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 140, 0, 0.08) 100%);
    border-color: rgba(255, 140, 0, 0.5);
    text-decoration: none;
  }

  .channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .channel-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .channel-icon svg {
    width: 100%;
    height: 100%;
  }

  .channel-icon.chat svg {
    fill: #29B6F6;
  }

  .channel-icon.channel svg {
    fill: #FFA726;
  }

  .channel-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .channel-desc {
    font-size: 0.6rem;
    color: var(--text-muted);
    padding-left: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .channel-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    color: var(--text-muted);
  }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
  }

  .carousel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dot.active {
    background: var(--orange-primary);
  }

  /* === МОИ ТРЕНИРОВКИ (FIT FILES) === */
  .fit-files-card {
    margin-top: 15px;
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-card);
  }

  .fit-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
  }

  .fit-files-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }

  [data-theme="light"] .fit-files-title {
    color: var(--orange-primary);
    text-shadow: none;
  }

  .fit-refresh-btn {
    background: rgba(255, 140, 0, 0.15);
    border: 1px solid rgba(255, 140, 0, 0.3);
    color: var(--orange-primary);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fit-refresh-btn:hover {
    background: rgba(255, 140, 0, 0.25);
    transform: rotate(90deg);
  }

  .fit-refresh-btn.spinning i {
    animation: spin 1s linear infinite;
  }

  .fit-files-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
  }

  .fit-files-list::-webkit-scrollbar {
    width: 4px;
  }

  .fit-files-list::-webkit-scrollbar-thumb {
    background: rgba(255, 140, 0, 0.3);
    border-radius: 4px;
  }

  .fit-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .fit-loading i {
    margin-right: 6px;
    color: var(--orange-primary);
  }

  .fit-empty {
    text-align: center;
    padding: 25px 15px;
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .fit-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.4;
    color: var(--orange-primary);
  }

  .fit-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }

  .fit-file-item:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.3);
  }

  [data-theme="light"] .fit-file-item {
    background: rgba(255, 107, 0, 0.05);
  }

  [data-theme="light"] .fit-file-item:hover {
    background: rgba(255, 107, 0, 0.1);
  }

  .fit-file-info {
    flex: 1;
    min-width: 0;
  }

  .fit-file-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fit-file-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .fit-download-btn {
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
  }

  .fit-download-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.5);
  }

  .fit-files-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-primary);
    font-size: 0.7rem;
  }

  .fit-files-count {
    color: var(--text-muted);
  }

  .fit-download-all {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
  }

  .fit-download-all:hover {
    color: var(--yellow-glow);
    text-decoration: underline;
  }

  /* SAVINGS TICKER */
  .savings-ticker {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--yellow-glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    font-family: 'Courier New', monospace;
    letter-spacing: -1px;
    line-height: 1;
  }

  [data-theme="light"] .savings-ticker {
    color: var(--orange-primary);
    text-shadow: none;
  }
</style>

<div class="home-wrapper">
  <!-- Заголовок с анимированной надписью -->
  <div class="main-header">
    <div class="header-content">
      <a href="https://t.me/rezwift" target="_blank" class="header-title-link">
        <div class="header-title" id="typing-header">Ваш Резвифт</div>
      </a>
      <!-- Кнопка смены темы -->
      <button class="theme-toggle-btn" onclick="toggleTheme()" title="Сменить тему">
        <i class="fas fa-sun" id="theme-icon"></i>
      </button>
    </div>
  </div>

  <!-- Promo Banner для интеграций (Telegram/Garmin) -->
  <div id="promo-banner" class="promo-banner" style="display: none;">
    <div class="promo-content">
      <div class="promo-icon">🔗</div>
      <div class="promo-text">
        <strong>Подключите интеграции!</strong><br>
        <span>📲 <a href="{{ url_for('telegram_link') }}" target="_blank">Telegram бот</a> — автоматическая отправка
          FIT-файлов</span><br>
        <span>⌚ <a href="{{ url_for('garmin', username=username) }}">Garmin Connect</a> — синхронизация
          тренировок</span>
      </div>
      <button class="promo-close" onclick="closePromoBanner()" title="Закрыть">✕</button>
    </div>
  </div>

  <style>
    .promo-banner {
      background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(255, 140, 0, 0.1));
      border: 2px solid rgba(255, 140, 0, 0.4);
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 15px;
      animation: slideDown 0.4s ease-out;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .promo-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .promo-icon {
      font-size: 1.8rem;
      flex-shrink: 0;
    }

    .promo-text {
      flex: 1;
      font-size: 0.8rem;
      color: var(--text-primary);
      line-height: 1.5;
    }

    .promo-text a {
      color: var(--orange-primary);
      text-decoration: none;
      font-weight: 600;
    }

    .promo-text a:hover {
      text-decoration: underline;
      color: var(--yellow-glow);
    }

    .promo-close {
      background: rgba(255, 107, 0, 0.2);
      border: none;
      color: var(--text-primary);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .promo-close:hover {
      background: rgba(235, 51, 73, 0.3);
      color: #EB3349;
    }
  </style>

  <script>
    // Promo banner logic
    (function () {
      const PROMO_KEY = 'rezwift_promo_banner_dismissed';
      const banner = document.getElementById('promo-banner');

      // Show banner only if not dismissed
      if (!localStorage.getItem(PROMO_KEY)) {
        banner.style.display = 'block';
      }
    })();

    function closePromoBanner() {
      const banner = document.getElementById('promo-banner');
      banner.style.animation = 'slideUp 0.3s ease-out forwards';
      setTimeout(() => {
        banner.style.display = 'none';
        localStorage.setItem('rezwift_promo_banner_dismissed', 'true');
      }, 300);
    }

    // Slide up animation for closing
    const style = document.createElement('style');
    style.textContent = `
      @keyframes slideUp {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-10px); }
      }
    `;
    document.head.appendChild(style);
  </script>

  <!-- Основной контент в две колонки -->
  <div class="main-content">
    <!-- Левая колонка -->
    <div class="left-column">
      <div class="column-title">Основное</div>

      {% if restarting %}
      <div class="restart-alert" style="margin-bottom: 15px;">
        <i class="fas fa-exclamation-triangle"></i>
        Рестарт через {{ restarting_in_minutes }} минут
      </div>
      {% endif %}

      <!-- Maintenance Banner (loaded dynamically) -->
      <div id="maintenance-banner" class="maintenance-banner" style="display: none;">
        <div class="maintenance-icon">🛠️</div>
        <div class="maintenance-text" id="maintenance-text-display"></div>
        <div class="maintenance-countdown" id="maintenance-countdown"></div>
      </div>

      <form method="POST" action="/start-zwift">
        <!-- Важно: для видимости других игроков все должны выбрать ОДИН И ТОТ ЖЕ маршрут! -->
        <!--
        {% if online.total > 0 %}
        <div class="important-info">
          <div class="important-info-text">
            <i class="fas fa-info-circle"></i> <strong>Важно!</strong> Для видимости других игроков ({{online.total}})
            выберите <strong>ОДИН И ТОТ ЖЕ</strong> маршрут!
          </div>
        </div>
        {% endif %}
        -->

        <!-- Лобби скрыт - по умолчанию Lobby 1 (MAKURIISLANDS) -->
        <input type="hidden" name="map" value="MAKURIISLANDS">

        <!-- Подъём скрыт, используется значение по умолчанию -->
        <input type="hidden" name="climb" value="CALENDAR">

        <!-- Ghost toggle hidden - moved to settings -->
        <!-- Ghost toggle hidden - moved to settings -->
        {% if enable_ghosts %}
        <input type="hidden" name="enableghosts" value="true">
        {% endif %}

        <div class=" launch-btn-container" style="display: flex; gap: 10px;">
          <a href="https://rezwift.ru" target="_blank" class="site-btn">
            <i class="fas fa-globe"></i> Сайт
          </a>
          <button type="button" class="launch-btn" onclick="showDonateModal()" style="flex: 2;">
            <i class="fas fa-rocket"></i> Запустить REZWIFT
          </button>
        </div>
      </form>

      <!-- AI Coach Highlight Button -->
      <a href="{{ url_for('rezwift.coach_page') }}" class="ai-coach-highlight">
        <svg class="ai-coach-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
          <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
          <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
          <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
          <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
          <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
          <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
          <path d="M6 18a4 4 0 0 1-1.967-.516" />
          <path d="M19.967 17.484A4 4 0 0 1 18 18" />
        </svg>
        <span>AI Тренер</span>
        <span class="beta-badge">BETA</span>
      </a>

      <!-- Нижняя панель навигации -->
      <div class="bottom-nav" style="grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));">
        <a href="/events" class="nav-btn">
          <i class="fas fa-calendar-alt"></i> События <span class="beta-badge">β</span>
        </a>
        <a href="/clubs" class="nav-btn">
          <i class="fas fa-users"></i> Клубы <span class="beta-badge">β</span>
        </a>
        <a href="/leaderboard" class="nav-btn">
          <i class="fas fa-trophy"></i> Лидерборд <!-- <span class="beta-badge">β</span> -->
        </a>
        <a href="{{ url_for('goals_page', username=username) }}" class="nav-btn">
          <i class="fas fa-bullseye"></i> Цели <!-- <span class="beta-badge">NEW</span> -->
        </a>
        <a href="{{ url_for('activities_page', username=username) }}" class="nav-btn">
          <i class="fas fa-file-archive"></i> Тренировки <!-- <span class="beta-badge">NEW</span> -->
        </a>
        <a href="{{ url_for('gallery_page', username=username) }}" class="nav-btn">
          <i class="fas fa-images"></i> Галерея <!-- <span class="beta-badge">NEW</span> -->
        </a>
        <a href="/stats" class="nav-btn">
          <i class="fas fa-chart-bar"></i> Статистика
        </a>
        <a href="/live" class="nav-btn" style="position: relative;">
          <i class="fas fa-broadcast-tower" style="color: #ff4444;"></i> Live <span class="beta-badge"
            style="background: #ff4444; color: white;">NEW</span>
        </a>
        {% if username != "zoffline" %}
        <a href="{{ url_for('logout', username=username) }}" class="nav-btn">
          <i class="fas fa-sign-out-alt"></i> Выход
        </a>
        {% endif %}
        <a href="{{ url_for('settings', username=username) }}" class="nav-btn">
          <i class="fas fa-cog"></i> Настройки
        </a>
        {% if is_admin %}
        {% if not restarting %}
        <a href="/restart" class="nav-btn">
          <i class="fas fa-redo"></i> Рестарт
        </a>
        {% else %}
        <a href="/cancelrestart" class="nav-btn">
          <i class="fas fa-times"></i> Отменить
        </a>
        {% endif %}
        <a href="/reloadbots" class="nav-btn">
          <i class="fas fa-robot"></i> Боты
        </a>
        {% endif %}
      </div>

      <!-- График онлайна -->
      <div class="online-chart-card">
        <div class="chart-refresh-indicator" id="chartRefreshIndicator">
          <i class="fas fa-sync-alt"></i>
          <span id="refreshText">Обновлено только что</span>
        </div>
        <div class="chart-header">
          <div class="chart-title-section">
            <span class="chart-title">📈 История онлайна</span>
            <div class="chart-live-badge">
              <div class="chart-live-dot"></div>
              <span>LIVE</span>
            </div>
          </div>
          <div class="period-toggle">
            <button class="period-btn active" data-period="day" onclick="switchChartPeriod('day')">24ч</button>
            <button class="period-btn" data-period="week" onclick="switchChartPeriod('week')">7 дней</button>
            <button class="period-btn" data-period="month" onclick="switchChartPeriod('month')">30 дней</button>
          </div>
        </div>
        <div class="chart-container" id="chartContainer">
          <div class="chart-loading" id="chartLoading">
            <i class="fas fa-spinner fa-spin"></i>
            <span class="chart-loading-text">Загрузка данных...</span>
          </div>
          <canvas id="onlineChart" style="display: none;"></canvas>
          <div class="chart-no-data" id="chartNoData" style="display: none;">
            <i class="fas fa-chart-line"></i>
            <span>Данные появятся через несколько минут</span>
          </div>
        </div>
        <div class="chart-stats" id="chartStats" style="display: none;">
          <div class="chart-stat highlight">
            <div class="chart-stat-value" id="statMax">-</div>
            <div class="chart-stat-label">Макс.</div>
          </div>
          <div class="chart-stat">
            <div class="chart-stat-value" id="statAvg">-</div>
            <div class="chart-stat-label">Средний</div>
          </div>
          <div class="chart-stat">
            <div class="chart-stat-value" id="statMin">-</div>
            <div class="chart-stat-label">Мин.</div>
          </div>
          <div class="chart-stat">
            <div class="chart-stat-value" id="statPeakTime">-</div>
            <div class="chart-stat-label">Пик в</div>
          </div>
        </div>
      </div>

      <!-- Дружественные каналы -->
      <div class="friendly-channels-card" id="friendly-channels-card">
        <div class="friendly-channels-title">
          🤝 Дружественные каналы
          <span class="info-icon" title="Хотите добавить свой канал? Напишите @mmmurz в Telegram!"
            onclick="window.open('https://t.me/mmmurz', '_blank')" style="cursor: pointer;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              style="vertical-align: middle; opacity: 0.7;">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
          </span>
        </div>
        <div class="friendly-channels-grid">
          <div class="channels-carousel" id="channels-carousel">
            <!-- Загружается динамически -->
            <div class="channel-loading">
              <i class="fas fa-spinner fa-spin"></i>
            </div>
          </div>
        </div>
        <div class="carousel-dots" id="carousel-dots"></div>
      </div>
    </div>

    <!-- Правая колонка -->
    <div class="right-column">
      <div class="column-title">НОВОСТИ</div>

      <div class="news-section" id="news-container">
        <!-- Новости будут загружены динамически -->
        <div class="news-item loading">
          <i class="fas fa-spinner fa-spin"></i> Загрузка новостей...
        </div>
      </div>

      <!-- Онлайн в мирах -->
      <div class="online-worlds-card">
        <div class="online-worlds-title">
          <span>🌍 Онлайн в мирах</span>
          {% if online.total > 0 %}
          <span class="online-total-badge">{{ online.total }}</span>
          {% endif %}
        </div>

        <!-- Все миры -->
        <div class="worlds-grid">
          {% for world_key, world in world_info.items() %}
          {% set count = online|attr(world_key)|default(0) %}
          <div class="world-item {{ 'active' if count > 0 else '' }}">
            <span class="world-icon">{{ world.icon }}</span>
            <span class="world-name">{{ world.name }}</span>
            <span class="world-count">{{ count }}</span>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Счетчик экономии -->
      <div class="server-stats-card mb-4">
        <div class="server-stats-title">
          <i class="fas fa-piggy-bank fa-bounce" style="--fa-animation-duration: 2s;"></i> Сэкономлено сообществом
        </div>
        <div style="text-align: center; padding: 10px 0;">
          <div id="savingsTicker" class="savings-ticker">
            0 ₽
          </div>
          <div
            style="font-size: 0.85rem; color: #aaa; margin-top: 5px; max-width: 90%; margin-left: auto; margin-right: auto;">
            Столько денег сэкономили наши пользователи с 08.11.2025, выбрав <b>reZwift</b> вместо официальной подписки!
          </div>
        </div>
      </div>
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          let currentSavings = {{ savings_total| tojson
        }};
        const savingsRate = {{ savings_rate| tojson }};
        const tickerEl = document.getElementById('savingsTicker');

        if (typeof currentSavings !== 'number') currentSavings = Number(currentSavings) || 0;

        function updateSavings() {
          currentSavings += savingsRate / 10;

          tickerEl.textContent = currentSavings.toLocaleString('ru-RU', {
            style: 'currency',
            currency: 'RUB',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          });
        }

        setInterval(updateSavings, 100);
        updateSavings();
        });
      </script>

      <!-- Статистика сервера -->
      <div class="server-stats-card">
        <div class="server-stats-title">
          <i class="fas fa-chart-bar"></i> Статистика сервера
        </div>
        <div class="server-stats-grid">
          <div class="server-stat-box">
            <div class="server-stat-icon"><i class="fas fa-users"></i></div>
            <span class="server-stat-value" id="stat-users">—</span>
            <div class="server-stat-label">Райдеров</div>
          </div>
          <div class="server-stat-box">
            <div class="server-stat-icon"><i class="fas fa-bicycle"></i></div>
            <span class="server-stat-value" id="stat-activities">—</span>
            <div class="server-stat-label">Заездов</div>
          </div>
          <div class="server-stat-box">
            <div class="server-stat-icon"><i class="fas fa-road"></i></div>
            <span class="server-stat-value" id="stat-distance">—</span>
            <div class="server-stat-label">км</div>
          </div>
          <div class="server-stat-box">
            <div class="server-stat-icon"><i class="fas fa-mountain"></i></div>
            <span class="server-stat-value" id="stat-elevation">—</span>
            <div class="server-stat-label">м набора</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  function toggleElevation() {
    // Функция для переключения отображения подъема
    alert('Функция переключения подъема будет реализована');
    // Здесь можно добавить логику для изменения настроек подъема
  }

  function toggleGhosts() {
    // Функция для показа/скрытия информации про призраков
    const infoCard = document.getElementById('ghosts-info-card');
    if (infoCard) {
      if (infoCard.style.display === 'none') {
        infoCard.style.display = 'block';
        // Плавное появление
        infoCard.style.opacity = '0';
        infoCard.style.transform = 'translateY(10px)';
        setTimeout(() => {
          infoCard.style.opacity = '1';
          infoCard.style.transform = 'translateY(0)';
        }, 10);
      } else {
        infoCard.style.opacity = '0';
        infoCard.style.transform = 'translateY(10px)';
        setTimeout(() => {
          infoCard.style.display = 'none';
        }, 300);
      }
    }
  }

  // === МОДАЛЬНОЕ ОКНО ДОНАТОВ ===
  let countdownInterval;
  let countdownTime = 15;

  // Пул текстов для модального окна
  const modalTexts = [
    {
      emoji: '🚴',
      lines: [
        'reZwift - это проект, который делает спорт доступнее для всех!',
        'Расскажите о нас друзьям и в соцсетях - это лучшая поддержка! 📢',
        'А если есть возможность - донат поможет оплатить сервер 💝'
      ]
    },
    {
      emoji: '🌍',
      lines: [
        'Мы создаём альтернативу дорогой подписке Zwift!',
        'Поделитесь ссылкой rezwift.ru с друзьями-велосипедистами 🚵',
        'Каждый новый пользователь - это победа сообщества! ✨'
      ]
    },
    {
      emoji: '💪',
      lines: [
        'reZwift работает благодаря энтузиастам и вашей поддержке!',
        'Напишите отзыв или расскажите о нас в велочате 📱',
        'Даже репост - уже огромная помощь проекту! 🙏'
      ]
    },
    {
      emoji: '🎯',
      lines: [
        'Мы развиваем события, клубы и лидерборды - бесплатно!',
        'Пригласите друга покататься на reZwift вместе 🤝',
        'Ваша поддержка помогает нам добавлять новые фичи! 🚀'
      ]
    },
    {
      emoji: '❤️',
      lines: [
        'Спасибо что выбираете reZwift!',
        'Мы держимся на сообществе - расскажите о нас! 📣',
        'Донаты идут на сервер, домен и развитие проекта 🛠️'
      ]
    }
  ];

  function getRandomModalText() {
    const text = modalTexts[Math.floor(Math.random() * modalTexts.length)];
    return `
      <p><span style="font-size: 1.2rem;">${text.emoji}</span> ${text.lines[0]}</p>
      <p>${text.lines[1]}</p>
      <p>${text.lines[2]}</p>
    `;
  }

  // Флаг донатера (получаем из шаблона) - также считаем админа донатором
  const isDonor = {{ 'true' if (is_donor or is_admin) else 'false' }};

  function showDonateModal() {
    const modal = document.getElementById('donate-modal');
    const launchBtn = document.getElementById('modal-launch-btn');

    // Clear any existing timer first
    if (countdownInterval) clearInterval(countdownInterval);

    // Для донатеров — сразу активная кнопка без таймера
    if (isDonor) {
      countdownTime = 0;
      launchBtn.innerHTML = '<span class="play-icon"></span><span>Запустить</span>';
      launchBtn.disabled = false;
    } else {
      // Сбрасываем таймер и восстанавливаем HTML кнопки с таймером
      countdownTime = 15;
      launchBtn.innerHTML = '<span class="play-icon"></span><span>Запустить (<span id="countdown-timer" class="modal-timer">' + countdownTime + '</span>)</span>';
      launchBtn.disabled = true;
      
      const timerElement = document.getElementById('countdown-timer');

      // Запускаем таймер
      countdownInterval = setInterval(() => {
        countdownTime--;
        if (timerElement) timerElement.textContent = countdownTime;

        if (countdownTime <= 0) {
          clearInterval(countdownInterval);
          launchBtn.disabled = false;
          launchBtn.innerHTML = '<span class="play-icon"></span><span>Запустить</span>';
        }
      }, 1000);
    }

    // Обновляем текст модального окна
    const modalTextEl = document.querySelector('.modal-text');
    if (modalTextEl) {
      modalTextEl.innerHTML = getRandomModalText();
    }

    // Показываем модальное окно
    modal.style.display = 'flex';
  }

  function hideDonateModal() {
    const modal = document.getElementById('donate-modal');
    modal.style.display = 'none';
    if (countdownInterval) clearInterval(countdownInterval);
  }

  function copyBinanceAddress(el) {
    const address = '0x810ce25b7387f972299ce3100164838d03a9125b';
    navigator.clipboard.writeText(address).then(() => {
      const originalHTML = el.innerHTML;
      el.innerHTML = '<i class="fas fa-check" style="color: #27ae60;"></i> Скопировано!';
      setTimeout(() => el.innerHTML = originalHTML, 2000);
    });
  }

  function launchZwift() {
    // Отправляем форму
    document.querySelector('form[action="/start-zwift"]').submit();
  }

  // === ЗАГРУЗКА FIT ФАЙЛОВ ===
  async function loadFitFiles() {
    const listContainer = document.getElementById('fit-files-list');
    const footerContainer = document.getElementById('fit-files-footer');
    const countElement = document.getElementById('fit-files-count');
    const refreshBtn = document.querySelector('.fit-refresh-btn');

    // Guard: if elements don't exist on page, exit silently
    if (!listContainer || !footerContainer || !countElement) {
      return;
    }

    // Show loading state
    if (refreshBtn) refreshBtn.classList.add('spinning');
    listContainer.innerHTML = '<div class="fit-loading"><i class="fas fa-spinner fa-spin"></i> Загрузка...</div>';

    try {
      const response = await fetch('/api/fit-files');
      if (!response.ok) throw new Error('Failed to load FIT files');

      const data = await response.json();
      const files = data.files || [];

      if (files.length === 0) {
        listContainer.innerHTML = `
          <div class="fit-empty">
            <i class="fas fa-bicycle"></i>
            Пока нет тренировок<br>
            <small>После первой поездки здесь появятся FIT файлы</small>
          </div>`;
        footerContainer.style.display = 'none';
        return;
      }

      // Render file list
      listContainer.innerHTML = files.map(file => `
        <div class="fit-file-item">
          <div class="fit-file-info">
            <div class="fit-file-name" title="${file.filename}">${file.filename}</div>
            <div class="fit-file-meta">${file.date} • ${formatFileSize(file.size)}</div>
          </div>
          <button class="fit-download-btn" onclick="downloadFitFile('${file.filename}')" title="Скачать">
            <i class="fas fa-download"></i>
          </button>
        </div>
      `).join('');

      // Update footer
      countElement.textContent = `${files.length} ${pluralize(files.length, 'файл', 'файла', 'файлов')}`;
      footerContainer.style.display = 'flex';

    } catch (error) {
      console.error('Error loading FIT files:', error);
      listContainer.innerHTML = `
        <div class="fit-empty">
          <i class="fas fa-exclamation-circle"></i>
          Не удалось загрузить файлы
        </div>`;
    } finally {
      if (refreshBtn) refreshBtn.classList.remove('spinning');
    }
  }

  function downloadFitFile(filename) {
    // Secure download via GET endpoint
    window.location.href = '/download/fit/' + encodeURIComponent(filename);
  }

  function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  }

  function pluralize(n, one, few, many) {
    const mod10 = n % 10;
    const mod100 = n % 100;
    if (mod100 >= 11 && mod100 <= 14) return many;
    if (mod10 === 1) return one;
    if (mod10 >= 2 && mod10 <= 4) return few;
    return many;
  }

  // Load FIT files on page load
  document.addEventListener('DOMContentLoaded', loadFitFiles);

  // === ЗАГРУЗКА НОВОСТЕЙ ===
  async function loadNews() {
    const newsContainer = document.getElementById('news-container');

    try {
      // Загружаем JSON файл с новостями
      const response = await fetch('/static/web/launcher/news.json');
      if (!response.ok) {
        throw new Error('Не удалось загрузить новости');
      }

      const data = await response.json();

      // Очищаем контейнер
      newsContainer.innerHTML = '';

      // Добавляем новости
      data.news.forEach((newsItem, index) => {
        const newsElement = document.createElement('div');
        newsElement.className = 'news-item';
        newsElement.innerHTML = `
        <i class="${newsItem.icon}"></i> <strong>${newsItem.title}</strong><br>
        ${newsItem.content}
      `;
        newsContainer.appendChild(newsElement);
      });

      console.log('Новости успешно загружены');

    } catch (error) {
      console.error('Ошибка загрузки новостей:', error);

      // Fallback - показываем статические новости
      newsContainer.innerHTML = `
      <div class="news-item">
        <i class="fas fa-star"></i> <strong>Новое обновление v.1.7.2</strong><br>
        уже доступно! Множество новых функций и улучшений производительности.
      </div>

      <div class="news-item">
        <i class="fas fa-flag-checkered"></i> <strong>Присоединяйтесь к Tour de Watopia!</strong><br>
        Эпическая гонка ждет вас в самом сердце Zwift мира.
      </div>

      <div class="news-item">
        <i class="fas fa-lightbulb"></i> <strong>Советы по тренировкам от профи</strong><br>
        Узнайте секреты эффективных тренировок от лучших атлетов.
      </div>

      <div class="news-item">
        <i class="fas fa-exclamation-triangle"></i> <strong>Новости временно недоступны</strong><br>
        Попробуйте обновить страницу или проверьте подключение.
      </div>
    `;
    }
  }

  // === ЗАГРУЗКА ДРУЖЕСТВЕННЫХ КАНАЛОВ ===
  let channelsCarouselInterval;
  let currentChannelIndex = 0;
  let totalChannels = 0;

  async function loadFriendlyChannels() {
    const carousel = document.getElementById('channels-carousel');
    const card = document.getElementById('friendly-channels-card');
    const dotsContainer = document.getElementById('carousel-dots');

    if (!carousel) return;

    try {
      const response = await fetch('/api/friendly-channels');
      const channels = await response.json();

      if (!channels || channels.length === 0) {
        if (card) card.style.display = 'none';
        return;
      }

      totalChannels = channels.length;

      // SVG иконки
      const chatIcon = `<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 2.98.97 4.29L2 22l5.71-.97C9.02 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`;
      const channelIcon = `<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></svg>`;

      // Рендерим каналы
      carousel.innerHTML = channels.map((channel, idx) => {
        const icon = channel.channel_type === 'channel' ? channelIcon : chatIcon;
        const iconClass = channel.channel_type === 'channel' ? 'channel' : 'chat';

        return `
          <a href="${channel.url}" target="_blank" class="channel-item ${idx === 0 ? 'active' : ''}">
            <div class="channel-header">
              <div class="channel-icon ${iconClass}">${icon}</div>
              <span class="channel-name">${channel.name}</span>
            </div>
            ${channel.description ? `<span class="channel-desc">${channel.description}</span>` : ''}
          </a>
        `;
      }).join('');

      // Создаём точки навигации
      if (totalChannels > 1) {
        dotsContainer.innerHTML = channels.map((_, idx) =>
          `<div class="carousel-dot ${idx === 0 ? 'active' : ''}" onclick="goToChannel(${idx})"></div>`
        ).join('');

        // Запускаем автопрокрутку
        startChannelsCarousel();
      }

    } catch (error) {
      console.error('Ошибка загрузки каналов:', error);
      if (card) card.style.display = 'none';
    }
  }

  function startChannelsCarousel() {
    if (channelsCarouselInterval) clearInterval(channelsCarouselInterval);

    channelsCarouselInterval = setInterval(() => {
      currentChannelIndex = (currentChannelIndex + 1) % totalChannels;
      updateCarousel();
    }, 5000); // Переключение каждые 5 секунд
  }

  function goToChannel(index) {
    currentChannelIndex = index;
    updateCarousel();
    startChannelsCarousel(); // Перезапускаем таймер
  }

  function updateCarousel() {
    const items = document.querySelectorAll('#channels-carousel .channel-item');
    const dots = document.querySelectorAll('.carousel-dot');

    items.forEach((item, idx) => {
      item.classList.toggle('active', idx === currentChannelIndex);
    });

    dots.forEach((dot, idx) => {
      dot.classList.toggle('active', idx === currentChannelIndex);
    });
  }


  // Закрытие модального окна по клику вне его
  document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('donate-modal');
    if (modal) {
      modal.addEventListener('click', function (e) {
        if (e.target === modal) {
          hideDonateModal();
        }
      });
    }

    // Закрытие по клавише Escape
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && modal && modal.style.display === 'flex') {
        hideDonateModal();
      }
    });

    // Загружаем новости
    loadNews();

    // Загружаем дружественные каналы
    loadFriendlyChannels();

    // Загружаем статистику сервера
    loadServerStats();
  });

  // === ЗАГРУЗКА СТАТИСТИКИ СЕРВЕРА ===
  async function loadServerStats() {
    try {
      const response = await fetch('/api/hub/stats');
      if (!response.ok) return;

      const stats = await response.json();
      const fmt = n => n >= 1000 ? (n / 1000).toFixed(1) + 'K' : n.toString();

      document.getElementById('stat-users').textContent = stats.total_users || 0;
      document.getElementById('stat-activities').textContent = stats.total_activities || 0;
      document.getElementById('stat-distance').textContent = fmt(Math.round(stats.total_distance_km || 0));
      document.getElementById('stat-elevation').textContent = fmt(Math.round(stats.total_elevation_m || 0));
    } catch (error) {
      console.error('Ошибка загрузки статистики:', error);
    }
  }
</script>

<!-- Модальное окно донатов -->
<div id="donate-modal" class="modal-overlay">
  <div class="modal-container">
    <div class="modal-header">
      <div class="modal-title-header">
        <span class="heart-icon">💛</span>
        <span>Помогите проекту!</span>
      </div>
      <button class="modal-skip-btn" onclick="hideDonateModal()" title="Пропустить">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="modal-content">
      <div class="modal-subtitle">Ваша поддержка очень важна</div>

      <div class="modal-text">
        <p><span style="font-size: 1.2rem;">🚴</span> reZwift - это проект, который делает спорт доступнее для всех!</p>
        <p>Чтобы продолжать развивать проект и добавлять новые возможности, нам нужна ваша помощь в оплате сервера и
          поддержании сервиса.</p>
        <p>Даже небольшая поддержка поможет сохранить проект живым! <span style="font-size: 0.9rem;">💝</span></p>
      </div>

      <div class="modal-launch-section">
        <button id="modal-launch-btn" class="modal-launch-btn" disabled onclick="launchZwift()">
          <span class="play-icon"></span>
          <span>Запустить (<span id="countdown-timer" class="modal-timer">15</span>)</span>
        </button>
        <div style="margin-top: 8px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6);">
          Таймер можно убрать, сделав пожертвование и сообщив.
        </div>
      </div>

      <div class="modal-donate-section" id="donate-section">
        <!-- CloudTips - Recommended -->
        <a href="https://pay.cloudtips.ru/p/19a95b2c" target="_blank" class="donate-option-card" style="
          display: flex; align-items: center; gap: 15px; padding: 15px; margin-bottom: 12px;
          background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 215, 0, 0.1));
          border: 2px solid rgba(255, 165, 0, 0.5); border-radius: 12px;
          text-decoration: none; transition: all 0.3s ease;
        ">
          <div
            style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #FF8C00, #FFD700); display: flex; align-items: center; justify-content: center;">
            <i class="fas fa-coins" style="font-size: 1.4rem; color: #fff;"></i>
          </div>
          <div style="flex: 1;">
            <div style="color: #FFD700; font-weight: 700; font-size: 1rem;">
              CloudTips <span
                style="background: #27ae60; color: #fff; font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; margin-left: 6px;">РЕКОМЕНДУЮ</span>
            </div>
            <div style="color: rgba(255,255,255,0.6); font-size: 0.75rem; margin-top: 2px;">
              Быстрый и удобный перевод с любой карты
            </div>
          </div>
          <i class="fas fa-chevron-right" style="color: rgba(255, 165, 0, 0.6);"></i>
        </a>

        <!-- Boosty -->
        <a href="https://boosty.to/cyberscoper/donate" target="_blank" class="donate-option-card" style="
          display: flex; align-items: center; gap: 15px; padding: 15px; margin-bottom: 12px;
          background: rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 165, 0, 0.3); border-radius: 12px;
          text-decoration: none; transition: all 0.3s ease;
        ">
          <div
            style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #F15F2C, #FF8C00); display: flex; align-items: center; justify-content: center;">
            <i class="fas fa-fire" style="font-size: 1.4rem; color: #fff;"></i>
          </div>
          <div style="flex: 1;">
            <div style="color: #fff; font-weight: 700; font-size: 1rem;">Boosty</div>
            <div style="color: rgba(255,255,255,0.6); font-size: 0.75rem; margin-top: 2px;">
              Хорошая альтернатива, подписка или разовый донат
            </div>
          </div>
          <i class="fas fa-chevron-right" style="color: rgba(255, 165, 0, 0.4);"></i>
        </a>

        <!-- Binance USDC -->
        <div class="donate-option-card" style="
          padding: 15px; 
          background: rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 165, 0, 0.3); border-radius: 12px;
        ">
          <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
            <div
              style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #F0B90B, #FCD535); display: flex; align-items: center; justify-content: center;">
              <i class="fab fa-bitcoin" style="font-size: 1.4rem; color: #1E2329;"></i>
            </div>
            <div style="flex: 1;">
              <div style="color: #fff; font-weight: 700; font-size: 1rem;">Binance USDC</div>
              <div style="color: rgba(255,255,255,0.6); font-size: 0.75rem; margin-top: 2px;">
                Сеть BNB Smart Chain (BEP20)
              </div>
            </div>
          </div>
          <div
            style="background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; font-family: monospace; font-size: 0.7rem; color: #FFD700; word-break: break-all; cursor: pointer;"
            onclick="copyBinanceAddress(this)">
            0x810ce25b7387f972299ce3100164838d03a9125b
            <i class="fas fa-copy" style="float: right; opacity: 0.6;"></i>
          </div>
          <div style="font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 6px; text-align: center;">
            Нажмите чтобы скопировать адрес
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<!-- VK Backup Channel Popup -->
<div id="vk-backup-modal" class="modal-overlay" style="display: none;">
  <div class="modal-container" style="max-width: 380px;">
    <div class="modal-header"
      style="background: linear-gradient(135deg, rgba(0, 119, 255, 0.2), rgba(0, 119, 255, 0.1));">
      <div class="modal-title-header" style="color: #0077FF;">
        <span style="font-size: 1.3rem;">📢</span>
        <span>Важное уведомление</span>
      </div>
      <button class="modal-skip-btn" onclick="hideVkModal()" title="Закрыть">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-content" style="padding: 20px;">
      <div style="text-align: center; margin-bottom: 15px;">
        <i class="fab fa-telegram" style="font-size: 2.5rem; color: #0088cc; opacity: 0.6;"></i>
        <span style="font-size: 1.5rem; margin: 0 8px; color: rgba(255,255,255,0.7);">→</span>
        <i class="fab fa-vk" style="font-size: 2.5rem; color: #0077FF;"></i>
      </div>
      <p style="text-align: center; font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0;">
        <strong style="color: #fff;">Telegram может быть заблокирован</strong> в вашем регионе.<br><br>
        Мы есть в <strong style="color: #0077FF;">ВКонтакте</strong> — подпишитесь на запасной канал связи!
      </p>
      <div style="display: flex; gap: 10px; margin-top: 20px;">
        <button onclick="hideVkModal()"
          style="flex: 1; padding: 12px; border-radius: 10px; border: 2px solid rgba(255,140,0,0.5); background: rgba(255,107,0,0.15); color: #FFA500; font-weight: 700; cursor: pointer; transition: all 0.3s;">
          Понятно
        </button>
        <a href="https://vk.com/rezwift" target="_blank" onclick="hideVkModal()"
          style="flex: 1; padding: 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #0077FF 0%, #0059B3 100%); color: white; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; transition: all 0.3s;">
          <i class="fab fa-vk" style="margin-right: 6px;"></i>Перейти в VK
        </a>
      </div>
    </div>
  </div>

  <!-- Donor Weekly Stats Popup -->
  <div id="weekly-stats-modal" class="modal-overlay" style="display: none;">
    <div class="modal-container" style="max-width: 480px;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));">
        <div class="modal-title-header" style="color: #a78bfa;">
          <span style="font-size: 1.3rem;">📊</span>
          <span>Ваша статистика</span>
        </div>
        <button class="modal-skip-btn" onclick="hideWeeklyStatsModal()" title="Закрыть">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-content" style="padding: 20px;">
        <!-- Stats Grid -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
          <!-- Week Stats -->
          <div
            style="background: rgba(0,0,0,0.3); border-radius: 12px; padding: 14px; border: 1px solid rgba(139, 92, 246, 0.3);">
            <div style="color: #a78bfa; font-weight: 700; font-size: 0.85rem; margin-bottom: 10px;">📅 Эта неделя</div>
            <div id="week-stats-content" style="font-size: 0.85rem; line-height: 1.8; color: rgba(255,255,255,0.9);">
              <div>🚴 <span id="week-count">0</span> тренировок</div>
              <div>📏 <span id="week-distance">0</span> км</div>
              <div>⏱️ <span id="week-duration">0ч 0м</span></div>
              <div>⚡ <span id="week-watts">0</span> Вт (avg)</div>
              <div>⛰️ <span id="week-elevation">0</span> м</div>
            </div>
          </div>
          <!-- Month Stats -->
          <div
            style="background: rgba(0,0,0,0.3); border-radius: 12px; padding: 14px; border: 1px solid rgba(255, 140, 0, 0.3);">
            <div style="color: #FFA500; font-weight: 700; font-size: 0.85rem; margin-bottom: 10px;">📆 Этот месяц</div>
            <div id="month-stats-content" style="font-size: 0.85rem; line-height: 1.8; color: rgba(255,255,255,0.9);">
              <div>🚴 <span id="month-count">0</span> тренировок</div>
              <div>📏 <span id="month-distance">0</span> км</div>
              <div>⏱️ <span id="month-duration">0ч 0м</span></div>
              <div>⚡ <span id="month-watts">0</span> Вт (avg)</div>
              <div>⛰️ <span id="month-elevation">0</span> м</div>
            </div>
          </div>
        </div>

        <!-- Best Activity -->
        <div id="best-activity-section"
          style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 10px; padding: 12px; margin-bottom: 16px; display: none;">
          <div style="color: #10b981; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px;">🏆 Лучшая тренировка
            недели</div>
          <div id="best-activity-info" style="color: rgba(255,255,255,0.9); font-size: 0.9rem;"></div>
        </div>

        <!-- Donor Message -->
        <div style="text-align: center; margin-bottom: 12px; font-size: 0.75rem; color: rgba(255, 215, 0, 0.8);">
          Благодаря вашей поддержке вы видите это сообщение.<br>
          Эта статистика доступна только донатерам. Спасибо! 🧡
        </div>

        <!-- Close Button -->
        <button onclick="hideWeeklyStatsModal()"
          style="width: 100%; padding: 12px; border-radius: 10px; border: 2px solid rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.15); color: #a78bfa; font-weight: 700; cursor: pointer; transition: all 0.3s;">
          Отлично! 🚀
        </button>
      </div>
    </div>
  </div>

  {% endblock %}

  {% block scripts %}
  <!-- ❄️ СНЕЖИНКИ ОТКЛЮЧЕНЫ для производительности
<script src="/static/web/launcher/snowflakes.js"></script>
-->

  <script>
    // VK Backup Channel Popup - показываем только 1 раз И если включено на сервере
    (function () {
      const VK_POPUP_KEY = 'rezwift-vk-backup-shown';

      // Сначала проверяем localStorage
      if (localStorage.getItem(VK_POPUP_KEY)) {
        return; // Уже показывали
      }

      // Проверяем серверную настройку
      fetch('/api/vk-popup-status')
        .then(response => response.json())
        .then(data => {
          if (data.enabled) {
            // Показываем popup через 2 секунды после загрузки
            setTimeout(function () {
              document.getElementById('vk-backup-modal').style.display = 'flex';
            }, 2000);
          }
        })
        .catch(err => {
          // При ошибке не показываем popup
          console.log('VK popup check failed:', err);
        });
    })();

    function hideVkModal() {
      document.getElementById('vk-backup-modal').style.display = 'none';
      localStorage.setItem('rezwift-vk-backup-shown', 'true');
    }
  </script>

  <script>
    // Weekly Stats Popup for Donors
    (function () {
      // Only for donors
      if (!isDonor) return;

      // Fetch stats to get week_key
      fetch('/api/user/weekly-stats')
        .then(response => {
          if (!response.ok) return null;
          return response.json();
        })
        .then(data => {
          if (!data || !data.week_key) return;

          const STATS_KEY = 'rezwift-weekly-stats-' + data.week_key;

          // Already shown this week?
          if (localStorage.getItem(STATS_KEY)) return;

          // Populate stats
          function formatDuration(minutes) {
            const h = Math.floor(minutes / 60);
            const m = minutes % 60;
            return h > 0 ? `${h}ч ${m}м` : `${m}м`;
          }

          // Week stats
          if (data.week) {
            document.getElementById('week-count').textContent = data.week.count;
            document.getElementById('week-distance').textContent = data.week.distance_km;
            document.getElementById('week-duration').textContent = formatDuration(data.week.duration_min);
            document.getElementById('week-watts').textContent = data.week.avg_watts;
            document.getElementById('week-elevation').textContent = data.week.elevation_m.toLocaleString();
          }

          // Month stats
          if (data.month) {
            document.getElementById('month-count').textContent = data.month.count;
            document.getElementById('month-distance').textContent = data.month.distance_km;
            document.getElementById('month-duration').textContent = formatDuration(data.month.duration_min);
            document.getElementById('month-watts').textContent = data.month.avg_watts;
            document.getElementById('month-elevation').textContent = data.month.elevation_m.toLocaleString();
          }

          // Best activity
          if (data.best_activity) {
            document.getElementById('best-activity-section').style.display = 'block';
            document.getElementById('best-activity-info').textContent =
              `"${data.best_activity.name}" — ${data.best_activity.distance_km} км, ${formatDuration(data.best_activity.duration_min)}`;
          }

          // Show popup after 500ms
          setTimeout(function () {
            console.log('WeeklyStats: firing timeout callback');
            const modal = document.getElementById('weekly-stats-modal');
            if (modal) {
              console.log('WeeklyStats: Modal found, moving to body and showing');
              // Move to body to avoid stacking context issues
              document.body.appendChild(modal);

              modal.style.display = 'flex';
              modal.style.zIndex = '2147483647'; // Max int value
              modal.style.visibility = 'visible';
              modal.style.opacity = '1';

              const rect = modal.getBoundingClientRect();
              console.log('WeeklyStats: Styles applied. Rect:', rect.width, 'x', rect.height, 'at', rect.top, ',', rect.left);
            } else {
              console.error('WeeklyStats: Modal element NOT found in DOM!');
            }
          }, 500);
        })
        .catch(err => {
          // Silent fail
        });
    })();

    function hideWeeklyStatsModal() {
      document.getElementById('weekly-stats-modal').style.display = 'none';
      // Mark as shown for this week - get key from API response stored in data attribute
      const now = new Date();
      const weekNum = getWeekNumber(now);
      localStorage.setItem('rezwift-weekly-stats-' + now.getFullYear() + '-W' + weekNum, 'true');
    }

    function getWeekNumber(d) {
      d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
      var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
      var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
      return weekNo;
    }
  </script>

  <script>
    // === АНИМАЦИЯ ПЕЧАТИ ЗАГОЛОВКА ===
    const phrases = [
      'Ваш Резвифт',
      'Поехали кататься?',
      'Сегодня точно едем!',
      'Крути педали, будь счастлив',
      'Пора жечь ватты!',
      'Расскажи друзьям!',
      'Позови друга покататься',
      'Поддержи проект!',
      'Донат = мотивация',
      'Пираты не платят... но ты можешь',
      'Zwift бесплатно? Легко!',
      'Каждый ватт на счету',
      'Ride On!',
      'Трейнер ждёт тебя',
      'Добро пожаловать домой',
      'Бесплатный Zwift для всех',
      'Не пропусти тренировку!',
      'Нет Zwift? Есть reZwift!'
    ];

    let currentPhraseIndex = 0;
    let currentCharIndex = 0;
    let isDeleting = false;
    let typingSpeed = 100;

    function updateThemeIcon() {
      const icon = document.getElementById('theme-icon');
      if (icon) {
        const theme = document.documentElement.getAttribute('data-theme') || 'light';
        icon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
      }
    }

    function typeHeader() {
      const header = document.getElementById('typing-header');
      if (!header) return;

      const currentPhrase = phrases[currentPhraseIndex];

      if (isDeleting) {
        // Удаление символов
        currentCharIndex--;
        header.textContent = currentPhrase.substring(0, currentCharIndex);
        typingSpeed = 50;

        if (currentCharIndex === 0) {
          isDeleting = false;
          currentPhraseIndex = (currentPhraseIndex + 1) % phrases.length;
          typingSpeed = 500; // Пауза перед новой фразой
        }
      } else {
        // Печать символов
        currentCharIndex++;
        header.textContent = currentPhrase.substring(0, currentCharIndex);
        typingSpeed = 100 + Math.random() * 50; // Рандомная скорость печати

        if (currentCharIndex === currentPhrase.length) {
          isDeleting = true;
          typingSpeed = 2000; // Пауза перед удалением
        }
      }

      setTimeout(typeHeader, typingSpeed);
    }

    document.addEventListener('DOMContentLoaded', function () {
      // Обновляем иконку темы при загрузке
      updateThemeIcon();

      // Запускаем анимацию печати через 2 секунды
      setTimeout(typeHeader, 2000);

      // Слушаем изменение темы
      window.addEventListener('themechange', updateThemeIcon);

      // Загрузка статуса техобслуживания
      loadMaintenanceStatus();
    });

    // === MAINTENANCE BANNER ===
    let maintenanceInterval = null;

    function loadMaintenanceStatus() {
      fetch('/api/maintenance-status')
        .then(response => response.json())
        .then(data => {
          const banner = document.getElementById('maintenance-banner');
          const textDisplay = document.getElementById('maintenance-text-display');
          const countdown = document.getElementById('maintenance-countdown');

          if (data.enabled && data.text) {
            banner.style.display = 'block';
            textDisplay.textContent = data.text;

            if (data.time) {
              // Запуск обратного отсчёта
              const targetTime = new Date(data.time);
              const serverTime = new Date(data.server_time);
              const offset = Date.now() - serverTime.getTime();

              updateMaintenanceCountdown(targetTime, offset, countdown);
              maintenanceInterval = setInterval(() => {
                updateMaintenanceCountdown(targetTime, offset, countdown);
              }, 1000);
            } else {
              countdown.textContent = '';
            }
          } else {
            banner.style.display = 'none';
            if (maintenanceInterval) {
              clearInterval(maintenanceInterval);
              maintenanceInterval = null;
            }
          }
        })
        .catch(err => console.error('Error loading maintenance status:', err));
    }

    function updateMaintenanceCountdown(targetTime, offset, element) {
      const now = Date.now() - offset;
      const diff = targetTime.getTime() - now;

      if (diff <= 0) {
        element.textContent = 'Работы уже начались';
        if (maintenanceInterval) {
          clearInterval(maintenanceInterval);
          maintenanceInterval = null;
        }
        return;
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      let timeStr = 'До начала: ';
      if (days > 0) timeStr += `${days}д `;
      if (hours > 0 || days > 0) timeStr += `${hours}ч `;
      timeStr += `${minutes}м ${seconds}с`;

      element.textContent = timeStr;
    }
  </script>

  <!-- Chart.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

  <script>
    // === ГРАФИК ОНЛАЙНА (v2.0 - улучшенная версия) ===
    let onlineChart = null;
    let currentPeriod = 'day';
    let chartData = null;
    let lastRefreshTime = Date.now();

    // Названия миров для тултипов
    const WORLD_NAMES = {
      watopia: '🏝️ Watopia',
      makuriislands: '🎌 Makuri Islands',
      london: '🇬🇧 London',
      france: '🇫🇷 France',
      newyork: '🗽 New York',
      yorkshire: '🏔️ Yorkshire',
      innsbruck: '⛷️ Innsbruck',
      paris: '🗼 Paris',
      scotland: '🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scotland',
      richmond: '🇺🇸 Richmond'
    };

    // Инициализация графика при загрузке страницы
    document.addEventListener('DOMContentLoaded', function () {
      loadOnlineHistory(currentPeriod);
      updateRefreshIndicator();
      setInterval(updateRefreshIndicator, 30000);
    });

    function updateRefreshIndicator() {
      const refreshText = document.getElementById('refreshText');
      if (!refreshText) return;

      const elapsed = Math.floor((Date.now() - lastRefreshTime) / 1000);
      if (elapsed < 60) {
        refreshText.textContent = 'Обновлено только что';
      } else if (elapsed < 300) {
        refreshText.textContent = `Обновлено ${Math.floor(elapsed / 60)} мин. назад`;
      } else {
        refreshText.textContent = `Обновлено ${Math.floor(elapsed / 60)} мин. назад`;
      }
    }

    function switchChartPeriod(period) {
      currentPeriod = period;

      // Обновляем активную кнопку с анимацией
      document.querySelectorAll('.period-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.dataset.period === period) {
          btn.classList.add('active');
        }
      });

      loadOnlineHistory(period);
    }

    async function loadOnlineHistory(period, silent = false) {
      const loadingEl = document.getElementById('chartLoading');
      const chartEl = document.getElementById('onlineChart');
      const noDataEl = document.getElementById('chartNoData');
      const statsEl = document.getElementById('chartStats');
      const refreshIndicator = document.getElementById('chartRefreshIndicator');

      // Показываем загрузку
      if (!silent) {
        loadingEl.style.display = 'flex';
        chartEl.style.display = 'none';
        noDataEl.style.display = 'none';
        statsEl.style.display = 'none';
      }

      // Показываем индикатор обновления
      if (refreshIndicator) {
        refreshIndicator.classList.add('refreshing');
      }

      try {
        const response = await fetch(`/api/online/history?period=${period}`);
        const data = await response.json();

        loadingEl.style.display = 'none';
        lastRefreshTime = Date.now();
        updateRefreshIndicator();

        if (data.length === 0) {
          noDataEl.style.display = 'flex';
          return;
        }

        chartData = data; // Сохраняем для тултипов
        chartEl.style.display = 'block';
        statsEl.style.display = 'grid';

        renderChart(data, period);
        updateStats(data);
      } catch (error) {
        console.error('Ошибка загрузки истории онлайна:', error);
        loadingEl.style.display = 'none';
        noDataEl.style.display = 'flex';
      } finally {
        if (refreshIndicator) {
          refreshIndicator.classList.remove('refreshing');
        }
      }
    }

    function renderChart(data, period) {
      const ctx = document.getElementById('onlineChart').getContext('2d');

      // Удаляем старый график если есть
      if (onlineChart) {
        onlineChart.destroy();
      }

      // Подготавливаем данные
      const labels = data.map(d => {
        const date = new Date(d.timestamp * 1000);
        if (period === 'day') {
          return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
        } else if (period === 'week') {
          return date.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric' }) +
            ' ' + date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
        } else {
          return date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
        }
      });
      const values = data.map(d => d.total);

      // Создаём красивый градиент
      const gradient = ctx.createLinearGradient(0, 0, 0, 180);
      gradient.addColorStop(0, 'rgba(255, 140, 0, 0.6)');
      gradient.addColorStop(0.5, 'rgba(255, 140, 0, 0.2)');
      gradient.addColorStop(1, 'rgba(255, 140, 0, 0)');

      // Определяем количество тиков в зависимости от периода
      let maxTicksLimit = 6;
      if (period === 'week') maxTicksLimit = 7;
      if (period === 'month') maxTicksLimit = 10;

      onlineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: 'Игроков онлайн',
            data: values,
            borderColor: '#FF8C00',
            backgroundColor: gradient,
            borderWidth: 2.5,
            fill: true,
            tension: 0.35,
            pointRadius: period === 'day' ? 0 : 1,
            pointHoverRadius: 7,
            pointHoverBackgroundColor: '#FFD700',
            pointHoverBorderColor: '#FF8C00',
            pointHoverBorderWidth: 3,
            segment: {
              borderColor: ctx => {
                // Подсветка максимального значения
                return '#FF8C00';
              }
            }
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            intersect: false,
            mode: 'index'
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(15, 15, 20, 0.95)',
              titleColor: '#FFD700',
              titleFont: { size: 13, weight: 'bold' },
              bodyColor: '#FFA500',
              bodyFont: { size: 11 },
              borderColor: 'rgba(255, 140, 0, 0.5)',
              borderWidth: 2,
              cornerRadius: 12,
              padding: 14,
              displayColors: false,
              callbacks: {
                title: function (context) {
                  const idx = context[0].dataIndex;
                  const d = chartData[idx];
                  const date = new Date(d.timestamp * 1000);
                  return date.toLocaleString('ru-RU', {
                    weekday: 'short',
                    day: 'numeric',
                    month: 'short',
                    hour: '2-digit',
                    minute: '2-digit'
                  });
                },
                label: function (context) {
                  return `👥 Всего: ${context.raw} игроков`;
                },
                afterLabel: function (context) {
                  const idx = context.dataIndex;
                  const d = chartData[idx];
                  if (!d) return '';

                  // Собираем данные по мирам
                  const worlds = [];
                  Object.keys(WORLD_NAMES).forEach(key => {
                    if (d[key] && d[key] > 0) {
                      worlds.push({ name: WORLD_NAMES[key], count: d[key] });
                    }
                  });

                  // Сортируем по количеству
                  worlds.sort((a, b) => b.count - a.count);

                  if (worlds.length === 0) return '';

                  // Формируем строки
                  const lines = ['\n──────────────'];
                  worlds.forEach(w => {
                    lines.push(`${w.name}: ${w.count}`);
                  });
                  return lines.join('\n');
                }
              }
            }
          },
          scales: {
            x: {
              display: true,
              grid: {
                display: false
              },
              ticks: {
                color: 'rgba(255, 165, 0, 0.7)',
                font: { size: 9, weight: '500' },
                maxRotation: 0,
                maxTicksLimit: maxTicksLimit
              }
            },
            y: {
              display: true,
              beginAtZero: true,
              grid: {
                color: 'rgba(255, 140, 0, 0.08)'
              },
              ticks: {
                color: 'rgba(255, 165, 0, 0.7)',
                font: { size: 9, weight: '500' },
                stepSize: 1,
                precision: 0
              }
            }
          },
          animation: {
            duration: 1000,
            easing: 'easeOutQuart'
          }
        }
      });
    }

    function updateStats(data) {
      const values = data.map(d => d.total);
      const max = Math.max(...values);
      const min = Math.min(...values);
      const avg = Math.round(values.reduce((a, b) => a + b, 0) / values.length);

      // Находим время пика
      const maxIndex = values.indexOf(max);
      const peakTime = new Date(data[maxIndex].timestamp * 1000);
      const peakTimeStr = peakTime.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });

      // Анимируем значения
      animateValue('statMax', 0, max, 600);
      animateValue('statAvg', 0, avg, 600);
      animateValue('statMin', 0, min, 600);
      document.getElementById('statPeakTime').textContent = peakTimeStr;
    }

    function animateValue(id, start, end, duration) {
      const el = document.getElementById(id);
      if (!el) return;

      const range = end - start;
      const startTime = performance.now();

      function update(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOutCubic
        const current = Math.round(start + range * easeProgress);
        el.textContent = current;

        if (progress < 1) {
          requestAnimationFrame(update);
        }
      }

      requestAnimationFrame(update);
    }

    // Автообновление каждые 3 минуты (тихое обновление)
    setInterval(() => {
      loadOnlineHistory(currentPeriod, true);
    }, 180000);
  </script>
  {% endblock %}