body {
      transition: background-color 0.3s, color 0.3s;
      background-color: #f8f9fa;
      color: #333;
    }

    body.dark-mode {
      background-color: #181c2f;
      color: #eee;
    }

    .theme-toggle {
      position: fixed;
      top: 10px;
      left: 10px;
      width: 50px;
      height: 50px;
      background-color: #3498db;
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 22px;
      cursor: pointer;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, transform 0.3s;
    }

    .theme-toggle:hover {
      background-color: #2980b9;
      transform: scale(1.1);
    }

    body.dark-mode .theme-toggle {
      background-color: #222;
      color: #ffcc00;
    }

    body.dark-mode .theme-toggle:hover {
      background-color: #444;
    }

    .theme-toggle.rotating {
      animation: spin 0.4s linear;
    }

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