:root {
    color-scheme: light;

    /* brand gradient (emerald -> teal) */
    --mc-brand-1: #34d399;
    --mc-brand-2: #059669;
    --mc-brand-3: #0f766e;

    /* backdrop + glass */
    --mc-bg: #eaf0f6;
    --mc-aurora-1: rgba(16, 185, 129, .26);
    --mc-aurora-2: rgba(99, 102, 241, .20);
    --mc-aurora-3: rgba(251, 191, 36, .18);
    --mc-glass: rgba(255, 255, 255, .64);
    --mc-glass-strong: rgba(255, 255, 255, .88);
    --mc-glass-border: rgba(255, 255, 255, .85);
    --mc-hairline: rgba(100, 116, 139, .16);
    --mc-line: rgba(100, 116, 139, .38);
    --mc-input-bg: rgba(255, 255, 255, .78);
    --mc-shadow: 0 14px 34px -16px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .04);
    --mc-shine: inset 0 1px 0 rgba(255, 255, 255, .9);
    --mc-blur: blur(18px) saturate(170%);

    /* type */
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: .9rem;
    --bs-body-line-height: 1.55;

    /* Bootstrap surface tokens (Tailwind slate scale) */
    --bs-body-bg: #eaf0f6;
    --bs-body-bg-rgb: 234, 240, 246;
    --bs-body-color: #334155;
    --bs-body-color-rgb: 51, 65, 85;
    --bs-emphasis-color: #0f172a;
    --bs-secondary-color: rgba(71, 85, 105, .82);
    --bs-tertiary-color: rgba(100, 116, 139, .7);
    --bs-secondary-bg: #e2e8f0;
    --bs-tertiary-bg: rgba(241, 245, 249, .8);
    --bs-tertiary-bg-rgb: 241, 245, 249;
    --bs-border-color: rgba(100, 116, 139, .2);

    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-xxl: 1.5rem;

    --bs-primary: #059669;
    --bs-primary-rgb: 5, 150, 105;
    --bs-primary-text-emphasis: #065f46;
    --bs-primary-bg-subtle: #d1fae5;
    --bs-primary-border-subtle: #a7f3d0;

    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
    --bs-success-text-emphasis: #065f46;
    --bs-success-bg-subtle: #d1fae5;
    --bs-success-border-subtle: #a7f3d0;

    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text-emphasis: #92400e;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-border-subtle: #fde68a;

    --bs-danger: #f43f5e;
    --bs-danger-rgb: 244, 63, 94;
    --bs-danger-text-emphasis: #9f1239;
    --bs-danger-bg-subtle: #ffe4e6;
    --bs-danger-border-subtle: #fecdd3;

    --bs-info: #0ea5e9;
    --bs-info-rgb: 14, 165, 233;
    --bs-info-text-emphasis: #075985;
    --bs-info-bg-subtle: #e0f2fe;
    --bs-info-border-subtle: #bae6fd;

    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-secondary-text-emphasis: #334155;
    --bs-secondary-bg-subtle: #f1f5f9;
    --bs-secondary-border-subtle: #e2e8f0;

    --bs-dark: #0f172a;
    --bs-dark-rgb: 15, 23, 42;

    --bs-link-color: #047857;
    --bs-link-color-rgb: 4, 120, 87;
    --bs-link-hover-color: #065f46;
    --bs-link-hover-color-rgb: 6, 95, 70;
    --bs-focus-ring-color: rgba(16, 185, 129, .25);
}

/* ---------- backdrop: soft aurora ---------- */
body {
    background-color: var(--mc-bg);
    background-image: radial-gradient(62rem 40rem at 6% -8%, var(--mc-aurora-1), transparent 62%),
    radial-gradient(52rem 40rem at 98% 2%, var(--mc-aurora-2), transparent 58%),
    radial-gradient(46rem 36rem at 72% 108%, var(--mc-aurora-3), transparent 62%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--bs-emphasis-color);
    font-weight: 700;
    letter-spacing: -.022em;
}

.h6, h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

.text-uppercase {
    letter-spacing: .08em;
}

a {
    text-underline-offset: .2em;
}

code {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    padding: .1em .4em;
    border-radius: .4rem;
    font-size: .8em;
}

/* ---------- colour fills get a soft sheen (avatars, bars, banners) ---------- */
.bg-primary {
    background-image: linear-gradient(135deg, var(--mc-brand-1) 0%, var(--mc-brand-2) 48%, var(--mc-brand-3) 100%);
}

