/* ==========================================================================
   HalySpark ID – UI theme
   Builds on Bootstrap 5 and restyles the default ASP.NET Core Identity UI
   pages (served from Microsoft.AspNetCore.Identity.UI) without scaffolding.
   ========================================================================== */

/* ---------- Design tokens ---------- */

:root {
    --bg: #f5f6fb;
    --surface: #ffffff;
    --surface-2: #f1f3f9;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --brand: #4f46e5;
    --brand-2: #9333ea;
    --brand-text: #4338ca;
    --brand-soft: rgba(79, 70, 229, .09);
    --btn-bg: #4f46e5;
    --btn-bg-hover: #4338ca;
    --input-bg: #ffffff;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #b45309;
    --info: #0369a1;
    --ring: 0 0 0 4px rgba(79, 70, 229, .18);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 12px 32px -12px rgba(15, 23, 42, .14);
    --radius: 16px;
    --radius-sm: 10px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
    --bg: #0b0f1e;
    --surface: #121731;
    --surface-2: #1a2042;
    --text: #e6e8f2;
    --muted: #97a0bd;
    --border: #252c52;
    --border-strong: #343d6b;
    --brand: #818cf8;
    --brand-2: #c084fc;
    --brand-text: #a5b4fc;
    --brand-soft: rgba(129, 140, 248, .14);
    --btn-bg: #5b5fe9;
    --btn-bg-hover: #6d71f0;
    --input-bg: #0e1330;
    --danger: #f87171;
    --success: #4ade80;
    --warning: #fbbf24;
    --info: #38bdf8;
    --ring: 0 0 0 4px rgba(129, 140, 248, .25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 16px 40px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0b0f1e;
        --surface: #121731;
        --surface-2: #1a2042;
        --text: #e6e8f2;
        --muted: #97a0bd;
        --border: #252c52;
        --border-strong: #343d6b;
        --brand: #818cf8;
        --brand-2: #c084fc;
        --brand-text: #a5b4fc;
        --brand-soft: rgba(129, 140, 248, .14);
        --btn-bg: #5b5fe9;
        --btn-bg-hover: #6d71f0;
        --input-bg: #0e1330;
        --danger: #f87171;
        --success: #4ade80;
        --warning: #fbbf24;
        --info: #38bdf8;
        --ring: 0 0 0 4px rgba(129, 140, 248, .25);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 16px 40px -16px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

/* ---------- Base ---------- */

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    letter-spacing: -.015em;
}

a {
    color: var(--brand-text);
    text-decoration: none;
    text-underline-offset: 3px;
}

    a:hover {
        color: var(--brand-text);
        text-decoration: underline;
    }

hr {
    border-color: var(--border);
    opacity: 1;
}

code {
    font-family: var(--mono);
    color: var(--brand-text);
}

.text-muted {
    color: var(--muted) !important;
}

.text-dark {
    color: var(--text) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-info {
    color: var(--muted) !important;
}

.text-gradient {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

::selection {
    background: var(--brand-soft);
}

/* ---------- Brand ---------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: var(--text);
}

    .brand:hover {
        color: var(--text);
        text-decoration: none;
    }

.brand-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.brand-light,
.brand-light:hover {
    color: #fff;
}

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

.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .55rem 1.1rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

    .btn:focus,
    .btn:focus-visible {
        box-shadow: var(--ring);
    }

.btn-lg {
    padding: .75rem 1.3rem;
    font-size: 1rem;
    border-radius: 12px;
}

.btn-primary {
    color: #fff;
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:disabled {
        color: #fff;
        background: var(--btn-bg-hover);
        border-color: var(--btn-bg-hover);
    }

.btn-danger {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active {
        color: #fff;
        background: #b91c1c;
        border-color: #b91c1c;
    }

.btn-ghost {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
}

    .btn-ghost:hover,
    .btn-ghost:focus {
        color: var(--text);
        background: var(--surface-2);
        border-color: var(--border-strong);
    }

.btn-link {
    color: var(--brand-text);
    font-weight: 500;
}

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

    .theme-toggle:hover {
        color: var(--text);
        background: var(--surface-2);
    }

    .theme-toggle:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

    .theme-toggle svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .theme-toggle .icon-sun,
    [data-theme="dark"] .theme-toggle .icon-moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle .icon-sun {
        display: block;
    }

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

.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--input-bg);
        border-color: var(--brand);
        color: var(--text);
        box-shadow: var(--ring);
    }

    .form-control::placeholder {
        color: var(--muted);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--surface-2);
        color: var(--muted);
    }

    .form-control.input-validation-error {
        border-color: var(--danger);
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    caret-color: var(--text);
}

.form-floating > .form-control {
    height: 3.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.form-floating > label {
    padding-left: 1rem;
    color: var(--muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .8;
}

.form-floating > .text-danger,
.field-validation-error {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
}

.form-label {
    color: var(--muted);
    font-weight: 500;
}

.input-group-text {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--muted);
    border-radius: var(--radius-sm);
}

.form-floating.input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-floating.input-group .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    padding: 0 1rem;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    background-color: var(--input-bg);
    border-color: var(--border-strong);
    cursor: pointer;
}

    .form-check-input:checked {
        background-color: var(--btn-bg);
        border-color: var(--btn-bg);
    }

    .form-check-input:focus {
        border-color: var(--brand);
        box-shadow: var(--ring);
    }

.checkbox label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

    .checkbox label .form-check-input {
        margin: 0;
    }

.validation-summary-errors {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    font-size: .9rem;
}

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

/* ---------- Alerts, tables, misc ---------- */

.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--text);
}

.alert-success {
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.alert-danger {
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.alert-warning {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}

.alert-info {
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.table {
    color: var(--text);
    border-color: var(--border);
}

    .table > :not(caption) > * > * {
        background-color: transparent;
        border-bottom-color: var(--border);
        padding: .75rem .5rem;
    }

.recovery-code {
    display: inline-block;
    margin: .2rem .4rem .2rem 0;
    padding: .35rem .6rem;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .95rem;
}

.navbar-toggler {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .35rem .55rem;
}

    .navbar-toggler:focus {
        box-shadow: var(--ring);
    }

.navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28100, 116, 139, 1%29' stroke-linecap='round' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   App layout (home, account management)
   ========================================================================== */

.layout-app {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 400px at 50% -200px, var(--brand-soft), transparent 70%),
        var(--bg);
}

.container {
    max-width: 1120px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

    .app-header .navbar {
        padding: .8rem 0;
    }

    .app-header .navbar-collapse.show,
    .app-header .navbar-collapse.collapsing {
        padding-top: .75rem;
    }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .8rem .3rem .3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    font-size: .92rem;
    max-width: 280px;
}

    .user-chip:hover {
        color: var(--text);
        text-decoration: none;
        border-color: var(--border-strong);
        background: var(--surface-2);
    }

.user-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.app-main {
    flex: 1 0 auto;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.app-footer {
    flex-shrink: 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .875rem;
}

    .app-footer .container {
        display: flex;
        gap: 1.25rem;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .app-footer a {
        color: var(--muted);
    }

/* Generic content inside the app layout (Identity pages that are not account management) */
.layout-app .app-main > h1 {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ---------- Home ---------- */

.hero {
    max-width: 760px;
    margin: 1.5rem auto 3.5rem;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    padding: .35rem .8rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.hero-title {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
    margin-bottom: 1.1rem;
}

.hero-lead {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto 2rem;
}

.hero-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .feature:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .feature h3 {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: .4rem;
    }

    .feature p {
        color: var(--muted);
        margin: 0;
        font-size: .95rem;
    }

.feature-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: var(--brand-soft);
    position: relative;
}

    .feature-icon::after {
        content: "";
        position: absolute;
        inset: 10px;
        background: var(--brand-text);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
    }

.feature-icon-flow {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3l4 4-4 4'/><path d='M3 7h18'/><path d='M7 21l-4-4 4-4'/><path d='M21 17H3'/></svg>");
}

.feature-icon-lock {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
}

.feature-icon-user {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>");
}

.endpoint-list {
    display: grid;
    gap: .75rem;
    margin: 0;
}

    .endpoint-list > div {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 1rem;
        align-items: center;
    }

    .endpoint-list dt {
        font-weight: 500;
        color: var(--muted);
        font-size: .9rem;
    }

    .endpoint-list dd {
        margin: 0;
        min-width: 0;
    }

    .endpoint-list code {
        display: block;
        padding: .45rem .7rem;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        font-size: .85rem;
        overflow-x: auto;
        white-space: nowrap;
    }

@media (max-width: 575.98px) {
    .endpoint-list > div {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
}

/* ---------- Administration (/Admin/*) ---------- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

    .page-header h1 {
        font-size: clamp(1.6rem, 2.5vw, 2rem);
        font-weight: 700;
        margin-bottom: .25rem;
    }

    .page-header p {
        margin: 0;
    }

.back-link {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
}

    .back-link:hover {
        color: var(--text);
    }

.form-section {
    margin-bottom: 1rem;
}

.form-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
}

.form-text {
    color: var(--muted);
}

.btn-sm {
    padding: .3rem .7rem;
    font-size: .85rem;
    border-radius: 8px;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
}

.choice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .choice:hover {
        border-color: var(--border-strong);
    }

    .choice:has(input:checked) {
        border-color: var(--brand);
        background: var(--brand-soft);
    }

    .choice:has(input:disabled) {
        cursor: default;
    }

    .choice:has(input:disabled:not(:checked)) {
        opacity: .55;
    }

    .choice .form-check-input {
        margin-top: .2rem;
        flex-shrink: 0;
    }

    .choice strong {
        display: block;
        font-weight: 600;
    }

    .choice small {
        color: var(--muted);
    }

.app-table th {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-table > :not(caption) > * > * {
    padding: .85rem 1.25rem;
    vertical-align: middle;
}

.app-table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.app-name {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.app-client-id {
    font-size: .8rem;
    color: var(--muted);
}

.tag {
    display: inline-block;
    padding: .15rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.tag-brand {
    border-color: transparent;
    background: var(--brand-soft);
    color: var(--brand-text);
}

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

.copy-field {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .copy-field code {
        flex: 1;
        min-width: 0;
    }

.danger-zone {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

/* ---------- Account management (Identity /Account/Manage/*) ---------- */

.page-manage .app-main > h1 {
    margin-bottom: .25rem;
}

.page-manage .app-main > div > h2 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 2rem;
}

.page-manage .app-main > div > hr {
    display: none;
}

.page-manage .app-main > div > .row {
    --bs-gutter-x: 0;
    gap: 1.5rem;
    margin: 0;
}

    .page-manage .app-main > div > .row > [class*="col-"] {
        padding: 0;
    }

        /* Sidebar navigation */
        .page-manage .app-main > div > .row > [class*="col-"]:first-child {
            align-self: flex-start;
        }

.page-manage .nav-pills {
    gap: .2rem;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .page-manage .nav-pills .nav-link {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .8rem;
        border-radius: var(--radius-sm);
        color: var(--muted);
        font-weight: 500;
        transition: background-color .15s ease, color .15s ease;
    }

        .page-manage .nav-pills .nav-link:hover {
            background: var(--surface-2);
            color: var(--text);
            text-decoration: none;
        }

        .page-manage .nav-pills .nav-link.active {
            background: var(--brand-soft);
            color: var(--brand-text);
        }

        .page-manage .nav-pills .nav-link::before {
            content: "";
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            background: currentColor;
            -webkit-mask: var(--icon, none) center / contain no-repeat;
            mask: var(--icon, none) center / contain no-repeat;
        }

.page-manage #profile {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>");
}

.page-manage #email {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
}

.page-manage #change-password {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='4.5'/><path d='m10.7 12.3 9.3-9.3'/><path d='m17 6 3 3'/><path d='m14 9 2 2'/></svg>");
}

.page-manage #external-login {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/><path d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/></svg>");
}

.page-manage #two-factor {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
}

.page-manage #personal-data {
    --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h5'/></svg>");
}

/* Content card */
.page-manage .app-main > div > .row > [class*="col-"]:last-child {
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .page-manage .app-main > div > .row > [class*="col-"]:last-child > h3 {
        font-size: 1.35rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .page-manage .app-main > div > .row > [class*="col-"]:last-child h4 {
        font-size: 1.05rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: .85rem;
    }

    .page-manage .app-main > div > .row > [class*="col-"]:last-child .row {
        --bs-gutter-x: 0;
        margin: 0;
    }

        .page-manage .app-main > div > .row > [class*="col-"]:last-child .row > [class*="col-"] {
            width: 100%;
            max-width: 560px;
            padding: 0;
        }

    .page-manage .app-main > div > .row > [class*="col-"]:last-child .w-100.btn {
        width: auto !important;
        min-width: 180px;
    }

.page-manage #download-data {
    margin-bottom: .6rem;
}

@media (min-width: 992px) {
    .page-manage .app-main > div > .row {
        flex-wrap: nowrap;
    }

        .page-manage .app-main > div > .row > [class*="col-"]:first-child {
            flex: 0 0 260px;
            width: 260px;
            position: sticky;
            top: 90px;
        }

        .page-manage .app-main > div > .row > [class*="col-"]:last-child {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
        }
}

@media (max-width: 575.98px) {
    .page-manage .app-main > div > .row > [class*="col-"]:last-child {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Auth layout (login, register, password reset, …)
   ========================================================================== */

.layout-auth {
    background: var(--bg);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

@media (min-width: 992px) {
    .auth-shell {
        grid-template-columns: minmax(380px, 44%) minmax(0, 1fr);
    }
}

/* Brand panel */
.auth-aside {
    display: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    color: #fff;
    background:
        radial-gradient(600px 400px at 110% 10%, rgba(192, 132, 252, .55), transparent 60%),
        radial-gradient(500px 500px at -10% 110%, rgba(56, 189, 248, .35), transparent 60%),
        linear-gradient(145deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
}

    .auth-aside::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
        background-size: 40px 40px;
        -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
        pointer-events: none;
    }

    .auth-aside > * {
        position: relative;
        z-index: 1;
    }

    .auth-aside .brand-mark rect {
        fill: rgba(255, 255, 255, .16);
    }

@media (min-width: 992px) {
    .auth-aside {
        display: flex;
    }
}

.auth-aside-content {
    max-width: 440px;
}

.auth-aside-title {
    color: #fff;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
}

.auth-aside-lead {
    color: rgba(255, 255, 255, .8);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.auth-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .85rem;
}

    .auth-features li {
        display: flex;
        align-items: center;
        gap: .75rem;
        color: rgba(255, 255, 255, .92);
        font-weight: 500;
    }

        .auth-features li::before {
            content: "";
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .16) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-8'/></svg>") center / 14px no-repeat;
        }

.auth-aside-footer {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
}

/* Form side */
.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem 3rem;
    background: radial-gradient(900px 400px at 50% -100px, var(--brand-soft), transparent 70%), var(--bg);
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 460px;
    margin-bottom: auto;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .auth-topbar {
        max-width: none;
        justify-content: flex-end;
    }

        .auth-topbar .brand {
            display: none;
        }
}

.auth-card {
    width: 100%;
    max-width: 460px;
    margin-bottom: auto;
    padding: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    animation: auth-card-in .35s ease-out both;
}

@keyframes auth-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
}

.auth-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.auth-card h2 {
    font-size: .98rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
    margin-bottom: 1.5rem;
}

.auth-card hr {
    display: none;
}

.auth-card p {
    color: var(--muted);
}

/* Identity pages render two side-by-side columns (local + external login); stack them inside the card */
.auth-card .row {
    --bs-gutter-x: 0;
    flex-direction: column;
    margin: 0;
}

    .auth-card .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin-left: 0;
        padding: 0;
    }

        .auth-card .row > [class*="col-"] + [class*="col-"] {
            margin-top: 1.75rem;
        }

/* "or" divider heading above external providers */
.auth-card h3 {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    white-space: nowrap;
}

    .auth-card h3::before,
    .auth-card h3::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }

.auth-card section > div > p {
    font-size: .85rem;
    text-align: center;
}

.auth-card #external-account p {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.auth-card #external-account .btn {
    width: 100%;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
}

    .auth-card #external-account .btn:hover {
        background: var(--surface-2);
    }

/* Links below the login form (the form ends with a hidden antiforgery input, hence last-of-type) */
#account > div:last-of-type {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1.25rem;
    font-size: .9rem;
    text-align: center;
}

    #account > div:last-of-type p {
        margin: 0;
    }

.auth-card .btn-lg {
    margin-top: .25rem;
}

/* Logout page's "Click here to Logout" button */
.auth-card .nav-link.btn-link {
    padding: 0;
    color: var(--brand-text) !important;
}