@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e293b;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('{{ url_for("static", filename="css/images/Arts to GoGo Gradient.png") }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.08;
            z-index: 0;
            pointer-events: none;
        }

        body > * {
            position: relative;
            z-index: 1;
        }

        .admin-container {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.25);
            border-radius: 28px;
            padding: 54px 48px;
            width: 100%;
            max-width: 480px;
            text-align: center;
        }

        .logo-section {
            margin-bottom: 20px;
            animation: fadeInScale 0.6s ease-out;
        }

        .admin-logo {
            max-width: 140px;
            height: auto;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        h1 {
            font-size: 2rem;
            font-weight: 500;
            color: #0f172a;
            margin-bottom: 12px;
        }

        p.description {
            color: #64748b;
            font-size: 1rem;
            margin-bottom: 32px;
        }

        .tag {
            display: inline-block;
            padding: 8px 18px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 18px;
            text-align: left;
        }

        label {
            font-weight: 500;
            font-size: 0.92rem;
            color: #334155;
        }

        input {
            width: 100%;
            padding: 16px 18px;
            border-radius: 14px;
            border: 1px solid rgba(203, 213, 225, 0.8);
            background: rgba(248, 250, 252, 0.85);
            font-size: 1rem;
            transition: border 0.2s ease, box-shadow 0.2s ease;
        }

        input:focus {
            outline: none;
            border-color: rgba(37, 99, 235, 0.6);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
        }

        button {
            padding: 16px;
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        button:hover {
            opacity: 0.92;
        }

        .flash-messages {
            margin-bottom: 20px;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .flash {
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 0.9rem;
        }

        .flash.error {
            background: rgba(248, 113, 113, 0.12);
            color: #b91c1c;
            border: 1px solid rgba(248, 113, 113, 0.35);
        }

        .flash.success {
            background: rgba(74, 222, 128, 0.12);
            color: #047857;
            border: 1px solid rgba(74, 222, 128, 0.35);
        }

        .back-link {
            display: inline-block;
            margin-top: 24px;
            color: #2563eb;
            text-decoration: none;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .admin-container {
                margin: 24px;
                padding: 38px 28px;
            }

            h1 {
                font-size: 1.75rem;
            }

            .admin-logo {
                max-width: 120px;
            }
        }

        @media (max-width: 480px) {
            .admin-container {
                margin: 16px;
                padding: 28px 20px;
            }

            h1 {
                font-size: 1.5rem;
            }

            .admin-logo {
                max-width: 100px;
            }

            input {
                padding: 14px 16px;
                font-size: 0.95rem;
            }

            button {
                padding: 14px;
                font-size: 0.95rem;
            }

            .tag {
                font-size: 0.8rem;
                padding: 6px 14px;
            }
        }

        @media (max-width: 320px) {
            .admin-container {
                margin: 12px;
                padding: 24px 16px;
            }

            h1 {
                font-size: 1.25rem;
            }

            .admin-logo {
                max-width: 80px;
            }
        }

        /* Prevent horizontal overflow */
        html, body {
            overflow-x: hidden;
            max-width: 100vw;
        }