/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Sign In — Aurora layout
   ============================================================ */
.auth-shell[b-4w9mc1h028] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg-soft);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.25rem);
}

.auth-blob[b-4w9mc1h028] {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.auth-blob--violet[b-4w9mc1h028] { top: -160px; left: -120px; background: #7c3aed; }
.auth-blob--cyan[b-4w9mc1h028] { bottom: -180px; right: -120px; background: #06b6d4; opacity: .45; }
.auth-blob--pink[b-4w9mc1h028] { top: 35%; left: 42%; width: 320px; height: 320px; background: #ec4899; opacity: .28; }

.auth-grid[b-4w9mc1h028] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
}

/* ---------- Left brand aside ---------- */
.auth-aside[b-4w9mc1h028] {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--grad-night);
    color: #fff;
    min-height: 560px;
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.auth-aside[b-4w9mc1h028]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .55), transparent 55%),
        radial-gradient(circle at 82% 88%, rgba(6, 182, 212, .45), transparent 55%),
        radial-gradient(circle at 60% 30%, rgba(236, 72, 153, .35), transparent 60%);
    z-index: 0;
}

.auth-aside__inner[b-4w9mc1h028] {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 4vw, 3.25rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.auth-brand[b-4w9mc1h028] {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.auth-brand img[b-4w9mc1h028] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
}

.auth-brand strong[b-4w9mc1h028] { font-weight: 700; }

.auth-aside__copy[b-4w9mc1h028] { margin-top: auto; }
.auth-aside__copy .eyebrow[b-4w9mc1h028] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.auth-aside__copy .eyebrow[b-4w9mc1h028]::before { background: #fff; }

.auth-aside__copy h1[b-4w9mc1h028] {
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    margin: 1rem 0 1rem;
    line-height: 1.12;
}

.auth-aside__copy p[b-4w9mc1h028] {
    color: rgba(255, 255, 255, 0.78);
    max-width: 460px;
    font-size: 1.02rem;
}

.auth-perks[b-4w9mc1h028] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.auth-perks li[b-4w9mc1h028] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: .98rem;
}

.auth-perks li span[b-4w9mc1h028] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: .78rem;
    letter-spacing: .04em;
    font-weight: 600;
    color: #fff;
}

/* ---------- Right form panel ---------- */
.auth-panel[b-4w9mc1h028] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card[b-4w9mc1h028] {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: clamp(1.75rem, 3vw, 2.75rem);
}

.auth-card__head[b-4w9mc1h028] { text-align: left; margin-bottom: 1.75rem; }
.auth-card__head h2[b-4w9mc1h028] {
    font-size: clamp(1.65rem, 2.4vw, 2.1rem);
    margin: .85rem 0 .4rem;
}
.auth-card__sub[b-4w9mc1h028] { color: var(--muted); font-size: .98rem; }

/* ---------- Form ---------- */
.auth-form .form-control[b-4w9mc1h028] {
    border-radius: 14px;
    border: 1.5px solid var(--line);
    padding: 1rem .9rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-form .form-floating > label[b-4w9mc1h028] {
    color: var(--muted);
    padding: 1rem .95rem;
}

.auth-form .form-control:focus[b-4w9mc1h028] {
    border-color: var(--violet);
}

.auth-row[b-4w9mc1h028] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .25rem 0 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-check[b-4w9mc1h028] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--text);
    font-size: .95rem;
    cursor: pointer;
}

.auth-check .form-check-input[b-4w9mc1h028] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border-radius: 6px;
    border: 1.5px solid var(--line);
}

.auth-check .form-check-input:checked[b-4w9mc1h028] {
    background-color: var(--violet);
    border-color: var(--violet);
}

.auth-link[b-4w9mc1h028] {
    color: var(--violet);
    font-weight: 600;
    font-size: .92rem;
}

.auth-link:hover[b-4w9mc1h028] { color: var(--pink); }

.auth-submit[b-4w9mc1h028] {
    font-size: 1.02rem;
    padding: 1rem 1.6rem;
    margin-top: .25rem;
}

.auth-resend[b-4w9mc1h028] {
    text-align: center;
    margin: 1.1rem 0 0;
    font-size: .9rem;
    color: var(--muted);
}

.auth-resend a[b-4w9mc1h028] {
    color: var(--violet);
    font-weight: 600;
}

.auth-footer[b-4w9mc1h028] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
}

.auth-footer a[b-4w9mc1h028] {
    color: var(--violet);
    font-weight: 600;
    margin-left: .35rem;
}

.auth-footer a:hover[b-4w9mc1h028] { color: var(--pink); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .auth-grid[b-4w9mc1h028] { grid-template-columns: 1fr; }
    .auth-aside[b-4w9mc1h028] { min-height: 280px; }
    .auth-aside__copy h1[b-4w9mc1h028] { font-size: 1.85rem; }
    .auth-perks[b-4w9mc1h028] { display: none; }
}

@media (max-width: 520px) {
    .auth-aside__inner[b-4w9mc1h028] { padding: 1.75rem; gap: 1.25rem; }
    .auth-card[b-4w9mc1h028] { padding: 1.6rem; }
}

/* ============================================================
   Dark mode — most surfaces already use design-system tokens
   that remap automatically. The only hardcoded light surface
   is the white form card; the aside is an intentional dark
   gradient and is left untouched.
   ============================================================ */
html[data-theme="dark"] .auth-card[b-4w9mc1h028] {
    background: var(--surface);
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* ============================================================
   Sign Up — Aurora layout
   ============================================================ */
.auth-shell[b-lufvchgu1z] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg-soft);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.25rem);
}

.auth-blob[b-lufvchgu1z] {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.auth-blob--violet[b-lufvchgu1z] { top: -160px; left: -120px; background: #7c3aed; }
.auth-blob--cyan[b-lufvchgu1z] { bottom: -180px; right: -120px; background: #06b6d4; opacity: .45; }
.auth-blob--pink[b-lufvchgu1z] { top: 35%; left: 42%; width: 320px; height: 320px; background: #ec4899; opacity: .28; }

.auth-grid[b-lufvchgu1z] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
}

/* ---------- Left brand aside ---------- */
.auth-aside[b-lufvchgu1z] {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--grad-night);
    color: #fff;
    min-height: 620px;
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.auth-aside[b-lufvchgu1z]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .55), transparent 55%),
        radial-gradient(circle at 82% 88%, rgba(6, 182, 212, .45), transparent 55%),
        radial-gradient(circle at 60% 30%, rgba(236, 72, 153, .35), transparent 60%);
    z-index: 0;
}

.auth-aside__inner[b-lufvchgu1z] {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 4vw, 3.25rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.auth-brand[b-lufvchgu1z] {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
}

.auth-brand img[b-lufvchgu1z] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
}

.auth-brand strong[b-lufvchgu1z] { font-weight: 700; }

.auth-aside__copy[b-lufvchgu1z] { margin-top: auto; }
.auth-aside__copy .eyebrow[b-lufvchgu1z] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.auth-aside__copy .eyebrow[b-lufvchgu1z]::before { background: #fff; }

.auth-aside__copy h1[b-lufvchgu1z] {
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    margin: 1rem 0 1rem;
    line-height: 1.12;
}

.auth-aside__copy p[b-lufvchgu1z] {
    color: rgba(255, 255, 255, 0.78);
    max-width: 460px;
    font-size: 1.02rem;
}

.auth-perks[b-lufvchgu1z] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.auth-perks li[b-lufvchgu1z] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: .98rem;
}

.auth-perks li span[b-lufvchgu1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: .78rem;
    letter-spacing: .04em;
    font-weight: 600;
    color: #fff;
}

/* ---------- Right form panel ---------- */
.auth-panel[b-lufvchgu1z] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card[b-lufvchgu1z] {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: clamp(1.75rem, 3vw, 2.75rem);
}

.auth-card--wide[b-lufvchgu1z] { max-width: 620px; }

.auth-card__head[b-lufvchgu1z] { text-align: left; margin-bottom: 1.5rem; }
.auth-card__head h2[b-lufvchgu1z] {
    font-size: clamp(1.65rem, 2.4vw, 2.1rem);
    margin: .85rem 0 .4rem;
}
.auth-card__sub[b-lufvchgu1z] { color: var(--muted); font-size: .98rem; }

.auth-section-label[b-lufvchgu1z] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--violet);
    margin: 1.25rem 0 .85rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.auth-section-label[b-lufvchgu1z]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(124, 58, 237, .25), transparent);
}

