:root {
    --tl-font-body: "Manrope", "Segoe UI", sans-serif;
    --tl-font-display: "Space Grotesk", "Manrope", sans-serif;
    --tl-ink: #0c1424;
    --tl-muted: #627089;
    --tl-blue: #2563eb;
    --tl-blue-soft: rgba(37, 99, 235, .10);
    --tl-green: #059669;
    --tl-red: #dc2626;
    --tl-amber: #d97706;
    --tl-page-bg:
        radial-gradient(circle at 8% -10%, rgba(37, 99, 235, .13), transparent 28rem),
        radial-gradient(circle at 96% 0%, rgba(14, 165, 233, .10), transparent 30rem),
        linear-gradient(180deg, #f7f9fd 0%, #ffffff 56%, #f8fafc 100%);
    --tl-panel: rgba(255, 255, 255, .86);
    --tl-panel-strong: #ffffff;
    --tl-panel-soft: rgba(248, 250, 252, .92);
    --tl-border: rgba(15, 23, 42, .09);
    --tl-border-strong: rgba(15, 23, 42, .15);
    --tl-shadow-xs: 0 .45rem 1.2rem rgba(15, 23, 42, .05);
    --tl-shadow-sm: 0 .85rem 2rem rgba(15, 23, 42, .07);
    --tl-shadow-md: 0 1.3rem 3.2rem rgba(15, 23, 42, .09);
    --tl-radius-lg: 1.35rem;
    --tl-radius-xl: 1.75rem;
}

[data-bs-theme="dark"] {
    --tl-ink: #f8fafc;
    --tl-muted: #a7b4ca;
    --tl-blue: #60a5fa;
    --tl-blue-soft: rgba(96, 165, 250, .14);
    --tl-green: #34d399;
    --tl-red: #f87171;
    --tl-amber: #fbbf24;
    --tl-page-bg:
        radial-gradient(circle at 10% -10%, rgba(37, 99, 235, .16), transparent 28rem),
        radial-gradient(circle at 95% 2%, rgba(45, 212, 191, .09), transparent 30rem),
        linear-gradient(180deg, #050914 0%, #0b1220 58%, #060a13 100%);
    --tl-panel: rgba(15, 23, 42, .78);
    --tl-panel-strong: #0f172a;
    --tl-panel-soft: rgba(17, 24, 39, .9);
    --tl-border: rgba(148, 163, 184, .16);
    --tl-border-strong: rgba(148, 163, 184, .26);
    --tl-shadow-xs: 0 .45rem 1.2rem rgba(0, 0, 0, .18);
    --tl-shadow-sm: 0 .85rem 2rem rgba(0, 0, 0, .22);
    --tl-shadow-md: 0 1.3rem 3.2rem rgba(0, 0, 0, .28);
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--tl-font-body);
    font-feature-settings: "ss01" 1, "cv01" 1;
    background: var(--tl-page-bg);
    color: var(--tl-ink);
    transition: background-color .25s ease, color .25s ease;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

main .container,
main .container-fluid,
main .row > * {
    min-width: 0;
}

main .table-responsive {
    -webkit-overflow-scrolling: touch;
}

main.app-shell {
    position: relative;
}

main.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, .03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 55%);
    opacity: .42;
}

[data-bs-theme="dark"] main.app-shell::before {
    background:
        linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, .07) 1px, transparent 1px);
    opacity: .36;
}

.navbar-brand,
.nav-link {
    font-weight: 800;
}

:is(h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6),
:is([class*="-title"], [class*="-heading"]) {
    font-family: var(--tl-font-display);
    letter-spacing: -.035em;
}

:is([class*="-eyebrow"], [class*="-kicker"], [class*="-side-label"], .admin-badge) {
    letter-spacing: .12em;
}

.site-navbar {
    box-shadow: 0 .8rem 2.4rem rgba(15, 23, 42, .045);
}

[data-bs-theme="dark"] .site-navbar {
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .22);
}

.site-brand-mark {
    position: relative;
    overflow: hidden;
}

.site-brand-mark::after {
    content: "";
    position: absolute;
    inset: -45%;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.34), transparent 62%);
    transform: translateX(-70%) rotate(8deg);
    animation: tl-brand-sheen 7s ease-in-out infinite;
}

@keyframes tl-brand-sheen {
    0%, 68% {
        transform: translateX(-70%) rotate(8deg);
    }
    82%, 100% {
        transform: translateX(70%) rotate(8deg);
    }
}

main.app-shell > .alert {
    max-width: min(1120px, calc(100vw - 2rem));
    margin: 1rem auto 0;
    border: 1px solid var(--tl-border) !important;
    box-shadow: var(--tl-shadow-sm) !important;
    backdrop-filter: blur(16px);
}

main.app-shell .card {
    border-color: var(--tl-border) !important;
    background: var(--tl-panel);
    box-shadow: var(--tl-shadow-sm) !important;
    backdrop-filter: blur(18px);
}

