:root {
        --accent: #FF1A44;
        --accent-hover: #ff3355;
        --text: #ffffff;
        --glass: rgba(18,18,45,0.88);
        --glass-border: rgba(255,255,255,0.15);
        --error-red: #ff4757;
        --green-glow: #00ff88;
    }

    * { margin:0; padding:0; box-sizing:border-box; }
    body {
        font-family:'Inter',sans-serif;
        min-height:100dvh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:2rem 1rem;
        
        overflow-x:hidden;
    }

    .container {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        max-width:1400px;
        gap:5rem;
        animation:fadeIn 1.2s ease-out;
    }
    @keyframes fadeIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

    /* BRAND SECTION */
    .brand-section { flex:1; text-align:center; }
    .brand-section img { width:250px; height:auto; transition:transform .4s; }
    .brand-section img:hover { transform:scale(1.05); }
     .brand-subtitle {
            font-weight: 600;
            letter-spacing: 5.5px;
            color: #0e0d0dff;
            text-transform: uppercase;
            opacity: 0.92;
            text-shadow: 0 0 12px rgba(255,255,255,0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;

            /* Base size */
            font-size: 0.92rem;

            /* Smart shrinking on small screens */
            font-size: clamp(0.68rem, 2.8vw, 0.92rem);
            letter-spacing: clamp(3px, 1.8vw, 5.5px);

            /* Extra insurance - never wrap */
            display: block;
            width: fit-content;
            margin: 0 auto;
        }

        /* Mobile fine-tuning */
        @media (max-width: 480px) {
            .brand-subtitle {
                font-size: clamp(0.68rem, 2.6vw, 0.85rem) !important;
                letter-spacing: clamp(2.8px, 1.6vw, 4.5px) !important;
            }
        }

    /* FORM SECTION */
    .form-section { flex:0 0 480px; }
    .form-card {
        background:rgba(255,255,255,0.9);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
        border:1px solid var(--glass-border);
        border-radius:32px;
        padding:0.5rem 3.2rem;
        box-shadow:0 15px 45px rgba(0,0,0,0.35),
                    0 0 0 1px rgba(255,255,255,0.05) inset;
        position:relative;
        overflow:hidden;
    }

    .form-title {
        font-family:'Space Grotesk',sans-serif;
        font-size:1.75rem; font-weight:700;
        text-align:center; color:blue;
        text-shadow:0 0 25px rgba(0,255,136,0.5);
        margin-bottom:0.5rem;
    }

    .form-subtitle {
        text-align:center; color:#1e293b; font-size:0.98rem;
        margin-bottom:2.4rem; opacity:0.95;
    }

   /* ZERO SPACING BETWEEN INPUTS */
    .input-group {
        margin-bottom: 12px;   /* Only tiny gap between fields */
    }
    .input-group:last-of-type { margin-bottom: 20px; }

    .input-group input,
    .input-group select {
        width:100%;
        padding:1.45rem 1.8rem;
        font-size:1.15rem;
       
        border:1px solid #0d2452;
        border-radius:22px;
        color:blue;
        margin:0;   /* THIS REMOVES ALL DEFAULT MARGINS */
        display:block;
    }
    .input-group input:focus,
    .input-group select:focus {
        outline:none;
        border-color:blue;
        
        box-shadow:0 0 0 8px rgba(59,130,246,0.25);
        transform:translateY(-1px);
    }

    .error { color:var(--error-red); font-size:0.9rem; margin-top:6px; display:block; min-height:1.2em; }
    .error { color:var(--error-red); font-size:0.9rem; margin-top:0.5rem; display:block; min-height:1.2em; }

    .channel-info {
        background:rgba(59,130,246,0.12);
        padding:1rem;
        border-radius:16px;
        border:1px dashed blue;
        color:#1e293b;
        font-weight:600;
        text-align:center;
        margin:1.5rem 0;
        display:none;
    }

    .loading-text {
        text-align:center;
        color:blue;
        font-weight:500;
        margin:1rem 0;
        display:none;
    }

    .submit-btn {
        width:100%; padding:1.5rem;
        margin-top:1.8rem;
        background:linear-gradient(90deg,var(--accent),var(--accent-hover));
        color:white; border:none; border-radius:22px;
        font-size:1.25rem; font-weight:600; letter-spacing:1.8px;
        cursor:pointer; display:flex; align-items:center;
        justify-content:center; gap:14px;
        transition:all .4s;
        box-shadow:0 15px 50px rgba(255,26,68,0.6);
    }
    .submit-btn:hover:not(:disabled) { transform:translateY(-6px); box-shadow:0 25px 80px rgba(54,10,104,0.8); }
    .submit-btn:disabled { opacity:0.7; cursor:not-allowed; }

    .btn-loading { display:none; align-items:center; gap:12px; }
    .btn-loading i { animation:spin 1s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg)} }

    .signup-link {
        text-align:center;
        margin-top:2.5rem;
        padding-top:2.2rem;
        border-top:1px solid rgba(12,7,7,0.12);
        color:black;
        font-size:1.02rem;
    }
    .signup-link a { color:var(--accent); font-weight:600; text-decoration:none; }
    .signup-link a:hover { color:blue; }

    .footer {
        text-align:center; margin-top:3rem; color:blue; font-size:0.92rem;
    }
    .footer a { color:green; text-decoration:none; margin:0 14px; }
    .footer a:hover { color:var(--accent); }

    /* QR MODAL - PERFECT ON MOBILE & DESKTOP */
    #qrModal {
        display:none;
        position:fixed;
        z-index:9999;
        left:0; top:0; width:100%; height:100%;
        background:rgba(0,0,0,0.85);
        backdrop-filter:blur(10px);
        align-items:center;
        justify-content:center;
        padding:1rem;
    }
    #qrModal.show { display:flex; }

    .qr-content {
        background:white;
        border-radius:28px;
        padding:2.5rem 2rem;
        max-width:420px;
        width:100%;
        text-align:center;
        box-shadow:0 20px 60px rgba(0,0,0,0.5);
        position:relative;
        animation:modalPop 0.4s ease-out;
    }
    @keyframes modalPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }

    .qr-header img { width:140px; margin-bottom:0.5rem; }
    .qr-header .live-dot {
        display:inline-block;
        width:12px; height:12px;
        background:var(--green-glow);
        border-radius:50%;
        box-shadow:0 0 20px var(--green-glow);
        animation:pulse 2s infinite;
    }

    #qrImageContainer img {
        max-width:280px;
        width:100%;
        height:auto;
        border:12px solid white;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(0,0,0,0.3);
        margin:1.5rem 0;
    }

    .qr-ref {
        font-weight:700;
        color:#1e293b;
        font-size:1.1rem;
        margin:1rem 0;
    }

    .download-btn {
        background:var(--accent);
        color:white;
        border:none;
        padding:1rem 2rem;
        border-radius:50px;
        font-size:1.1rem;
        font-weight:600;
        cursor:pointer;
        margin-top:1rem;
        box-shadow:0 10px 30px rgba(255,26,68,0.4);
        transition:all .3s;
    }
    .download-btn:hover { transform:translateY(-4px); box-shadow:0 15px 40px rgba(255,26,68,0.6); }

    .close-modal {
        position:absolute;
        top:16px; right:20px;
        font-size:2rem;
        color:#999;
        cursor:pointer;
    }
    .close-modal:hover { color:#333; }
    /* ADD THIS TO YOUR EXISTING <style> BLOCK */
    .input-group input::placeholder,
    .input-group select::placeholder {
        color: blue !important;      /* Beautiful blue */
        opacity: 1;                     /* Makes it solid (works in Firefox too) */
        font-weight: 500;
    }

    /* For older browsers (Safari, etc.) */
    .input-group input::-webkit-input-placeholder { color: blue }
    .input-group input:-moz-placeholder           { color:blue opacity:1; }
    .input-group input::-moz-placeholder          { color: blue; opacity:1; }
    .input-group input:-ms-input-placeholder       { color: blue; }
        .hide-on-capture { -webkit-print-color-display:none; print-color-adjust:exact; }

    /* RESPONSIVE */
    @media (max-width:992px) {
        .container { flex-direction:column; gap:3rem; padding-top:0.2rem; text-align:center; }
        .brand-section img { width:140px; }
        .form-section { flex:none; width:100%; max-width:480px; margin:0 auto; }
        .form-card { padding:3rem 2.5rem; }
    }
    @media (max-width:480px) {
        body { padding:1.5rem 1rem; }
        .form-card { padding:0.5rem 2rem; border-radius:28px; }
        .form-title { font-size:1.6rem; }
        #qrImageContainer img { max-width:240px; border-width:10px; }
        .qr-content { padding:2rem 1.5rem; }
    }