/* ============================================================================
   Identity pages — dark edition
   ============================================================================
   Loaded by the layout override at Areas/Identity/Pages/Shared/_Layout.cshtml,
   after brand.css, whose :root tokens every rule here is written against.

   Why this file exists at all: the Identity UI pages are the packaged Razor Class
   Library pages, and their page models are abstract stubs whose handlers throw
   NotImplementedException - so the markup cannot be replaced. The layout and this
   stylesheet are the only supported hooks for presentation, which is why all the
   theming is done by targeting the packaged markup's own ids, classes and form
   structure.

   The file is linked only from the Identity layout, so the couple of element-level
   rules at the bottom (html/body background) cannot reach any other surface.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------- */

html,
body {
    background: var(--jl-canvas);
}

.identity-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Same lit-from-above treatment as the marketing hero, so arriving from
       justlinks.page feels like the same product rather than a detour. */
    background: radial-gradient(70% 40% at 50% 0%, rgba(0, 175, 240, .12), transparent 70%);
    color: var(--jl-ink);
    font-family: var(--jl-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Nav ---------------------------------------------------------------------- */

.identity-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7, 8, 10, .72);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--jl-line);
}

.identity-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
    height: 4.5rem;
}

.identity-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--jl-ink);
    text-decoration: none;
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.03em;
}

.identity-brand:hover { color: #fff; }

.identity-brand img {
    width: 28px;
    height: auto;
    flex: none;
}

.identity-brand-dot { color: var(--jl-cyan); }

.identity-nav-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.identity-nav-link {
    color: var(--jl-ink-2);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    white-space: nowrap;
}

.identity-nav-link:hover { color: #fff; }

.identity-logout { margin: 0; }

.identity-nav-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jl-ink-2);
    font-size: .93rem;
    font-weight: 500;
    cursor: pointer;
}

.identity-nav-btn:hover { color: #fff; }

.identity-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--jl-sky), var(--jl-cyan));
    color: #04141c;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 34px -18px rgba(0, 175, 240, .9);
}

.identity-nav-cta:hover {
    color: #04141c;
    filter: brightness(1.06);
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .identity-brand { font-size: 1rem; }
    .identity-brand img { width: 24px; }
    .identity-nav-cta { padding: .45rem .85rem; font-size: .84rem; }
    .identity-nav-link { font-size: .86rem; }
    .identity-nav-actions { gap: .6rem; }
}

/* Main + card -------------------------------------------------------------- */

.identity-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: clamp(2.25rem, 6vw, 4.5rem) 1.25rem clamp(3.5rem, 8vw, 6rem);
}

.identity-card {
    width: min(980px, 100%);
    height: fit-content;
    padding: clamp(1.6rem, 4vw, 3rem);
    border: 1px solid var(--jl-line);
    border-radius: 24px;
    background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
    box-shadow: 0 50px 120px -60px rgba(0, 0, 0, .95);

    /* The vendored Bootstrap (5.3) draws its floating-label mask and other surfaces
       from --bs-body-bg, whose default is the light #fff. Left alone, that white
       leaked through inside this dark card as a pale box behind the floated label.
       Retargeting the tokens here keeps everything Bootstrap paints on the card's
       own dark surface. The mask itself is removed outright further down. */
    --bs-body-bg: #14171b;
    --bs-secondary-bg: #14171b;
    --bs-body-color: var(--jl-ink);
}

/* A page with no second column (a single narrow form) reads better in a tighter
   card than in one sized for a two-column layout. */
.identity-card:has(#account):not(:has(#external-account)),
.identity-card:has(#registerForm):not(:has(#external-account)) {
    width: min(520px, 100%);
}

/* Footer ------------------------------------------------------------------- */

.identity-footer {
    border-top: 1px solid var(--jl-line);
    padding: 1.6rem 0;
    font-size: .84rem;
    color: var(--jl-ink-3);
}

.identity-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
}

.identity-footer a {
    color: var(--jl-ink-2);
    text-decoration: none;
}

.identity-footer a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Typography inside the card
   ------------------------------------------------------------------------- */