/* ---------- Form ---------- */
.auth-form .form-control[b-lufvchgu1z],
.auth-form .form-select[b-lufvchgu1z] {
    border-radius: 14px;
    border: 1.5px solid var(--line);
    padding: 1rem .9rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-form .form-floating > label[b-lufvchgu1z] {
    color: var(--muted);
    padding: 1rem .95rem;
}

.auth-form .form-control:focus[b-lufvchgu1z],
.auth-form .form-select:focus[b-lufvchgu1z] { border-color: var(--violet); }

.auth-grid-2[b-lufvchgu1z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.auth-submit[b-lufvchgu1z] {
    font-size: 1.02rem;
    padding: 1rem 1.6rem;
    margin-top: .75rem;
}

.auth-footer[b-lufvchgu1z] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
}

.auth-footer a[b-lufvchgu1z] {
    color: var(--violet);
    font-weight: 600;
    margin-left: .35rem;
}

.auth-footer a:hover[b-lufvchgu1z] { color: var(--pink); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .auth-grid[b-lufvchgu1z] { grid-template-columns: 1fr; }
    .auth-aside[b-lufvchgu1z] { min-height: 280px; }
    .auth-aside__copy h1[b-lufvchgu1z] { font-size: 1.85rem; }
    .auth-perks[b-lufvchgu1z] { display: none; }
}

@media (max-width: 560px) {
    .auth-aside__inner[b-lufvchgu1z] { padding: 1.75rem; gap: 1.25rem; }
    .auth-card[b-lufvchgu1z] { padding: 1.6rem; }
    .auth-grid-2[b-lufvchgu1z] { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Dark mode — most surfaces already use design-system tokens
   that remap automatically. The only hardcoded light surface
   is the white form card; the aside is an intentional dark
   gradient and is left untouched.
   ============================================================ */
html[data-theme="dark"] .auth-card[b-lufvchgu1z] {
    background: var(--surface);
}
/* /Components/AiAssistant.razor.rz.scp.css */
/* ============================================================
   AI Assistant ("Kong") — floating chat widget
   ============================================================ */

.sbk-ai[b-lie1mx6pnw] {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Launcher button ---------- */
.sbk-ai__launcher[b-lie1mx6pnw] {
    position: relative;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    box-shadow: 0 16px 40px -10px rgba(124, 58, 237, 0.65);
    display: grid;
    place-items: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sbk-ai__launcher:hover[b-lie1mx6pnw] {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 22px 50px -10px rgba(124, 58, 237, 0.75);
}

.sbk-ai__launcher:active[b-lie1mx6pnw] {
    transform: scale(0.97);
}

/* ---------- "Ask Silverback" pill (closed state) ---------- */
.sbk-ai__pill[b-lie1mx6pnw] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    padding: 13px 22px 13px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 55%, #a855f7 100%);
    box-shadow: 0 14px 34px -10px rgba(124, 58, 237, 0.7);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sbk-ai__pill:hover[b-lie1mx6pnw] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 20px 44px -10px rgba(124, 58, 237, 0.8);
}

.sbk-ai__pill:active[b-lie1mx6pnw] {
    transform: translateY(0) scale(0.98);
}

.sbk-ai__spark[b-lie1mx6pnw] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
    animation: sbk-twinkle-b-lie1mx6pnw 2.6s ease-in-out infinite;
}

@keyframes sbk-twinkle-b-lie1mx6pnw {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.75; transform: scale(1.12) rotate(8deg); }
}

/* ---------- Panel ---------- */
.sbk-ai__panel[b-lie1mx6pnw] {
    width: min(380px, calc(100vw - 28px));
    height: min(560px, calc(100vh - 120px));
    background: #fff;
    border: 1px solid var(--line, #e7e8f0);
    border-radius: 22px;
    box-shadow: 0 30px 70px -20px rgba(80, 40, 160, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: sbk-pop-b-lie1mx6pnw .22s cubic-bezier(.2, .8, .2, 1);
}

@keyframes sbk-pop-b-lie1mx6pnw {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Header ---------- */
.sbk-ai__header[b-lie1mx6pnw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #fff;
    background: linear-gradient(135deg, #0b0b23 0%, #1a1340 45%, #3b1d63 100%);
}

.sbk-ai__brand[b-lie1mx6pnw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbk-ai__avatar[b-lie1mx6pnw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #ec4899 100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.sbk-ai__avatar svg[b-lie1mx6pnw] {
    width: 22px;
    height: 22px;
    fill: #fff;
}

.sbk-ai__name[b-lie1mx6pnw] {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.sbk-ai__status[b-lie1mx6pnw] {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

.sbk-ai__icon-btn[b-lie1mx6pnw] {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background .2s ease;
}

.sbk-ai__icon-btn:hover[b-lie1mx6pnw] {
    background: rgba(255, 255, 255, 0.25);
}

/* ---------- Message log ---------- */
.sbk-ai__log[b-lie1mx6pnw] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-soft, #f6f7fb);
    scroll-behavior: smooth;
}

.sbk-ai__row[b-lie1mx6pnw] {
    display: flex;
}

.sbk-ai__row--user[b-lie1mx6pnw] {
    justify-content: flex-end;
}

.sbk-ai__row--bot[b-lie1mx6pnw] {
    justify-content: flex-start;
}

.sbk-ai__bubble[b-lie1mx6pnw] {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sbk-ai__bubble--bot[b-lie1mx6pnw] {
    background: #fff;
    color: var(--text, #1c1c33);
    border: 1px solid var(--line, #e7e8f0);
    border-bottom-left-radius: 5px;
}

.sbk-ai__bubble--user[b-lie1mx6pnw] {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* ---------- Typing indicator ---------- */
.sbk-ai__typing[b-lie1mx6pnw] {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.sbk-ai__typing span[b-lie1mx6pnw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted, #6b6f86);
    opacity: 0.5;
    animation: sbk-bounce-b-lie1mx6pnw 1.2s infinite ease-in-out;
}

.sbk-ai__typing span:nth-child(2)[b-lie1mx6pnw] { animation-delay: 0.15s; }
.sbk-ai__typing span:nth-child(3)[b-lie1mx6pnw] { animation-delay: 0.3s; }

@keyframes sbk-bounce-b-lie1mx6pnw {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Suggestion chips ---------- */
.sbk-ai__chips[b-lie1mx6pnw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 6px;
    background: var(--bg-soft, #f6f7fb);
}

.sbk-ai__chip[b-lie1mx6pnw] {
    border: 1px solid var(--indigo, #6366f1);
    color: var(--indigo, #6366f1);
    background: #fff;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all .18s ease;
}

.sbk-ai__chip:hover[b-lie1mx6pnw] {
    background: var(--indigo, #6366f1);
    color: #fff;
}

/* ---------- Composer ---------- */
.sbk-ai__composer[b-lie1mx6pnw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--line, #e7e8f0);
}

.sbk-ai__input[b-lie1mx6pnw] {
    flex: 1;
    border: 1px solid var(--line, #e7e8f0);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sbk-ai__input:focus[b-lie1mx6pnw] {
    border-color: var(--violet, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.sbk-ai__send[b-lie1mx6pnw] {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    transition: transform .15s ease, opacity .2s ease;
}

.sbk-ai__send:hover:not(:disabled)[b-lie1mx6pnw] {
    transform: scale(1.06);
}

.sbk-ai__send:disabled[b-lie1mx6pnw] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .sbk-ai__panel[b-lie1mx6pnw] {
        height: min(70vh, calc(100vh - 100px));
    }
}

/* ============================================================
   Dark mode — remaps the white panel / bubbles / input surfaces.
   Gradient launcher, pill, header, user bubble, send button and
   the var-driven log/chips backgrounds are intentionally untouched.
   ============================================================ */
html[data-theme="dark"] .sbk-ai__panel[b-lie1mx6pnw] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}

/* Bot message bubble */
html[data-theme="dark"] .sbk-ai__bubble--bot[b-lie1mx6pnw] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-soft);
}

/* Suggestion chips */
html[data-theme="dark"] .sbk-ai__chip[b-lie1mx6pnw] {
    background: var(--surface-2);
}

/* Composer + input */
html[data-theme="dark"] .sbk-ai__composer[b-lie1mx6pnw] {
    background: var(--surface);
    border-top-color: var(--border-soft);
}

html[data-theme="dark"] .sbk-ai__input[b-lie1mx6pnw] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-soft);
}
/* /Components/ContactUs.razor.rz.scp.css */
.ct[b-57t70b7yuz] {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background:
        radial-gradient(55% 45% at 0% 0%, rgba(124, 58, 237, 0.08), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(6, 182, 212, 0.08), transparent 70%),
        #f6f7fb;
    min-height: 80vh;
}

.ct__grid[b-57t70b7yuz] {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Info panel */
.ct__info[b-57t70b7yuz] {
    position: relative;
    overflow: hidden;
    padding: 2.8rem 2.4rem;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(150deg, #6d28d9 0%, #9333ea 45%, #db2777 100%);
    box-shadow: 0 30px 60px -28px rgba(124, 58, 237, 0.6);
}

.ct__blob[b-57t70b7yuz] {
    width: 280px; height: 280px;
    background: rgba(255, 255, 255, 0.35);
    bottom: -140px; right: -100px;
    filter: blur(70px);
    opacity: .5;
}

.ct__info h3[b-57t70b7yuz] {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 .4rem;
}

.ct__sub[b-57t70b7yuz] {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.ct__list[b-57t70b7yuz] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin: 0 0 2.2rem;
    padding: 0;
}

.ct__list li[b-57t70b7yuz] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    font-size: .96rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.ct__list span[b-57t70b7yuz] {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ct__social[b-57t70b7yuz] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .65rem;
}

.ct__social a[b-57t70b7yuz] {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform .25s ease, background .25s ease;
}

.ct__social a:hover[b-57t70b7yuz] { transform: translateY(-4px); background: rgba(255, 255, 255, 0.28); }

/* Form */
.ct__form-wrap[b-57t70b7yuz] {
    background: #fff;
    border: 1px solid #ececf4;
    border-radius: 26px;
    padding: 2.6rem 2.4rem;
    box-shadow: 0 24px 50px -30px rgba(80, 40, 160, 0.4);
}

.ct__field[b-57t70b7yuz] { margin-bottom: 1.4rem; }
.ct__field label[b-57t70b7yuz] { display: block; }

.ct__hint[b-57t70b7yuz] { display: block; color: #8b8fa6; font-size: .82rem; margin-top: .35rem; }

.ct__submit[b-57t70b7yuz] { width: 100%; margin-top: .5rem; }
.ct__submit i[b-57t70b7yuz] { transition: transform .25s ease; }
.ct__submit:hover i[b-57t70b7yuz] { transform: translateX(4px); }

@media (max-width: 860px) {
    .ct__grid[b-57t70b7yuz] { grid-template-columns: 1fr; }
}

/* ============================================================
   Dark mode — overrides hardcoded light surfaces only.
   Gradient info panel / social links stay as-is.
   ============================================================ */
html[data-theme="dark"] .ct[b-57t70b7yuz] {
    background:
        radial-gradient(55% 45% at 0% 0%, rgba(124, 58, 237, 0.12), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(6, 182, 212, 0.12), transparent 70%),
        var(--bg-soft);
}

html[data-theme="dark"] .ct__form-wrap[b-57t70b7yuz] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .ct__hint[b-57t70b7yuz] {
    color: var(--muted);
}
/* /Components/CtaBanner.razor.rz.scp.css */
.cta[b-k1jxu1au94] { padding: clamp(3rem, 6vw, 5rem) 0; background: #fff; }

.cta__inner[b-k1jxu1au94] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #06b6d4 120%);
    box-shadow: 0 40px 80px -30px rgba(124, 58, 237, 0.6);
}

.cta__blob1[b-k1jxu1au94] {
    width: 360px; height: 360px;
    background: rgba(255, 255, 255, 0.35);
    top: -160px; left: -80px;
    filter: blur(80px);
}

.cta__blob2[b-k1jxu1au94] {
    width: 320px; height: 320px;
    background: rgba(6, 182, 212, 0.5);
    bottom: -160px; right: -60px;
    filter: blur(80px);
}

.cta__text[b-k1jxu1au94] { position: relative; z-index: 1; }

.cta__text h2[b-k1jxu1au94] {
    color: #fff;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    margin: 0 0 .7rem;
}

.cta__text p[b-k1jxu1au94] {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.08rem;
    max-width: 520px;
}

.cta__actions[b-k1jxu1au94] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cta__btn[b-k1jxu1au94] {
    border: none;
    border-radius: 14px;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}

.cta__btn--primary[b-k1jxu1au94] {
    background: #fff;
    color: #6d28d9;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3);
}

    .cta__btn--primary:hover[b-k1jxu1au94] {
        background: #fff;
        color: #db2777;
        transform: translateY(-3px);
        box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.4);
    }

.cta__btn--ghost[b-k1jxu1au94] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

    .cta__btn--ghost:hover[b-k1jxu1au94] {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        transform: translateY(-3px);
    }

.cta__btn i[b-k1jxu1au94] { font-size: .95rem; }

/* ===== Dark mode =====
   Flip only the light section background behind the card. The gradient card,
   its white text, and the white/ghost buttons on the gradient are intentional
   and stay unchanged. */
html[data-theme="dark"] .cta[b-k1jxu1au94] {
    background: var(--bg);
}
/* /Components/Footer.razor.rz.scp.css */
.ft[b-qtvex6da0v] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b0b23 0%, #1a1340 50%, #2a1450 100%);
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    padding: clamp(4.5rem, 9vw, 7rem) 0 2.5rem;
}

.ft__blob1[b-qtvex6da0v] {
    width: 420px; height: 420px;
    background: #7c3aed;
    top: -180px; left: -120px;
    opacity: .35;
}

.ft__blob2[b-qtvex6da0v] {
    width: 360px; height: 360px;
    background: #ec4899;
    bottom: -200px; right: -120px;
    opacity: .3;
}

.ft__grid[b-qtvex6da0v] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr;
    gap: 3rem;
}

.ft__logo[b-qtvex6da0v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.2rem;
}

.ft__logo-badge[b-qtvex6da0v] {
    width: 136px; height: 136px;
    border-radius: 24px;
    padding: 6px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: grid;
    place-items: center;
}

.ft__logo-badge img[b-qtvex6da0v] {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 8px;
}

.ft__logo-name[b-qtvex6da0v] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    white-space: nowrap;
}

.ft__tag[b-qtvex6da0v] {
    font-size: .95rem;
    line-height: 1.7;
    max-width: 320px;
    margin-bottom: 1.5rem;
    /* Line breaks typed into the admin tagline show as separate lines. */
    white-space: pre-line;
}

.ft__social[b-qtvex6da0v] { display: flex; gap: .7rem; }

.ft__social a[b-qtvex6da0v] {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform .25s ease, background .25s ease;
}

.ft__social a:hover[b-qtvex6da0v] {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.ft__col h5[b-qtvex6da0v] {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.3rem;
    position: relative;
    padding-bottom: .6rem;
}

.ft__col h5[b-qtvex6da0v]::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.ft__col a[b-qtvex6da0v],
.ft__col p[b-qtvex6da0v] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.02rem;
    margin-bottom: .95rem;
    transition: color .2s ease, padding-left .2s ease;
}

.ft__col a:hover[b-qtvex6da0v] { color: #fff; padding-left: .35rem; }
.ft__col p i[b-qtvex6da0v] { color: #c4b5fd; margin-top: .2rem; }

.ft__news p[b-qtvex6da0v] { font-size: .95rem; line-height: 1.6; margin-bottom: 1rem; }

.ft__form[b-qtvex6da0v] { display: flex; flex-direction: column; gap: .65rem; }
.ft__form .btn-primary[b-qtvex6da0v] { width: 100%; }

.ft__status[b-qtvex6da0v] {
    margin-top: .85rem;
    font-size: .88rem;
    color: #67e8f9;
}

.ft__bottom[b-qtvex6da0v] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, 0.55);
}

.ft__bottom i[b-qtvex6da0v] { color: #ec4899; }

@media (max-width: 991px) {
    .ft__grid[b-qtvex6da0v] { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 575px) {
    .ft__grid[b-qtvex6da0v] { grid-template-columns: 1fr; }
    .ft__bottom[b-qtvex6da0v] { justify-content: center; text-align: center; }
    .ft__logo-name[b-qtvex6da0v] { font-size: 1.15rem; }
}

/* ===== Dark mode =====
   Footer sits on a fixed dark brand gradient with white/translucent-white
   text and gradient accents — already correct in dark mode. The only #fff
   is the logo image backing plate, which is an intentional logo surround
   (kept as-is). Dark mode inherited via design-system variables. */
/* /Components/HeroSection.razor.rz.scp.css */
.hero[b-uw9zdr10eb] {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(120deg, #150d39 0%, #2a1457 42%, #45207a 66%, #0f2c44 100%);
    isolation: isolate;
}

/* The complete, uncropped artwork (full iPad) sits on the right
   in its real colours; text keeps the left half. */
.hero__bg[b-uw9zdr10eb] {
    position: absolute;
    inset: 0;
    background-image: url('../../images/Designer006.png');
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 46% auto;
    filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.45));
    z-index: -2;
}

/* Colourful, mostly-transparent scrim — darker on the left so the
   headline stays readable, fully clear on the right so the whole
   iPad shows in true colour. */
.hero[b-uw9zdr10eb]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 60% at 12% 30%, rgba(124, 58, 237, 0.40), transparent 70%),
        radial-gradient(45% 55% at 72% 82%, rgba(236, 72, 153, 0.28), transparent 70%),
        linear-gradient(100deg,
            rgba(11, 11, 35, 0.80) 0%,
            rgba(26, 19, 64, 0.46) 38%,
            rgba(20, 16, 54, 0.10) 60%,
            transparent 100%);
    z-index: -1;
}

/* Let the real image colours show — blobs add glow, not darkness */
.hero .blob[b-uw9zdr10eb] {
    opacity: .4;
    mix-blend-mode: screen;
}

.hero__blob1[b-uw9zdr10eb] {
    width: 480px; height: 480px;
    background: #7c3aed;
    top: -120px; left: -120px;
    animation: float1-b-uw9zdr10eb 14s ease-in-out infinite;
}

.hero__blob2[b-uw9zdr10eb] {
    width: 420px; height: 420px;
    background: #ec4899;
    bottom: -140px; right: -100px;
    animation: float2-b-uw9zdr10eb 16s ease-in-out infinite;
}

.hero__blob3[b-uw9zdr10eb] {
    width: 320px; height: 320px;
    background: #06b6d4;
    top: 40%; right: 18%;
    opacity: .35;
    animation: float1-b-uw9zdr10eb 18s ease-in-out infinite reverse;
}

@keyframes float1-b-uw9zdr10eb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, 50px) scale(1.08); }
}

@keyframes float2-b-uw9zdr10eb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -40px) scale(1.12); }
}

.hero__inner[b-uw9zdr10eb] {
    position: relative;
    z-index: 1;
    padding-block: clamp(5rem, 12vh, 9rem);
}

.hero__content[b-uw9zdr10eb] { max-width: 760px; }

.eyebrow[b-uw9zdr10eb] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #c4b5fd;
}

.hero__title[b-uw9zdr10eb] {
    color: #fff;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.08;
    margin: 1.4rem 0 1.2rem;
}

.hero__lead[b-uw9zdr10eb] {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    max-width: 580px;
    margin-bottom: 2.4rem;
}

.hero__actions[b-uw9zdr10eb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3.2rem;
}

.hero__stats[b-uw9zdr10eb] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 3.5rem);
}

.hero__stat[b-uw9zdr10eb] { display: flex; flex-direction: column; }

.hero__stat strong[b-uw9zdr10eb] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    background: linear-gradient(120deg, #a78bfa, #f0abfc, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__stat span[b-uw9zdr10eb] {
    color: rgba(255, 255, 255, 0.6);
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero__scroll[b-uw9zdr10eb] {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: none;
    cursor: pointer;
    z-index: 2;
}

.hero__scroll span[b-uw9zdr10eb] {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
    transform: translateX(-50%);
    animation: scrollDot-b-uw9zdr10eb 1.8s ease-in-out infinite;
}

@keyframes scrollDot-b-uw9zdr10eb {
    0% { opacity: 0; transform: translate(-50%, 0); }
    40% { opacity: 1; }
    80% { opacity: 0; transform: translate(-50%, 16px); }
    100% { opacity: 0; }
}

/* Tablet & mobile: stack the full artwork below the text so the
   whole iPad stays visible without overlapping the headline. */
@media (max-width: 991px) {
    .hero[b-uw9zdr10eb] {
        min-height: auto;
        align-items: flex-start;
    }

    .hero__bg[b-uw9zdr10eb] {
        background-position: center bottom;
        background-size: min(560px, 88%) auto;
    }

    .hero__inner[b-uw9zdr10eb] {
        padding-bottom: clamp(220px, 64vw, 540px);
    }
}

@media (max-width: 575px) {
    .hero__actions .btn-primary[b-uw9zdr10eb],
    .hero__actions .btn-ghost[b-uw9zdr10eb] { width: 100%; }
}

/* ===== Dark mode =====
   Hero sits on a fixed dark brand gradient with white/translucent-white
   text and gradient accents — already correct in dark mode. No light
   surface hardcodes to flip; dark mode inherited via design-system variables. */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-69022dpfod] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-69022dpfod] {
    flex: 1;
}

.sidebar[b-69022dpfod] {
    background: transparent;
}

.top-row[b-69022dpfod] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-69022dpfod]  a, .top-row[b-69022dpfod]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-69022dpfod]  a:hover, .top-row[b-69022dpfod]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-69022dpfod]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-69022dpfod] {
        justify-content: space-between;
    }

    .top-row[b-69022dpfod]  a, .top-row[b-69022dpfod]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-69022dpfod] {
        flex-direction: row;
    }

    .sidebar[b-69022dpfod] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .top-row[b-69022dpfod] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-69022dpfod]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-69022dpfod], article[b-69022dpfod] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-69022dpfod] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-69022dpfod] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Dark mode =====
   Flip the light .top-row bar to a dark surface. The #blazor-error-ui toast
   is intentionally light-yellow (color-scheme: light only) and is left as-is. */
html[data-theme="dark"] .top-row[b-69022dpfod] {
    background-color: var(--surface);
    border-bottom-color: var(--line);
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
.sb-nav[b-nh4s4xoqr4] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(124, 58, 237, 0.12);
    box-shadow: 0 8px 30px -18px rgba(80, 40, 160, 0.45);
}

.sb-nav__inner[b-nh4s4xoqr4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.25rem;
    padding: 1rem 0;
}

/* Brand — logo on top, wordmark centred underneath (2x footer logo) */
.sb-brand[b-nh4s4xoqr4] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    text-align: center;
}

.sb-brand__logo[b-nh4s4xoqr4] {
    width: 272px; height: 272px;
    border-radius: 36px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    padding: 8px;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 38px -12px rgba(124, 58, 237, 0.7);
    flex-shrink: 0;
}

.sb-brand__logo img[b-nh4s4xoqr4] {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 28px;
    background: #fff;
    padding: 12px;
}

.sb-brand__text[b-nh4s4xoqr4] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    background: linear-gradient(120deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* Links */
.sb-nav__links[b-nh4s4xoqr4] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-inline: auto;
    flex-wrap: nowrap;
}

.sb-nav__links .my-nav-link[b-nh4s4xoqr4] { white-space: nowrap; }

/* Actions */
.sb-nav__actions[b-nh4s4xoqr4] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.sb-account[b-nh4s4xoqr4] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: #1c1c33;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: #f0eefb;
    max-width: 180px;
}

