:root {
      --card-bg: #1a1a2e;
      --card-glow: 0 0 10px rgba(164, 92, 255, 0.3);
      --gradient: linear-gradient(90deg, #a45cff, #8c6eff);
      --accent: #2f2f45;
      --nav-bg: #141421;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #0f0f1a;
      font-family: 'Montserrat', sans-serif;
      color: #f3f3f7;
    }

    .navbar {
      background-color: var(--nav-bg);
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #2b2b40;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .navbar-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .navbar-left img {
      width: 36px;
      height: 36px;
    }

    .navbar-left h1 {
      font-size: 1.5rem;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
    }

    .nav-links {
      display: flex;
      gap: 1.5rem;
    }

    .nav-links a {
      color: #d0d0ff;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .nav-links a:hover {
      color: #a45cff;
    }

    .stat-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 2rem 2.5rem;
      box-shadow: var(--card-glow);
      max-width: 800px;
      margin: 3rem auto;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .stat-title {
      font-size: 2.5rem;
      font-weight: bold;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.5rem;
      text-align: center;
      letter-spacing: 1px;
    }

    .stat-time {
      color: #aaaacc;
      text-align: center;
      margin-bottom: 0.5rem;
      font-size: 1rem;
    }

    #totalAPI {
      color: #aaaacc;
      text-align: center;
      margin-bottom: 2rem;
      font-size: 1rem;
    }

    .stat-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 12px;
      overflow: hidden;
      background-color: #14141f;
      box-shadow: inset 0 0 0 1px #1f1f2e;
    }

    .stat-table th,
    .stat-table td {
      padding: 1rem 1.2rem;
      text-align: left;
      font-size: 1rem;
    }

    .stat-table th {
      background-color: #1e1e30;
      color: #a8a8ff;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.9rem;
      border-bottom: 1px solid #29293f;
    }

    .stat-table td {
      color: #e0e0f0;
      border-bottom: 1px solid #242436;
    }

    .stat-table tr:last-child td {
      border-bottom: none;
    }
    .total-box {
        background-color: #14141f;
        color: #f0f0ff;
        padding: 1rem 1.5rem;
        border: 1px solid #2c2c40;
        border-radius: 12px;
        font-size: 1.2rem;
        font-weight: 600;
        text-align: center;
        margin: 1rem auto 2rem auto;
        max-width: 300px;
        box-shadow: 0 0 10px rgba(164, 92, 255, 0.2);
        background-image: linear-gradient(135deg, rgba(164, 92, 255, 0.1), rgba(140, 110, 255, 0.08));
    }
    @media (max-width: 600px) {
      .stat-card {
        padding: 1.5rem 1rem;
      }

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

      .stat-table th,
      .stat-table td {
        padding: 0.8rem;
        font-size: 0.95rem;
      }

      .nav-links {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
      }

      .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
    }