*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
            height: 100%;
            background: #f5f4f0;
            font-family: 'DM Sans', sans-serif;
            -webkit-font-smoothing: antialiased;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .card {
            background: #fff;
            border: 1px solid #e2e0d9;
            border-radius: 18px;
            width: 100%;
            max-width: 380px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0,0,0,.06);
            animation: up .3s cubic-bezier(.22,1,.36,1) both;
        }

        @keyframes up {
            from { opacity:0; transform:translateY(10px); }
            to   { opacity:1; transform:translateY(0); }
        }

        .stripe {
            height: 3px;
            background: linear-gradient(90deg, #4285f4, #ea4335 33%, #fbbc04 66%, #34a853);
        }

        .body {
            padding: 32px 30px 28px;
        }

        /* Title block */
        h1 {
            font-size: 17px;
            font-weight: 600;
            color: #1a1916;
            letter-spacing: -.3px;
        }

        .subtitle {
            font-size: 13px;
            color: #9b9890;
            margin-top: 2px;
            font-weight: 400;
        }

        /* Domain */
        .domain {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 16px;
            background: #f5f4f0;
            border: 1px solid #e2e0d9;
            border-radius: 7px;
            padding: 5px 10px;
            font-family: 'DM Mono', monospace;
            font-size: 12px;
            color: #6b6860;
        }

        .domain-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            /*background: #34a853;*/
            flex-shrink: 0;
        }

        .success { background: #34a853; }
        .error   { background: #ea4335; }

        /* Divider */
        .sep {
            border: none;
            border-top: 1px solid #e2e0d9;
            margin: 22px 0;
        }

        /* Description */
        .desc {
            font-size: 13.5px;
            color: #6b6860;
            line-height: 1.55;
            margin-bottom: 16px;
        }

        /* Scope */
        .scope {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #b0ada7;
            margin-bottom: 10px;
        }

        .scope-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            color: #4a4845;
        }

        .scope-item svg { flex-shrink: 0; }

        /* Button */
        .btn {
            margin-top: 24px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            height: 46px;
            background: #1a1916;
            color: #fff;
            border: none;
            border-radius: 11px;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity .15s, transform .12s;
            letter-spacing: -.1px;
        }

        .btn:hover { opacity: .85; }
        .btn:active { transform: scale(.985); }
        .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

        /* Loading dots */
        .dots { display: flex; gap: 5px; align-items: center; }
        .dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            animation: bounce 1.05s ease-in-out infinite;
        }
        .dot:nth-child(1) { background:#4285f4; animation-delay:0ms; }
        .dot:nth-child(2) { background:#ea4335; animation-delay:120ms; }
        .dot:nth-child(3) { background:#fbbc04; animation-delay:240ms; }
        .dot:nth-child(4) { background:#34a853; animation-delay:360ms; }

        @keyframes bounce {
            0%,80%,100% { transform:translateY(0); }
            40%          { transform:translateY(-6px); }
        }

        /* Alert */
        .alert {
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            line-height: 1.5;
            display: none;
            margin-top: 14px;
        }
        .alert.error   { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
        .alert.success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
        .alert.show    { display: block; }

        /* Email chip */
        .email-chip {
            display: none;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            background: #f5f4f0;
            border: 1px solid #e2e0d9;
            border-radius: 100px;
            padding: 4px 12px 4px 4px;
        }
        .email-chip.show { display: inline-flex; }
        .email-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg,#4285f4,#34a853);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            display: flex; align-items: center; justify-content: center;
        }
        .email-addr { font-family:'DM Mono',monospace; font-size:12px; color:#6b6860; }

.loading-row {
    display: none;
    margin-top: 24px;
    justify-content: center;
}
.loading-row.is-visible { display: flex; }