body{
            background:#f2f4f7;
            font-family:tahoma;
            margin:0;
            min-height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:20px;
        }

        .container-login{
            width:100%;
            max-width:430px;
        }

        .card-login{
            background:#fff;
            padding:28px 24px;
            border-radius:18px;
            box-shadow:0 10px 30px rgba(0,0,0,.08);
            position:relative;
        }

        .back-arrow{
            position:absolute;
            right:18px;
            top:18px;
            font-size:22px;
            color:#444;
            cursor:pointer;
        }

        .logo-box{
            text-align:center;
            margin-bottom:16px;
            margin-top:8px;
        }

        .logo-box img{
            height:58px;
            max-width:100%;
        }

        .title{
            text-align:center;
            font-size:20px;
            font-weight:700;
            margin-bottom:10px;
            color:#222;
        }

        .subtitle{
            text-align:center;
            font-size:13px;
            color:#666;
            margin-bottom:18px;
            line-height:1.8;
        }

        .tabs{
            display:flex;
            background:#eef2f7;
            border-radius:12px;
            padding:4px;
            gap:4px;
            margin-bottom:18px;
        }

        .tab{
            flex:1;
            text-align:center;
            padding:11px 8px;
            cursor:pointer;
            font-size:14px;
            border-radius:10px;
            transition:.25s;
            color:#444;
            user-select:none;
        }

        .tab.active{
            background:#3B82F6;
            color:#fff;
            font-weight:700;
        }

        .form-area{
            min-height: 260px;
        }

        .form-box{
            display:none;
        }

        .form-box.active-form{
            display:block;
        }

        .input-box{
            margin-bottom:14px;
        }

        .input-box input{
            width:100%;
            box-sizing:border-box;
            padding:13px 14px;
            border:1.8px solid #d8dde6;
            border-radius:12px;
            font-size:15px;
            outline:none;
            transition:.2s;
            background:#fff;
        }

        .input-box input:focus{
            border-color:#3B82F6;
            box-shadow:0 0 0 3px rgba(59,130,246,.12);
        }

        .btn-login{
            width:100%;
            background:#3B82F6;
            color:#fff;
            border:none;
            padding:13px 0;
            border-radius:12px;
            font-size:15px;
            font-weight:700;
            margin-top:8px;
            cursor:pointer;
            transition:.25s;
        }

        .btn-login:hover{
            background:#2563EB;
        }

        .rules{
            margin-top:10px;
            font-size:13px;
            color:#555;
            line-height:1.9;
        }

        .rules a{
            color:#1a73e8;
            text-decoration:none;
        }

        .rules a:hover{
            text-decoration:underline;
        }

        .checkbox-line{
            display:flex;
            align-items:flex-start;
            gap:8px;
            margin-top:4px;
        }

        .checkbox-line input{
            margin-top:4px;
            flex-shrink:0;
        }
        .rules-text{
            font-size:12px;
            color:#666;
            margin-top:14px;
            margin-bottom:14px;
            text-align:right;
            line-height:1.8;
        }

        .rules-text a{
            color:#0d6efd;
            text-decoration:none;
        }

        .rules-text a:hover{
            text-decoration:underline;
        }