.bg-warning {
    background-image: linear-gradient(135deg, #fcd34d, #f59e0b);
}

.bg-danger {
    background-image: linear-gradient(135deg, #fb7185, #e11d48);
}

.bg-info {
    background-image: linear-gradient(135deg, #38bdf8, #0284c7);
}

.bg-secondary {
    background-image: linear-gradient(135deg, #94a3b8, #64748b);
}

/* ---------- glass surfaces ---------- */
.card {
    --bs-card-bg: transparent;
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--mc-glass-border);
    --bs-card-border-radius: 1.25rem;
    --bs-card-inner-border-radius: calc(1.25rem - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    background-color: var(--mc-glass);
    -webkit-backdrop-filter: var(--mc-blur);
    backdrop-filter: var(--mc-blur);
    box-shadow: var(--mc-shadow), var(--mc-shine);
}

.card-header {
    border-bottom: 1px solid var(--mc-hairline);
    font-weight: 600;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--mc-hairline);
    padding: 1rem 1.25rem;
}

.card-body.p-0 .table th:first-child, .card-body.p-0 .table td:first-child {
    padding-left: 1.25rem;
}

.card-body.p-0 .table th:last-child, .card-body.p-0 .table td:last-child {
    padding-right: 1.25rem;
}

.navbar {
    --bs-navbar-padding-y: .7rem;
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-hover-color: var(--bs-emphasis-color);
    background-color: var(--mc-glass-strong);
    -webkit-backdrop-filter: var(--mc-blur);
    backdrop-filter: var(--mc-blur);
    border-bottom: 1px solid var(--mc-hairline);
    box-shadow: 0 1px 0 var(--mc-glass-border) inset;
}

.navbar-brand {
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.navbar-brand:hover {
    color: var(--bs-emphasis-color);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--mc-glass-strong);
    --bs-dropdown-border-color: var(--mc-glass-border);
    --bs-dropdown-border-radius: 1rem;
    --bs-dropdown-padding-x: .4rem;
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: rgba(16, 185, 129, .1);
    --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--mc-hairline);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    box-shadow: 0 24px 50px -16px rgba(15, 23, 42, .35);
}

.dropdown-item {
    border-radius: .65rem;
    padding: .5rem .75rem;
}

.modal {
    --bs-modal-bg: var(--mc-glass-strong);
    --bs-modal-border-color: var(--mc-glass-border);
    --bs-modal-border-radius: 1.5rem;
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: transparent;
    --bs-modal-color: var(--bs-body-color);
}

.modal-content {
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 40px 80px -24px rgba(15, 23, 42, .5);
}

.modal-backdrop {
    --bs-backdrop-bg: #0b1220;
    --bs-backdrop-opacity: .45;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.offcanvas, .offcanvas-lg {
    --bs-offcanvas-bg: var(--mc-glass-strong);
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-width: 288px;
    --bs-offcanvas-border-width: 0;
}

@media (max-width: 991.98px) {
    .offcanvas-lg {
        -webkit-backdrop-filter: blur(26px) saturate(170%);
        backdrop-filter: blur(26px) saturate(170%);
        border-right: 1px solid var(--mc-glass-border);
        box-shadow: 30px 0 60px -30px rgba(15, 23, 42, .5);
    }
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--mc-hairline);
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-action-hover-bg: rgba(16, 185, 129, .08);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-color: var(--bs-body-color);
}

.breadcrumb {
    --bs-breadcrumb-divider: "\203A";
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    --bs-breadcrumb-margin-bottom: .15rem;
}

.alert {
    --bs-alert-border-radius: 1rem;
}

/* ---------- buttons ---------- */
.btn {
    --bs-btn-border-radius: .75rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: .5rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease;
}

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

.btn:active, .btn.disabled, .btn:disabled {
    transform: none;
}

.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .35rem;
    --bs-btn-border-radius: .6rem;
}

.btn-lg {
    --bs-btn-border-radius: .9rem;
    --bs-btn-padding-y: .65rem;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #047857;
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 16, 185, 129;
    background-image: linear-gradient(135deg, var(--mc-brand-1) -20%, var(--mc-brand-2) 55%, var(--mc-brand-3) 130%);
    box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-primary:hover {
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 14px 26px -10px rgba(5, 150, 105, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-danger {
    --bs-btn-bg: #e11d48;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #be123c;
    --bs-btn-hover-border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(225, 29, 72, .75);
}

.btn-light {
    --bs-btn-bg: rgba(255, 255, 255, .92);
    --bs-btn-border-color: transparent;
    --bs-btn-color: #064e3b;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: #064e3b;
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--mc-input-bg);
    --bs-btn-border-color: var(--mc-line);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--mc-glass-strong);
    --bs-btn-hover-border-color: rgba(100, 116, 139, .6);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--mc-glass-strong);
    --bs-btn-active-border-color: rgba(100, 116, 139, .6);
    --bs-btn-disabled-color: var(--bs-tertiary-color);
    --bs-btn-disabled-border-color: var(--mc-hairline);
    --bs-btn-focus-shadow-rgb: 100, 116, 139;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(5, 150, 105, .55);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: #047857;
    --bs-btn-focus-shadow-rgb: 16, 185, 129;
    --bs-btn-bg: var(--mc-input-bg);
}

.btn-check:checked + .btn-outline-primary {
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--mc-brand-1) -20%, var(--mc-brand-2) 55%, var(--mc-brand-3) 130%);
    box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .8);
}