main.app-shell .modal-content,
main.app-shell .dropdown-menu,
main.app-shell .offcanvas {
    border-color: var(--tl-border) !important;
    background: var(--tl-panel-strong);
    box-shadow: var(--tl-shadow-md);
}

.modal {
    z-index: 1065;
}

.modal-backdrop {
    z-index: 1055;
}

main.app-shell .table {
    --bs-table-color: var(--tl-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tl-border);
}

main.app-shell .table thead th {
    color: var(--tl-muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 900;
}

main.app-shell .table tbody tr {
    transition: background-color .16s ease;
}

main.app-shell .table tbody tr:hover {
    background: rgba(37, 99, 235, .045);
}

[data-bs-theme="dark"] main.app-shell .table tbody tr:hover {
    background: rgba(96, 165, 250, .075);
}

main.app-shell :is(.btn, .form-control, .form-select, textarea, input) {
    font-weight: 700;
}

main.app-shell :is(.form-control, .form-select, textarea) {
    min-height: 3rem;
    border-color: var(--tl-border-strong);
    background-color: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

[data-bs-theme="dark"] main.app-shell :is(.form-control, .form-select, textarea) {
    background-color: rgba(15, 23, 42, .86);
    border-color: var(--tl-border-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

main.app-shell :is(.form-control, .form-select, textarea):focus {
    border-color: rgba(37, 99, 235, .52);
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .10);
}

main.app-shell .form-label {
    color: var(--tl-ink);
    letter-spacing: -.01em;
}

main.app-shell .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-width: 1px;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

main.app-shell .btn-dark,
.top-auth-btn.btn-dark {
    border: 0;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .35), transparent 30%),
        linear-gradient(135deg, #0b1220, #15233d 48%, #2563eb);
    color: #fff;
    box-shadow: 0 .9rem 1.8rem rgba(15, 23, 42, .18);
}

main.app-shell .btn-dark:hover,
main.app-shell .btn-dark:focus-visible,
.top-auth-btn.btn-dark:hover,
.top-auth-btn.btn-dark:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1.1rem 2.2rem rgba(37, 99, 235, .24);
}

[data-bs-theme="dark"] main.app-shell .btn-dark,
[data-bs-theme="dark"] .top-auth-btn.btn-dark {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #f8fafc, #dbeafe);
    color: #0f172a;
}

[data-bs-theme="dark"] main.app-shell .btn-dark:hover,
[data-bs-theme="dark"] main.app-shell .btn-dark:focus-visible,
[data-bs-theme="dark"] .top-auth-btn.btn-dark:hover,
[data-bs-theme="dark"] .top-auth-btn.btn-dark:focus-visible {
    color: #0f172a;
}

main.app-shell :is(.btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-outline-light) {
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(12px);
    box-shadow: 0 .45rem 1rem rgba(15, 23, 42, .04);
}

[data-bs-theme="dark"] main.app-shell :is(.btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-outline-light) {
    background: rgba(15, 23, 42, .58);
}

@media (hover: hover) {
    main.app-shell :is(.card, [class*="-card"], [class*="-surface"], [class*="-stat"]):not(.modal-content):not(.dropdown-menu) {
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    main.app-shell :is(.card, [class*="-card"], [class*="-surface"], [class*="-stat"]):not(.modal-content):not(.dropdown-menu):hover {
        border-color: rgba(37, 99, 235, .18);
        box-shadow: var(--tl-shadow-md) !important;
    }
}

:is(.dashboard-page, .account-page, .account-form-page, .payout-page, .analytics-page, .ai-hub-page, .ai-review-page, .workspace-ai-page, .ledger-page, .settings-page, .public-track-page, .trade-page, .trade-form-page, .weekly-library, .weekly-edit-workspace, .billing-page, .protocol-page) {
    background: var(--tl-page-bg) !important;
}

:is(.dashboard-hero-card, .account-hero-card, .payout-hero, .analytics-command-deck, .ai-hero, .ai-review-hero-card, .ledger-header, .weekly-plan-command-card) {
    position: relative;
    overflow: hidden;
}

:is(.dashboard-hero-card, .account-hero-card, .payout-hero, .analytics-command-deck, .ai-hero, .ai-review-hero-card, .weekly-plan-command-card)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .16), transparent 20rem),
        radial-gradient(circle at 8% 85%, rgba(16, 185, 129, .10), transparent 20rem);
    opacity: .9;
}

:is(.dashboard-hero-card, .account-hero-card, .payout-hero, .analytics-command-deck, .ai-hero, .ai-review-hero-card, .weekly-plan-command-card) > * {
    position: relative;
    z-index: 1;
}