.identity-card h1 {
    margin: 0 0 .5rem;
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--jl-ink);
}

.identity-card h2 {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--jl-ink-2);
}

/* Login renders no h1 - the packaged page differs from Register there - so its h2
   would otherwise be styled as a subtitle. Promoting it keeps a real page heading on
   the screen where a visitor decides whether to trust the site with a password. */
.identity-card:not(:has(h1)) h2 {
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--jl-ink);
}

.identity-card h3 {
    margin: 0 0 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jl-ink-3);
}

.identity-card h4 {
    margin: 0 0 .6rem;
    font-family: var(--jl-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--jl-ink);
}

.identity-card p {
    color: var(--jl-ink-2);
}

.identity-card hr {
    height: 1px;
    margin: 1.1rem 0 1.4rem;
    border: 0;
    background: var(--jl-line);
    opacity: 1;
}

.identity-card a {
    color: var(--jl-sky);
    text-decoration: none;
}

.identity-card a:hover {
    color: #fff;
    text-decoration: underline;
}

.identity-card code {
    color: var(--jl-sky);
    background: rgba(0, 175, 240, .1);
    padding: .1rem .42rem;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.identity-card .form-floating > .form-control,
.identity-card .form-control,
.identity-card .form-select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--jl-line-strong);
    border-radius: 14px;
    color: var(--jl-ink);
}

.identity-card .form-floating > .form-control:focus,
.identity-card .form-control:focus,
.identity-card .form-select:focus {
    background: rgba(255, 255, 255, .06);
    border-color: var(--jl-cyan);
    color: var(--jl-ink);
    box-shadow: 0 0 0 3px rgba(0, 175, 240, .18);
}

.identity-card .form-select option {
    background: #0e1013;
    color: var(--jl-ink);
}

/* Floating labels, defined explicitly rather than inherited.

   The packaged pages mark their inputs up as Bootstrap 5 form-floating, and this file
   previously only recoloured the label. But the vendored Bootstrap the Identity package
   ships does not hide the input's own placeholder, so the label and the example text
   ("name@example.com") rendered on top of each other in the same field - visible in dark
   theme and ugly in light. The whole behaviour is stated here so it does not depend on
   which Bootstrap build is bundled: the label occupies the field as its placeholder while
   empty, and lifts out of the way on focus or once there is a value. */
.identity-card .form-floating {
    position: relative;
}

.identity-card .form-floating > .form-control {
    height: 3.6rem;
    padding: 1.5rem .95rem .55rem;
}

.identity-card .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1.05rem .95rem;
    margin: 0;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .12s ease-in-out, transform .12s ease-in-out, color .12s ease-in-out;
    color: var(--jl-ink-2);
    opacity: 1;
}

/* Bootstrap 5.3 paints a masking box behind a floated label
   (.form-floating > label::after) filled with --bs-body-bg, to cover the input's
   border where the label crosses it. The packaged build does hide its own
   placeholder, so that mask is not needed here, and against this dark form it was
   a pale chip sitting under the label - while the floated label is light cyan, so
   the pair was barely readable. Our floating-label rule keeps the label inside the
   field, so the pseudo-element is removed. The selectors mirror Bootstrap's own
   (including Firefox's :-moz-placeholder-shown variant) so they win on
   specificity without needing !important. */
.identity-card .form-floating > .form-control:focus ~ label::after,
.identity-card .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.identity-card .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after,
.identity-card .form-floating > .form-select ~ label::after {
    content: none;
    display: none;
}

/* The label stands in for the placeholder, so the real one must not show. */
.identity-card .form-floating > .form-control::placeholder {
    color: transparent;
}

.identity-card .form-floating > .form-control:focus::placeholder {
    color: var(--jl-ink-3);
}

.identity-card .form-floating > .form-control:focus ~ label,
.identity-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 1;
    transform: scale(.82) translateY(-.5rem) translateX(.02rem);
    color: var(--jl-sky);
}

/* Password managers ignore background-color; the inset shadow is the only way to stop
   autofilled fields painting a white box on a dark form. */
