@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700;900&display=swap');

        :root {
            --yellow: #FFD100;
            --pink: #FF6AC1;
            --cyan: #00E5FF;
            --green: #B2FF59;
            --white: #ffffff;
            --black: #000000;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lexend', sans-serif; }
        body { background-color: #f0f0f0; color: var(--black); overflow-x: hidden; }

        /* --- Navigation --- */
        nav {
            background: var(--white);
            border-bottom: 4px solid var(--black);
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 900;
            text-decoration: none;
            color: var(--black);
            text-transform: uppercase;
            border: 3px solid var(--black);
            padding: 5px 15px;
            background: var(--yellow);
            box-shadow: 4px 4px 0px var(--black);
        }

        /* --- Generator --- */
        #generator {
            padding: 60px 5%;
            display: flex;
            justify-content: center;
            min-height: 80vh;
            align-items: center;
        }

        .neo-card {
            background: var(--white);
            border: 4px solid var(--black);
            box-shadow: 12px 12px 0px var(--black);
            padding: 40px;
            width: 100%;
            max-width: 1000px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        @media (max-width: 850px) { .neo-card { grid-template-columns: 1fr; } }

        .input-section { display: flex; flex-direction: column; gap: 20px; }
        label { font-weight: 900; text-transform: uppercase; font-size: 0.9rem; }

        input {
            width: 100%;
            padding: 15px;
            border: 3px solid var(--black);
            font-size: 1rem;
            font-weight: 700;
            box-shadow: 4px 4px 0px var(--black);
            outline: none;
        }

        /* --- Swatches (No White) --- */
        .swatch-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }

        .swatch {
            width: 45px;
            height: 45px;
            border: 3px solid var(--black);
            cursor: pointer;
            box-shadow: 3px 3px 0px var(--black);
            transition: 0.1s;
        }

        .swatch.active {
            outline: 3px solid var(--pink);
            outline-offset: 2px;
            transform: translate(2px, 2px);
            box-shadow: 1px 1px 0px var(--black);
        }

        .btn {
            background: var(--green);
            color: var(--black);
            padding: 15px 30px;
            border: 3px solid var(--black);
            font-weight: 900;
            font-size: 1.1rem;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 6px 6px 0px var(--black);
        }

        .btn:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0px var(--black); }

        /* --- Result & Loading --- */
        .result-section {
            background: #e0e0e0;
            border: 3px dashed var(--black);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            min-height: 350px;
            position: relative;
        }

        #loader {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .pulse-box {
            width: 60px;
            height: 60px;
            background: var(--black);
            border: 4px solid var(--black);
            box-shadow: 6px 6px 0px var(--black);
            animation: bounce 0.6s infinite alternate;
        }

        @keyframes bounce {
            from { transform: scale(1); }
            to { transform: scale(1.2) rotate(10deg); }
        }

        #qr-display-container {
            background: var(--white);
            padding: 20px;
            border: 4px solid var(--black);
            box-shadow: 10px 10px 0px var(--black);
            display: none;
            text-align: center;
        }

        #qrcode canvas {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .status-badge {
            position: absolute;
            top: -15px;
            right: -15px;
            background: var(--pink);
            color: white;
            padding: 5px 15px;
            border: 3px solid var(--black);
            font-weight: 900;
            transform: rotate(5deg);
        }

        /* --- Footer --- */
        footer {
            background: var(--black);
            color: var(--white);
            padding: 40px 5%;
            text-align: center;
            border-top: 10px solid var(--pink);
        }

        .credit {
            margin-top: 15px;
            display: inline-block;
            background: var(--yellow);
            color: var(--black);
            padding: 5px 15px;
            font-weight: 900;
            border: 2px solid var(--white);
            text-transform: uppercase;
            font-size: 0.8rem;
            transform: rotate(-1deg);
        }