:root{
            --bg-dark:#111613;
            --bg-sec:#172B23;
            --accent:#2F6542;
            --text-primary:#FFFFFF;
            --text-sec:#8E8E93;
        }

        *{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}

        /* ====== PREMIUM BACKGROUND ====== */
        body{
            background:
                radial-gradient(1200px 600px at 10% 5%, rgba(47,101,66,0.18), transparent 55%),
                radial-gradient(900px 500px at 90% 20%, rgba(47,101,66,0.12), transparent 60%),
                radial-gradient(700px 400px at 50% 100%, rgba(47,101,66,0.10), transparent 60%),
                linear-gradient(180deg, #0f1411 0%, #111613 40%, #0c100d 100%);
            color:var(--text-primary);
            font-family:'Inter',-apple-system,sans-serif;
            line-height:1.5;
            overflow-x:hidden;
        }

        .grid-background{
            position:fixed;
            inset:0;
            background-image:
                radial-gradient(circle at 1px 1px, rgba(47,101,66,0.07) 1px, transparent 0);
            background-size:38px 38px;
            mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
            -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
            z-index:-1;
            opacity:0.6;
        }

        body::before{
            content:"";
            position:fixed;
            width:800px;
            height:800px;
            background:radial-gradient(circle, rgba(47,101,66,0.15), transparent 70%);
            top:-200px;
            left:-200px;
            filter:blur(80px);
            z-index:-2;
            animation:floatGlow 18s ease-in-out infinite;
        }

        body::after{
            content:"";
            position:fixed;
            width:700px;
            height:700px;
            background:radial-gradient(circle, rgba(47,101,66,0.10), transparent 70%);
            bottom:-250px;
            right:-200px;
            filter:blur(90px);
            z-index:-2;
            animation:floatGlow 22s ease-in-out infinite reverse;
        }

        @keyframes floatGlow{
            0%,100%{ transform:translate(0,0); }
            50%{ transform:translate(40px,20px); }
        }

        /* ====== LAYOUT ====== */
        .page-wrap{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding: 48px 18px;
        }

        .auth-card{
            width:100%;
            max-width:520px;
            background:rgba(23,43,35,0.75);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:18px;
            box-shadow:0 40px 90px rgba(0,0,0,0.5);
            padding:34px;
            backdrop-filter: blur(20px);

            opacity:0;
            transform: translateY(14px);
            animation: cardIn 650ms cubic-bezier(.2,0,0,1) forwards;
        }

        @keyframes cardIn{
            to { opacity:1; transform: translateY(0); }
        }

        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:18px;
        }

        .brand-badge{
            width:34px;
            height:34px;
            border-radius:12px;
            background: var(--accent);
            display:grid;
            place-items:center;
            font-weight:900;
            color:#0b120f;
        }

        .brand a{
            color:white;
            text-decoration:none;
            font-weight:800;
            letter-spacing:1px;
        }

        .brand a span{ color: var(--accent); }

        .auth-title{
            font-size:34px;
            letter-spacing:-1px;
            line-height:1.1;
            margin-bottom:10px;
            font-weight:800;
        }

        .auth-sub{
            color:var(--text-sec);
            margin-bottom:26px;
            font-size:14px;
        }

        .form-grid{
            display:grid;
            gap:14px;
        }

        .field label{
            display:block;
            font-size:12px;
            color:rgba(255,255,255,0.85);
            margin-bottom:6px;
        }

        .field input{
            width:100%;
            background:rgba(0,0,0,0.25);
            border:1px solid rgba(255,255,255,0.10);
            color:white;
            padding:12px 14px;
            border-radius:12px;
            outline:none;
            transition:.2s;
        }

        .field input::placeholder{
            color: rgba(255,255,255,0.35);
        }

        .field input:focus{
            border-color:rgba(47,101,66,0.75);
            box-shadow:0 0 0 4px rgba(47,101,66,0.14);
        }

        /* ====== CUSTOM CHECKBOX ====== */
        .checks{
            display:grid;
            gap:10px;
            margin-top: 6px;
        }

        .check{
            display:flex;
            align-items:flex-start;
            gap:12px;
            color: var(--text-sec);
            font-size:13px;
            line-height:1.35;
            user-select:none;
        }

        .check input{
            position:absolute;
            opacity:0;
            pointer-events:none;
        }

        .box{
            width:18px;
            height:18px;
            border-radius:6px;
            border:1px solid rgba(255,255,255,0.16);
            background: rgba(0,0,0,0.22);
            display:grid;
            place-items:center;
            flex: 0 0 18px;
            transform: translateY(2px);
            transition: 180ms ease;
        }

        /* checkmark (svg) */
        .box svg{
            width:12px;
            height:12px;
            opacity:0;
            transform: scale(0.85);
            transition: 180ms ease;
        }

        .check:hover .box{
            border-color: rgba(47,101,66,0.45);
            box-shadow: 0 0 0 4px rgba(47,101,66,0.10);
        }

        .check input:checked + .box{
            background: rgba(47,101,66,0.95);
            border-color: rgba(47,101,66,0.95);
            box-shadow: 0 10px 25px rgba(47,101,66,0.25);
        }

        .check input:checked + .box svg{
            opacity:1;
            transform: scale(1);
        }

        .check a{
            color:white;
            text-decoration:none;
        }
        .check a:hover{ text-decoration: underline; }

        /* red highlight jei required nepažymėtas ir browser rodo invalid */
        .check input:invalid + .box{
            border-color: rgba(255,75,75,0.55);
            box-shadow: 0 0 0 4px rgba(255,75,75,0.10);
        }

        .submit-row{
            margin-top:18px;
            display:flex;
        }

        .btn{
            width:100%;
            background:white;
            color:black;
            padding:12px 22px;
            border-radius:50px;
            font-weight:600;
            font-size:14px;
            border:none;
            cursor:pointer;
            transition:.3s cubic-bezier(.2,0,0,1);
        }

        .btn:hover{
            transform:scale(1.03);
            background:#f0f0f0;
        }

        .hint-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-top:14px;
            color:var(--text-sec);
            font-size:13px;
        }

        .hint-row a{
            color:white;
            text-decoration:none;
        }

        .hint-row a:hover{
            text-decoration:underline;
        }

        .msg{
            margin-bottom:14px;
            padding:12px 14px;
            border-radius:12px;
            font-size:13px;
            border:1px solid rgba(255,255,255,0.10);
            background:rgba(0,0,0,0.25);
        }

        .msg.error{
            border-color:rgba(255,75,75,0.35);
        }

        @media (max-width:520px){
            .auth-card{ padding:26px; }
            .auth-title{ font-size:28px; }
        }