/**
 * Bundler, Auth, Dashboard + Settings styling
 *
 * Loaded by /login.php, /forgot.php, /reset.php, /magic.php, /magic-request.php,
 * /dashboard.php, /settings.php, /errors.php, /users.php.
 *
 * Brand tokens come from shared/css/tokens.css (loaded earlier in the cascade
 * via shared/includes/head.php). Use --brand-purple / --brand-navy / etc.,
 * never hardcode hex values. Anything that previously read teal (#0D9488)
 * has been migrated to var(--brand-purple) so the whole authenticated app
 * picks up the rebrand consistently.
 *
 * The login surface specifically mirrors the marketing site's design system
 * (button/field/divider primitives ported from frontend/src/styles/global.css)
 * so /login.php and / read as the same product.
 */

/* ─────────────────────────────────────────────────────────────────
   LOGIN PAGE
   ───────────────────────────────────────────────────────────────── */

body.bundler-login-page {
    margin: 0;
    /* iOS Safari: 100vh ignores the dynamic browser chrome and causes layout
       jumps when the address bar collapses on scroll. 100dvh tracks the
       actually-visible viewport. Fallback to 100vh for older browsers. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(107, 107, 255, 0.22), transparent 55%),
        radial-gradient(circle at 90% 80%, rgba(107, 107, 255, 0.10), transparent 60%),
        linear-gradient(135deg, var(--brand-navy, #0E1320) 0%, var(--brand-navy-2, #1A2138) 70%, var(--brand-navy, #0E1320) 130%);
    color: #fff;
    font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* The card straddles two columns at desktop, stacks on mobile. */
.bundler-login-card {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: #fff;
    color: var(--brand-navy, #0E1320);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(15, 20, 33, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ── Left rail, pitch + aurora glow ─────────────────────────── */

.bundler-login-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 3rem 2.75rem;
    background:
        radial-gradient(ellipse 70% 60% at 25% 15%, rgba(107, 107, 255, 0.26), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 90%, rgba(143, 132, 255, 0.16), transparent 70%),
        linear-gradient(160deg, var(--brand-navy, #0E1320) 0%, var(--brand-navy-2, #1A2138) 60%, var(--brand-navy, #0E1320) 130%);
    color: var(--brand-cream, #EEF2FA);
    overflow: hidden;
}

/* Aurora, two soft blurred orbs drifting slowly. Sits behind the
   pitch content. Decorative; never load-bearing for the form. */
.bundler-login-rail::before,
.bundler-login-rail::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
}
.bundler-login-rail::before {
    width: 420px;
    height: 420px;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, var(--brand-purple, #6B6BFF), transparent 60%);
    animation: bundler-aurora-1 90s linear infinite;
}
.bundler-login-rail::after {
    width: 360px;
    height: 360px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, var(--brand-purple-lt, #8A8AFF), transparent 60%);
    animation: bundler-aurora-2 60s linear infinite reverse;
}
@keyframes bundler-aurora-1 {
    from { transform: rotate(0deg)   translateX(0); }
    to   { transform: rotate(360deg) translateX(0); }
}
@keyframes bundler-aurora-2 {
    from { transform: rotate(0deg)   translateX(0); }
    to   { transform: rotate(360deg) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bundler-login-rail::before,
    .bundler-login-rail::after { animation: none !important; }
}

/* Pitch block sits above the aurora. */
.bundler-login-pitch {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 380px;
}
.bundler-login-pitch-logo {
    width: 220px;
    max-width: 80%;
    height: auto;
    display: block;
}
.bundler-login-pitch-tagline {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--brand-cream, #EEF2FA);
}
.bundler-login-pitch-tagline .accent { color: var(--brand-purple-lt, #8A8AFF); }

.bundler-login-pitch-bullets {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 0.92rem;
    color: rgba(238, 242, 250, 0.86);
}
.bundler-login-pitch-bullets li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.4;
}
.bundler-login-pitch-bullets .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 4px rgba(107, 107, 255, 0.18);
    flex: 0 0 auto;
}

/* ── Right form ──────────────────────────────────────────────── */

.bundler-login-form {
    padding: 3rem 3.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: #fff;
}

.bundler-login-header { margin-bottom: 0.25rem; }

/* Tabs, typographic underlined treatment, not a segmented pill. */
.bundler-login-tabs {
    display: flex;
    border-bottom: 1px solid var(--border, #E5E8EE);
    margin-bottom: 0.25rem;
}
.bundler-login-tab {
    flex: 1;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.9rem 0.5rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-dim, #8A93A6);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
    margin-bottom: -1px;        /* overlap the parent border so the active rule tracks it */
}
.bundler-login-tab:hover { color: var(--brand-navy, #0E1320); }
.bundler-login-tab[aria-selected="true"] {
    color: var(--brand-purple, #6B6BFF);
    border-bottom-color: var(--brand-purple, #6B6BFF);
}

.bundler-login-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.bundler-login-panel[hidden] { display: none; }

.bundler-login-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--brand-navy, #0E1320);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Inline error, ported tone-for-tone from the marketing form. */
.bundler-login-form .alert-error {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* ── Continue with Google (ported from frontend .btn-google) ─── */
.bundler-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: #fff;
    color: var(--brand-navy, #0E1320);
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 12px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
}
.bundler-google-btn:hover {
    background: #F7F8FB;
    border-color: #C8CDD8;
    text-decoration: none;
    color: var(--brand-navy, #0E1320);
}
.bundler-google-btn:active { transform: translateY(1px); }
.bundler-google-btn svg { flex: 0 0 18px; }

/* ── Passkey button (when WebAuthn is registered for this account) ── */
.bundler-passkey-block { margin-bottom: 0; }
.btn-passkey-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--brand-purple-soft, rgba(107, 107, 255, 0.12));
    color: var(--brand-purple, #6B6BFF);
    border: 1px solid rgba(107, 107, 255, 0.25);
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
}
.btn-passkey-primary:hover {
    background: rgba(107, 107, 255, 0.18);
    border-color: rgba(107, 107, 255, 0.40);
}
.btn-passkey-primary:active { transform: translateY(1px); }
.bundler-passkey-block .webauthn-login-error {
    color: #B91C1C;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    min-height: 1em;
}

/* ── Divider (ported from frontend .divider) ─────────────────── */
.bundler-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-dim, #8A93A6);
    font-size: 0.85rem;
}
.bundler-divider::before,
.bundler-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #E5E8EE);
}

/* ── Form fields (ported from frontend .field) ───────────────── */
.bundler-login-fields {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.bundler-login-fields .form-group { display: none; }       /* legacy markup */

.bundler-login-fields input[type="email"],
.bundler-login-fields input[type="password"] {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #fff;
    color: var(--brand-navy, #0E1320);
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 12px;
    font: inherit;
    /* iOS Safari auto-zooms inputs when font-size < 16px, keep at 16. */
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.bundler-login-fields input::placeholder { color: var(--ink-dim, #8A93A6); }
.bundler-login-fields input:focus {
    outline: none;
    border-color: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 4px rgba(107, 107, 255, 0.10);
}

/* ── Primary CTA (ported from frontend .btn-primary) ─────────── */
.btn-primary-login {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--brand-purple, #6B6BFF);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow:
        0 1px 3px rgba(15, 20, 33, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.05s ease;
}
.btn-primary-login:hover {
    background: #5A5AE6;
    box-shadow:
        0 4px 14px rgba(90, 90, 230, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary-login:active { transform: translateY(1px); }

/* ── Secondary actions (forgotten password, magic-link) ──────── */
.bundler-login-secondary {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-dim, #8A93A6);
}
.bundler-login-secondary a {
    color: var(--brand, #5A5AE6);
    text-decoration: none;
    transition: color 0.15s ease;
}
.bundler-login-secondary a:hover {
    color: #3F3FBA;        /* brand-deep */
    text-decoration: underline;
}
.bundler-login-secondary span { margin: 0 0.5rem; }

.bundler-login-fineprint {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-dim, #8A93A6);
}

/* "New here? Create your account →" CTA below the sign-in form. */
.bundler-create-cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #E5E8EE);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    color: var(--ink-dim, #8A93A6);
}
.bundler-create-cta-btn {
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    color: var(--brand, #5A5AE6);
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.bundler-create-cta-btn:hover { background: rgba(107, 107, 255, 0.08); }
.bundler-create-cta-btn:focus-visible {
    outline: 2px solid var(--brand-purple, #6B6BFF);
    outline-offset: 2px;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.bundler-login-page {
        padding: 1rem 0.75rem;
        align-items: flex-start;
        overflow-x: hidden;
    }
    .bundler-login-card {
        grid-template-columns: 1fr;
        max-width: 480px;
        border-radius: 14px;
    }
    .bundler-login-rail {
        padding: 2rem 1.75rem;
    }
    .bundler-login-pitch { gap: 1rem; max-width: 100%; }
    .bundler-login-pitch-logo { width: 180px; }
    .bundler-login-pitch-tagline { font-size: 1.25rem; }
    .bundler-login-form {
        padding: 2rem 1.5rem 1.75rem;
    }
    .bundler-login-title { font-size: 1.4rem; }
}

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD PAGE
   ───────────────────────────────────────────────────────────────── */

.bundler-recent-bundles {
    margin-top: 2rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border, #E5E8EE);
    padding: 1.25rem 1.5rem 1.5rem;
}

.bundler-recent-bundles .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.bundler-recent-bundles h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-navy, #0E1320);
}

.bundler-recent-bundles .link-muted {
    color: var(--ink-soft, #5A6275);
    font-size: 0.85rem;
    text-decoration: none;
}

.bundler-recent-bundles .link-muted:hover {
    color: var(--brand-purple, #6B6BFF);
}

/* Per-row open link, small discrete pill, brand-purple on hover. */
.bundler-open-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft, #5A6275);
    background: #F7F8FB;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.bundler-open-link:hover {
    color: var(--brand-purple, #6B6BFF);
    background: var(--brand-purple-soft, rgba(107, 107, 255, 0.12));
    border-color: rgba(107, 107, 255, 0.30);
    text-decoration: none;
}
.bundler-open-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 107, 255, 0.18);
}

.bundler-recent-bundles .empty-state {
    padding: 2rem 0;
    text-align: center;
    color: var(--ink-soft, #5A6275);
}

.bundler-recent-bundles .empty-state p {
    margin: 0 0 1rem;
}

/* ─────────────────────────────────────────────────────────────────
   SETTINGS PAGE
   ───────────────────────────────────────────────────────────────── */

.bundler-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.bundler-settings-card {
    background: #fff;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.5rem;
}

.bundler-settings-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--brand-purple, #6B6BFF);
}

.bundler-settings-card-header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-navy, #0E1320);
}

.bundler-settings-meta {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.9rem;
}

.bundler-settings-meta dt {
    color: var(--ink-soft, #5A6275);
    font-weight: 500;
}

.bundler-settings-meta dd {
    margin: 0;
    color: var(--brand-navy, #0E1320);
}

.bundler-settings-card .form-group {
    margin-bottom: 0.9rem;
}

.bundler-settings-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.bundler-settings-card input[type="password"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font: inherit;
    color: var(--brand-navy, #0E1320);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bundler-settings-card input[type="password"]:focus {
    outline: none;
    border-color: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 3px rgba(107, 107, 255, 0.15);
}

.bundler-settings-status {
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
    min-height: 1.1em;
    color: var(--ink-soft, #5A6275);
}

.bundler-settings-status-success { color: #15803d; }
.bundler-settings-status-error   { color: #B91C1C; }
.bundler-settings-status-progress { color: #475569; }

/* Help paragraph above forms inside settings cards */
.bundler-settings-help {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

/* AI access status row, soft slate, with optional warn override inline. */
.bundler-ai-key-status {
    padding: 0.6rem 0.85rem;
    background: #F7F8FB;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--brand-navy, #0E1320);
    margin-bottom: 0.85rem;
}

/* ── AI Provider card — single consolidated picker ─────────────────── */

/* The card spans the full settings grid (it's a three-tile picker — needs
   the whole row, otherwise tiles collapse to ~80px each in the 3-col layout). */
#bundler-ai-provider-card {
    grid-column: 1 / -1;
}

/* Currently using banner (sits below the help text, above the tiles) */
.bundler-ai-active-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(107, 107, 255, 0.08), rgba(138, 138, 255, 0.04));
    border: 1px solid rgba(107, 107, 255, 0.18);
    font-size: 0.88rem;
    color: var(--brand-navy, #0E1320);
    margin-bottom: 0.95rem;
}

.bundler-ai-active-banner[data-active="none"] {
    background: #F7F8FB;
    border-color: var(--border, #E5E8EE);
}

.bundler-ai-active-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 3px rgba(107, 107, 255, 0.18);
    flex-shrink: 0;
}

.bundler-ai-active-banner[data-active="none"] .bundler-ai-active-dot {
    background: #94A3B8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.bundler-ai-active-text strong { font-weight: 600; }

.bundler-ai-active-model {
    color: #64748B;
    font-size: 0.82rem;
    margin-left: 0.25rem;
}

/* 3-up tile grid (stacks on mobile) */
.bundler-ai-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.5rem;
}

@media (max-width: 820px) {
    .bundler-ai-tiles { grid-template-columns: 1fr; }
}

.bundler-ai-tile {
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 12px;
    background: #FFFFFF;
    padding: 0.95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    position: relative;
    min-width: 0;
}

.bundler-ai-tile:hover:not(.is-disabled) {
    border-color: rgba(107, 107, 255, 0.4);
    box-shadow: 0 6px 20px -10px rgba(107, 107, 255, 0.25);
}

.bundler-ai-tile.is-active {
    border-color: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 2px rgba(107, 107, 255, 0.18);
}

.bundler-ai-tile.is-disabled {
    opacity: 0.6;
    background: #FAFAFB;
}

.bundler-ai-tile-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

.bundler-ai-tile-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    background: #FFFFFF;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}

.bundler-ai-tile.is-active .bundler-ai-tile-radio {
    border-color: var(--brand-purple, #6B6BFF);
    background: radial-gradient(circle, var(--brand-purple, #6B6BFF) 35%, #FFFFFF 38%);
}

.bundler-ai-tile-name {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--brand-navy, #0E1320);
    flex: 1;
    min-width: 0;
}

.bundler-ai-tile-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-purple, #6B6BFF);
    color: #FFFFFF;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.bundler-ai-tile-badge--ready {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.bundler-ai-tile-badge--muted {
    background: #F1F5F9;
    color: #64748B;
}

.bundler-ai-tile-body { font-size: 0.82rem; color: #475569; }

.bundler-ai-tile-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bundler-ai-tile-facts li {
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}

.bundler-ai-tile-facts li::before {
    content: "·";
    position: absolute;
    left: 0.4rem;
    color: #94A3B8;
    font-weight: 700;
}

.bundler-ai-tile-note {
    margin: 0.35rem 0;
    padding: 0.4rem 0.55rem;
    background: #F7F8FB;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 6px;
    font-size: 0.78rem;
    color: #475569;
}

.bundler-ai-tile-note code {
    background: rgba(107, 107, 255, 0.1);
    color: var(--brand-purple, #6B6BFF);
    padding: 0 0.25rem;
    border-radius: 3px;
    font-size: 0.8em;
}

.bundler-ai-tile-link {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--brand-purple, #6B6BFF);
    text-decoration: none;
}
.bundler-ai-tile-link:hover { text-decoration: underline; }

.bundler-ai-tile-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.4rem;
}

.bundler-ai-tile-actions .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;   /* keep "Use DeepSeek" / "Revoke consent" on one line — clipping reads as broken */
    flex: 0 0 auto;
}

/* Inline expansion panel for the key-entry form */
.bundler-ai-keyform-panel {
    margin-top: 0.85rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(107, 107, 255, 0.3);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(107, 107, 255, 0.05), #FFFFFF 60%);
}

.bundler-ai-keyform-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-navy, #0E1320);
}

.bundler-ai-keyform-replace {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.6rem;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 6px;
    color: #7C2D12;
    font-size: 0.8rem;
}

.bundler-settings-card select {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--brand-navy, #0E1320);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bundler-settings-card select:focus {
    outline: none;
    border-color: var(--brand-purple, #6B6BFF);
    box-shadow: 0 0 0 3px rgba(107, 107, 255, 0.15);
}

.bundler-passkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: #F7F8FB;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.bundler-passkey-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.88rem;
}

.bundler-passkey-info strong {
    color: var(--brand-navy, #0E1320);
    font-weight: 600;
}

.bundler-passkey-meta {
    color: var(--ink-soft, #5A6275);
    font-size: 0.75rem;
}

.bundler-passkey-delete {
    color: var(--ink-dim, #8A93A6);
    background: transparent;
    border: 1px solid transparent;
    padding: 0.35rem;
}

.bundler-passkey-delete:hover {
    color: #B91C1C;
    background: #FEE2E2;
}

/* Security card, Passkeys + Password are stacked subsections in one card
   so the top row of the grid can hold Account / Billing / Plan as equals. */
.bundler-security-subsection + .bundler-security-subsection {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #E5E8EE);
}

.bundler-security-subsection h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #5A6275);
    margin: 0 0 0.65rem;
}

/* Plan & Subscription card, badge sits at the top above any copy. */
.bundler-plan-summary {
    margin: 0 0 0.35rem;
}

/* ── Status pills (mirrors bundler.css) ──────────────────────── */
.status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-pill-draft    { background: #F1F5F9; color: #475569; }
.status-pill-merging  { background: #FEF3C7; color: #92400E; }
.status-pill-ready    { background: #DCFCE7; color: #166534; }
.status-pill-failed   { background: #FEE2E2; color: #991B1B; }
.status-pill-archived { background: #E2E8F0; color: #475569; }

/* ── Phase 1D: Connected apps card ─────────────────────────────────────
   One row per provider returned by BundlerProviders::enabledKeys(). The
   row is a 2-row CSS grid: icon spans both rows on the left; title + email
   + meta stack in the middle; status pill sits top-right; action button
   bottom-right. Built this way so long emails wrap cleanly even when the
   card sits in a 1/3-width column of .bundler-settings-grid (where the
   old flex layout crushed the info column to ~50px and broke emails
   mid-character). */

.bundler-connection-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 0.85rem;
    row-gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    background: #F7F8FB;
    border: 1px solid var(--border, #E5E8EE);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}
.bundler-connection-row:last-child { margin-bottom: 0; }

.bundler-connection-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    margin-top: 2px;
}
.bundler-connection-icon svg { max-width: 28px; max-height: 28px; }

.bundler-connection-info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.bundler-connection-info strong {
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--brand-navy, #0F1421);
}
.bundler-connection-email {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--ink-soft, #5A6275);
    /* Wrap at word boundaries first; only break inside the email when
       there's truly no room. Was `word-break: break-all` which split
       mid-character in narrow cards. */
    overflow-wrap: anywhere;
    word-break: normal;
}
.bundler-connection-meta {
    font-size: 0.75rem;
    line-height: 1.3;
    color: #94A3B8;
    margin-top: 0.25rem;
    letter-spacing: 0.01em;
}

.bundler-connection-status {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-top: 2px;          /* visually centre with the title baseline */
}
.bundler-connection-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    gap: 0.4rem;
}

/* If there's no meta line, the action would float in dead space below
   the title. Pull it up to the title row in that case. JS doesn't
   render an empty meta — the absence is detectable in CSS via :only-
   child / sibling selectors. Simplest: when actions are the immediate
   sibling of info (no meta), align them differently via the row layout.
   The current grid layout already handles this fine because grid rows
   collapse if no cell is placed. */

/* Reconnect-needed pill — amber/warning tone matching the picker
   shell's needs_reconnect callout. Separate from .status-pill-merging
   so it can diverge stylistically later if needed. */
.status-pill-warn {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}

/* Very narrow viewports — drop the right-hand column entirely and
   stack pill + action on the left under the info block. */
@media (max-width: 540px) {
    .bundler-connection-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .bundler-connection-icon { grid-row: 1 / span 3; }
    .bundler-connection-status {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-top: 0;
    }
    .bundler-connection-actions {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }
}