.identity-card .form-control:-webkit-autofill,
.identity-card .form-control:-webkit-autofill:hover,
.identity-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--jl-ink);
    -webkit-box-shadow: 0 0 0 1000px #14171b inset;
    caret-color: var(--jl-ink);
}

.identity-card .form-check-input {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--jl-line-strong);
}

.identity-card .form-check-input:checked {
    background-color: var(--jl-cyan);
    border-color: var(--jl-cyan);
}

.identity-card .form-check-label,
.identity-card .form-label {
    color: var(--jl-ink-2);
}

/* Buttons ------------------------------------------------------------------ */

.identity-card .btn {
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    padding: .75rem 1.4rem;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.identity-card .btn-primary {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #07080a;
}

.identity-card .btn-primary:hover,
.identity-card .btn-primary:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #07080a;
    box-shadow: 0 12px 40px -14px rgba(127, 224, 255, .6);
}

.identity-card .btn-primary:focus,
.identity-card .btn:focus {
    box-shadow: none;
}

.identity-card .btn:focus-visible,
.identity-card .form-control:focus-visible {
    outline: 2px solid var(--jl-sky);
    outline-offset: 2px;
}

/* Validation --------------------------------------------------------------- */

.identity-card .text-danger {
    color: #ff8b95 !important;
    font-size: .84rem;
}

.identity-card .validation-summary-errors ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Two-column auth pages

   Register and Login each render a form column beside an external-provider column.

   These rules deliberately key off the FORM IDS and not the grid classes. This file
   previously targeted .col-md-4 / .col-md-6.col-md-offset-2, which the packaged markup
   does not use - the identity UI build installed here emits col-lg-6 and
   col-lg-4 col-lg-offset-2 (Bootstrap 3-era names, inert under Bootstrap 5). Those
   selectors therefore matched nothing, so the "no providers configured" column was never
   hidden and the widths were never applied. Matching on "the column that contains the
   form" is both correct today and stable across package versions.
   ------------------------------------------------------------------------- */

/* Hide the external column only while it would show the packaged developer text. The
   packaged page renders the social buttons inside a form with id "external-account"
   precisely when at least one provider exists, so the column is kept the moment a
   provider is configured. The :has() guards keep this precise - nothing else on any
   Identity page is touched. Supported in all current browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+); in an older browser the section would simply reappear,
   which is cosmetic only. */
.row:has(#registerForm) > div:not(:has(#registerForm)):not(:has(#external-account)),
.row:has(#account) > div:not(:has(#account)):not(:has(#external-account)) {
    display: none;
}

@media (min-width: 992px) {
    .identity-card .row:has(#registerForm),
    .identity-card .row:has(#account) {
        --bs-gutter-x: 3.5rem;
        align-items: start;
    }

    /* Equal halves, so the card reads as a deliberate split rather than as a form with
       an unexplained gap beside it. margin-left is zeroed because the packaged column
       carries a Bootstrap 3 offset class, which would otherwise push it out of its half
       on any build that still honours it. */
    .identity-card .row:has(#registerForm) > div:has(#registerForm),
    .identity-card .row:has(#account) > div:has(#account),
    .identity-card .row:has(#registerForm) > div:has(#external-account),
    .identity-card .row:has(#account) > div:has(#external-account) {
        width: 50%;
        margin-left: 0;
    }
}

/* When the columns stack they had no separation at all, so the external heading sat
   directly against the submit button. */
@media (max-width: 991.98px) {
    .identity-card .row:has(#registerForm) > div + div,
    .identity-card .row:has(#account) > div + div {
        margin-top: 2rem;
    }
}

/* ---------------------------------------------------------------------------
   External provider buttons.

   Selected by the provider name in the button's value attribute. That is the only
   provider-specific hook the packaged markup exposes, which is why styling and icons need
   no scaffolded Login/Register pages: the packaged page renders
   <button name="provider" value="@provider.Name">@provider.DisplayName</button>, so
   [value="Google"] is enough to target one provider.

   The icon is a data URI rather than a file under wwwroot. That keeps it in the one
   stylesheet that already ships, needs no new static asset, and cannot 404.
   ------------------------------------------------------------------------- */

#external-account button[name="provider"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-bottom: .6rem;
    padding: .75rem 1.1rem;
    font-weight: 600;
    font-size: .95rem;
    background-color: rgba(255, 255, 255, .05);
    color: var(--jl-ink);
    border: 1px solid var(--jl-line-strong);
    border-radius: 999px;
    transition: background-color .18s ease, border-color .18s ease;
}

#external-account button[name="provider"]:hover,
#external-account button[name="provider"]:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: var(--jl-ink-3);
}

#external-account button[name="provider"]::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#external-account button[name="provider"][value="Google"]::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="%234285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="%23FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="%2334A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>');
}

#external-account button[name="provider"][value="Microsoft"]::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="%23F25022" d="M1 1h10v10H1z"/><path fill="%237FBA00" d="M12 1h10v10H12z"/><path fill="%2300A4EF" d="M1 12h10v10H1z"/><path fill="%23FFB900" d="M12 12h10v10H12z"/></svg>');
}

/* The packaged GitHub mark is near-black (#24292F from the provider's own brand asset),
   which is invisible on this dark button. It is re-drawn in white rather than reused. */
#external-account button[name="provider"][value="GitHub"]::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffffff" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>');
}

/* LinkedIn's brand blue (#0A66C2) is dark enough to lose contrast against this button's dark
   surface - the same problem as the GitHub mark above, and solved the same way: re-drawn rather
   than reused. #70B5F9 is LinkedIn's own lighter blue, used by LinkedIn itself on dark
   backgrounds, so the brand is still recognisable and the mark stays legible. */
#external-account button[name="provider"][value="LinkedIn"]::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2370B5F9" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>');
}

