:root {
      /* Dark theme (default) */
      --bg-primary: #36393f;
      --bg-secondary: #2f3136;
      --bg-tertiary: #202225;
      --text-primary: #dcddde;
      --text-secondary: #b9bbbe;
      --text-muted: #72767d;
      --border-color: #202225;
      --accent: #5865f2;
      --danger: #ed4245;
      --success: #3ba55d;
      --warning: #faa81a;
      --hover-bg: rgba(79, 84, 92, 0.16);
    }

    [data-theme="light"] {
      /* Light theme */
      --bg-primary: #ffffff;
      --bg-secondary: #f2f3f5;
      --bg-tertiary: #e3e5e8;
      --text-primary: #060607;
      --text-secondary: #4e5058;
      --text-muted: #5c5e66;
      --border-color: #d4d4d4;
      --accent: #5865f2;
      --danger: #da373c;
      --success: #23a559;
      --warning: #f0b232;
      --hover-bg: rgba(116, 127, 141, 0.08);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      position: relative;
      transition: background-color 0.2s, color 0.2s;
    }

    .theme-toggle-top {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border: none;
      padding: 10px 14px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .theme-toggle-top:hover {
      background: var(--hover-bg);
    }

    .login-container {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 40px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
      text-align: center;
      max-width: 480px;
      width: 90%;
    }

    .logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    h1 {
      color: var(--text-primary);
      margin-bottom: 10px;
      font-size: 26px;
      line-height: 1.3;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }

    h1 .title-line-1 {
      display: block;
    }

    h1 .title-line-2 {
      display: block;
    }

    p {
      color: var(--text-secondary);
      margin-bottom: 30px;
      font-size: 16px;
    }

    .error {
      background: var(--danger);
      color: white;
      padding: 12px;
      border-radius: 4px;
      margin-bottom: 20px;
      display: none;
    }

    .error.show {
      display: block;
    }

    .login-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .login-btn:hover {
      background: #4752c4;
    }

    .appeal-btn {
      margin-top: 15px;
      background: linear-gradient(135deg, #ffa500 0%, #ff6347 100%);
    }

    .appeal-btn:hover {
      background: linear-gradient(135deg, #ffb733 0%, #ff8267 100%);
    }

    .appeal-icon {
      margin-right: 8px;
    }

    .discord-icon {
      width: 24px;
      height: 24px;
    }

    .features {
      margin-top: 30px;
      text-align: left;
    }

    .feature {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      color: #b9bbbe;
      font-size: 14px;
    }

    .feature svg {
      margin-right: 10px;
      flex-shrink: 0;
    }

    .hidden {
      display: none;
    }

    .install-prompt {
      margin-top: 20px;
      padding: 15px;
      background: #2f3136;
      border: 1px solid #5865f2;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .install-prompt-text {
      margin-bottom: 10px;
      color: #dcddde;
      flex-basis: 100%;
    }

    .install-action {
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .install-action-confirm {
      background: #3ba55d;
      color: white;
      margin-right: 10px;
    }

    .install-action-confirm:hover {
      background: #2d8a4a;
    }

    .install-action-dismiss {
      background: #4f545c;
      color: white;
    }

    .install-action-dismiss:hover {
      background: #626872;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
      .login-container {
        padding: 30px 20px;
        width: 95%;
        margin: 20px;
      }

      h1 {
        font-size: 24px;
      }

      p {
        font-size: 14px;
      }

      .login-btn {
        padding: 12px 20px;
        font-size: 14px;
      }

      .logo {
        width: 60px;
        height: 60px;
        font-size: 30px;
      }

      .features {
        margin-top: 20px;
      }

      .feature {
        font-size: 13px;
      }
    }

    @media (max-width: 480px) {
      .login-container {
        padding: 25px 15px;
      }

      h1 {
        font-size: 20px;
      }

      p {
        font-size: 13px;
      }

      .feature {
        font-size: 12px;
      }
    }