html, body { height: 100%; margin: 0; }
        .register-left {
            background: linear-gradient(160deg, #1e2a45 0%, #13263d 60%, #0d1f35 100%);
            min-height: 100vh;
        }
        .register-right {
            background: #f5f8fa;
            min-height: 100vh;
            overflow-y: auto;
        }
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 11px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13.5px;
            border: 1.5px solid #e4e6ef;
            background: #fff;
            color: #3f4254;
            transition: border-color .18s, box-shadow .18s, background .18s;
            cursor: pointer;
        }
        .social-btn:hover { border-color: #009ef7; background: #f1faff; box-shadow: 0 2px 8px rgba(0,158,247,.13); }
        .social-btn .bi-google    { color: #ea4335; }
        .social-btn .bi-microsoft { color: #00a1f1; }
        .social-btn .bi-facebook  { color: #1877f2; }
        .step-badge {
            width: 26px; height: 26px; border-radius: 50%;
            background: #009ef7; color: #fff;
            font-size: 12px; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .plan-card {
            border: 2px solid #e4e6ef;
            border-radius: 12px;
            padding: 18px 16px;
            cursor: pointer;
            transition: border-color .18s, box-shadow .18s, background .18s;
            background: #fff;
            height: 100%;
        }
        .plan-card:hover  { border-color: #009ef7; box-shadow: 0 2px 12px rgba(0,158,247,.12); }
        .plan-card.active { border-color: #009ef7; background: #f1faff; box-shadow: 0 2px 16px rgba(0,158,247,.18); }
        .plan-radio { display: none; }
        .feature-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #50cd89; display: inline-block; margin-right: 6px; flex-shrink: 0;
        }
        .form-card {
            background: #fff;
            border-radius: 14px;
            padding: 32px 36px;
            box-shadow: 0 2px 16px rgba(0,0,0,.06);
        }
        @media (max-width: 576px) { .form-card { padding: 24px 18px; } }
        .input-icon-wrap { position: relative; }
        .input-icon-wrap .bi {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            color: #a1a5b7; font-size: 15px; pointer-events: none;
        }
        .input-icon-wrap input { padding-left: 38px !important; }