@import '_content/MadIT.Dashboard.Presentation/MadIT.Dashboard.Presentation.k22nv9c2k3.bundle.scp.css';

/* /Pages/Login.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────
   Page wrapper — full-viewport dark background.
   Mirrors UpdateAvailable.razor.css so the unauthenticated routes
   share one visual identity (logo halo → wordmark → CTA).
   ────────────────────────────────────────────────────────────── */

.splash-page[b-p4pqs73wnv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 2rem 1rem;
}

.splash-content[b-p4pqs73wnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 360px;
    width: 100%;
    animation: splash-rise-b-p4pqs73wnv 480ms cubic-bezier(0.2, 0.7, 0.1, 1) both;
}

/* ──────────────────────────────────────────────────────────────
   Logo area — 200×200 with stacked rings (matches UpdateAvailable)
   ────────────────────────────────────────────────────────────── */

.logo-area[b-p4pqs73wnv] {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 28px;
}

.ring[b-p4pqs73wnv] {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.ring-gold-outer[b-p4pqs73wnv] {
    width: 152px;
    height: 152px;
    margin-top: -76px;
    margin-left: -76px;
    border: 1px solid rgba(251, 203, 91, 0.4);
    animation: ring-outer-pulse-b-p4pqs73wnv 4400ms ease-in-out infinite;
}

.ring-gold-inner[b-p4pqs73wnv] {
    width: 122px;
    height: 122px;
    margin-top: -61px;
    margin-left: -61px;
    border: 1.5px solid rgba(251, 203, 91, 0.7);
    animation: ring-inner-pulse-b-p4pqs73wnv 3600ms ease-in-out infinite;
}

.logo-badge[b-p4pqs73wnv] {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd977 0%, #fbcb5b 58%, #efb93f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -48px;
    box-shadow: 0 8px 24px rgba(251, 203, 91, 0.25);
    z-index: 1;
}

.logo-badge img[b-p4pqs73wnv] {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

/* ──────────────────────────────────────────────────────────────
   App title & subtitle (matches UpdateAvailable wordmark stack)
   ────────────────────────────────────────────────────────────── */

.app-name[b-p4pqs73wnv] {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0 0 4px 0;
    text-align: center;
}

.app-word[b-p4pqs73wnv] {
    color: #fbcb5b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 32px 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Login content (eyebrow + headline + subtitle + CTA)
   Same vertical rhythm as the .update-content block.
   ────────────────────────────────────────────────────────────── */

.login-content[b-p4pqs73wnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 0;
}

.login-eyebrow[b-p4pqs73wnv] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fbcb5b;
    margin: 0 0 8px 0;
}

.login-headline[b-p4pqs73wnv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.login-subtitle[b-p4pqs73wnv] {
    font-size: 0.8125rem;
    color: #acacac;
    margin: 0 0 22px 0;
    max-width: 320px;
    line-height: 1.5;
}

.login-error[b-p4pqs73wnv] {
    background: rgba(127, 29, 29, 0.6);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.5);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    font-size: 0.8125rem;
    text-align: center;
    width: 100%;
    max-width: 320px;
    line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────────
   Google sign-in button — Google Identity branding (Light theme).
   White surface, multi-color G logo, "Aanmelden met Google" label.
   ────────────────────────────────────────────────────────────── */

.gsi-btn[b-p4pqs73wnv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    height: 48px;
    padding: 0 20px 0 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dadce0;
    color: #1f1f1f;
    font-family: 'Roboto', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 120ms ease, background 160ms ease;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}

.gsi-btn:hover:not(:disabled)[b-p4pqs73wnv] {
    background: #f8f9fa;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.30), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    transform: translateY(-1px);
}

.gsi-btn:focus-visible[b-p4pqs73wnv] {
    outline: 2px solid #fbcb5b;
    outline-offset: 3px;
}

.gsi-btn:active:not(:disabled)[b-p4pqs73wnv] {
    transform: translateY(0);
    background: #f1f3f4;
}

.gsi-btn:disabled[b-p4pqs73wnv],
.gsi-btn--busy[b-p4pqs73wnv] {
    opacity: 0.78;
    cursor: progress;
    transform: none;
}

.gsi-btn__icon[b-p4pqs73wnv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.gsi-btn__label[b-p4pqs73wnv] {
    white-space: nowrap;
}

.gsi-btn__spinner[b-p4pqs73wnv] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(31, 31, 31, 0.2);
    border-top-color: #1f1f1f;
    border-radius: 50%;
    animation: gsi-spin-b-p4pqs73wnv 720ms linear infinite;
}

/* ──────────────────────────────────────────────────────────────
   Footnote underneath the CTA — quiet, but invites a question.
   ────────────────────────────────────────────────────────────── */

.login-footnote[b-p4pqs73wnv] {
    margin: 18px 0 0;
    font-size: 0.75rem;
    color: #6e6e6e;
    max-width: 320px;
    line-height: 1.5;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Keyframes
   ────────────────────────────────────────────────────────────── */

@keyframes ring-inner-pulse-b-p4pqs73wnv {
    0%, 100% { transform: scale(1);    opacity: 0.65; }
    50%      { transform: scale(1.08); opacity: 0.25; }
}

@keyframes ring-outer-pulse-b-p4pqs73wnv {
    0%, 100% { transform: scale(1);   opacity: 0.45; }
    50%      { transform: scale(1.1); opacity: 0.12; }
}

@keyframes gsi-spin-b-p4pqs73wnv {
    to { transform: rotate(360deg); }
}

@keyframes splash-rise-b-p4pqs73wnv {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Honour reduced-motion users: drop the rise + ring pulses. */
@media (prefers-reduced-motion: reduce) {
    .splash-content[b-p4pqs73wnv],
    .ring-gold-outer[b-p4pqs73wnv],
    .ring-gold-inner[b-p4pqs73wnv] {
        animation: none;
    }
}

/* Phone tweaks — keep the layout breathing room sensible. */
@media (max-width: 420px) {
    .logo-area[b-p4pqs73wnv] {
        width: 168px;
        height: 168px;
        margin-bottom: 22px;
    }

    .ring-gold-outer[b-p4pqs73wnv] {
        width: 128px;
        height: 128px;
        margin-top: -64px;
        margin-left: -64px;
    }

    .ring-gold-inner[b-p4pqs73wnv] {
        width: 102px;
        height: 102px;
        margin-top: -51px;
        margin-left: -51px;
    }

    .logo-badge[b-p4pqs73wnv] {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px;
    }

    .logo-badge img[b-p4pqs73wnv] {
        width: 48px;
        height: 48px;
    }

    .app-word[b-p4pqs73wnv] {
        margin-bottom: 24px;
    }
}
/* /Pages/UpdateAvailable.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────
   Page wrapper – full-viewport dark background (#141414 = Gray950)
   ────────────────────────────────────────────────────────────── */
:root[b-3vyvdwj1gp] {
    --error-red: #FF0000;
}

.splash-page[b-3vyvdwj1gp] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 2rem 1rem;
}

.splash-content[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 360px;
    width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   Logo area – 200×200 container with stacked rings
   (mirrors the MAUI Grid that holds RingOuter/Inner + LogoBadge
   + UpdateRingOuter/Inner + UpdateTrigger at the same centre)
   ────────────────────────────────────────────────────────────── */
.logo-area[b-3vyvdwj1gp] {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 28px;
}

/* Base class: all rings centred via negative margin */
.ring[b-3vyvdwj1gp] {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

/* Gold rings (always visible, same as normal splash) */
.ring-gold-outer[b-3vyvdwj1gp] {
    width: 152px;
    height: 152px;
    margin-top: -76px;
    margin-left: -76px;
    border: 1px solid rgba(251, 203, 91, 0.4);
    animation: ring-outer-pulse-b-3vyvdwj1gp 4400ms ease-in-out infinite;
}

.ring-gold-inner[b-3vyvdwj1gp] {
    width: 122px;
    height: 122px;
    margin-top: -61px;
    margin-left: -61px;
    border: 1.5px solid rgba(251, 203, 91, 0.7);
    animation: ring-inner-pulse-b-3vyvdwj1gp 3600ms ease-in-out infinite;
}

/* Gold logo badge (96×96, z-index 1 so it sits above gold rings) */
.logo-badge[b-3vyvdwj1gp] {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd977 0%, #fbcb5b 58%, #efb93f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -48px;
    box-shadow: 0 8px 24px rgba(251, 203, 91, 0.25);
    z-index: 1;
}

.logo-badge img[b-3vyvdwj1gp] {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

/* Red rings (update state – same dimensions as UpdateRingOuter/Inner in XAML) */
.ring-red-outer[b-3vyvdwj1gp] {
    width: 176px;
    height: 176px;
    margin-top: -88px;
    margin-left: -88px;
    border: 2px solid var(--error-red);
    opacity: 0.45;
    animation: ring-outer-pulse-b-3vyvdwj1gp 4400ms ease-in-out infinite;
    z-index: 2;
}

.ring-red-inner[b-3vyvdwj1gp] {
    width: 152px;
    height: 152px;
    margin-top: -76px;
    margin-left: -76px;
    border: 2.5px solid var(--error-red);
    opacity: 0.65;
    animation: ring-inner-pulse-b-3vyvdwj1gp 3600ms ease-in-out infinite;
    z-index: 2;
}

/* Red "LANCEREN" button (128×128, mirrors UpdateTrigger in XAML)
   top/left calculated so the button is centred in the 200×200 container */
.launch-btn[b-3vyvdwj1gp] {
    position: absolute;
    width: 128px;
    height: 128px;
    top: calc(50% - 64px);
    left: calc(50% - 64px);
    border-radius: 50%;
    background: var(--error-red);
    border: 3px solid #ffffff;
    color: #ffffff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    /* Animation mirrors AnimateUpdateTriggerAsync:
       ScaleTo(1.1, 720) → RotateTo(2, 220) → ScaleTo(1.0, 720)
       → RotateTo(-2, 220) → RotateTo(0, 180) = 2060 ms total */
    animation: launcher-pulse-b-3vyvdwj1gp 2060ms ease-in-out infinite;
}

.launch-btn:disabled[b-3vyvdwj1gp],
.launch-btn--launching[b-3vyvdwj1gp] {
    animation: none;
    cursor: default;
    opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────
   App title & subtitle (mirrors AppTitle + AppWord labels)
   ────────────────────────────────────────────────────────────── */
.app-name[b-3vyvdwj1gp] {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0 0 4px 0;
    text-align: center;
}

.app-word[b-3vyvdwj1gp] {
    color: #fbcb5b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 32px 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Update content block (mirrors UpdatePromptContent)
   ────────────────────────────────────────────────────────────── */
.update-content[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* Eyebrow – mirrors UpdateEyebrow ("SYSTEEMUPDATE GEREED") */
.update-eyebrow[b-3vyvdwj1gp] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--error-red);
    margin: 0 0 8px 0;
}

.update-eyebrow--current[b-3vyvdwj1gp] {
    color: #4ade80;
}

.update-eyebrow--neutral[b-3vyvdwj1gp] {
    color: #94a3b8;
}

/* Headline – mirrors UpdateTitle ("Klik op de rode knop.") */
.update-headline[b-3vyvdwj1gp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

/* Subtitle – mirrors UpdateSubtitle */
.update-subtitle[b-3vyvdwj1gp] {
    font-size: 0.8125rem;
    color: #acacac;
    margin: 0 0 18px 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   Action buttons row (mirrors UpdateActions HorizontalStackLayout)
   ────────────────────────────────────────────────────────────── */
.action-row[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action[b-3vyvdwj1gp] {
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease;
}

.btn-action:disabled[b-3vyvdwj1gp] {
    opacity: 0.5;
    cursor: default;
}

/* "Later" button – mirrors UpdateLaterButton (transparent bg, gray border) */
.btn-action--ghost[b-3vyvdwj1gp] {
    background: transparent;
    border: 1px solid #6E6E6E;
    color: #c8c8c8;
}

/* "Nog eens checken" button – mirrors UpdateRefreshButton (Gray900 bg) */
.btn-action--outline[b-3vyvdwj1gp] {
    background: #212121;
    border: 1px solid #404040;
    color: #ffffff;
}

.btn-action:hover:not(:disabled)[b-3vyvdwj1gp] {
    opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────
   Keyframe animations
   ────────────────────────────────────────────────────────────── */

/* Ring pulses – mirror PulseRingsAsync / PulseUpdateTriggerRingsAsync */
@keyframes ring-inner-pulse-b-3vyvdwj1gp {
    0%, 100% { transform: scale(1);    opacity: 0.65; }
    50%       { transform: scale(1.08); opacity: 0.25; }
}

@keyframes ring-outer-pulse-b-3vyvdwj1gp {
    0%, 100% { transform: scale(1);    opacity: 0.45; }
    50%       { transform: scale(1.1);  opacity: 0.12; }
}

/* Launch button wobble – mirrors AnimateUpdateTriggerAsync
   Timing percentages from sequential durations:
   720 + 220 + 720 + 220 + 180 = 2060 ms
   35% = 720/2060 | 46% = 940/2060 | 81% = 1660/2060 | 91% = 1880/2060 */
@keyframes launcher-pulse-b-3vyvdwj1gp {
    0%   { transform: scale(1.0) rotate(0deg);  }
    35%  { transform: scale(1.1) rotate(0deg);  }
    46%  { transform: scale(1.1) rotate(2deg);  }
    81%  { transform: scale(1.0) rotate(2deg);  }
    91%  { transform: scale(1.0) rotate(-2deg); }
    100% { transform: scale(1.0) rotate(0deg);  }
}

.splash-content[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 360px;
    width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   Logo area – 200×200 container with stacked rings
   (mirrors the MAUI Grid that holds RingOuter/Inner + LogoBadge
   + UpdateRingOuter/Inner + UpdateTrigger at the same centre)
   ────────────────────────────────────────────────────────────── */
.logo-area[b-3vyvdwj1gp] {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 28px;
}

/* Base class: all rings centred via negative margin */
.ring[b-3vyvdwj1gp] {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

/* Gold rings (always visible, same as normal splash) */
.ring-gold-outer[b-3vyvdwj1gp] {
    width: 152px;
    height: 152px;
    margin-top: -76px;
    margin-left: -76px;
    border: 1px solid rgba(251, 203, 91, 0.4);
    animation: ring-outer-pulse-b-3vyvdwj1gp 4400ms ease-in-out infinite;
}

.ring-gold-inner[b-3vyvdwj1gp] {
    width: 122px;
    height: 122px;
    margin-top: -61px;
    margin-left: -61px;
    border: 1.5px solid rgba(251, 203, 91, 0.7);
    animation: ring-inner-pulse-b-3vyvdwj1gp 3600ms ease-in-out infinite;
}

/* Gold logo badge (96×96, z-index 1 so it sits above gold rings) */
.logo-badge[b-3vyvdwj1gp] {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd977 0%, #fbcb5b 58%, #efb93f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -48px;
    box-shadow: 0 8px 24px rgba(251, 203, 91, 0.25);
    z-index: 1;
}

.logo-badge img[b-3vyvdwj1gp] {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

/* Red rings (update state – same dimensions as UpdateRingOuter/Inner in XAML) */
.ring-red-outer[b-3vyvdwj1gp] {
    width: 176px;
    height: 176px;
    margin-top: -88px;
    margin-left: -88px;
    border: 2px solid #FF0000;
    opacity: 0.45;
    animation: ring-outer-pulse-b-3vyvdwj1gp 4400ms ease-in-out infinite;
    z-index: 2;
}

.ring-red-inner[b-3vyvdwj1gp] {
    width: 152px;
    height: 152px;
    margin-top: -76px;
    margin-left: -76px;
    border: 2.5px solid #FF0000;
    opacity: 0.65;
    animation: ring-inner-pulse-b-3vyvdwj1gp 3600ms ease-in-out infinite;
    z-index: 2;
}

/* Red "LANCEREN" button (128×128, mirrors UpdateTrigger in XAML)
   top/left calculated so the button is centred in the 200×200 container */
.launch-btn[b-3vyvdwj1gp] {
    position: absolute;
    width: 128px;
    height: 128px;
    top: calc(50% - 64px);
    left: calc(50% - 64px);
    border-radius: 50%;
    background: #FF0000;
    border: 3px solid #ffffff;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    /* Animation mirrors AnimateUpdateTriggerAsync:
       ScaleTo(1.1, 720) → RotateTo(2, 220) → ScaleTo(1.0, 720)
       → RotateTo(-2, 220) → RotateTo(0, 180) = 2060 ms total */
    animation: launcher-pulse-b-3vyvdwj1gp 2060ms ease-in-out infinite;
}

.launch-btn:disabled[b-3vyvdwj1gp],
.launch-btn--launching[b-3vyvdwj1gp] {
    animation: none;
    cursor: default;
    opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────
   App title & subtitle (mirrors AppTitle + AppWord labels)
   ────────────────────────────────────────────────────────────── */
.app-name[b-3vyvdwj1gp] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0 0 4px 0;
    text-align: center;
}

.app-word[b-3vyvdwj1gp] {
    color: #fbcb5b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 32px 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Update content block (mirrors UpdatePromptContent)
   ────────────────────────────────────────────────────────────── */
.update-content[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* Eyebrow – mirrors UpdateEyebrow ("SYSTEEMUPDATE GEREED") */
.update-eyebrow[b-3vyvdwj1gp] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FF0000;
    margin: 0 0 8px 0;
}

.update-eyebrow--current[b-3vyvdwj1gp] {
    color: #4ade80;
}

.update-eyebrow--neutral[b-3vyvdwj1gp] {
    color: #94a3b8;
}

/* Headline – mirrors UpdateTitle ("Klik op de rode knop.") */
.update-headline[b-3vyvdwj1gp] {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

/* Subtitle – mirrors UpdateSubtitle */
.update-subtitle[b-3vyvdwj1gp] {
    font-size: 13px;
    color: #acacac;
    margin: 0 0 18px 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   Action buttons row (mirrors UpdateActions HorizontalStackLayout)
   ────────────────────────────────────────────────────────────── */
.action-row[b-3vyvdwj1gp] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action[b-3vyvdwj1gp] {
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease;
}

.btn-action:disabled[b-3vyvdwj1gp] {
    opacity: 0.5;
    cursor: default;
}

/* "Later" button – mirrors UpdateLaterButton (transparent bg, gray border) */
.btn-action--ghost[b-3vyvdwj1gp] {
    background: transparent;
    border: 1px solid #6E6E6E;
    color: #c8c8c8;
}

/* "Nog eens checken" button – mirrors UpdateRefreshButton (Gray900 bg) */
.btn-action--outline[b-3vyvdwj1gp] {
    background: #212121;
    border: 1px solid #404040;
    color: #ffffff;
}

.btn-action:hover:not(:disabled)[b-3vyvdwj1gp] {
    opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────
   Keyframe animations
   ────────────────────────────────────────────────────────────── */

/* Ring pulses – mirror PulseRingsAsync / PulseUpdateTriggerRingsAsync */
@keyframes ring-inner-pulse-b-3vyvdwj1gp {
    0%, 100% { transform: scale(1);    opacity: 0.65; }
    50%       { transform: scale(1.08); opacity: 0.25; }
}

@keyframes ring-outer-pulse-b-3vyvdwj1gp {
    0%, 100% { transform: scale(1);    opacity: 0.45; }
    50%       { transform: scale(1.1);  opacity: 0.12; }
}

/* Launch button wobble – mirrors AnimateUpdateTriggerAsync
   Timing percentages from sequential durations:
   720 + 220 + 720 + 220 + 180 = 2060 ms
   35% = 720/2060 | 46% = 940/2060 | 81% = 1660/2060 | 91% = 1880/2060 */
@keyframes launcher-pulse-b-3vyvdwj1gp {
    0%   { transform: scale(1.0) rotate(0deg);  }
    35%  { transform: scale(1.1) rotate(0deg);  }
    46%  { transform: scale(1.1) rotate(2deg);  }
    81%  { transform: scale(1.0) rotate(2deg);  }
    91%  { transform: scale(1.0) rotate(-2deg); }
    100% { transform: scale(1.0) rotate(0deg);  }
}