* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, Arial, sans-serif;
    }
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: linear-gradient(135deg, #111827, #1f2937, #111827);
      color: #fff;
    }
    h1 {
      font-size: 1.8rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 1.5rem;
      color: #a78bfa; /* purple */
      letter-spacing: 1px;
    }
    h2 {
      font-size: 1rem;
      font-weight: 600;
      color: #e5e7eb;
      margin-bottom: 0.5rem;
    }
    .card {
      background: #1f2937;
      padding: 2rem;
      border-radius: 1rem;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }
    input[type="file"] {
      display: block;
      width: 100%;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.9rem;
      color: #d1d5db;
    }
    input[type="password"] {
      width: 100%;
      padding: 0.6rem 1rem;
      border: none;
      border-radius: 999px;
      background: #374151;
      color: #fff;
      font-size: 0.9rem;
      margin-top: 0.5rem;
      outline: none;
      transition: box-shadow 0.2s;
    }
    input[type="password"]::placeholder {
      color: #9ca3af;
    }
    input[type="password"]:focus {
      box-shadow: 0 0 0 2px #8b5cf6;
    }
    button {
      width: 100%;
      padding: 0.7rem;
      margin-top: 0.8rem;
      border: none;
      border-radius: 999px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .btn-purple {
      background: #8b5cf6;
    }
    .btn-purple:hover {
      background: #7c3aed;
    }
    .btn-blue {
      background: #3b82f6;
    }
    .btn-blue:hover {
      background: #2563eb;
    }
    button:active {
      transform: scale(0.97);
    }
    #loader {
      margin-top: 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: #9ca3af;
      animation: pulse 1.5s infinite;
    }
    #status {
      margin-top: 0.8rem;
      text-align: center;
      font-weight: 600;
      font-size: 0.9rem;
    }
    .text-green { color: #34d399; }
    .text-red { color: #f87171; }
    @keyframes pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }