/* Foundation — authenticated shell chrome aligned with the public platform. */
:root {
    --na-shell-public-bg: #060812;
    --na-shell-public-bg-soft: #0b1020;
    --na-shell-public-border: rgba(164, 180, 255, .16);
    --na-action-primary: #2b0a57;
    --na-action-primary-hover: #4a167d;
    --na-action-text: #f7f5ff;
    --na-light-bg: #edf5fe;
    --na-light-surface: #f8fbff;
    --na-light-surface-2: #e7f0fa;
    --na-light-ui: #d5e3f2;
    --na-light-border: rgba(64, 112, 164, .18);
}

/* Platform actions use the cool violet from the light shell reference.
   Club and card branding keep their own primary/secondary colors. */
.na-button-primary {
    background: linear-gradient(135deg, var(--na-action-primary), var(--na-action-primary-hover));
    color: var(--na-action-text);
    box-shadow: 0 12px 30px rgba(43, 10, 87, .25);
}

.na-button-primary:hover {
    background: linear-gradient(135deg, #3b0f6d, #5c2493);
    box-shadow: 0 14px 32px rgba(43, 10, 87, .32);
}

/* This stays translucent so the shared grid and pointer atmosphere remain visible. */
.na-shell {
    background:
        radial-gradient(circle at 16% 8%, rgba(76, 141, 255, .11), transparent 25rem),
        radial-gradient(circle at 88% 12%, rgba(140, 114, 255, .12), transparent 30rem),
        linear-gradient(180deg, rgba(6, 8, 18, .18), rgba(6, 8, 18, .48));
}

.na-main {
    background:
        radial-gradient(circle at 82% 8%, rgba(140, 114, 255, .09), transparent 27rem),
        radial-gradient(circle at 10% 84%, rgba(67, 217, 239, .055), transparent 31rem),
        linear-gradient(135deg, rgba(6, 8, 18, .60), rgba(11, 16, 32, .36) 52%, rgba(6, 8, 18, .56));
}

.na-sidebar {
    border-right-color: var(--na-shell-public-border);
    background:
        radial-gradient(circle at 8% 5%, rgba(76, 141, 255, .17), transparent 18rem),
        radial-gradient(circle at 86% 32%, rgba(140, 114, 255, .105), transparent 22rem),
        linear-gradient(180deg, rgba(8, 13, 29, .94), rgba(6, 8, 18, .97));
    box-shadow: 14px 0 38px rgba(0, 0, 0, .16);
}

.na-topbar {
    border-bottom-color: var(--na-shell-public-border);
    background:
        radial-gradient(circle at 15% 14%, rgba(76, 141, 255, .13), transparent 20rem),
        radial-gradient(circle at 84% 12%, rgba(140, 114, 255, .12), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 18, .92), rgba(11, 16, 32, .88) 56%, rgba(15, 12, 32, .88));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}

/* The generic sticky rule uses !important; preserve that contract while changing only its surface. */
.na-page-header {
    border-bottom-color: var(--na-shell-public-border) !important;
    background:
        radial-gradient(circle at 10% 8%, rgba(76, 141, 255, .13), transparent 23rem),
        radial-gradient(circle at 86% 14%, rgba(140, 114, 255, .13), transparent 28rem),
        linear-gradient(90deg, rgba(6, 8, 18, .94), rgba(11, 16, 32, .89) 58%, rgba(13, 12, 31, .86)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.na-sidebar-footer {
    border-color: var(--na-shell-public-border);
    background: linear-gradient(135deg, rgba(17, 23, 43, .82), rgba(6, 8, 18, .80));
}

:root[data-theme="light"] .na-shell {
    background:
        radial-gradient(circle at 16% 8%, rgba(76, 141, 255, .10), transparent 25rem),
        radial-gradient(circle at 88% 12%, rgba(140, 114, 255, .09), transparent 30rem),
        color-mix(in srgb, var(--na-light-bg) 76%, white);
}

:root[data-theme="light"] .na-main {
    background:
        radial-gradient(circle at 82% 8%, rgba(140, 114, 255, .08), transparent 27rem),
        linear-gradient(135deg, rgba(248, 251, 255, .92), rgba(231, 240, 250, .72));
}

:root[data-theme="light"] .na-sidebar {
    border-right-color: var(--na-light-border);
    background:
        radial-gradient(circle at 8% 5%, rgba(76, 141, 255, .12), transparent 18rem),
        linear-gradient(180deg, rgba(248, 251, 255, .96), rgba(231, 240, 250, .98));
    box-shadow: 14px 0 38px rgba(46, 83, 126, .10);
}

:root[data-theme="light"] .na-topbar,
:root[data-theme="light"] .na-page-header {
    border-bottom-color: var(--na-light-border) !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(76, 141, 255, .11), transparent 22rem),
        radial-gradient(circle at 86% 12%, rgba(140, 114, 255, .09), transparent 26rem),
        rgba(248, 251, 255, .94) !important;
    box-shadow: 0 14px 34px rgba(46, 83, 126, .09);
}

:root[data-theme="light"] .na-sidebar-footer {
    border-color: var(--na-light-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(231, 240, 250, .90));
}

:root[data-theme="light"] body::before {
    background:
        radial-gradient(circle at 20% 15%, rgba(42, 199, 239, .12), transparent 31%),
        radial-gradient(circle at 80% 18%, rgba(92, 36, 147, .10), transparent 33%),
        linear-gradient(135deg, #f5faff 0%, var(--na-light-bg) 46%, #e7f0fa 100%);
}

:root[data-theme="light"] .na-button-primary {
    box-shadow: 0 12px 30px rgba(43, 10, 87, .20);
}

:root[data-theme="light"] .na-button-primary:hover {
    box-shadow: 0 14px 32px rgba(43, 10, 87, .27);
}