/* ---------- CSS variables from Keith Site index.html ---------- */
        * {margin: 0;padding: 0;box-sizing: border-box;transition: background-color 0.2s ease, border-color 0.2s, color 0.2s}

        :root {
            --primary: #00df9a;
            --secondary: #7c3aed;
            --dark: #0a0a0a;
            --darker: #111111;
            --light: #f5f5f5;
            --gray: #a1a1aa;
            --border: rgba(255, 255, 255, 0.1);
            --card-bg: var(--darker);
            --text-color: var(--light);
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
            --radius: 0.75rem;
            --success: #10b981;
        }

        body {font-family: 'Inter', sans-serif;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 1.5rem;background: var(--dark);color: var(--text-color);transition: background 0.3s, color 0.3s}

        /* main card */
        .verify-card {max-width: 520px;width: 100%;background: var(--card-bg);border: 4px solid #000;border-radius: var(--radius);padding: 2.4rem 2.2rem 2.8rem;box-shadow: var(--shadow);position: relative;z-index: 2;transition: background 0.3s, border-color 0.3s}

        /* header with theme toggle */
        .card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.2rem}

        .avatar-circle {width: 100px;height: 100px;margin: 0 auto 1.5rem;border-radius: 50%;background-image: url('https://files.catbox.moe/9zqj7g.jpg');background-size: cover;background-position: center;border: 3px solid var(--primary);box-shadow: 0 8px 14px -8px rgba(0, 223, 154, 0.2)}

        h2 {font-weight: 700;font-size: 2rem;letter-spacing: -0.02em;text-align: center;margin-bottom: 0.25rem;color: var(--text-color)}

        h2 span {color: #000}

        .subhead {text-align: center;font-weight: 400;font-size: 0.95rem;margin-bottom: 2rem;border-bottom: 3px solid #000;padding-bottom: 1.2rem;color: var(--gray)}

        .subhead i {color: #000;margin: 0 4px}

        .input-label {display: flex;align-items: center;gap: 0.5rem;font-weight: 600;font-size: 0.85rem;text-transform: uppercase;letter-spacing: 0.02em;margin-bottom: 0.4rem;color: var(--text-color)}

        .input-label i {color: #000;width: 20px}

        .username-field {display: flex;align-items: center;border-radius: 60px;padding: 0.1rem 0.1rem 0.1rem 1.6rem;border: 3px solid #000;transition: border 0.15s, box-shadow 0.15s;margin-bottom: 0.4rem;background: #ffffff}

        .username-field:focus-within {border-color: var(--primary);box-shadow: 4px 4px 0 0 #000}

        .username-field i {color: var(--gray);font-size: 1rem;margin-right: 0.5rem}

        .username-field input {flex: 1;background: transparent;border: none;padding: 1rem 0.8rem 1rem 0;font-size: 1rem;font-weight: 400;outline: none;color: var(--text-color)}

        .username-field input::placeholder {color: var(--gray)}

        .field-hint {font-size: 0.82rem;margin-left: 1rem;margin-bottom: 1.8rem;display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.8rem;color: var(--gray)}

        .field-hint i {color: #000;width: 18px}

        .field-hint a {color: #000;text-decoration: none;font-weight: 500;border-bottom: 1px dotted rgba(0, 223, 154, 0.3)}

        .field-hint a:hover {color: #00c98a}

        .repo-badge {border-radius: 40px;padding: 0.3rem 1rem;font-size: 0.8rem;font-weight: 500;display: inline-flex;align-items: center;gap: 6px;border: 3px solid #000;color: var(--text-color);background: #ffffff}

        .repo-badge i {color: #000}

        /* error */
        #errorMessage {border-left: 5px solid #ef4444;padding: 0.9rem 1.2rem;border-radius: 16px;margin: 1.5rem 0 1.2rem;font-size: 0.9rem;display: none;align-items: center;gap: 0.7rem;font-weight: 500;background: rgba(239, 68, 68, 0.1);color: #ef4444}

        #errorMessage i {color: #ef4444}

        /* buttons */
        .btn {display: block;width: 100%;border: none;font-weight: 600;font-size: 1rem;padding: 1rem 1.8rem;border-radius: 60px;cursor: pointer;transition: all 0.15s ease;font-family: 'Inter', sans-serif;text-align: center}

        .btn i {margin-right: 8px}

        .btn-primary {background: var(--primary);color: #000;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .btn-primary:hover:not(:disabled) {background: #00c98a;border-color: #00c98a;transform: translateY(-2px);box-shadow: 0 8px 20px -8px rgba(0, 223, 154, 0.3)}

        .btn-primary:disabled {opacity: 0.6;cursor: not-allowed;transform: none !important}

        .btn-green {background: var(--primary);color: #000;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .btn-green:hover {background: #00c98a;border-color: #00c98a;transform: translateY(-2px)}

        .action-group {margin-top: 1.5rem;display: flex;flex-direction: column;gap: 0.8rem}

        #forkButton,
        #updateButton {display: none}

        /* footer */
        .keith-footer {border-radius: 60px;padding: 0.9rem 1.2rem;margin: 1.8rem 0 0.2rem;border: 3px solid #000;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 12px;font-size: 1rem;color: var(--gray);background: #fefce8}

        .keith-footer .fab {font-size: 1.8rem;color: #000}

        .keith-footer span {font-weight: 500;background: rgba(0, 223, 154, 0.08);padding: 0.2rem 1rem;border-radius: 40px;color: var(--text-color)}

        .footer-note {font-size: 0.7rem;margin-top: 1.8rem;text-align: center;border-top: 3px solid #000;padding-top: 1.2rem;color: var(--gray)}

        /* modal */
        .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(5px);align-items: center;justify-content: center;z-index: 2000}

        .modal-content {background: var(--card-bg);max-width: 380px;width: 90%;border-radius: var(--radius);padding: 2rem 1.8rem;border: 1px solid var(--primary);box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.5);text-align: center;color: var(--text-color)}

        .modal-content img {width: 100%;border-radius: 18px;border: 2px solid #000;margin-bottom: 1.5rem}

        .modal-content p {margin-bottom: 1.5rem;color: var(--gray)}

        .modal-content p strong {color: var(--text-color)}

        .modal-content button {background: var(--primary);color: #000;padding: 0.9rem 2rem;border-radius: 60px;font-weight: 600;width: 100%;cursor: pointer;transition: 0.2s;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .modal-content button:hover {background: #00c98a;transform: translateY(-2px)}

        /* copyright footer */
        .copyright-footer {text-align: center;padding: 1.2rem 0 0;font-size: 0.85rem;color: var(--gray);border-top: 3px solid #000;margin-top: 1.5rem}

        .copyright-footer .brand {color: #000;font-weight: 500}

        /* responsive */
        @media (max-width: 520px) {
            .verify-card {padding: 1.8rem 1.5rem 2rem}
            .card-header {flex-direction: column;gap: 0.8rem;align-items: stretch}
            .avatar-circle {width: 80px;height: 80px}
            h2 {font-size: 1.6rem}
            .keith-footer {flex-wrap: wrap;gap: 8px;font-size: 0.85rem}
            .keith-footer .fab {font-size: 1.4rem}
        }