:root{
            --bg: #20aa93;
            --card-bg: #fff;
            --muted: #fff;
            --danger: #d93025;
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
             --ui-scale: 1.1;
        }
        html,body{
            height:100%;
            margin:0;
            background:var(--bg);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
              font-size: calc(1rem * var(--ui-scale));
        }

        input::placeholder,
        textarea::placeholder {
        font-family: "Mercenary-Regular", system-ui, sans-serif;
        font-weight: 400;
        font-size:18px;
        opacity: 1; /* required in some browsers */
        }
            .wrap {
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        
        }

        .container {
            width: 100%;
            max-width: 1080px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .promo {
            flex: 1;
            color: var(--card-bg);
            background: linear-gradient(180deg, transparent);
            border-radius: 8px;
            padding: 40px;
            min-height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left:-50px;
        }

        .promo h1 {
            margin: 0 0 12px 0;
            font-size: 36px;
            line-height: 1.05;
            font-weight: 700;
            color: #fff;
        }

        .promo p {
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
        }


        /* right login area */
        .right{
            width:320px;
        }
        .card{
            padding: 16px;
        border-radius: 8px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:12px;
        }
        .logo{
            width:42px;
            height:42px;
            border-radius:6px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(180deg,var(--brand-blue),#155fc6);
            color:#fff;
            font-weight:700;
            font-size:20px;
            box-shadow: 0 4px 10px rgba(3,10,20,0.12);
        }
        .brand h2{
            margin:0;
            font-size:18px;
            color:#1c1e21;
        }

        form{
            display:flex;
            flex-direction:column;
            gap:12px;
            margin-top:8px;
        }
        input, textarea {
        font-family: "Mercenary-Regular", system-ui, 'Glacial-Indifference-Regualar'; /* match placeholder font */
        font-size: 20px; /* or whatever size you want */
        color:grey;
        font-weight: 400; /* match placeholder weight */
        }

        input[type="text"], input[type="password"], input[type="date"], input[type="email"]{
            width:130%;
            height:52px;
            padding:12px 15px;
            border-radius:999px;
            border:1px solid #dddfe2;
            background: #fff;
            outline:none;
            box-sizing:border-box;
        }
        input[type="text"]:focus, input[type="password"]:focus,  input[type="date"]:focus, input[type="email"]:focus{
            border-color: rgba(24,119,242,0.6);
            box-shadow: 0 0 0 3px rgba(24,119,242,0.08);
        }

        .actions{
            display:flex;
            gap:12px;
            margin-top:6px;
        }

        .signup-btn, .login-btn{
            flex:1;
            border:0;
            font-weight:300;
            font-family: 'Mercenary-Regular';
            font-size:15px;
            cursor:pointer;
            background-color:#146A5B;
            color:#fff; 
            border-radius:999px;
            height:40px;
            width:40%;
            margin-right:-80px;
            margin-left:280px;
        }

        .error{
            color:var(--danger);
            font-size:13px;
        }

        /* responsive */
       @media (max-width: 1080px) {
    .container { flex-direction: column; align-items: stretch; gap: 32px; }
    .promo { order: 2; padding: 20px; }
    .right { order: 1; width: 100%; }
}