.sb-account span[b-nh4s4xoqr4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-account i[b-nh4s4xoqr4] { color: #7c3aed; }

.sb-admin-link[b-nh4s4xoqr4] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    text-decoration: none;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 6px 14px -6px rgba(239, 68, 68, 0.55);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

    .sb-admin-link:hover[b-nh4s4xoqr4] {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px -6px rgba(239, 68, 68, 0.65);
    }

    .sb-admin-link i[b-nh4s4xoqr4] { color: #fff; }

.sb-portal-link[b-nh4s4xoqr4] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    box-shadow: 0 6px 14px -6px rgba(67, 56, 202, 0.55);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

    .sb-portal-link:hover[b-nh4s4xoqr4] {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px -6px rgba(67, 56, 202, 0.65);
    }

    .sb-portal-link i[b-nh4s4xoqr4] { color: #fff; }

.sb-login[b-nh4s4xoqr4] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #1c1c33;
}

.sb-login:hover[b-nh4s4xoqr4] { color: #7c3aed; }

.sb-logout-form[b-nh4s4xoqr4] { margin: 0; }

.sb-cta[b-nh4s4xoqr4] { white-space: nowrap; text-decoration: none; }
.sb-cta i[b-nh4s4xoqr4] { font-size: .8rem; transition: transform .2s ease; }
.sb-cta:hover i[b-nh4s4xoqr4] { transform: translateX(3px); }

.sb-book-link[b-nh4s4xoqr4] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    text-decoration: none;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

    .sb-book-link:hover[b-nh4s4xoqr4] {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -6px rgba(16, 185, 129, 0.7);
    }

    .sb-book-link i[b-nh4s4xoqr4] { color: #fff; font-size: .9rem; }

.sb-burger[b-nh4s4xoqr4] {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #1c1c33;
    cursor: pointer;
    padding: .25rem .5rem;
}

/* Mobile menu */
.sb-mobile[b-nh4s4xoqr4] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    padding: 0 1.25rem;
}

.sb-mobile.open[b-nh4s4xoqr4] {
    max-height: 520px;
    opacity: 1;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
}

.sb-mobile__link[b-nh4s4xoqr4] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1c1c33;
    padding: .85rem .5rem;
    border-bottom: 1px solid #f0eefb;
    transition: color .2s ease, padding-left .2s ease;
}

.sb-mobile__link:hover[b-nh4s4xoqr4] { color: #7c3aed; padding-left: 1rem; }

.sb-mobile__cta[b-nh4s4xoqr4] { margin-top: 1rem; width: 100%; text-decoration: none; }

.sb-mobile__link--cta[b-nh4s4xoqr4] {
    color: #fff !important;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    border-radius: 12px;
    padding: .85rem 1rem;
    border-bottom: none;
    margin-top: .5rem;
    text-align: center;
    box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.55);
}

    .sb-mobile__link--cta:hover[b-nh4s4xoqr4] {
        padding-left: 1rem;
        color: #fff !important;
    }

@media (max-width: 991px) {
    .sb-nav__links[b-nh4s4xoqr4] { display: none; }
}

@media (max-width: 991px) {
    .sb-brand__logo[b-nh4s4xoqr4] { width: 200px; height: 200px; border-radius: 28px; }
    .sb-brand__text[b-nh4s4xoqr4] { font-size: 1.3rem; }
}

@media (max-width: 767px) {
    .sb-nav__inner[b-nh4s4xoqr4] { padding: .75rem 0; gap: .75rem; }
    .sb-cta[b-nh4s4xoqr4], .sb-login[b-nh4s4xoqr4], .sb-account[b-nh4s4xoqr4], .sb-logout-form[b-nh4s4xoqr4], .sb-portal-link[b-nh4s4xoqr4], .sb-admin-link[b-nh4s4xoqr4], .sb-book-link[b-nh4s4xoqr4] { display: none; }
    .sb-burger[b-nh4s4xoqr4] { display: block; }
    .sb-brand__logo[b-nh4s4xoqr4] { width: 140px; height: 140px; border-radius: 22px; }
    .sb-brand__text[b-nh4s4xoqr4] { font-size: 1.15rem; }
}

/* Theme-toggle row inside the mobile menu */
.sb-mobile__theme[b-nh4s4xoqr4] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem .5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #1c1c33;
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] .sb-nav[b-nh4s4xoqr4] {
    background: rgba(14, 14, 24, 0.82);
    border-bottom-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .sb-account[b-nh4s4xoqr4] {
    color: var(--text);
    background: #221c3a;
}

html[data-theme="dark"] .sb-login[b-nh4s4xoqr4] { color: var(--text); }
html[data-theme="dark"] .sb-login:hover[b-nh4s4xoqr4] { color: #a78bfa; }

html[data-theme="dark"] .sb-burger[b-nh4s4xoqr4] { color: var(--text); }

html[data-theme="dark"] .sb-mobile[b-nh4s4xoqr4] {
    background: rgba(14, 14, 24, 0.98);
}

html[data-theme="dark"] .sb-mobile__link[b-nh4s4xoqr4] {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .sb-mobile__link:hover[b-nh4s4xoqr4] { color: #a78bfa; }

html[data-theme="dark"] .sb-mobile__theme[b-nh4s4xoqr4] { color: var(--text); }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ─── Sidebar shell ─── */
.sb-side[b-39cwes6ztt] {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #1e1b4b 0%, #2d1b69 35%, #3b1d6e 70%, #4c1d95 100%);
    color: #cbd5e1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 4px 0 24px -8px rgba(15, 23, 42, 0.4);
}

    .sb-side[b-39cwes6ztt]::-webkit-scrollbar { width: 8px; }
    .sb-side[b-39cwes6ztt]::-webkit-scrollbar-track { background: transparent; }
    .sb-side[b-39cwes6ztt]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
    .sb-side[b-39cwes6ztt]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* ─── Brand ─── */
.sb-side__brand[b-39cwes6ztt] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.25rem 1.1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 100%);
}

.sb-side__brand-mark[b-39cwes6ztt] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    padding: 4px;
    box-shadow: 0 4px 12px -4px rgba(236, 72, 153, 0.5);
    flex-shrink: 0;
    overflow: hidden;
}

    .sb-side__brand-mark img[b-39cwes6ztt] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

.sb-side__brand-text[b-39cwes6ztt] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.sb-side__brand-name[b-39cwes6ztt] {
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.sb-side__brand-sub[b-39cwes6ztt] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1px;
}

/* ─── Nav ─── */
.sb-side__nav[b-39cwes6ztt] {
    padding: 0.85rem 0.55rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sb-side__section[b-39cwes6ztt] {
    padding-top: 0.6rem;
}

.sb-side__heading[b-39cwes6ztt] {
    padding: 0.45rem 0.85rem 0.35rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 800;
}

.sb-side__link[b-39cwes6ztt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 8px;
    margin: 1px 0;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sb-side__link:hover[b-39cwes6ztt] {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    .sb-side__link--active[b-39cwes6ztt] {
        background: linear-gradient(90deg, rgba(124, 58, 237, 0.35), rgba(124, 58, 237, 0.12));
        color: #fff !important;
        font-weight: 600;
    }

        .sb-side__link--active[b-39cwes6ztt]::before {
            content: "";
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: -3px;
            width: 3px;
            background: linear-gradient(180deg, #fbbf24, #f59e0b);
            border-radius: 4px;
        }

.sb-side__icon[b-39cwes6ztt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.sb-side__link:hover .sb-side__icon[b-39cwes6ztt],
.sb-side__link--active .sb-side__icon[b-39cwes6ztt] {
    color: #fff;
}

.sb-side__icon--emoji[b-39cwes6ztt] {
    font-size: 1rem;
    line-height: 1;
}

.sb-side__label[b-39cwes6ztt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.sb-side__label--user[b-39cwes6ztt] {
    font-size: 0.82rem;
    font-weight: 600;
}

/* ─── Appearance / theme row ─── */
.sb-side__theme[b-39cwes6ztt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.85rem 0.6rem;
}

    .sb-side__theme .sb-side__label[b-39cwes6ztt] {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.88rem;
        font-weight: 500;
    }

/* The sidebar is always dark; keep the toggle legible on the purple gradient. */
.sb-side__theme .theme-toggle[b-39cwes6ztt] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fbbf24;
}

    .sb-side__theme .theme-toggle:hover[b-39cwes6ztt] {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(251, 191, 36, 0.6);
        color: #fcd34d;
    }

/* ─── Account section ─── */
.sb-side__section--account[b-39cwes6ztt] {
    margin-top: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-side__logout[b-39cwes6ztt] {
    margin: 0;
}

.sb-side__link--logout[b-39cwes6ztt] {
    color: rgba(252, 165, 165, 0.95);
}

    .sb-side__link--logout:hover[b-39cwes6ztt] {
        background: rgba(239, 68, 68, 0.15);
        color: #fecaca;
    }

    .sb-side__link--logout .sb-side__icon[b-39cwes6ztt] {
        color: rgba(252, 165, 165, 0.95);
    }

.sb-side__link--external[b-39cwes6ztt] {
    color: rgba(125, 211, 252, 0.9);
}

    .sb-side__link--external:hover[b-39cwes6ztt] {
        background: rgba(14, 165, 233, 0.14);
        color: #bae6fd;
    }

    .sb-side__link--external .sb-side__icon[b-39cwes6ztt] {
        color: rgba(125, 211, 252, 0.9);
    }

/* ─── Mobile collapsing ─── */
@media (max-width: 640px) {
    .sb-side[b-39cwes6ztt] {
        position: relative;
        width: 100%;
        max-height: 60vh;
        box-shadow: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}
/* /Components/Pages/AboutUs.razor.rz.scp.css */
.about[b-pc197zlk5n] {
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

.container[b-pc197zlk5n] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.eyebrow[b-pc197zlk5n] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.eyebrow--dark[b-pc197zlk5n] {
    color: #4338ca;
    background: rgba(67, 56, 202, 0.1);
    backdrop-filter: none;
}

.gradient-text[b-pc197zlk5n] {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── Hero ─── */
.about-hero[b-pc197zlk5n] {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #4338ca 90%);
    color: #fff;
    padding: 5rem 0 6rem;
    overflow: hidden;
}

.about-hero__bg[b-pc197zlk5n] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 25%, rgba(236, 72, 153, 0.35), transparent 55%),
        radial-gradient(circle at 15% 75%, rgba(14, 165, 233, 0.32), transparent 55%);
    pointer-events: none;
}

.blob[b-pc197zlk5n] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
}

.blob-a[b-pc197zlk5n] { width: 320px; height: 320px; background: #7c3aed; top: -100px; right: -80px; }
.blob-b[b-pc197zlk5n] { width: 260px; height: 260px; background: #ec4899; bottom: -80px; left: -60px; }
.blob-c[b-pc197zlk5n] { width: 200px; height: 200px; background: #06b6d4; top: 40%; right: 30%; opacity: 0.4; }

.about-hero__inner[b-pc197zlk5n] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-hero__title[b-pc197zlk5n] {
    margin: 0 0 1.25rem;
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.about-hero__lead[b-pc197zlk5n] {
    margin: 0 0 2rem;
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 540px;
    opacity: 0.94;
}

.about-hero__actions[b-pc197zlk5n] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn[b-pc197zlk5n] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    padding: 0.8rem 1.55rem;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.95rem;
}

.btn-primary[b-pc197zlk5n] {
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(236, 72, 153, 0.65);
}

    .btn-primary:hover[b-pc197zlk5n] {
        transform: translateY(-2px);
        color: #fff;
        box-shadow: 0 14px 28px -10px rgba(236, 72, 153, 0.8);
    }

.btn-light[b-pc197zlk5n] {
    background: #fff;
    color: #4338ca;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

    .btn-light:hover[b-pc197zlk5n] {
        transform: translateY(-2px);
        color: #4338ca;
    }

.btn-ghost[b-pc197zlk5n] {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 0.75rem 1.45rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.15s ease;
}

    .btn-ghost:hover[b-pc197zlk5n] {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

.btn-ghost-light[b-pc197zlk5n] {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    padding: 0.75rem 1.45rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
}

    .btn-ghost-light:hover[b-pc197zlk5n] {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

.about-hero__art[b-pc197zlk5n] {
    position: relative;
    z-index: 1;
    text-align: center;
}

    .about-hero__art img[b-pc197zlk5n] {
        max-width: 100%;
        border-radius: 28px;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
        transform: rotate(2deg);
        border: 4px solid rgba(255, 255, 255, 0.1);
    }

/* ─── Stats bar ─── */
.about-stats[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: -3rem auto 4rem;
    position: relative;
    z-index: 2;
}

.stat-tile[b-pc197zlk5n] {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.2);
    border: 1px solid #f1f5f9;
    transition: transform 0.18s ease;
}

    .stat-tile:hover[b-pc197zlk5n] { transform: translateY(-4px); }

.stat-tile__value[b-pc197zlk5n] {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #4338ca, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    .stat-tile__value span[b-pc197zlk5n] {
        font-size: 1.4rem;
    }

.stat-tile__label[b-pc197zlk5n] {
    margin-top: 0.55rem;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Story ─── */
.about-story[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}

.about-story__copy h2[b-pc197zlk5n] {
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 0 0 1.2rem;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.about-story__copy p[b-pc197zlk5n] {
    color: #475569;
    line-height: 1.65;
    margin: 0 0 1rem;
    font-size: 1rem;
}

.about-story__visual[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.85rem;
    height: 460px;
}

    .about-story__visual img[b-pc197zlk5n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.3);
    }

        .about-story__visual img:first-child[b-pc197zlk5n] {
            grid-row: 1 / span 2;
        }

/* ─── Mission / Vision / Promise ─── */
.about-mvb[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 5rem;
}

.mvb-card[b-pc197zlk5n] {
    border-radius: 22px;
    padding: 2rem 1.75rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

    .mvb-card:hover[b-pc197zlk5n] { transform: translateY(-4px); }

    .mvb-card[b-pc197zlk5n]::after {
        content: "";
        position: absolute;
        top: -40%;
        right: -25%;
        width: 220px;
        height: 220px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        pointer-events: none;
    }

.mvb-card--violet[b-pc197zlk5n] { background: linear-gradient(135deg, #4f46e5, #c026d3); }
.mvb-card--teal[b-pc197zlk5n] { background: linear-gradient(135deg, #0d9488, #06b6d4); }
.mvb-card--rose[b-pc197zlk5n] { background: linear-gradient(135deg, #ec4899, #f43f5e); }

.mvb-card__icon[b-pc197zlk5n] {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 1;
}

.mvb-card h3[b-pc197zlk5n] {
    margin: 0 0 0.55rem;
    font-size: 1.4rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.mvb-card p[b-pc197zlk5n] {
    margin: 0;
    line-height: 1.55;
    opacity: 0.95;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

/* ─── Section heads ─── */
.about-section-head[b-pc197zlk5n] {
    text-align: center;
    margin-bottom: 2.5rem;
}

    .about-section-head h2[b-pc197zlk5n] {
        font-size: 2.2rem;
        margin: 0 0 0.75rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .about-section-head p[b-pc197zlk5n] {
        margin: 0 auto;
        max-width: 560px;
        color: #64748b;
        font-size: 1.02rem;
        line-height: 1.5;
    }

.about-section-head--light h2[b-pc197zlk5n] { color: #fff; }
.about-section-head--light p[b-pc197zlk5n] { color: rgba(255, 255, 255, 0.85); }

/* ─── Values ─── */
.about-values[b-pc197zlk5n] {
    margin-bottom: 5rem;
}

.values-grid[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.value[b-pc197zlk5n] {
    background: #fff;
    border-radius: 18px;
    padding: 1.75rem 1.6rem;
    border: 1.5px solid #f1f5f9;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

    .value:hover[b-pc197zlk5n] {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.18);
        border-color: #ddd6fe;
    }

.value__num[b-pc197zlk5n] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #c026d3;
    margin-bottom: 0.65rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #4338ca, #c026d3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.value h4[b-pc197zlk5n] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.value p[b-pc197zlk5n] {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 0.94rem;
}

/* ─── What we do (dark band) ─── */
.about-what[b-pc197zlk5n] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c1631 100%);
    color: #fff;
    padding: 5rem 1.5rem;
    margin-bottom: 5rem;
    border-radius: 32px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

    .about-what[b-pc197zlk5n]::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 90% 10%, rgba(236, 72, 153, 0.18), transparent 50%),
            radial-gradient(circle at 10% 90%, rgba(14, 165, 233, 0.18), transparent 50%);
        pointer-events: none;
    }

.what-grid[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
}

.what[b-pc197zlk5n] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 1.75rem 1.6rem;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
}

    .what:hover[b-pc197zlk5n] {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.22);
    }

.what__icon[b-pc197zlk5n] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c1, #4338ca), var(--c2, #7c3aed));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--c1) 60%, transparent);
}

.what h4[b-pc197zlk5n] {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.what p[b-pc197zlk5n] {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    font-size: 0.92rem;
}

/* ─── Team ─── */
.about-team[b-pc197zlk5n] {
    margin-bottom: 5rem;
}

.team-grid[b-pc197zlk5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.team-card[b-pc197zlk5n] {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem 1.6rem;
    border: 1.5px solid #f1f5f9;
    text-align: center;
    transition: all 0.18s ease;
}

    .team-card:hover[b-pc197zlk5n] {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.18);
    }

.team-card__avatar[b-pc197zlk5n] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.3);
}

.team-card h4[b-pc197zlk5n] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.team-card__role[b-pc197zlk5n] {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    color: #c026d3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.team-card__bio[b-pc197zlk5n] {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 0.9rem;
}

/* ─── CTA ─── */
.about-cta[b-pc197zlk5n] {
    background: linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #4338ca 100%);
    color: #fff;
    padding: 4.5rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .about-cta[b-pc197zlk5n]::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15), transparent 50%),
            radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1), transparent 50%);
        pointer-events: none;
    }

.about-cta__inner[b-pc197zlk5n] {
    position: relative;
    z-index: 1;
}

.about-cta h2[b-pc197zlk5n] {
    margin: 0 0 0.85rem;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.about-cta p[b-pc197zlk5n] {
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    max-width: 560px;
    line-height: 1.55;
    opacity: 0.95;
}

.about-cta__actions[b-pc197zlk5n] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ─── Responsive ─── */
@media (max-width: 880px) {
    .about-hero[b-pc197zlk5n] { padding: 3rem 0 4rem; }
    .about-hero__inner[b-pc197zlk5n] { grid-template-columns: 1fr; gap: 2rem; }
    .about-hero__title[b-pc197zlk5n] { font-size: 2.1rem; }
    .about-story[b-pc197zlk5n] { grid-template-columns: 1fr; gap: 2rem; }
    .about-story__visual[b-pc197zlk5n] { height: 360px; }
    .about-mvb[b-pc197zlk5n] { grid-template-columns: 1fr; }
    .about-section-head h2[b-pc197zlk5n] { font-size: 1.7rem; }
    .about-cta h2[b-pc197zlk5n] { font-size: 1.7rem; }
    .about-what[b-pc197zlk5n] { padding: 3rem 1rem; border-radius: 20px; }
}

/* ============================================================
   Dark mode — overrides hardcoded light surfaces / dark text only.
   Hero, MVB cards, "What we do" band, and CTA are intentional
   gradients / dark bands and are left untouched.
   ============================================================ */
html[data-theme="dark"] .about[b-pc197zlk5n] {
    color: var(--text);
}

/* Stat tiles */
html[data-theme="dark"] .stat-tile[b-pc197zlk5n] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .stat-tile__label[b-pc197zlk5n] {
    color: var(--muted);
}

/* Story */
html[data-theme="dark"] .about-story__copy h2[b-pc197zlk5n] {
    color: var(--ink);
}

html[data-theme="dark"] .about-story__copy p[b-pc197zlk5n] {
    color: var(--muted);
}

/* Section heads (non-light variant) */
html[data-theme="dark"] .about-section-head p[b-pc197zlk5n] {
    color: var(--muted);
}

/* Values */
html[data-theme="dark"] .value[b-pc197zlk5n] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .value:hover[b-pc197zlk5n] {
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
    border-color: var(--line);
}

html[data-theme="dark"] .value h4[b-pc197zlk5n] {
    color: var(--ink);
}

html[data-theme="dark"] .value p[b-pc197zlk5n] {
    color: var(--muted);
}

/* Team */
html[data-theme="dark"] .team-card[b-pc197zlk5n] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .team-card:hover[b-pc197zlk5n] {
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .team-card h4[b-pc197zlk5n] {
    color: var(--ink);
}

html[data-theme="dark"] .team-card__bio[b-pc197zlk5n] {
    color: var(--muted);
}
/* /Components/Pages/Admin/Appointments.razor.rz.scp.css */
.apt-admin[b-gsaqh1s41c] {
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.apt-admin__hero[b-gsaqh1s41c] {
    background: linear-gradient(135deg, #0e7490 0%, #4338ca 50%, #ec4899 100%);
    border-radius: 20px;
    padding: 1.75rem 2.25rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 28px -10px rgba(67, 56, 202, 0.45);
}

.apt-admin__eyebrow[b-gsaqh1s41c] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.7rem;
}

.apt-admin__hero h1[b-gsaqh1s41c] {
    margin: 0 0 0.35rem;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.apt-admin__sub[b-gsaqh1s41c] {
    margin: 0;
    opacity: 0.92;
    font-size: 0.95rem;
    max-width: 480px;
}

.apt-admin__stats[b-gsaqh1s41c] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-end;
}

.apt-stat[b-gsaqh1s41c] {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.apt-stat--pending[b-gsaqh1s41c] { background: rgba(251, 191, 36, 0.3); }
.apt-stat--confirmed[b-gsaqh1s41c] { background: rgba(52, 211, 153, 0.3); }
.apt-stat--completed[b-gsaqh1s41c] { background: rgba(165, 180, 252, 0.3); }
.apt-stat--cancelled[b-gsaqh1s41c] { background: rgba(252, 165, 165, 0.3); }

.apt-admin__toast[b-gsaqh1s41c] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #a7f3d0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    .apt-admin__toast button[b-gsaqh1s41c] {
        background: none;
        border: none;
        font-size: 1.4rem;
        cursor: pointer;
        color: inherit;
    }

.apt-admin__toolbar[b-gsaqh1s41c] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.apt-admin__chips[b-gsaqh1s41c] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.chip[b-gsaqh1s41c] {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .chip:hover[b-gsaqh1s41c] {
        border-color: #c7d2fe;
        color: #4338ca;
    }

    .chip--active[b-gsaqh1s41c] {
        background: linear-gradient(135deg, #4338ca, #7c3aed);
        color: #fff;
        border-color: transparent;
    }

.chip-sep[b-gsaqh1s41c] {
    width: 1px;
    height: 22px;
    background: #e5e7eb;
    margin: 0 0.3rem;
}

.apt-admin__search[b-gsaqh1s41c] {
    flex: 1 1 240px;
    max-width: 360px;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.9rem;
}

    .apt-admin__search:focus[b-gsaqh1s41c] {
        outline: none;
        border-color: #4338ca;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    }

.apt-empty[b-gsaqh1s41c] {
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 3rem 1rem;
    text-align: center;
    color: #64748b;
}

.apt-table[b-gsaqh1s41c] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.apt-table__head[b-gsaqh1s41c],
.apt-row[b-gsaqh1s41c] {
    display: grid;
    grid-template-columns: 160px 1.5fr 1.3fr 100px 120px 320px;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
}

.apt-table__head[b-gsaqh1s41c] {
    background: #f9fafb;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.apt-row[b-gsaqh1s41c] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
    position: relative;
}

    .apt-row[b-gsaqh1s41c]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: #cbd5e1;
    }

    .apt-row--pending[b-gsaqh1s41c]::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
    .apt-row--confirmed[b-gsaqh1s41c]::before { background: linear-gradient(180deg, #10b981, #34d399); }
    .apt-row--completed[b-gsaqh1s41c]::before { background: linear-gradient(180deg, #6366f1, #818cf8); }
    .apt-row--cancelled[b-gsaqh1s41c]::before { background: linear-gradient(180deg, #ef4444, #f87171); opacity: 0.7; }

    .apt-row:hover[b-gsaqh1s41c] { background: #fafafa; }
    .apt-row:last-child[b-gsaqh1s41c] { border-bottom: none; }

.apt-row__date[b-gsaqh1s41c] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
}

.apt-row__time[b-gsaqh1s41c] {
    color: #64748b;
    font-size: 0.85rem;
}

.apt-row__email[b-gsaqh1s41c] {
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-row__notes[b-gsaqh1s41c] {
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-row__service[b-gsaqh1s41c] {
    font-weight: 600;
    color: #334155;
}

.apt-meet[b-gsaqh1s41c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.apt-meet--video[b-gsaqh1s41c] { background: #ede9fe; color: #6d28d9; }
.apt-meet--inperson[b-gsaqh1s41c] { background: #e0f2fe; color: #0369a1; }
.apt-meet--phone[b-gsaqh1s41c] { background: #dcfce7; color: #15803d; }

.apt-link-row[b-gsaqh1s41c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.apt-link[b-gsaqh1s41c] {
    font-size: 0.78rem;
    color: #4338ca;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-link-btn[b-gsaqh1s41c] {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

    .apt-link-btn--add[b-gsaqh1s41c] {
        margin-top: 0.3rem;
        display: inline-block;
    }

.apt-link-edit[b-gsaqh1s41c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.apt-link-input[b-gsaqh1s41c] {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 0.35rem 0.55rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.8rem;
}

    .apt-link-input:focus[b-gsaqh1s41c] {
        outline: none;
        border-color: #4338ca;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    }

.status-pill[b-gsaqh1s41c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-pill--pending[b-gsaqh1s41c] { background: #fef3c7; color: #92400e; }
.status-pill--confirmed[b-gsaqh1s41c] { background: #d1fae5; color: #065f46; }
.status-pill--completed[b-gsaqh1s41c] { background: #e0e7ff; color: #3730a3; }
.status-pill--cancelled[b-gsaqh1s41c] { background: #fee2e2; color: #991b1b; }

.apt-table__actions[b-gsaqh1s41c] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.abtn[b-gsaqh1s41c] {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .abtn:hover[b-gsaqh1s41c] { transform: translateY(-1px); }

.abtn--confirm[b-gsaqh1s41c] { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.abtn--confirm:hover[b-gsaqh1s41c] { background: #d1fae5; }
.abtn--complete[b-gsaqh1s41c] { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.abtn--complete:hover[b-gsaqh1s41c] { background: #ddd6fe; }
.abtn--cancel[b-gsaqh1s41c] { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.abtn--cancel:hover[b-gsaqh1s41c] { background: #fde68a; }
.abtn--delete[b-gsaqh1s41c] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.abtn--delete:hover[b-gsaqh1s41c] { background: #fee2e2; }

@media (max-width: 1100px) {
    .apt-table__head[b-gsaqh1s41c] { display: none; }
    .apt-row[b-gsaqh1s41c] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 1rem;
    }
    .apt-table__actions[b-gsaqh1s41c] { justify-content: flex-start; }
}

/* ─── Dark mode ─── */
/* Override only hardcoded light surfaces/text; colored gradient hero/pills/action-tints stay. */
html[data-theme="dark"] .apt-admin[b-gsaqh1s41c] {
    color: var(--text);
}

/* Toolbar */
html[data-theme="dark"] .apt-admin__toolbar[b-gsaqh1s41c] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .chip[b-gsaqh1s41c] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--muted);
}

    html[data-theme="dark"] .chip:hover[b-gsaqh1s41c] {
        border-color: #4f46e5;
        color: #c7d2fe;
    }

html[data-theme="dark"] .chip-sep[b-gsaqh1s41c] {
    background: var(--border-soft);
}

html[data-theme="dark"] .apt-admin__search[b-gsaqh1s41c] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

    html[data-theme="dark"] .apt-admin__search:focus[b-gsaqh1s41c] {
        background: var(--surface);
    }

/* Empty state */
html[data-theme="dark"] .apt-empty[b-gsaqh1s41c] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}

/* Table */
html[data-theme="dark"] .apt-table[b-gsaqh1s41c] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .apt-table__head[b-gsaqh1s41c] {
    background: var(--surface-2);
    color: var(--muted);
    border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .apt-row[b-gsaqh1s41c] {
    border-bottom-color: var(--line);
}

    html[data-theme="dark"] .apt-row:hover[b-gsaqh1s41c] {
        background: var(--surface-2);
    }

html[data-theme="dark"] .apt-row__date[b-gsaqh1s41c] {
    color: var(--text);
}

html[data-theme="dark"] .apt-row__time[b-gsaqh1s41c] {
    color: var(--muted);
}

html[data-theme="dark"] .apt-row__email[b-gsaqh1s41c] {
    color: var(--text);
}

html[data-theme="dark"] .apt-row__notes[b-gsaqh1s41c] {
    color: var(--muted);
}

html[data-theme="dark"] .apt-row__service[b-gsaqh1s41c] {
    color: var(--text);
}

html[data-theme="dark"] .apt-meet--video[b-gsaqh1s41c] {
    background: color-mix(in srgb, #7c3aed 28%, var(--surface-2));
    color: #c4b5fd;
}

html[data-theme="dark"] .apt-meet--inperson[b-gsaqh1s41c] {
    background: color-mix(in srgb, #0369a1 28%, var(--surface-2));
    color: #7dd3fc;
}

html[data-theme="dark"] .apt-meet--phone[b-gsaqh1s41c] {
    background: color-mix(in srgb, #15803d 28%, var(--surface-2));
    color: #86efac;
}

html[data-theme="dark"] .apt-link[b-gsaqh1s41c] {
    color: #a5b4fc;
}

html[data-theme="dark"] .apt-link-btn[b-gsaqh1s41c] {
    color: #a5b4fc;
}

html[data-theme="dark"] .apt-link-input[b-gsaqh1s41c] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

    html[data-theme="dark"] .apt-link-input:focus[b-gsaqh1s41c] {
        background: var(--surface);
    }

/* Action buttons (neutral base only; colored tinted variants keep their hue) */
html[data-theme="dark"] .abtn[b-gsaqh1s41c] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--muted);
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dash-grid[b-v1occfv9dt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card[b-v1occfv9dt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .dash-card:hover[b-v1occfv9dt] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

.dash-card__icon[b-v1occfv9dt] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: #4338ca;
    flex-shrink: 0;
}

.dash-card--users .dash-card__icon[b-v1occfv9dt] { background: #4338ca; }
.dash-card--admins .dash-card__icon[b-v1occfv9dt] { background: #b45309; }
.dash-card--roles .dash-card__icon[b-v1occfv9dt] { background: #047857; }
.dash-card--messages .dash-card__icon[b-v1occfv9dt] { background: #075985; }
.dash-card--appts .dash-card__icon[b-v1occfv9dt] { background: #be185d; }

.dash-card__value[b-v1occfv9dt] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
}

.dash-card__label[b-v1occfv9dt] {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

.dash-row[b-v1occfv9dt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.dash-panel[b-v1occfv9dt] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.dash-panel__title[b-v1occfv9dt] {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.dash-list[b-v1occfv9dt] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

    .dash-list li[b-v1occfv9dt] {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 0.88rem;
    }

        .dash-list li:last-child[b-v1occfv9dt] {
            border-bottom: none;
        }

.dash-list__primary[b-v1occfv9dt] {
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-list__meta[b-v1occfv9dt] {
    color: #6b7280;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dash-panel__cta[b-v1occfv9dt] {
    display: inline-block;
    margin-top: 0.25rem;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

    .dash-panel__cta:hover[b-v1occfv9dt] {
        text-decoration: underline;
    }

/* ============================================================
   DARK MODE OVERRIDES
   Flip hardcoded light card/panel surfaces and dark text to
   theme variables. Colored icon-tile backgrounds stay as-is.
   ============================================================ */

html[data-theme="dark"] .dash-card[b-v1occfv9dt] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .dash-card__value[b-v1occfv9dt] {
    color: var(--text);
}

html[data-theme="dark"] .dash-card__label[b-v1occfv9dt] {
    color: var(--muted);
}

html[data-theme="dark"] .dash-panel[b-v1occfv9dt] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .dash-panel__title[b-v1occfv9dt] {
    color: var(--text);
}

    html[data-theme="dark"] .dash-list li[b-v1occfv9dt] {
        border-bottom-color: var(--line);
    }

html[data-theme="dark"] .dash-list__primary[b-v1occfv9dt] {
    color: var(--text);
}

html[data-theme="dark"] .dash-list__meta[b-v1occfv9dt] {
    color: var(--muted);
}
/* /Components/Pages/Admin/Emails.razor.rz.scp.css */
.em-list[b-ls0ptwfqfh] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.em-row[b-ls0ptwfqfh] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .em-row:hover[b-ls0ptwfqfh] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.15);
    }

.em-row__icon[b-ls0ptwfqfh] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(14, 165, 233, 0.5);
}

.em-row__body[b-ls0ptwfqfh] { min-width: 0; }

.em-row__head[b-ls0ptwfqfh] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.em-row__subj[b-ls0ptwfqfh] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.98rem;
}

.em-row__date[b-ls0ptwfqfh] {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.em-row__to[b-ls0ptwfqfh] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}

    .em-row__to strong[b-ls0ptwfqfh] {
        color: #334155;
        font-weight: 600;
    }

.em-row__preview[b-ls0ptwfqfh] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
}

.em-row__actions[b-ls0ptwfqfh] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .em-row[b-ls0ptwfqfh] { grid-template-columns: 1fr; }
    .em-row__icon[b-ls0ptwfqfh] { width: 36px; height: 36px; }
}

/* ============================================================
   DARK MODE OVERRIDES
   Flip the hardcoded white row surface and dark text to theme
   variables. The colored gradient icon tile is left untouched.
   ============================================================ */

html[data-theme="dark"] .em-row[b-ls0ptwfqfh] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .em-row__subj[b-ls0ptwfqfh] {
    color: var(--text);
}

html[data-theme="dark"] .em-row__date[b-ls0ptwfqfh] {
    color: var(--muted);
}

html[data-theme="dark"] .em-row__to[b-ls0ptwfqfh] {
    color: var(--muted);
}

    html[data-theme="dark"] .em-row__to strong[b-ls0ptwfqfh] {
        color: var(--text);
    }

html[data-theme="dark"] .em-row__preview[b-ls0ptwfqfh] {
    color: var(--muted);
}
/* /Components/Pages/Admin/Messages.razor.rz.scp.css */
.msg-dash[b-tu3ptixix9] {
    padding: 1.5rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    color: #1f2937;
}

.msg-dash__head[b-tu3ptixix9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

    .msg-dash__head h1[b-tu3ptixix9] {
        margin: 0 0 0.25rem;
        font-size: 1.75rem;
        font-weight: 700;
    }

.msg-dash__sub[b-tu3ptixix9] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.msg-dash__stats[b-tu3ptixix9] {
    display: flex;
    gap: 0.5rem;
}

.chip[b-tu3ptixix9] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
}

.chip--total[b-tu3ptixix9] {
    background: #eef2ff;
    color: #4338ca;
}

.chip--unread[b-tu3ptixix9] {
    background: #fef3c7;
    color: #92400e;
}

.msg-dash__toolbar[b-tu3ptixix9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.msg-dash__filters[b-tu3ptixix9] {
    display: flex;
    gap: 0.4rem;
}

.filter[b-tu3ptixix9] {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #374151;
    transition: all 0.15s ease;
}

    .filter:hover[b-tu3ptixix9] {
        background: #f9fafb;
    }

    .filter.active[b-tu3ptixix9] {
        background: #4338ca;
        color: #fff;
        border-color: #4338ca;
    }

.msg-dash__search[b-tu3ptixix9] {
    max-width: 320px;
    flex: 1 1 240px;
}

.msg-table[b-tu3ptixix9] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.msg-table__head[b-tu3ptixix9],
.msg-row[b-tu3ptixix9] {
    display: grid;
    grid-template-columns: 110px 110px 1.2fr 1.6fr 170px 280px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
}

.msg-table__head[b-tu3ptixix9] {
    background: #f9fafb;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.msg-row[b-tu3ptixix9] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

    .msg-row:last-child[b-tu3ptixix9] {
        border-bottom: none;
    }

    .msg-row:hover[b-tu3ptixix9] {
        background: #fafafa;
    }

.msg-row--unread .msg-row__subj[b-tu3ptixix9],
.msg-row--unread .msg-row__to[b-tu3ptixix9] {
    font-weight: 700;
    color: #111827;
}

.msg-row--read[b-tu3ptixix9] {
    color: #6b7280;
}

.msg-row__subj[b-tu3ptixix9],
.msg-row__to[b-tu3ptixix9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-row__date[b-tu3ptixix9] {
    font-size: 0.82rem;
    color: #6b7280;
}

.badge[b-tu3ptixix9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
}

.badge--read[b-tu3ptixix9] {
    background: #ecfdf5;
    color: #047857;
}

.badge--unread[b-tu3ptixix9] {
    background: #fef3c7;
    color: #b45309;
}

.badge--source[b-tu3ptixix9] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge--src-contact[b-tu3ptixix9] {
    background: #e0f2fe;
    color: #075985;
}

.badge--src-newsletter[b-tu3ptixix9] {
    background: #f3e8ff;
    color: #6b21a8;
}

.filter-sep[b-tu3ptixix9] {
    width: 1px;
    background: #e5e7eb;
    margin: 0 0.4rem;
}

.msg-table__actions[b-tu3ptixix9] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.icon-btn[b-tu3ptixix9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: #374151;
    transition: all 0.15s ease;
}

    .icon-btn:hover[b-tu3ptixix9] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .icon-btn i[b-tu3ptixix9] {
        font-size: 0.78rem;
    }

.icon-btn--edit:hover[b-tu3ptixix9] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.icon-btn--read:hover[b-tu3ptixix9] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.icon-btn--unread:hover[b-tu3ptixix9] {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.icon-btn--delete:hover[b-tu3ptixix9] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.msg-dash__empty[b-tu3ptixix9] {
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    padding: 3rem 1rem;
    text-align: center;
    color: #6b7280;
}

.msg-modal[b-tu3ptixix9] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.msg-modal__panel[b-tu3ptixix9] {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.msg-modal__head[b-tu3ptixix9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .msg-modal__head h2[b-tu3ptixix9] {
        margin: 0;
        font-size: 1.25rem;
    }

.msg-modal__close[b-tu3ptixix9] {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.msg-modal__panel label[b-tu3ptixix9] {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

.msg-modal__actions[b-tu3ptixix9] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .msg-table__head[b-tu3ptixix9] {
        display: none;
    }

    .msg-row[b-tu3ptixix9] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 1rem;
    }

    .msg-table__actions[b-tu3ptixix9] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ============================================================
   DARK MODE OVERRIDES
   Flip hardcoded light surfaces / dark text to theme variables.
   Colored gradient/badge surfaces are left untouched.
   ============================================================ */

html[data-theme="dark"] .msg-dash[b-tu3ptixix9] {
    color: var(--text);
}

html[data-theme="dark"] .msg-dash__sub[b-tu3ptixix9] {
    color: var(--muted);
}

html[data-theme="dark"] .chip[b-tu3ptixix9] {
    background: var(--surface-3);
    color: var(--text);
}

html[data-theme="dark"] .filter[b-tu3ptixix9] {
    border-color: var(--border-soft);
    background: var(--surface);
    color: var(--text);
}

    html[data-theme="dark"] .filter:hover[b-tu3ptixix9] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .msg-table[b-tu3ptixix9] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .msg-table__head[b-tu3ptixix9] {
    background: var(--surface-2);
    color: var(--muted);
    border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .msg-row[b-tu3ptixix9] {
    border-bottom-color: var(--line);
}

    html[data-theme="dark"] .msg-row:hover[b-tu3ptixix9] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .msg-row--unread .msg-row__subj[b-tu3ptixix9],
html[data-theme="dark"] .msg-row--unread .msg-row__to[b-tu3ptixix9] {
    color: var(--text);
}

html[data-theme="dark"] .msg-row--read[b-tu3ptixix9] {
    color: var(--muted);
}

html[data-theme="dark"] .msg-row__date[b-tu3ptixix9] {
    color: var(--muted);
}

html[data-theme="dark"] .filter-sep[b-tu3ptixix9] {
    background: var(--border-soft);
}

html[data-theme="dark"] .icon-btn[b-tu3ptixix9] {
    border-color: var(--border-soft);
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .msg-dash__empty[b-tu3ptixix9] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}

html[data-theme="dark"] .msg-modal__panel[b-tu3ptixix9] {
    background: var(--surface);
}

html[data-theme="dark"] .msg-modal__close[b-tu3ptixix9] {
    color: var(--muted);
}

html[data-theme="dark"] .msg-modal__panel label[b-tu3ptixix9] {
    color: var(--text);
}
/* /Components/Pages/Admin/ReceivedMessages.razor.rz.scp.css */
.msg-dash[b-5o62aclhdi] {
    padding: 1.5rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    color: #1f2937;
}

.msg-dash__head[b-5o62aclhdi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

    .msg-dash__head h1[b-5o62aclhdi] {
        margin: 0 0 0.25rem;
        font-size: 1.75rem;
        font-weight: 700;
    }

.msg-dash__sub[b-5o62aclhdi] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.msg-dash__stats[b-5o62aclhdi] {
    display: flex;
    gap: 0.5rem;
}

.chip[b-5o62aclhdi] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
}

.chip--total[b-5o62aclhdi] {
    background: #eef2ff;
    color: #4338ca;
}

.chip--unread[b-5o62aclhdi] {
    background: #fef3c7;
    color: #92400e;
}

.msg-dash__toolbar[b-5o62aclhdi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.msg-dash__filters[b-5o62aclhdi] {
    display: flex;
    gap: 0.4rem;
}

.filter[b-5o62aclhdi] {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #374151;
    transition: all 0.15s ease;
}

    .filter:hover[b-5o62aclhdi] {
        background: #f9fafb;
    }

    .filter.active[b-5o62aclhdi] {
        background: #4338ca;
        color: #fff;
        border-color: #4338ca;
    }

.msg-dash__search[b-5o62aclhdi] {
    max-width: 320px;
    flex: 1 1 240px;
}

.msg-table[b-5o62aclhdi] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.msg-table__head[b-5o62aclhdi],
.msg-row[b-5o62aclhdi] {
    display: grid;
    grid-template-columns: 110px 1.3fr 1.8fr 170px 300px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
}

.msg-table__head[b-5o62aclhdi] {
    background: #f9fafb;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.msg-row[b-5o62aclhdi] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

    .msg-row:last-child[b-5o62aclhdi] {
        border-bottom: none;
    }

    .msg-row:hover[b-5o62aclhdi] {
        background: #fafafa;
    }

.msg-row--unread .msg-row__subj[b-5o62aclhdi],
.msg-row--unread .msg-row__to[b-5o62aclhdi] {
    font-weight: 700;
    color: #111827;
}

.msg-row--read[b-5o62aclhdi] {
    color: #6b7280;
}

.msg-row__subj[b-5o62aclhdi],
.msg-row__to[b-5o62aclhdi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-row__date[b-5o62aclhdi] {
    font-size: 0.82rem;
    color: #6b7280;
}

.badge[b-5o62aclhdi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
}

.badge--read[b-5o62aclhdi] {
    background: #ecfdf5;
    color: #047857;
}

.badge--unread[b-5o62aclhdi] {
    background: #fef3c7;
    color: #b45309;
}

.badge--source[b-5o62aclhdi] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge--src-contact[b-5o62aclhdi] {
    background: #e0f2fe;
    color: #075985;
}

.badge--src-newsletter[b-5o62aclhdi] {
    background: #f3e8ff;
    color: #6b21a8;
}

.filter-sep[b-5o62aclhdi] {
    width: 1px;
    background: #e5e7eb;
    margin: 0 0.4rem;
}

.msg-table__actions[b-5o62aclhdi] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.icon-btn[b-5o62aclhdi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: #374151;
    transition: all 0.15s ease;
}

    .icon-btn:hover[b-5o62aclhdi] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .icon-btn i[b-5o62aclhdi] {
        font-size: 0.78rem;
    }

.icon-btn--edit:hover[b-5o62aclhdi] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.icon-btn--read:hover[b-5o62aclhdi] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.icon-btn--unread:hover[b-5o62aclhdi] {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.icon-btn--delete:hover[b-5o62aclhdi] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.msg-dash__empty[b-5o62aclhdi] {
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    padding: 3rem 1rem;
    text-align: center;
    color: #6b7280;
}

.msg-modal[b-5o62aclhdi] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.msg-modal__panel[b-5o62aclhdi] {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.msg-modal__head[b-5o62aclhdi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .msg-modal__head h2[b-5o62aclhdi] {
        margin: 0;
        font-size: 1.25rem;
    }

.msg-modal__close[b-5o62aclhdi] {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.msg-modal__panel label[b-5o62aclhdi] {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

.msg-modal__actions[b-5o62aclhdi] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .msg-table__head[b-5o62aclhdi] {
        display: none;
    }

    .msg-row[b-5o62aclhdi] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 1rem;
    }

    .msg-table__actions[b-5o62aclhdi] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ============================================================
   DARK MODE OVERRIDES
   Flip hardcoded light surfaces / dark text to theme variables.
   Colored gradient/badge surfaces are left untouched.
   ============================================================ */

html[data-theme="dark"] .msg-dash[b-5o62aclhdi] {
    color: var(--text);
}

html[data-theme="dark"] .msg-dash__sub[b-5o62aclhdi] {
    color: var(--muted);
}

html[data-theme="dark"] .chip[b-5o62aclhdi] {
    background: var(--surface-3);
    color: var(--text);
}

html[data-theme="dark"] .filter[b-5o62aclhdi] {
    border-color: var(--border-soft);
    background: var(--surface);
    color: var(--text);
}

    html[data-theme="dark"] .filter:hover[b-5o62aclhdi] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .msg-table[b-5o62aclhdi] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .msg-table__head[b-5o62aclhdi] {
    background: var(--surface-2);
    color: var(--muted);
    border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .msg-row[b-5o62aclhdi] {
    border-bottom-color: var(--line);
}

    html[data-theme="dark"] .msg-row:hover[b-5o62aclhdi] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .msg-row--unread .msg-row__subj[b-5o62aclhdi],
html[data-theme="dark"] .msg-row--unread .msg-row__to[b-5o62aclhdi] {
    color: var(--text);
}

html[data-theme="dark"] .msg-row--read[b-5o62aclhdi] {
    color: var(--muted);
}

html[data-theme="dark"] .msg-row__date[b-5o62aclhdi] {
    color: var(--muted);
}

html[data-theme="dark"] .filter-sep[b-5o62aclhdi] {
    background: var(--border-soft);
}

html[data-theme="dark"] .icon-btn[b-5o62aclhdi] {
    border-color: var(--border-soft);
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .msg-dash__empty[b-5o62aclhdi] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}

html[data-theme="dark"] .msg-modal__panel[b-5o62aclhdi] {
    background: var(--surface);
}

html[data-theme="dark"] .msg-modal__close[b-5o62aclhdi] {
    color: var(--muted);
}

html[data-theme="dark"] .msg-modal__panel label[b-5o62aclhdi] {
    color: var(--text);
}

/* ---- Received Messages extras ---- */
.check-btn[b-5o62aclhdi] {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.check-btn:disabled[b-5o62aclhdi] { opacity: 0.5; cursor: default; }

.inbox-note[b-5o62aclhdi] {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.9rem;
}
.inbox-note--warn[b-5o62aclhdi] { background: #fff7ed; color: #9a3412; }

.badge--replied[b-5o62aclhdi] { background: #eef2ff; color: #4338ca; }

.msg-row__from[b-5o62aclhdi] { display: flex; flex-direction: column; min-width: 0; }
.msg-row__from strong[b-5o62aclhdi] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row__addr[b-5o62aclhdi] { font-size: 0.78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row__subj[b-5o62aclhdi] { cursor: pointer; }
.msg-row__subj:hover[b-5o62aclhdi] { text-decoration: underline; }

.msg-modal__panel--wide[b-5o62aclhdi] { max-width: 760px; width: 100%; }

.mail-meta[b-5o62aclhdi] {
    display: grid;
    gap: 0.25rem;
    font-size: 0.88rem;
    color: #374151;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
    overflow-wrap: anywhere;
}
.mail-meta span[b-5o62aclhdi] { display: inline-block; width: 70px; color: #9ca3af; font-weight: 600; }
.mail-meta__note[b-5o62aclhdi] { color: #6b7280; font-style: italic; }

.mail-body[b-5o62aclhdi] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 45vh;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.mail-error[b-5o62aclhdi] { color: #b91c1c; margin: 0.4rem 0; }

html[data-theme="dark"] .inbox-note[b-5o62aclhdi] { background: var(--surface); color: inherit; }
html[data-theme="dark"] .mail-meta[b-5o62aclhdi] { color: inherit; border-color: rgba(255,255,255,0.1); }
/* /Components/Pages/Admin/Roles.razor.rz.scp.css */
.roles-page[b-ykw0bl3f44] {
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Hero ─── */
.roles-hero[b-ykw0bl3f44] {
    background: linear-gradient(135deg, #134e4a 0%, #0e7490 35%, #4338ca 75%, #c026d3 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    color: #fff;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 36px -12px rgba(67, 56, 202, 0.5);
}

    .roles-hero[b-ykw0bl3f44]::before {
        content: "";
        position: absolute;
        top: -60%;
        right: -10%;
        width: 380px;
        height: 380px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        pointer-events: none;
    }

    .roles-hero[b-ykw0bl3f44]::after {
        content: "🛡";
        position: absolute;
        font-size: 16rem;
        right: -3rem;
        top: -3rem;
        opacity: 0.07;
        pointer-events: none;
        line-height: 1;
    }

.roles-hero__text[b-ykw0bl3f44] {
    position: relative;
    z-index: 1;
}

.roles-hero__eyebrow[b-ykw0bl3f44] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.roles-hero__title[b-ykw0bl3f44] {
    margin: 0 0 0.4rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.roles-hero__sub[b-ykw0bl3f44] {
    margin: 0;
    font-size: 0.98rem;
    opacity: 0.92;
    max-width: 540px;
}

.roles-hero__cta[b-ykw0bl3f44] {
    background: #fff;
    color: #4338ca;
    border: none;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

    .roles-hero__cta:hover[b-ykw0bl3f44] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

.roles-hero__cta-icon[b-ykw0bl3f44] {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #4338ca, #c026d3);
    color: #fff;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

/* ─── Stats ─── */
.roles-stats[b-ykw0bl3f44] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rstat[b-ykw0bl3f44] {
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
    position: relative;
    overflow: hidden;
}

    .rstat:hover[b-ykw0bl3f44] { transform: translateY(-3px); }

    .rstat[b-ykw0bl3f44]::before {
        content: "";
        position: absolute;
        top: -40%;
        right: -30%;
        width: 160px;
        height: 160px;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 50%;
    }

.rstat--violet[b-ykw0bl3f44] { background: linear-gradient(135deg, #4f46e5, #c026d3); }
.rstat--amber[b-ykw0bl3f44] { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.rstat--emerald[b-ykw0bl3f44] { background: linear-gradient(135deg, #10b981, #0891b2); }
.rstat--rose[b-ykw0bl3f44] { background: linear-gradient(135deg, #ec4899, #f43f5e); }

.rstat__icon[b-ykw0bl3f44] {
    font-size: 2rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.rstat__body[b-ykw0bl3f44] { position: relative; z-index: 1; }

.rstat__value[b-ykw0bl3f44] {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.rstat__label[b-ykw0bl3f44] {
    font-size: 0.82rem;
    opacity: 0.92;
    margin-top: 0.2rem;
    font-weight: 600;
}

/* ─── Toast ─── */
.roles-toast[b-ykw0bl3f44] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #a7f3d0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    .roles-toast button[b-ykw0bl3f44] {
        background: none;
        border: none;
        font-size: 1.4rem;
        line-height: 1;
        color: inherit;
        cursor: pointer;
    }

/* ─── Empty ─── */
.roles-empty[b-ykw0bl3f44] {
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

.roles-empty__icon[b-ykw0bl3f44] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.roles-empty h3[b-ykw0bl3f44] {
    margin: 0 0 0.4rem;
    color: #334155;
    font-size: 1.1rem;
}

.roles-empty p[b-ykw0bl3f44] { margin: 0; font-size: 0.9rem; }

/* ─── Role grid ─── */
.role-grid[b-ykw0bl3f44] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.role-card[b-ykw0bl3f44] {
    background: #fff;
    border-radius: 20px;
    padding: 1.6rem 1.5rem 1.4rem;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    --accent-from: #6366f1;
    --accent-to: #8b5cf6;
}

    .role-card:hover[b-ykw0bl3f44] {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.2);
    }

    .role-card[b-ykw0bl3f44]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
    }

.role-card--admin[b-ykw0bl3f44] {
    --accent-from: #f59e0b;
    --accent-to: #ef4444;
}

.role-card--customer[b-ykw0bl3f44] {
    --accent-from: #10b981;
    --accent-to: #06b6d4;
}

.role-card--neutral[b-ykw0bl3f44] {
    --accent-from: #6366f1;
    --accent-to: #8b5cf6;
}

.role-card__decor[b-ykw0bl3f44] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
    opacity: 0.08;
    pointer-events: none;
}

.role-card__head[b-ykw0bl3f44] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.85rem;
    position: relative;
    z-index: 1;
}

.role-card__icon[b-ykw0bl3f44] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent-from) 60%, transparent);
}

.role-lock[b-ykw0bl3f44] {
    font-size: 0.7rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-card__name[b-ykw0bl3f44] {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.role-card__desc[b-ykw0bl3f44] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
    min-height: 2.6em;
    position: relative;
    z-index: 1;
}

.role-card__meta[b-ykw0bl3f44] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #f1f5f9;
    position: relative;
    z-index: 1;
}

.role-card__meta-item[b-ykw0bl3f44] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meta-label[b-ykw0bl3f44] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 700;
}

.meta-value[b-ykw0bl3f44] {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 700;
    margin-top: 0.2rem;
}

.meta-mono[b-ykw0bl3f44] {
    font-family: ui-monospace, Menlo, Monaco, monospace;
    font-size: 0.78rem;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-card__actions[b-ykw0bl3f44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.r-btn[b-ykw0bl3f44] {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    padding: 0.6rem 0.6rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
}

    .r-btn:hover:not(:disabled)[b-ykw0bl3f44] { transform: translateY(-2px); }

    .r-btn:disabled[b-ykw0bl3f44] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.r-btn--edit:hover[b-ykw0bl3f44] { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.r-btn--delete:hover:not(:disabled)[b-ykw0bl3f44] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* ─── Modal (shared, scoped) ─── */
.ux-modal[b-ykw0bl3f44] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ux-modal__panel[b-ykw0bl3f44] {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    animation: modalIn-b-ykw0bl3f44 0.22s ease-out;
}

@keyframes modalIn-b-ykw0bl3f44 {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ux-modal__head[b-ykw0bl3f44] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.ux-modal__head--indigo[b-ykw0bl3f44] { background: linear-gradient(135deg, #4338ca, #7c3aed); }
.ux-modal__head--amber[b-ykw0bl3f44] { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.ux-modal__head h2[b-ykw0bl3f44] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.ux-modal__close[b-ykw0bl3f44] {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ux-modal__close:hover[b-ykw0bl3f44] {
        background: rgba(255, 255, 255, 0.32);
    }

.ux-modal__body[b-ykw0bl3f44] {
    padding: 1.5rem;
}

.form-row[b-ykw0bl3f44] { margin-bottom: 0.9rem; }

    .form-row label[b-ykw0bl3f44] {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.35rem;
    }

.form-control[b-ykw0bl3f44] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    background: #f8fafc;
    transition: all 0.15s ease;
}

    .form-control:focus[b-ykw0bl3f44] {
        outline: none;
        border-color: #4338ca;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    }

.form-hint[b-ykw0bl3f44] {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.req[b-ykw0bl3f44] { color: #ef4444; }

.form-error[b-ykw0bl3f44] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    margin-top: 0.85rem;
    font-size: 0.86rem;
}

.ux-modal__actions[b-ykw0bl3f44] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.btn-ghost[b-ykw0bl3f44] {
    background: #f1f5f9;
    border: none;
    padding: 0.65rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

    .btn-ghost:hover[b-ykw0bl3f44] { background: #e2e8f0; }

.btn-primary[b-ykw0bl3f44] {
    border: none;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary--indigo[b-ykw0bl3f44] { background: linear-gradient(135deg, #4338ca, #7c3aed); }
.btn-primary--amber[b-ykw0bl3f44] { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.btn-primary:hover[b-ykw0bl3f44] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

@media (max-width: 700px) {
    .roles-page[b-ykw0bl3f44] { padding: 1rem; }
    .roles-hero[b-ykw0bl3f44] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
    .roles-hero__title[b-ykw0bl3f44] { font-size: 1.6rem; }
}

/* ─── Dark mode ─── */
/* Override only hardcoded light surfaces/text; colored gradient heroes/icons/badges stay. */
html[data-theme="dark"] .roles-page[b-ykw0bl3f44] {
    color: var(--text);
}

/* Empty state */
html[data-theme="dark"] .roles-empty[b-ykw0bl3f44] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}

    html[data-theme="dark"] .roles-empty h3[b-ykw0bl3f44] {
        color: var(--text);
    }

/* Role cards */
html[data-theme="dark"] .role-card[b-ykw0bl3f44] {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .role-lock[b-ykw0bl3f44] {
    background: var(--surface-3);
    color: var(--muted);
}

html[data-theme="dark"] .role-card__name[b-ykw0bl3f44] {
    color: var(--text);
}

html[data-theme="dark"] .role-card__desc[b-ykw0bl3f44] {
    color: var(--muted);
}

html[data-theme="dark"] .role-card__meta[b-ykw0bl3f44] {
    background: var(--surface-2);
    border-color: var(--line);
}

html[data-theme="dark"] .meta-label[b-ykw0bl3f44] {
    color: var(--muted);
}

html[data-theme="dark"] .meta-value[b-ykw0bl3f44] {
    color: var(--text);
}

html[data-theme="dark"] .meta-mono[b-ykw0bl3f44] {
    color: var(--muted);
}

html[data-theme="dark"] .r-btn[b-ykw0bl3f44] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--muted);
}

/* Modal */
html[data-theme="dark"] .ux-modal__panel[b-ykw0bl3f44] {
    background: var(--surface);
}

html[data-theme="dark"] .form-row label[b-ykw0bl3f44] {
    color: var(--text);
}

html[data-theme="dark"] .form-control[b-ykw0bl3f44] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

    html[data-theme="dark"] .form-control:focus[b-ykw0bl3f44] {
        background: var(--surface);
    }

html[data-theme="dark"] .form-hint[b-ykw0bl3f44] {
    color: var(--muted);
}

html[data-theme="dark"] .btn-ghost[b-ykw0bl3f44] {
    background: var(--surface-3);
    color: var(--text);
}

    html[data-theme="dark"] .btn-ghost:hover[b-ykw0bl3f44] {
        background: var(--line);
    }
/* /Components/Pages/Admin/Tasks.razor.rz.scp.css */
.task-board[b-0tuenfxi9l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1100px) {
    .task-board[b-0tuenfxi9l] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .task-board[b-0tuenfxi9l] { grid-template-columns: 1fr; }
}

.task-col[b-0tuenfxi9l] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0.85rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
}

    .task-col[b-0tuenfxi9l]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        border-radius: 14px 14px 0 0;
    }

.task-col--todo[b-0tuenfxi9l]::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.task-col--inprogress[b-0tuenfxi9l]::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.task-col--blocked[b-0tuenfxi9l]::before { background: linear-gradient(90deg, #ef4444, #f43f5e); }
.task-col--done[b-0tuenfxi9l]::before { background: linear-gradient(90deg, #10b981, #06b6d4); }

.task-col__head[b-0tuenfxi9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    margin-bottom: 0.4rem;
}

.task-col__title[b-0tuenfxi9l] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.task-col__count[b-0tuenfxi9l] {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.task-col__empty[b-0tuenfxi9l] {
    color: #94a3b8;
    font-size: 0.82rem;
    text-align: center;
    padding: 1rem 0;
}

.task-card[b-0tuenfxi9l] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    border-left: 4px solid #cbd5e1;
}

    .task-card:hover[b-0tuenfxi9l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.2);
    }

.task-card--urgent[b-0tuenfxi9l] { border-left-color: #ef4444; }
.task-card--high[b-0tuenfxi9l] { border-left-color: #f97316; }
.task-card--medium[b-0tuenfxi9l] { border-left-color: #0ea5e9; }
.task-card--low[b-0tuenfxi9l] { border-left-color: #94a3b8; }

.task-card--overdue[b-0tuenfxi9l] {
    background: linear-gradient(135deg, #fff, #fef2f2);
}

.task-card__head[b-0tuenfxi9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.task-pri[b-0tuenfxi9l] {
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-pri--urgent[b-0tuenfxi9l] { background: #fee2e2; color: #991b1b; }
.task-pri--high[b-0tuenfxi9l] { background: #ffedd5; color: #9a3412; }
.task-pri--medium[b-0tuenfxi9l] { background: #e0f2fe; color: #075985; }
.task-pri--low[b-0tuenfxi9l] { background: #f1f5f9; color: #475569; }

.task-cat[b-0tuenfxi9l] {
    font-size: 0.7rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.task-card__title[b-0tuenfxi9l] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.task-card__desc[b-0tuenfxi9l] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.task-card__meta[b-0tuenfxi9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.task-card__due[b-0tuenfxi9l] {
    font-size: 0.74rem;
    color: #475569;
    background: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.task-card__due--late[b-0tuenfxi9l] {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 700;
}

.task-card__owner[b-0tuenfxi9l] {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.task-card__actions[b-0tuenfxi9l] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
}

.task-mini[b-0tuenfxi9l] {
    flex: 1;
    font-size: 0.74rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}

.task-mini-btn[b-0tuenfxi9l] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: #475569;
}

    .task-mini-btn:hover[b-0tuenfxi9l] { background: #eef2ff; color: #4338ca; }

.task-mini-btn--danger:hover[b-0tuenfxi9l] { background: #fef2f2; color: #b91c1c; }

/* ============================================================
   DARK MODE OVERRIDES
   Flip hardcoded light surfaces / dark text to theme variables.
   Colored gradient bars, priority pills and the owner avatar
   gradient are intentionally left untouched.
   ============================================================ */

html[data-theme="dark"] .task-col[b-0tuenfxi9l] {
    background: var(--surface-2);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .task-col__title[b-0tuenfxi9l] {
    color: var(--text);
}

html[data-theme="dark"] .task-col__count[b-0tuenfxi9l] {
    background: var(--surface-3);
    color: var(--text);
}

html[data-theme="dark"] .task-col__empty[b-0tuenfxi9l] {
    color: var(--muted);
}

html[data-theme="dark"] .task-card[b-0tuenfxi9l] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .task-card--overdue[b-0tuenfxi9l] {
    background: linear-gradient(135deg, var(--surface), #2a1620);
}

html[data-theme="dark"] .task-cat[b-0tuenfxi9l] {
    color: var(--muted);
    background: var(--surface-3);
}

html[data-theme="dark"] .task-card__title[b-0tuenfxi9l] {
    color: var(--text);
}

html[data-theme="dark"] .task-card__desc[b-0tuenfxi9l] {
    color: var(--muted);
}

html[data-theme="dark"] .task-card__due[b-0tuenfxi9l] {
    color: var(--text);
    background: var(--surface-3);
}

html[data-theme="dark"] .task-card__actions[b-0tuenfxi9l] {
    border-top-color: var(--border-soft);
}

html[data-theme="dark"] .task-mini[b-0tuenfxi9l] {
    border-color: var(--border-soft);
    background: var(--surface-2);
    color: var(--text);
}

html[data-theme="dark"] .task-mini-btn[b-0tuenfxi9l] {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text);
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* ──────────────── Page shell ──────────────── */
.users-page[b-ivm2rkyay8] {
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ──────────────── Hero ──────────────── */
.users-hero[b-ivm2rkyay8] {
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #ec4899 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.5);
    position: relative;
    overflow: hidden;
}

.users-hero[b-ivm2rkyay8]::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.users-hero[b-ivm2rkyay8]::after {
    content: "";
    position: absolute;
    bottom: -30%;
    right: 15%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.users-hero__text[b-ivm2rkyay8] {
    position: relative;
    z-index: 1;
}

.users-hero__eyebrow[b-ivm2rkyay8] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    backdrop-filter: blur(8px);
}

.users-hero__title[b-ivm2rkyay8] {
    margin: 0 0 0.4rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.users-hero__sub[b-ivm2rkyay8] {
    margin: 0;
    font-size: 0.98rem;
    opacity: 0.92;
    max-width: 540px;
}

.users-hero__cta[b-ivm2rkyay8] {
    background: #fff;
    color: #4338ca;
    border: none;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

    .users-hero__cta:hover[b-ivm2rkyay8] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

.users-hero__cta-icon[b-ivm2rkyay8] {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #4338ca, #ec4899);
    color: #fff;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

/* ──────────────── Stats ──────────────── */
.users-stats[b-ivm2rkyay8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-ivm2rkyay8] {
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 6px 20px -8px rgba(0,0,0,0.2);
    transition: transform 0.18s ease;
}

    .stat-card:hover[b-ivm2rkyay8] {
        transform: translateY(-3px);
    }

    .stat-card[b-ivm2rkyay8]::after {
        content: "";
        position: absolute;
        top: -40%;
        right: -25%;
        width: 160px;
        height: 160px;
        background: rgba(255,255,255,0.14);
        border-radius: 50%;
    }

.stat-card--indigo[b-ivm2rkyay8] { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.stat-card--amber[b-ivm2rkyay8] { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.stat-card--emerald[b-ivm2rkyay8] { background: linear-gradient(135deg, #10b981, #06b6d4); }
.stat-card--rose[b-ivm2rkyay8] { background: linear-gradient(135deg, #ec4899, #f43f5e); }

.stat-card__label[b-ivm2rkyay8] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}

.stat-card__value[b-ivm2rkyay8] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.35rem;
    position: relative;
    z-index: 1;
}

.stat-card__hint[b-ivm2rkyay8] {
    font-size: 0.8rem;
    opacity: 0.88;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
}

/* ──────────────── Toolbar ──────────────── */
.users-toolbar[b-ivm2rkyay8] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.users-toolbar__chips[b-ivm2rkyay8] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.chip-btn[b-ivm2rkyay8] {
    border: 1.5px solid #e5e7eb;
    background: #fff;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

    .chip-btn .dot[b-ivm2rkyay8] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
        display: inline-block;
    }

    .chip-btn--admin .dot[b-ivm2rkyay8] { background: #f59e0b; }
    .chip-btn--customer .dot[b-ivm2rkyay8] { background: #10b981; }

    .chip-btn:hover[b-ivm2rkyay8] {
        border-color: #c7d2fe;
        color: #4338ca;
    }

    .chip-btn--active[b-ivm2rkyay8] {
        background: #4338ca;
        color: #fff;
        border-color: #4338ca;
    }

        .chip-btn--active.chip-btn--admin[b-ivm2rkyay8] {
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            border-color: transparent;
        }

        .chip-btn--active.chip-btn--customer[b-ivm2rkyay8] {
            background: linear-gradient(135deg, #10b981, #06b6d4);
            border-color: transparent;
        }

        .chip-btn--active .dot[b-ivm2rkyay8] {
            background: rgba(255, 255, 255, 0.85);
        }

.users-toolbar__search[b-ivm2rkyay8] {
    position: relative;
    min-width: 280px;
    flex: 1 1 280px;
    max-width: 400px;
}

    .users-toolbar__search input[b-ivm2rkyay8] {
        width: 100%;
        padding: 0.6rem 0.85rem 0.6rem 2.3rem;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        font-size: 0.9rem;
        background: #f8fafc;
        transition: all 0.15s ease;
    }

        .users-toolbar__search input:focus[b-ivm2rkyay8] {
            outline: none;
            border-color: #4338ca;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
        }

.search-icon[b-ivm2rkyay8] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    fill: #94a3b8;
    pointer-events: none;
}

/* ──────────────── Toast ──────────────── */
.toast-banner[b-ivm2rkyay8] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #a7f3d0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    .toast-banner button[b-ivm2rkyay8] {
        background: none;
        border: none;
        font-size: 1.4rem;
        line-height: 1;
        color: #065f46;
        cursor: pointer;
    }

/* ──────────────── Empty ──────────────── */
.users-empty[b-ivm2rkyay8] {
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

.users-empty__icon[b-ivm2rkyay8] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.users-empty h3[b-ivm2rkyay8] {
    margin: 0 0 0.4rem;
    color: #334155;
    font-size: 1.1rem;
}

.users-empty p[b-ivm2rkyay8] {
    margin: 0;
    font-size: 0.9rem;
}

/* ──────────────── User Grid ──────────────── */
.user-grid[b-ivm2rkyay8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.user-card[b-ivm2rkyay8] {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

    .user-card[b-ivm2rkyay8]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #94a3b8, #cbd5e1);
    }

    .user-card--admin[b-ivm2rkyay8]::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
    .user-card--customer[b-ivm2rkyay8]::before { background: linear-gradient(90deg, #10b981, #06b6d4); }

    .user-card:hover[b-ivm2rkyay8] {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.04);
    }

.user-card__top[b-ivm2rkyay8] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.user-card__avatar[b-ivm2rkyay8] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.user-card__identity[b-ivm2rkyay8] {
    flex: 1;
    min-width: 0;
}

.user-card__email[b-ivm2rkyay8] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card__meta[b-ivm2rkyay8] {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.pill[b-ivm2rkyay8] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

.pill--ok[b-ivm2rkyay8] {
    background: #d1fae5;
    color: #065f46;
}

.pill--warn[b-ivm2rkyay8] {
    background: #fef3c7;
    color: #92400e;
}

.pill--me[b-ivm2rkyay8] {
    background: #ddd6fe;
    color: #5b21b6;
}

.user-card__roles[b-ivm2rkyay8] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.role-badge[b-ivm2rkyay8] {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.32rem 0.7rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-badge--admin[b-ivm2rkyay8] {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    color: #92400e;
    border: 1px solid #fde68a;
}

.role-badge--customer[b-ivm2rkyay8] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.role-badge--neutral[b-ivm2rkyay8],
.role-badge--none[b-ivm2rkyay8] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.user-card__details[b-ivm2rkyay8] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.85rem;
}

.user-card__detail[b-ivm2rkyay8] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
}

.detail-label[b-ivm2rkyay8] {
    color: #64748b;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.detail-value[b-ivm2rkyay8] {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muted[b-ivm2rkyay8] {
    color: #94a3b8;
    font-style: normal;
}

.user-card__actions[b-ivm2rkyay8] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.3rem;
}

.action-btn[b-ivm2rkyay8] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 0.55rem 0.4rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.15s ease;
}

    .action-btn:hover:not(:disabled)[b-ivm2rkyay8] {
        transform: translateY(-2px);
    }

    .action-btn:disabled[b-ivm2rkyay8] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.action-btn--edit:hover[b-ivm2rkyay8] { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.action-btn--roles:hover[b-ivm2rkyay8] { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.action-btn--delete:hover[b-ivm2rkyay8] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* ──────────────── Modal ──────────────── */
.ux-modal[b-ivm2rkyay8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ux-modal__panel[b-ivm2rkyay8] {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    animation: modalIn-b-ivm2rkyay8 0.22s ease-out;
}

@keyframes modalIn-b-ivm2rkyay8 {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ux-modal__head[b-ivm2rkyay8] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.ux-modal__head--indigo[b-ivm2rkyay8] { background: linear-gradient(135deg, #4338ca, #7c3aed); }
.ux-modal__head--amber[b-ivm2rkyay8] { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ux-modal__head--emerald[b-ivm2rkyay8] { background: linear-gradient(135deg, #10b981, #06b6d4); }

.ux-modal__head h2[b-ivm2rkyay8] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.ux-modal__close[b-ivm2rkyay8] {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ux-modal__close:hover[b-ivm2rkyay8] {
        background: rgba(255, 255, 255, 0.32);
    }

.ux-modal__body[b-ivm2rkyay8] {
    padding: 1.5rem;
    overflow-y: auto;
}

.ux-modal__sub[b-ivm2rkyay8] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.9rem;
}

.form-row[b-ivm2rkyay8] {
    margin-bottom: 0.9rem;
}

    .form-row label[b-ivm2rkyay8] {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.35rem;
    }

.form-row-pair[b-ivm2rkyay8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.form-control[b-ivm2rkyay8] {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.92rem;
    background: #f8fafc;
    transition: all 0.15s ease;
}

    .form-control:focus[b-ivm2rkyay8] {
        outline: none;
        border-color: #4338ca;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    }

.req[b-ivm2rkyay8] { color: #ef4444; }

.checkbox-row[b-ivm2rkyay8] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.6rem 0 0.4rem;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
}

.form-error[b-ivm2rkyay8] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    margin-top: 0.85rem;
    font-size: 0.86rem;
}

.ux-modal__actions[b-ivm2rkyay8] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.btn-ghost[b-ivm2rkyay8] {
    background: #f1f5f9;
    border: none;
    padding: 0.65rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .btn-ghost:hover[b-ivm2rkyay8] {
        background: #e2e8f0;
    }

.btn-primary[b-ivm2rkyay8] {
    border: none;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary--indigo[b-ivm2rkyay8] { background: linear-gradient(135deg, #4338ca, #7c3aed); }
.btn-primary--amber[b-ivm2rkyay8] { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.btn-primary--emerald[b-ivm2rkyay8] { background: linear-gradient(135deg, #10b981, #06b6d4); }

.btn-primary:hover[b-ivm2rkyay8] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* ──────────────── Role Toggle (modal) ──────────────── */
.role-toggle-list[b-ivm2rkyay8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-toggle[b-ivm2rkyay8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #f8fafc;
}

    .role-toggle input[b-ivm2rkyay8] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .role-toggle__label[b-ivm2rkyay8] {
        font-weight: 600;
        color: #334155;
    }

    .role-toggle__check[b-ivm2rkyay8] {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: #fff;
        border: 1.5px solid #cbd5e1;
        color: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        transition: all 0.15s ease;
    }

    .role-toggle:has(input:checked)[b-ivm2rkyay8] {
        border-color: transparent;
        background: linear-gradient(135deg, #eef2ff, #ede9fe);
    }

        .role-toggle:has(input:checked) .role-toggle__check[b-ivm2rkyay8] {
            background: #4338ca;
            color: #fff;
            border-color: #4338ca;
        }

    .role-toggle--admin:has(input:checked)[b-ivm2rkyay8] {
        background: linear-gradient(135deg, #fef3c7, #fed7aa);
    }

        .role-toggle--admin:has(input:checked) .role-toggle__check[b-ivm2rkyay8] {
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            border-color: transparent;
        }

    .role-toggle--customer:has(input:checked)[b-ivm2rkyay8] {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    }

        .role-toggle--customer:has(input:checked) .role-toggle__check[b-ivm2rkyay8] {
            background: linear-gradient(135deg, #10b981, #06b6d4);
            border-color: transparent;
        }

/* ──────────────── Responsive ──────────────── */
@media (max-width: 700px) {
    .users-page[b-ivm2rkyay8] { padding: 1rem; }

    .users-hero[b-ivm2rkyay8] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .users-hero__title[b-ivm2rkyay8] { font-size: 1.65rem; }

    .form-row-pair[b-ivm2rkyay8] { grid-template-columns: 1fr; }
}

/* ──────────────── Dark mode ──────────────── */
/* Override only hardcoded light surfaces/text; colored gradient heroes/badges/buttons stay. */
html[data-theme="dark"] .users-page[b-ivm2rkyay8] {
    color: var(--text);
}

/* Toolbar */
html[data-theme="dark"] .users-toolbar[b-ivm2rkyay8] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .chip-btn[b-ivm2rkyay8] {
    border-color: var(--border-soft);
    background: var(--surface-2);
    color: var(--muted);
}

    html[data-theme="dark"] .chip-btn .dot[b-ivm2rkyay8] {
        background: #475569;
    }

    html[data-theme="dark"] .chip-btn:hover[b-ivm2rkyay8] {
        border-color: #4f46e5;
        color: #c7d2fe;
    }

html[data-theme="dark"] .users-toolbar__search input[b-ivm2rkyay8] {
    border-color: var(--border-soft);
    background: var(--surface-2);
    color: var(--text);
}

    html[data-theme="dark"] .users-toolbar__search input:focus[b-ivm2rkyay8] {
        background: var(--surface);
    }

/* Empty state */
html[data-theme="dark"] .users-empty[b-ivm2rkyay8] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}

    html[data-theme="dark"] .users-empty h3[b-ivm2rkyay8] {
        color: var(--text);
    }

/* User cards */
html[data-theme="dark"] .user-card[b-ivm2rkyay8] {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .user-card__email[b-ivm2rkyay8] {
    color: var(--text);
}

html[data-theme="dark"] .role-badge--neutral[b-ivm2rkyay8],
html[data-theme="dark"] .role-badge--none[b-ivm2rkyay8] {
    background: var(--surface-3);
    color: var(--muted);
    border-color: var(--line);
}

html[data-theme="dark"] .user-card__details[b-ivm2rkyay8] {
    background: var(--surface-2);
}

html[data-theme="dark"] .detail-label[b-ivm2rkyay8] {
    color: var(--muted);
}

html[data-theme="dark"] .detail-value[b-ivm2rkyay8] {
    color: var(--text);
}

html[data-theme="dark"] .muted[b-ivm2rkyay8] {
    color: var(--muted);
}

/* Action buttons */
html[data-theme="dark"] .action-btn[b-ivm2rkyay8] {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--muted);
}

/* Modal */
html[data-theme="dark"] .ux-modal__panel[b-ivm2rkyay8] {
    background: var(--surface);
}

html[data-theme="dark"] .ux-modal__sub[b-ivm2rkyay8] {
    color: var(--muted);
}

html[data-theme="dark"] .form-row label[b-ivm2rkyay8] {
    color: var(--text);
}

html[data-theme="dark"] .form-control[b-ivm2rkyay8] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

    html[data-theme="dark"] .form-control:focus[b-ivm2rkyay8] {
        background: var(--surface);
    }

html[data-theme="dark"] .checkbox-row[b-ivm2rkyay8] {
    color: var(--text);
}

html[data-theme="dark"] .btn-ghost[b-ivm2rkyay8] {
    background: var(--surface-3);
    color: var(--text);
}

    html[data-theme="dark"] .btn-ghost:hover[b-ivm2rkyay8] {
        background: var(--line);
    }

/* Role toggle (modal) */
html[data-theme="dark"] .role-toggle[b-ivm2rkyay8] {
    border-color: var(--line);
    background: var(--surface-2);
}

    html[data-theme="dark"] .role-toggle__label[b-ivm2rkyay8] {
        color: var(--text);
    }

    html[data-theme="dark"] .role-toggle__check[b-ivm2rkyay8] {
        background: var(--surface);
        border-color: #475569;
    }
/* /Components/Pages/Portal/Appointments.razor.rz.scp.css */
.p-filters[b-xsrhmsjbsm] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.p-filter[b-xsrhmsjbsm] {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .p-filter:hover[b-xsrhmsjbsm] {
        border-color: #c7d2fe;
        color: #4338ca;
    }

    .p-filter--active[b-xsrhmsjbsm] {
        background: linear-gradient(135deg, #4338ca, #7c3aed);
        color: #fff;
        border-color: transparent;
    }

.p-toast[b-xsrhmsjbsm] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #a7f3d0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    .p-toast button[b-xsrhmsjbsm] {
        background: none;
        border: none;
        font-size: 1.4rem;
        cursor: pointer;
        color: #065f46;
    }

.apt-list[b-xsrhmsjbsm] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.apt-card[b-xsrhmsjbsm] {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.1rem;
    align-items: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .apt-card[b-xsrhmsjbsm]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: #cbd5e1;
    }

    .apt-card--pending[b-xsrhmsjbsm]::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
    .apt-card--confirmed[b-xsrhmsjbsm]::before { background: linear-gradient(180deg, #10b981, #34d399); }
    .apt-card--completed[b-xsrhmsjbsm]::before { background: linear-gradient(180deg, #6366f1, #818cf8); }
    .apt-card--cancelled[b-xsrhmsjbsm]::before { background: linear-gradient(180deg, #ef4444, #f87171); }

    .apt-card:hover[b-xsrhmsjbsm] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.15);
    }

.apt-card__date[b-xsrhmsjbsm] {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 12px;
    padding: 0.6rem;
    text-align: center;
    width: 80px;
}

.apt-card--pending .apt-card__date[b-xsrhmsjbsm] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.apt-card--confirmed .apt-card__date[b-xsrhmsjbsm] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.apt-card--completed .apt-card__date[b-xsrhmsjbsm] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.apt-card--cancelled .apt-card__date[b-xsrhmsjbsm] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }

.apt-card__day[b-xsrhmsjbsm] { font-size: 1.65rem; font-weight: 800; line-height: 1; }
.apt-card__mon[b-xsrhmsjbsm] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.apt-card__yr[b-xsrhmsjbsm] { font-size: 0.7rem; opacity: 0.8; }

.apt-card__body[b-xsrhmsjbsm] { min-width: 0; }

.apt-card__title[b-xsrhmsjbsm] {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.3rem;
}

.apt-card__meta[b-xsrhmsjbsm] {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 0.84rem;
    align-items: center;
}

.apt-card__notes[b-xsrhmsjbsm] {
    margin-top: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #475569;
    border-left: 3px solid #cbd5e1;
}

.apt-meet[b-xsrhmsjbsm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.apt-meet--video[b-xsrhmsjbsm] {
    background: #ede9fe;
    color: #6d28d9;
}

.apt-meet--inperson[b-xsrhmsjbsm] {
    background: #e0f2fe;
    color: #0369a1;
}

.apt-meet--phone[b-xsrhmsjbsm] {
    background: #dcfce7;
    color: #15803d;
}

.apt-card__actions[b-xsrhmsjbsm] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.p-btn--join[b-xsrhmsjbsm] {
    background: linear-gradient(135deg, #7c3aed, #4338ca);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: filter 0.15s ease;
}

    .p-btn--join:hover[b-xsrhmsjbsm] {
        filter: brightness(1.08);
    }

.p-btn--danger[b-xsrhmsjbsm] {
    background: #fff;
    color: #b91c1c;
    border: 1.5px solid #fecaca;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

    .p-btn--danger:hover[b-xsrhmsjbsm] {
        background: #fef2f2;
        border-color: #fca5a5;
    }

@media (max-width: 640px) {
    .apt-card[b-xsrhmsjbsm] { grid-template-columns: 1fr; gap: 0.8rem; }
    .apt-card__date[b-xsrhmsjbsm] { width: auto; display: inline-block; }
}

/* ============================================================
   Dark mode — remap hardcoded light surfaces/text only.
   Gradient status accents, status-tinted date chips, and the
   active gradient filter keep their colors in both themes.
   ============================================================ */
html[data-theme="dark"] .p-filter[b-xsrhmsjbsm] {
    background: var(--surface);
    border-color: var(--line);
    color: var(--muted);
}

    html[data-theme="dark"] .p-filter:hover[b-xsrhmsjbsm] {
        color: var(--text);
    }

html[data-theme="dark"] .apt-card[b-xsrhmsjbsm] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .apt-card__title[b-xsrhmsjbsm] {
    color: var(--text);
}

html[data-theme="dark"] .apt-card__meta[b-xsrhmsjbsm] {
    color: var(--muted);
}

html[data-theme="dark"] .apt-card__notes[b-xsrhmsjbsm] {
    background: var(--surface-2);
    color: var(--muted);
    border-left-color: var(--line);
}

html[data-theme="dark"] .apt-meet--video[b-xsrhmsjbsm] {
    background: color-mix(in srgb, #7c3aed 28%, var(--surface-2));
    color: #c4b5fd;
}

html[data-theme="dark"] .apt-meet--inperson[b-xsrhmsjbsm] {
    background: color-mix(in srgb, #0369a1 28%, var(--surface-2));
    color: #7dd3fc;
}

html[data-theme="dark"] .apt-meet--phone[b-xsrhmsjbsm] {
    background: color-mix(in srgb, #15803d 28%, var(--surface-2));
    color: #86efac;
}

html[data-theme="dark"] .p-btn--danger[b-xsrhmsjbsm] {
    background: var(--surface);
    color: #f87171;
    border-color: #5b2330;
}

    html[data-theme="dark"] .p-btn--danger:hover[b-xsrhmsjbsm] {
        background: var(--surface-2);
        border-color: #7a2e3c;
    }
/* /Components/Pages/Portal/Dashboard.razor.rz.scp.css */
/* ─── Stats ─── */
.p-stats[b-lyh7o39bp5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.p-stat[b-lyh7o39bp5] {
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.25);
}

.p-stat--violet[b-lyh7o39bp5] { background: linear-gradient(135deg, #4f46e5, #9333ea); }
.p-stat--teal[b-lyh7o39bp5] { background: linear-gradient(135deg, #0d9488, #06b6d4); }
.p-stat--coral[b-lyh7o39bp5] { background: linear-gradient(135deg, #f59e0b, #f43f5e); }

.p-stat__top[b-lyh7o39bp5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.95;
}

.p-stat__icon[b-lyh7o39bp5] { font-size: 1.4rem; }

.p-stat__value[b-lyh7o39bp5] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.55rem;
}

.p-stat__label[b-lyh7o39bp5] {
    font-size: 0.85rem;
    opacity: 0.92;
    margin-top: 0.4rem;
}

/* ─── Two-column row ─── */
.p-two-col[b-lyh7o39bp5] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}

@media (max-width: 880px) {
    .p-two-col[b-lyh7o39bp5] { grid-template-columns: 1fr; }
}

/* ─── Cards ─── */
.p-card[b-lyh7o39bp5] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.4rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.p-card--accent[b-lyh7o39bp5] {
    background: linear-gradient(135deg, #fafbff, #fff);
    border-color: #ddd6fe;
    box-shadow: 0 8px 24px -10px rgba(124, 58, 237, 0.18);
}

.p-card__head[b-lyh7o39bp5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

    .p-card__head h2[b-lyh7o39bp5] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #0f172a;
    }

.p-card__link[b-lyh7o39bp5] {
    font-size: 0.85rem;
    color: #4338ca;
    text-decoration: none;
    font-weight: 600;
}

    .p-card__link:hover[b-lyh7o39bp5] { text-decoration: underline; }

.p-card__empty[b-lyh7o39bp5] {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #64748b;
}

.p-card__empty-icon[b-lyh7o39bp5] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.p-card__empty p[b-lyh7o39bp5] { margin: 0 0 1rem; }

/* ─── Buttons ─── */
.p-btn[b-lyh7o39bp5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.p-btn--primary[b-lyh7o39bp5] {
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    color: #fff;
}

    .p-btn--primary:hover[b-lyh7o39bp5] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(67, 56, 202, 0.35);
    }

/* ─── Next appointment ─── */
.p-next[b-lyh7o39bp5] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.p-next__date[b-lyh7o39bp5] {
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    color: #fff;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    min-width: 92px;
    text-align: center;
    box-shadow: 0 8px 18px -8px rgba(67, 56, 202, 0.5);
}

.p-next__day[b-lyh7o39bp5] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.p-next__month[b-lyh7o39bp5] {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-top: 0.2rem;
}

.p-next__year[b-lyh7o39bp5] {
    font-size: 0.72rem;
    opacity: 0.85;
}

.p-next__detail[b-lyh7o39bp5] { flex: 1; }

.p-next__service[b-lyh7o39bp5] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.p-next__time[b-lyh7o39bp5] {
    color: #475569;
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
}

.p-next__time-icon[b-lyh7o39bp5] {
    margin-right: 0.25rem;
}

.p-next__notes[b-lyh7o39bp5] {
    color: #64748b;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e5e7eb;
}

/* ─── Status pill ─── */
.p-status[b-lyh7o39bp5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.p-status--pending[b-lyh7o39bp5] { background: #fef3c7; color: #92400e; }
.p-status--confirmed[b-lyh7o39bp5] { background: #d1fae5; color: #065f46; }
.p-status--completed[b-lyh7o39bp5] { background: #e0e7ff; color: #3730a3; }
.p-status--cancelled[b-lyh7o39bp5] { background: #fee2e2; color: #991b1b; }

/* ─── Profile list ─── */
.p-profile[b-lyh7o39bp5] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .p-profile li[b-lyh7o39bp5] {
        display: flex;
        justify-content: space-between;
        padding: 0.6rem 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.92rem;
    }

        .p-profile li:last-child[b-lyh7o39bp5] { border-bottom: none; }

.p-profile__label[b-lyh7o39bp5] {
    color: #64748b;
    font-weight: 600;
}

.p-profile__value[b-lyh7o39bp5] {
    color: #0f172a;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Recent list ─── */
.p-recent[b-lyh7o39bp5] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-recent__item[b-lyh7o39bp5] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #f8fafc;
    margin-bottom: 0.55rem;
    transition: background 0.15s ease;
}

    .p-recent__item:hover[b-lyh7o39bp5] { background: #f1f5f9; }
    .p-recent__item:last-child[b-lyh7o39bp5] { margin-bottom: 0; }

.p-recent__icon[b-lyh7o39bp5] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ddd6fe, #c7d2fe);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.p-recent__body[b-lyh7o39bp5] { flex: 1; min-width: 0; }

.p-recent__title[b-lyh7o39bp5] {
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-recent__meta[b-lyh7o39bp5] {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.portal-empty[b-lyh7o39bp5] {
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    color: #64748b;
}

/* ============================================================
   Dark mode — remap hardcoded light surfaces/text only.
   Gradient stat cards, status pills, and colored buttons keep
   their colors (they read as light-on-color in both themes).
   ============================================================ */
html[data-theme="dark"] .p-card[b-lyh7o39bp5] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .p-card--accent[b-lyh7o39bp5] {
    background: linear-gradient(135deg, #1a1533, var(--surface));
    border-color: #2a2a3d;
}

html[data-theme="dark"] .p-card__head h2[b-lyh7o39bp5] {
    color: var(--ink);
}

html[data-theme="dark"] .p-card__empty[b-lyh7o39bp5] {
    color: var(--muted);
}

html[data-theme="dark"] .p-next__service[b-lyh7o39bp5] {
    color: var(--text);
}

html[data-theme="dark"] .p-next__time[b-lyh7o39bp5] {
    color: var(--muted);
}

html[data-theme="dark"] .p-next__notes[b-lyh7o39bp5] {
    color: var(--muted);
    border-top-color: var(--border-soft);
}

html[data-theme="dark"] .p-profile li[b-lyh7o39bp5] {
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .p-profile__label[b-lyh7o39bp5] {
    color: var(--muted);
}

html[data-theme="dark"] .p-profile__value[b-lyh7o39bp5] {
    color: var(--text);
}

html[data-theme="dark"] .p-recent__item[b-lyh7o39bp5] {
    background: var(--surface-2);
}

    html[data-theme="dark"] .p-recent__item:hover[b-lyh7o39bp5] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .p-recent__title[b-lyh7o39bp5] {
    color: var(--text);
}

html[data-theme="dark"] .p-recent__meta[b-lyh7o39bp5] {
    color: var(--muted);
}

html[data-theme="dark"] .portal-empty[b-lyh7o39bp5] {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}
/* /Components/Pages/Portal/PortalShell.razor.rz.scp.css */
.portal-shell[b-e0583emqc0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Hero ─── */
.portal-hero[b-e0583emqc0] {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #0ea5e9 100%);
    border-radius: 22px;
    padding: 2.5rem 2.5rem 2.25rem;
    color: #fff;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
}

.portal-hero__bg[b-e0583emqc0] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.55), transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.4), transparent 55%);
    pointer-events: none;
}

.portal-hero__inner[b-e0583emqc0] {
    position: relative;
    z-index: 1;
}

.portal-hero__eyebrow[b-e0583emqc0] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.portal-hero__title[b-e0583emqc0] {
    margin: 0 0 0.4rem;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.portal-hero__sub[b-e0583emqc0] {
    margin: 0;
    font-size: 0.98rem;
    opacity: 0.9;
    max-width: 560px;
}

/* ─── Tabs ─── */
.portal-tabs[b-e0583emqc0] {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    background: #fff;
    padding: 0.4rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.portal-tab[b-e0583emqc0] {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

    .portal-tab:hover[b-e0583emqc0] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .portal-tab--active[b-e0583emqc0] {
        background: linear-gradient(135deg, #4338ca, #7c3aed);
        color: #fff !important;
        box-shadow: 0 6px 14px -6px rgba(67, 56, 202, 0.55);
    }

    .portal-tab--cta[b-e0583emqc0] {
        background: linear-gradient(135deg, #10b981, #06b6d4);
        color: #fff;
    }

        .portal-tab--cta:hover[b-e0583emqc0] {
            background: linear-gradient(135deg, #059669, #0891b2);
            color: #fff;
        }

        .portal-tab--cta.portal-tab--active[b-e0583emqc0] {
            background: linear-gradient(135deg, #047857, #0e7490);
        }

.portal-tab__icon[b-e0583emqc0] {
    font-size: 1rem;
    line-height: 1;
}

.portal-body[b-e0583emqc0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 700px) {
    .portal-shell[b-e0583emqc0] { padding: 1rem; }
    .portal-hero[b-e0583emqc0] { padding: 1.5rem; }
    .portal-hero__title[b-e0583emqc0] { font-size: 1.5rem; }
    .portal-tab[b-e0583emqc0] { flex: 1 1 100%; }
}

/* ============================================================
   Dark mode — remap hardcoded light surfaces/text only.
   The hero is already a dark gradient with white text — leave
   it untouched. Only the page text and the white tab bar flip.
   ============================================================ */
html[data-theme="dark"] .portal-shell[b-e0583emqc0] {
    color: var(--text);
}

html[data-theme="dark"] .portal-tabs[b-e0583emqc0] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .portal-tab[b-e0583emqc0] {
    color: var(--muted);
}

    html[data-theme="dark"] .portal-tab:hover[b-e0583emqc0] {
        background: var(--surface-3);
        color: var(--text);
    }
/* /Components/Pages/Portal/Schedule.razor.rz.scp.css */
/* ─── Steps ─── */
.sched-step[b-uvc01a6vth] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sched-step__head[b-uvc01a6vth] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.sched-step__num[b-uvc01a6vth] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px -6px rgba(67, 56, 202, 0.55);
}

.sched-step__title[b-uvc01a6vth] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

/* ─── Service grid ─── */
.service-grid[b-uvc01a6vth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.service-card[b-uvc01a6vth] {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.1rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    --accent: #4338ca;
}

    .service-card[b-uvc01a6vth]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent);
        opacity: 0.55;
        transition: opacity 0.2s ease, height 0.2s ease;
    }

    .service-card:not(.service-card--disabled):hover[b-uvc01a6vth] {
        transform: translateY(-3px);
        border-color: var(--accent);
        box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.18);
    }

        .service-card:not(.service-card--disabled):hover[b-uvc01a6vth]::before {
            opacity: 1;
            height: 6px;
        }

    .service-card--selected[b-uvc01a6vth] {
        border-color: var(--accent);
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 8px 22px -8px rgba(15, 23, 42, 0.2);
    }

        .service-card--selected[b-uvc01a6vth]::before {
            opacity: 1;
            height: 6px;
        }

    .service-card--disabled[b-uvc01a6vth] {
        cursor: not-allowed;
        opacity: 0.5;
        filter: grayscale(1);
    }

.service-card__soon[b-uvc01a6vth] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.service-card__icon[b-uvc01a6vth] {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
}

.service-card__name[b-uvc01a6vth] {
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 0.3rem;
}

.service-card__desc[b-uvc01a6vth] {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 0.7rem;
}

.service-card__duration[b-uvc01a6vth] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Form ─── */
.sched-form[b-uvc01a6vth] { }

.sched-form__grid[b-uvc01a6vth] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
}

@media (max-width: 640px) {
    .sched-form__grid[b-uvc01a6vth] { grid-template-columns: 1fr; }
}

.form-row[b-uvc01a6vth] {
    margin-bottom: 0.85rem;
}

    .form-row label[b-uvc01a6vth] {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.4rem;
    }

.form-control[b-uvc01a6vth] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.92rem;
    background: #f8fafc;
    transition: all 0.15s ease;
    font-family: inherit;
}

    .form-control:focus[b-uvc01a6vth] {
        outline: none;
        border-color: #4338ca;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    }

.muted[b-uvc01a6vth] {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.78rem;
}

/* ─── Meeting type toggle ─── */
.meet-toggle[b-uvc01a6vth] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}

@media (max-width: 640px) {
    .meet-toggle[b-uvc01a6vth] { grid-template-columns: 1fr; }
}

.meet-option[b-uvc01a6vth] {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: all 0.18s ease;
}

    .meet-option:not(.meet-option--disabled):hover[b-uvc01a6vth] {
        border-color: #4338ca;
        background: #fff;
    }

    .meet-option--disabled[b-uvc01a6vth] {
        position: relative;
        cursor: not-allowed;
        opacity: 0.5;
        filter: grayscale(1);
    }

    .meet-option--selected[b-uvc01a6vth] {
        border-color: #4338ca;
        background: linear-gradient(135deg, color-mix(in srgb, #4338ca 7%, #fff), #fff);
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.14);
    }

.meet-option__icon[b-uvc01a6vth] {
    font-size: 1.4rem;
}

.meet-option__name[b-uvc01a6vth] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.meet-option__desc[b-uvc01a6vth] {
    font-size: 0.8rem;
    color: #64748b;
}

.form-error[b-uvc01a6vth] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    margin-top: 0.6rem;
    font-size: 0.86rem;
}

.sched-form__summary[b-uvc01a6vth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.sched-summary[b-uvc01a6vth] {
    flex: 1;
    color: #334155;
    font-size: 0.9rem;
}

.sched-summary__label[b-uvc01a6vth] {
    color: #64748b;
    margin-right: 0.35rem;
}

.p-btn--lg[b-uvc01a6vth] {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.p-btn--ghost[b-uvc01a6vth] {
    background: #f1f5f9;
    color: #334155;
}

    .p-btn--ghost:hover[b-uvc01a6vth] {
        background: #e2e8f0;
    }

/* ─── Success ─── */
.sched-success[b-uvc01a6vth] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sched-success__check[b-uvc01a6vth] {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.2rem;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    box-shadow: 0 12px 28px -10px rgba(16, 185, 129, 0.55);
    animation: pop-b-uvc01a6vth 0.45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes pop-b-uvc01a6vth {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sched-success h2[b-uvc01a6vth] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #0f172a;
}

.sched-success p[b-uvc01a6vth] {
    color: #475569;
    margin: 0 auto 1.5rem;
    max-width: 480px;
    line-height: 1.5;
}

.sched-success__actions[b-uvc01a6vth] {
    display: inline-flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================
   Dark mode — remap hardcoded light surfaces/text only.
   Gradient step numbers, the success check, and accent colors
   stay as-is (color-on-color reads fine in both themes).
   ============================================================ */
html[data-theme="dark"] .sched-step[b-uvc01a6vth] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sched-step__title[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .service-card[b-uvc01a6vth] {
    background: var(--surface);
    border-color: var(--border-soft);
}

    html[data-theme="dark"] .service-card--selected[b-uvc01a6vth] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
    }

html[data-theme="dark"] .service-card__soon[b-uvc01a6vth] {
    color: var(--muted);
    background: var(--surface-3);
    border-color: var(--line);
}

html[data-theme="dark"] .service-card__icon[b-uvc01a6vth] {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
}

html[data-theme="dark"] .service-card__name[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .service-card__desc[b-uvc01a6vth] {
    color: var(--muted);
}

html[data-theme="dark"] .form-row label[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .form-control[b-uvc01a6vth] {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}

    html[data-theme="dark"] .form-control[b-uvc01a6vth]::placeholder {
        color: var(--muted);
    }

    html[data-theme="dark"] .form-control:focus[b-uvc01a6vth] {
        background: var(--surface-3);
    }

html[data-theme="dark"] .muted[b-uvc01a6vth] {
    color: var(--muted);
}

html[data-theme="dark"] .meet-option[b-uvc01a6vth] {
    background: var(--surface-2);
    border-color: var(--line);
}

    html[data-theme="dark"] .meet-option:not(.meet-option--disabled):hover[b-uvc01a6vth] {
        background: var(--surface-3);
    }

    html[data-theme="dark"] .meet-option--selected[b-uvc01a6vth] {
        background: linear-gradient(135deg, color-mix(in srgb, #4338ca 22%, var(--surface)), var(--surface));
    }

html[data-theme="dark"] .meet-option__name[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .meet-option__desc[b-uvc01a6vth] {
    color: var(--muted);
}

html[data-theme="dark"] .sched-form__summary[b-uvc01a6vth] {
    border-top-color: var(--border-soft);
}

html[data-theme="dark"] .sched-summary[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .sched-summary__label[b-uvc01a6vth] {
    color: var(--muted);
}

html[data-theme="dark"] .p-btn--ghost[b-uvc01a6vth] {
    background: var(--surface-3);
    color: var(--text);
}

    html[data-theme="dark"] .p-btn--ghost:hover[b-uvc01a6vth] {
        background: var(--surface-2);
    }

html[data-theme="dark"] .sched-success[b-uvc01a6vth] {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sched-success h2[b-uvc01a6vth] {
    color: var(--text);
}

html[data-theme="dark"] .sched-success p[b-uvc01a6vth] {
    color: var(--muted);
}
/* /Components/Portfolio.razor.rz.scp.css */
.rnd-section[b-w5hq8tj6jv] {
    position: relative;
    background:
        radial-gradient(55% 45% at 0% 0%, rgba(236, 72, 153, 0.07), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(99, 102, 241, 0.08), transparent 70%),
        #f6f7fb;
}

.rnd-search[b-w5hq8tj6jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 0 auto 2rem;
    max-width: 640px;
}

.rnd-search__box[b-w5hq8tj6jv] {
    position: relative;
    width: 100%;
}

.rnd-search__icon[b-w5hq8tj6jv] {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6366f1;
    font-size: 0.95rem;
    pointer-events: none;
}

.rnd-search__input[b-w5hq8tj6jv] {
    width: 100%;
    padding: 0.9rem 2.8rem 0.9rem 2.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 0.95rem;
    color: #1f2937;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.08);
    transition: all 0.2s ease;
}

.rnd-search__input:focus[b-w5hq8tj6jv] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 4px 22px rgba(99, 102, 241, 0.22);
}

.rnd-search__input[b-w5hq8tj6jv]::placeholder {
    color: #9ca3af;
}

.rnd-search__clear[b-w5hq8tj6jv] {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.rnd-search__clear:hover[b-w5hq8tj6jv] {
    background: #e5e7eb;
    color: #1f2937;
}

.rnd-search__meta[b-w5hq8tj6jv] {
    font-size: 0.82rem;
    color: #6b7280;
}

.rnd-search__meta strong[b-w5hq8tj6jv] {
    color: #4338ca;
}

.rnd-empty[b-w5hq8tj6jv] {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #6b7280;
}

.rnd-empty i[b-w5hq8tj6jv] {
    font-size: 2.5rem;
    color: #c7d2fe;
    margin-bottom: 1rem;
}

.rnd-empty h3[b-w5hq8tj6jv] {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.rnd-empty__btn[b-w5hq8tj6jv] {
    background: none;
    border: none;
    color: #4338ca;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.rnd-empty__btn:hover[b-w5hq8tj6jv] {
    color: #312e81;
}

.rnd-grid[b-w5hq8tj6jv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.75rem;
}

.rnd-grid > div[b-w5hq8tj6jv] { display: flex; }

/* ============================================================
   Dark mode overrides — flip the light section base, the search
   input/chip surfaces and dark text. Accent colors kept intact.
   ============================================================ */
html[data-theme="dark"] .rnd-section[b-w5hq8tj6jv] {
    background:
        radial-gradient(55% 45% at 0% 0%, rgba(236, 72, 153, 0.10), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 70%),
        var(--bg-soft);
}

html[data-theme="dark"] .rnd-search__input[b-w5hq8tj6jv] {
    border-color: var(--border-soft);
    background: var(--surface-2);
    color: var(--text);
}

html[data-theme="dark"] .rnd-search__input[b-w5hq8tj6jv]::placeholder {
    color: var(--muted);
}

html[data-theme="dark"] .rnd-search__clear[b-w5hq8tj6jv] {
    background: var(--surface-3);
    color: var(--muted);
}

html[data-theme="dark"] .rnd-search__clear:hover[b-w5hq8tj6jv] {
    background: var(--line);
    color: var(--text);
}

html[data-theme="dark"] .rnd-search__meta[b-w5hq8tj6jv] {
    color: var(--muted);
}

html[data-theme="dark"] .rnd-empty[b-w5hq8tj6jv] {
    color: var(--muted);
}

html[data-theme="dark"] .rnd-empty h3[b-w5hq8tj6jv] {
    color: var(--text);
}
/* /Components/Project.razor.rz.scp.css */
.proj[b-39ma1bd6pu] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 38px -24px rgba(80, 40, 160, 0.4);
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}

.proj:hover[b-39ma1bd6pu] {
    transform: translateY(-12px);
    box-shadow: 0 36px 70px -28px rgba(124, 58, 237, 0.55);
}

/* When the card is a link to its details page, strip anchor styling. */
.proj--link[b-39ma1bd6pu] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* "View project" affordance that slides up on hover. */
.proj__view[b-39ma1bd6pu] {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.6);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.proj__view-icon[b-39ma1bd6pu] { font-size: .6rem; }

.proj:hover .proj__view[b-39ma1bd6pu],
.proj:focus-visible .proj__view[b-39ma1bd6pu] {
    opacity: 1;
    transform: translateY(0);
}

.proj--link:focus-visible[b-39ma1bd6pu] {
    outline: 3px solid rgba(124, 58, 237, 0.5);
    outline-offset: 3px;
}

.proj__media[b-39ma1bd6pu] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%);
}

.proj__media img[b-39ma1bd6pu] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.proj:hover .proj__media img[b-39ma1bd6pu] { transform: scale(1.05); }

/* Spirituality artwork presented inside an iPad-style device,
   keeping the original painting but framed like the other cards. */
.proj__media--tablet[b-39ma1bd6pu] {
    display: grid;
    place-items: center;
    padding: 18px;
}

.proj__tablet[b-39ma1bd6pu] {
    position: relative;
    height: 94%;
    aspect-ratio: 3 / 4;
    background: #0b0b23;
    border-radius: 22px;
    padding: 10px;
    overflow: hidden;
    box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55),
                inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.proj__media--tablet img[b-39ma1bd6pu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    padding: 0;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.proj__cam[b-39ma1bd6pu] {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a3a5c;
    z-index: 2;
}

.proj__tag[b-39ma1bd6pu] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #fff;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(11, 11, 35, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.proj__body[b-39ma1bd6pu] {
    padding: 1.5rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.proj__body h3[b-39ma1bd6pu] {
    font-size: 1.28rem;
    color: #14143a;
    margin: 0;
    position: relative;
    padding-bottom: .7rem;
}

.proj__body h3[b-39ma1bd6pu]::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    transition: width .35s ease;
}

.proj:hover .proj__body h3[b-39ma1bd6pu]::after { width: 84px; }

.proj__body p[b-39ma1bd6pu] {
    color: #6b6f86;
    font-size: .96rem;
    line-height: 1.65;
}

/* ============================================================
   Dark mode overrides — flip the light card surface and dark
   text. The tablet frame (#0b0b23) and brand gradients/tags are
   already dark and left untouched.
   ============================================================ */
html[data-theme="dark"] .proj[b-39ma1bd6pu] {
    background: var(--surface);
}

/* Soften the light media tint behind contained images for dark mode. */
html[data-theme="dark"] .proj__media[b-39ma1bd6pu] {
    background: linear-gradient(135deg, #1a1533 0%, #1f1f2e 100%);
}

html[data-theme="dark"] .proj__body h3[b-39ma1bd6pu] {
    color: var(--ink);
}

html[data-theme="dark"] .proj__body p[b-39ma1bd6pu] {
    color: var(--muted);
}
/* /Components/Service.razor.rz.scp.css */
.svc[b-pjr0hl7525] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #ececf4;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 34px -22px rgba(80, 40, 160, 0.35);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}

.svc[b-pjr0hl7525]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, #7c3aed, #ec4899, #06b6d4);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.svc:hover[b-pjr0hl7525] {
    transform: translateY(-10px);
    box-shadow: 0 32px 60px -26px rgba(124, 58, 237, 0.5);
}

/* When the card links to its details page, strip default anchor styling. */
.svc--link[b-pjr0hl7525] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.svc--link:focus-visible[b-pjr0hl7525] {
    outline: 3px solid rgba(124, 58, 237, 0.5);
    outline-offset: 3px;
}

.svc:hover[b-pjr0hl7525]::before { opacity: 1; }

.svc__media[b-pjr0hl7525] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%);
}

.svc__media img[b-pjr0hl7525] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .7s cubic-bezier(.16,1,.3,1);
}

.svc:hover .svc__media img[b-pjr0hl7525] { transform: scale(1.05); }

.svc__badge[b-pjr0hl7525] {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    box-shadow: 0 8px 18px -8px rgba(219, 39, 119, 0.7);
}

.svc__body[b-pjr0hl7525] {
    padding: 1.5rem 1.5rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    flex: 1;
}

.svc__body h4[b-pjr0hl7525] {
    font-size: 1.12rem;
    line-height: 1.35;
    color: #14143a;
    margin: 0;
}

.svc__body p[b-pjr0hl7525] {
    color: #6b6f86;
    font-size: .95rem;
}

.svc__link[b-pjr0hl7525] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .92rem;
    color: #7c3aed;
}

.svc__link i[b-pjr0hl7525] { transition: transform .25s ease; }
.svc:hover .svc__link i[b-pjr0hl7525] { transform: translateX(5px); }

.svc--accent[b-pjr0hl7525] { background: linear-gradient(160deg, #faf5ff, #fdf2f8); }
.svc--accent .svc__badge[b-pjr0hl7525] { background: linear-gradient(135deg, #06b6d4, #6366f1); }

/* ============================================================
   Dark mode overrides — flip light card surfaces/text only.
   Brand gradients (::before, badge, media tint) left intact.
   ============================================================ */
html[data-theme="dark"] .svc[b-pjr0hl7525] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .svc__body h4[b-pjr0hl7525] {
    color: var(--ink);
}

html[data-theme="dark"] .svc__body p[b-pjr0hl7525] {
    color: var(--muted);
}

/* Soften the light media tint behind contained images for dark mode. */
html[data-theme="dark"] .svc__media[b-pjr0hl7525] {
    background: linear-gradient(135deg, #1a1533 0%, #1f1f2e 100%);
}

html[data-theme="dark"] .svc--accent[b-pjr0hl7525] {
    background: var(--surface);
}
/* /Components/Services.razor.rz.scp.css */
.services-section[b-xt1bdjuygy] {
    position: relative;
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(124, 58, 237, 0.06), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(6, 182, 212, 0.07), transparent 70%),
        #ffffff;
}

.services-grid[b-xt1bdjuygy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.75rem;
}

.services-grid > div[b-xt1bdjuygy] { display: flex; }

/* ============================================================
   Dark mode overrides — swap the white section base for a dark
   surface; brand radial glows are kept on top.
   ============================================================ */
html[data-theme="dark"] .services-section[b-xt1bdjuygy] {
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(124, 58, 237, 0.10), transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(6, 182, 212, 0.12), transparent 70%),
        var(--bg);
}
/* /Components/Testimonial.razor.rz.scp.css */
.tst-section[b-9vzvdm0dkl] {
    position: relative;
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(124, 58, 237, 0.08), transparent 70%),
        #ffffff;
}

.tst-grid[b-9vzvdm0dkl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}

.tst-grid > div[b-9vzvdm0dkl] { display: flex; }

/* ============================================================
   Dark mode overrides — swap the white section base for a dark
   surface; the brand radial glow is kept on top.
   ============================================================ */
html[data-theme="dark"] .tst-section[b-9vzvdm0dkl] {
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(124, 58, 237, 0.12), transparent 70%),
        var(--bg);
}
/* /Components/Testimony.razor.rz.scp.css */
.tcard[b-b2mj99sc09] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
    margin: 0;
    padding: 2.4rem 2rem 2rem;
    background: #fff;
    border: 1px solid #ececf4;
    border-radius: 24px;
    box-shadow: 0 18px 40px -26px rgba(80, 40, 160, 0.4);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
    overflow: hidden;
}

.tcard[b-b2mj99sc09]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    background: linear-gradient(135deg, #7c3aed, #ec4899, #06b6d4);
}

.tcard:hover[b-b2mj99sc09] {
    transform: translateY(-8px);
    box-shadow: 0 32px 60px -28px rgba(124, 58, 237, 0.5);
}

.tcard__quote[b-b2mj99sc09] {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    font-size: 2.6rem;
    line-height: 1;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .25;
}

.tcard__stars[b-b2mj99sc09] { display: flex; gap: .25rem; color: #fbbf24; font-size: .95rem; }
.tcard__star--off[b-b2mj99sc09] { color: #e3e1ef; }

.tcard blockquote[b-b2mj99sc09] {
    margin: 0;
    color: #34344f;
    font-size: 1.02rem;
    line-height: 1.7;
    flex: 1;
}

.tcard__author[b-b2mj99sc09] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-top: 1.1rem;
    border-top: 1px solid #f0eefb;
}

.tcard__avatar[b-b2mj99sc09] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    flex-shrink: 0;
}

.tcard__avatar img[b-b2mj99sc09] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
}

.tcard__meta[b-b2mj99sc09] { display: flex; flex-direction: column; line-height: 1.3; }
.tcard__meta strong[b-b2mj99sc09] { font-family: 'Space Grotesk', sans-serif; color: #14143a; font-size: 1rem; }
.tcard__meta small[b-b2mj99sc09] { color: #8b8fa6; font-size: .85rem; }

/* ============================================================
   Dark mode overrides — flip the white card surface, borders and
   dark quote/author text. Brand top-bar, quote glyph, star colors
   and avatar gradient are left intact.
   ============================================================ */
html[data-theme="dark"] .tcard[b-b2mj99sc09] {
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .tcard__star--off[b-b2mj99sc09] {
    color: var(--line);
}

html[data-theme="dark"] .tcard blockquote[b-b2mj99sc09] {
    color: var(--text);
}

html[data-theme="dark"] .tcard__author[b-b2mj99sc09] {
    border-top-color: var(--line);
}

/* Avatar ring fill behind the photo — match the dark card surface. */
html[data-theme="dark"] .tcard__avatar img[b-b2mj99sc09] {
    background: var(--surface);
}

html[data-theme="dark"] .tcard__meta strong[b-b2mj99sc09] {
    color: var(--ink);
}

html[data-theme="dark"] .tcard__meta small[b-b2mj99sc09] {
    color: var(--muted);
}
/* /Components/TopBar.razor.rz.scp.css */
.sb-nav[b-i9ytxej0ub] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(124, 58, 237, 0.12);
    box-shadow: 0 8px 30px -18px rgba(80, 40, 160, 0.45);
}

.sb-nav__inner[b-i9ytxej0ub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 78px;
}

/* Brand */
.sb-brand[b-i9ytxej0ub] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.sb-brand__logo[b-i9ytxej0ub] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    padding: 3px;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.7);
}

.sb-brand__logo img[b-i9ytxej0ub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    background: #fff;
}

.sb-brand__text[b-i9ytxej0ub] { display: flex; flex-direction: column; line-height: 1.05; }

.sb-brand__text strong[b-i9ytxej0ub] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(120deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sb-brand__text small[b-i9ytxej0ub] {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #6b6f86;
    font-weight: 600;
}

/* Links */
.sb-nav__links[b-i9ytxej0ub] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-inline: auto;
}

/* Actions */
.sb-nav__actions[b-i9ytxej0ub] {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-shrink: 0;
}

.sb-search[b-i9ytxej0ub] {
    position: relative;
    display: flex;
    align-items: center;
}

.sb-search i[b-i9ytxej0ub] {
    position: absolute;
    left: 14px;
    color: #9aa0b8;
    font-size: .9rem;
}

.sb-search input[b-i9ytxej0ub] {
    width: 200px;
    padding: .6rem 1rem .6rem 2.4rem;
    border-radius: 999px;
    border: 1.5px solid #e7e8f0;
    background: #f6f7fb;
    font-size: .9rem;
    transition: width .3s ease, border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.sb-search input:focus[b-i9ytxej0ub] {
    width: 240px;
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.sb-cta[b-i9ytxej0ub] { white-space: nowrap; }
.sb-cta i[b-i9ytxej0ub] { font-size: .8rem; transition: transform .2s ease; }
.sb-cta:hover i[b-i9ytxej0ub] { transform: translateX(3px); }

.sb-burger[b-i9ytxej0ub] {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #1c1c33;
    cursor: pointer;
    padding: .25rem .5rem;
}

/* Mobile menu */
.sb-mobile[b-i9ytxej0ub] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    padding: 0 1.25rem;
}

.sb-mobile.open[b-i9ytxej0ub] {
    max-height: 460px;
    opacity: 1;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
}

.sb-mobile__link[b-i9ytxej0ub] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1c1c33;
    padding: .85rem .5rem;
    border-bottom: 1px solid #f0eefb;
    transition: color .2s ease, padding-left .2s ease;
}

.sb-mobile__link:hover[b-i9ytxej0ub] {
    color: #7c3aed;
    padding-left: 1rem;
}

.sb-mobile__cta[b-i9ytxej0ub] {
    margin-top: 1rem;
    width: 100%;
}

/* Responsive */
@media (max-width: 991px) {
    .sb-nav__links[b-i9ytxej0ub] { display: none; }
    .sb-search input[b-i9ytxej0ub] { width: 150px; }
    .sb-search input:focus[b-i9ytxej0ub] { width: 170px; }
}

@media (max-width: 767px) {
    .sb-nav__inner[b-i9ytxej0ub] { height: 68px; gap: .75rem; }
    .sb-search[b-i9ytxej0ub] { display: none; }
    .sb-cta[b-i9ytxej0ub] { display: none; }
    .sb-burger[b-i9ytxej0ub] { display: block; }
    .sb-brand__text small[b-i9ytxej0ub] { display: none; }
    .sb-brand__logo[b-i9ytxej0ub] { width: 46px; height: 46px; }
}

/* ===== Dark mode =====
   Flip the translucent-white nav bar, light search input, muted/dark text,
   and the light mobile menu to dark surfaces. Brand gradient logo/text kept. */
html[data-theme="dark"] .sb-nav[b-i9ytxej0ub] {
    background: rgba(11, 11, 22, 0.78);
    border-bottom-color: rgba(124, 58, 237, 0.22);
}

html[data-theme="dark"] .sb-brand__text small[b-i9ytxej0ub] {
    color: var(--muted);
}

html[data-theme="dark"] .sb-search input[b-i9ytxej0ub] {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

html[data-theme="dark"] .sb-search input:focus[b-i9ytxej0ub] {
    border-color: #7c3aed;
    background: var(--surface);
}

html[data-theme="dark"] .sb-burger[b-i9ytxej0ub] {
    color: var(--text);
}

html[data-theme="dark"] .sb-mobile[b-i9ytxej0ub] {
    background: rgba(11, 11, 22, 0.97);
}

html[data-theme="dark"] .sb-mobile.open[b-i9ytxej0ub] {
    border-top-color: rgba(124, 58, 237, 0.22);
}

html[data-theme="dark"] .sb-mobile__link[b-i9ytxej0ub] {
    color: var(--text);
    border-bottom-color: var(--border-soft);
}