.btn-link {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
}

/* ---------- forms ---------- */
.form-control, .form-select, .input-group-text {
    background-color: var(--mc-input-bg);
    border: 1px solid var(--mc-line);
    border-radius: .75rem;
    color: var(--bs-body-color);
    padding: .55rem .85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-select {
    padding-right: 2.25rem;
}

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

.form-control:focus, .form-select:focus {
    background-color: var(--mc-glass-strong);
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .16);
    color: var(--bs-emphasis-color);
}

.form-control-lg {
    padding: .7rem 1rem;
    font-size: 1.05rem;
    border-radius: .9rem;
}

.input-group > .form-control:focus, .input-group > .form-select:focus {
    z-index: 3;
}

.form-check-input {
    background-color: #fff;
    border-color: var(--mc-line);
    border-radius: .4rem;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

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

.form-check-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .16);
}

.form-switch .form-check-input {
    border-radius: 2rem;
}

.form-label, .col-form-label {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    font-size: .85rem;
}

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

input[autocomplete="one-time-code"] {
    letter-spacing: .6em;
    text-indent: .6em;
}

/* ---------- tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--mc-hairline);
    --bs-table-hover-bg: rgba(16, 185, 129, .07);
    --bs-table-hover-color: var(--bs-emphasis-color);
}

.table > :not(caption) > * > * {
    padding: .85rem .8rem;
}

.table thead th {
    background: transparent;
    color: var(--bs-tertiary-color);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--mc-hairline);
    white-space: nowrap;
}

.table thead th a {
    color: inherit;
}

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

/* ---------- nav ---------- */
.nav-pills {
    --bs-nav-pills-border-radius: .8rem;
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
    --bs-nav-link-padding-y: .6rem;
    --bs-nav-link-padding-x: .9rem;
    --bs-nav-link-font-weight: 500;
}

.nav-pills .nav-link {
    transition: background-color .15s ease, color .15s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(16, 185, 129, .1);
}

.nav-pills .nav-link.active {
    color: #fff;
    font-weight: 600;
    background-color: var(--bs-primary);
    background-image: linear-gradient(135deg, var(--mc-brand-1) -30%, var(--mc-brand-2) 55%, var(--mc-brand-3) 140%);
    box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.pagination {
    --bs-pagination-border-radius: .6rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: .72rem;
    padding: .38em .75em;
    border-radius: 50rem;
    letter-spacing: .005em;
}

.progress, .progress-stacked {
    --bs-progress-height: .55rem;
    --bs-progress-bg: rgba(100, 116, 139, .18);
    --bs-progress-border-radius: 50rem;
    --bs-progress-bar-bg: var(--bs-primary);
}

/* ==========================================================================
   Custom (no Bootstrap equivalent)
   ========================================================================== */
.avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

.avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

/* floating glass navigation card on desktop; plain offcanvas drawer below lg */
@media (min-width: 992px) {
    .sidebar-col {
        flex: 0 0 272px;
        width: 272px;
        position: sticky;
        top: 5rem;
        height: calc(100vh - 6rem);
        margin: 1rem 0 1rem 1rem;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        border-radius: 1.25rem;
        background-color: var(--mc-glass);
        border: 1px solid var(--mc-glass-border);
        box-shadow: var(--mc-shadow), var(--mc-shine);
        -webkit-backdrop-filter: var(--mc-blur);
        backdrop-filter: var(--mc-blur);
    }

    .sidebar-col .offcanvas-lg {
        flex: 1 1 auto;
    }
}