/* Discord's mark is a single white path on the brand's blurple (#5865F2). Only the glyph is drawn
   here, in the lighter #A5B4FC, for the same reason as GitHub and LinkedIn above: the button surface
   is dark, so the full-colour badge would lose its edge while the glyph alone stays legible. */
#external-account button[name="provider"][value="Discord"]::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23A5B4FC" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>');
}

/* ---------------------------------------------------------------------------
   Account management

   The Manage pages reuse this layout through Manage/_Layout.cshtml, so the same card,
   type and form rules apply. These are the extra pieces those pages render: the
   section nav, status alerts and the external-logins table.
   ------------------------------------------------------------------------- */

.identity-card .nav-pills .nav-link {
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--jl-ink-2);
    font-size: .92rem;
    font-weight: 500;
}

.identity-card .nav-pills .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.identity-card .nav-pills .nav-link.active {
    background: rgba(0, 175, 240, .16);
    border-color: rgba(0, 175, 240, .38);
    color: #fff;
}

.identity-card .alert {
    border: 1px solid var(--jl-line-strong);
    border-radius: 14px;
    background: var(--jl-surface, rgba(255, 255, 255, .04));
    color: var(--jl-ink);
}

.identity-card .alert-success { border-color: rgba(0, 175, 240, .45); }
.identity-card .alert-danger { border-color: rgba(220, 53, 69, .45); color: #ffd9dd; }
.identity-card .alert-warning { border-color: rgba(255, 193, 7, .4); }

.identity-card .table {
    color: var(--jl-ink);
    border-color: var(--jl-line);
}

.identity-card .table > :not(caption) > * > * {
    background: transparent;
    color: var(--jl-ink);
    border-bottom-color: var(--jl-line);
}

.identity-card .btn-danger {
    background: transparent;
    border-color: rgba(220, 53, 69, .5);
    color: #ff8b95;
}

.identity-card .btn-danger:hover,
.identity-card .btn-danger:focus-visible {
    background: rgba(220, 53, 69, .16);
    border-color: rgba(220, 53, 69, .7);
    color: #ffd9dd;
}

.identity-card .btn-secondary,
.identity-card .btn-default {
    background: rgba(255, 255, 255, .05);
    border-color: var(--jl-line-strong);
    color: var(--jl-ink);
}

.identity-card .btn-secondary:hover,
.identity-card .btn-default:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .identity-card .btn,
    #external-account button[name="provider"] {
        transition: none;
    }
}