:root{
            --bg:#070b1c;
            --panel:rgba(255,255,255,.08);
            --panel2:rgba(255,255,255,.06);
            --text:#e9efff;
            --muted:rgba(233,239,255,.72);
            --line:rgba(233,239,255,.12);
            --accent1:#6366f1;
            --accent2:#0ea5e9;
            --danger:#ef4444;
            --ok:#22c55e;
            --radius:22px;
            --shadow: 0 22px 60px rgba(0,0,0,.45);
            --tap:48px;
        }

        body.light{
            --bg:#f4f7ff;
            --panel:#ffffff;
            --panel2:#f3f6ff;
            --text:#0b1220;
            --muted:#4c5b78;
            --line:rgba(15,23,42,.10);
            --shadow: 0 18px 45px rgba(15,23,42,.12);
        }

        *{box-sizing:border-box}
        html,body{height:100%}
        body{
            margin:0;
            font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
            background:
              radial-gradient(1200px 700px at 10% 0%, rgba(99,102,241,.25), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(14,165,233,.22), transparent 55%),
              radial-gradient(900px 600px at 60% 100%, rgba(236,72,153,.15), transparent 55%),
              var(--bg);
            color:var(--text);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:16px;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
        }

        .wrap{
            width:min(980px, 100%);
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            gap:18px;
            align-items:stretch;
        }

        .hero, .card{
            border:1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(180deg, var(--panel), var(--panel2));
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }

        .hero{
            padding:24px;
            position:relative;
            overflow:hidden;
            min-height: 420px;
        }

        .badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.06);
            color:var(--muted);
            font-size:12px;
            margin-bottom:16px;
            white-space:nowrap;
        }
        .dot{
            width:10px;height:10px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent1), var(--accent2));
            box-shadow:0 0 0 4px rgba(99,102,241,.16);
        }

        .hero h1{margin:0; font-size:26px; letter-spacing:.2px}
        .hero p{margin:10px 0 0; color:var(--muted); line-height:1.55}

        .hero .grid{
            margin-top:18px;
            display:grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap:12px;
        }
        .feature{
            border:1px solid var(--line);
            border-radius:16px;
            background:rgba(255,255,255,.05);
            padding:12px;
        }
        .feature b{display:block; font-size:13px}
        .feature small{display:block; margin-top:6px; color:var(--muted); line-height:1.45}

        .card{
            padding:22px;
            display:flex;
            flex-direction:column;
            justify-content:center;
            min-height: 420px;
        }

        .topRow{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }
        .logo{
            width:44px;height:44px;border-radius:14px;
            display:grid;place-items:center;
            background:linear-gradient(135deg, var(--accent1), var(--accent2));
            box-shadow:0 14px 25px rgba(0,0,0,.35);
            flex:0 0 auto;
        }
        .logo span{color:white; font-weight:800; letter-spacing:.5px}
        .brandText{min-width:0}
        .brandText strong{display:block; font-size:13px}
        .brandText small{display:block; margin-top:4px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

        .themeBtn{
            width:44px;height:44px;border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.06);
            color:var(--text);
            cursor:pointer;
            display:grid;place-items:center;
            min-height:var(--tap);
        }

        .field{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
        label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px;}
        .input{
            height:44px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.06);
            color:var(--text);
            padding:0 12px;
            outline:none;
            font-size:13px;
            width:100%;
        }
        body.light .input{background:rgba(15,23,42,.05); color:var(--text)}
        .input:focus{box-shadow:0 0 0 4px rgba(99,102,241,.15)}

        .row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-top:14px;
            flex-wrap:wrap;
        }

        .chk{
            display:flex;
            align-items:center;
            gap:10px;
            color:var(--muted);
            font-size:13px;
            user-select:none;
        }
        .chk input{width:18px;height:18px; accent-color: var(--accent1);}

        .btn{
            border:none;
            cursor:pointer;
            padding:12px 14px;
            border-radius:14px;
            background:linear-gradient(135deg, var(--accent1), var(--accent2));
            color:white;
            font-weight:700;
            box-shadow:0 14px 30px rgba(0,0,0,.35);
            min-height:var(--tap);
            width:100%;
            margin-top:14px;
        }
        .btn:hover{filter:brightness(1.03)}
        .btn:active{transform:translateY(1px)}

        .note{
            margin-top:12px;
            color:var(--muted);
            font-size:12px;
            line-height:1.5;
        }

        .alert{
            margin-top:14px;
            border:1px solid rgba(239,68,68,.35);
            background: rgba(239,68,68,.10);
            color: #ffd7d7;
            padding:12px 12px;
            border-radius:14px;
            font-size:13px;
            line-height:1.45;
        }
        body.light .alert{
            color:#7a0b0b;
            background: rgba(239,68,68,.08);
        }

        @media (max-width: 980px){
            .wrap{grid-template-columns: 1fr; }
            .hero{min-height:auto}
            .card{min-height:auto}
        }
    
.csp-inline-3dc23ded34dba5ea.csp-inline-3dc23ded34dba5ea{color:var(--muted);font-size:12px;}