:is(.dashboard-stat-card, .dashboard-filter-card, .dashboard-highlight-card, .dashboard-surface-card, .account-mini-stat, .account-filter-wrap, .account-row-card, .account-form-card, .option-card, .payout-stat-card, .payout-surface-card, .analytics-surface-card, .ai-review-card, .ai-saved-card, .ledger-summary-card, .ledger-block-card, .ledger-filter-card, .weekly-outlook-card, .weekly-edit-panel, .weekly-edit-hero, .weekly-edit-rail, .workspace-ai-surface, .workspace-ai-sidebar-card) {
    border: 1px solid var(--tl-border) !important;
    background: var(--tl-panel) !important;
    box-shadow: var(--tl-shadow-sm) !important;
    backdrop-filter: blur(18px);
}

:is(.dashboard-stat-card, .account-mini-stat, .payout-stat-card, .analytics-stat-card, .ledger-summary-card) {
    position: relative;
    overflow: hidden;
}

:is(.dashboard-stat-card, .account-mini-stat, .payout-stat-card, .analytics-stat-card, .ledger-summary-card)::after {
    content: "";
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: var(--tl-blue);
    box-shadow: 0 0 0 .38rem var(--tl-blue-soft);
    opacity: .82;
}

:is(.dashboard-pill, .account-pill, .payout-pill, .analytics-pill, .ai-hero-pill, .weekly-plan-meta-pill, .weekly-plan-range-pill) {
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

:is(.dashboard-share-copy-btn, .account-add-btn, .payout-inline-badge, .analytics-inline-badge, .dashboard-inline-badge) {
    border: 1px solid var(--tl-border);
    box-shadow: var(--tl-shadow-xs);
}

:is(.account-empty-state, .payout-empty-state, .ai-empty-state, .weekly-library-empty, .account-empty-box, .payout-empty-box, .ledger-empty-state) {
    border: 1px dashed var(--tl-border-strong);
    background:
        radial-gradient(circle at center, rgba(37, 99, 235, .08), transparent 18rem),
        var(--tl-panel);
    box-shadow: var(--tl-shadow-sm);
    backdrop-filter: blur(18px);
}

.text-success,
.text-bg-success,
:is(.is-positive, .pnl-positive, .amount-positive) {
    color: var(--tl-green) !important;
}

.text-danger,
.text-bg-danger,
:is(.is-negative, .pnl-negative, .amount-negative) {
    color: var(--tl-red) !important;
}

.text-bg-success {
    background-color: rgba(16, 185, 129, .16) !important;
    border: 1px solid rgba(16, 185, 129, .24);
}

.text-bg-danger {
    background-color: rgba(239, 68, 68, .14) !important;
    border: 1px solid rgba(239, 68, 68, .24);
}

.text-bg-warning {
    background-color: rgba(245, 158, 11, .16) !important;
    border: 1px solid rgba(245, 158, 11, .24);
    color: var(--tl-amber) !important;
}

@media (max-width: 991.98px) {
    main.app-shell > :is(.dashboard-page, .account-page, .account-form-page, .payout-page, .analytics-page, .ai-hub-page, .ai-review-page, .workspace-ai-page, .ledger-page, .settings-page, .trade-page, .trade-form-page) {
        padding-top: 1.15rem !important;
    }

    :is(.dashboard-hero-card, .account-hero-card, .payout-hero, .analytics-command-deck, .ai-hero, .ai-review-hero-card, .ledger-header, .weekly-plan-command-card) {
        border-radius: 1.35rem !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --tl-radius-lg: 1.05rem;
        --tl-radius-xl: 1.25rem;
    }

    body {
        background-size: auto;
    }

    main.app-shell .container,
    main.app-shell .container-fluid {
        --bs-gutter-x: 1.05rem;
    }

    main.app-shell .card-body {
        padding: 1.05rem !important;
    }

    main.app-shell :is(.btn, .form-control, .form-select) {
        min-height: 2.95rem;
    }

    main.app-shell .btn {
        width: auto;
        white-space: normal;
    }

    main.app-shell :is(h1, .display-1, .display-2, .display-3, .display-4) {
        letter-spacing: -.045em;
    }

    :is(.dashboard-title, .account-title, .payout-title, .analytics-title, .ai-hero-title, .ai-review-title, .ledger-title, .auth-title, .trade-stage-title) {
        font-size: clamp(2rem, 11vw, 2.85rem) !important;
        line-height: .98 !important;
    }

    :is(.dashboard-subtitle, .account-subtitle, .payout-subtitle, .analytics-subtitle, .ai-hero-copy, .ai-review-subtitle, .ledger-subtitle, .auth-subtitle) {
        font-size: .96rem !important;
        line-height: 1.65 !important;
    }

    :is(.dashboard-filter-card, .account-filter-wrap, .payout-surface-card, .analytics-filter-card, .ledger-filter-card) form .d-flex {
        flex-wrap: wrap;
    }

    :is(.dashboard-filter-card, .account-filter-wrap, .payout-surface-card, .analytics-filter-card, .ledger-filter-card) form .btn {
        flex: 1 1 10rem;
    }

    main.app-shell .table {
        font-size: .9rem;
    }
}