:root {
    --portal-ink: #0f172a;
    --portal-muted: #64748b;
    --portal-purple: #59049c;
    --portal-purple-light: #f3e8ff;
    --portal-surface: rgba(255, 255, 255, 0.86);
    --portal-border: rgba(148, 163, 184, 0.24);
}

body.portal-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(139, 30, 250, 0.12), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(251, 191, 36, 0.11), transparent 25rem),
        linear-gradient(135deg, #f8f7fb 0%, #f1eef8 100%) !important;
    color: var(--portal-ink) !important;
}

body.portal-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: linear-gradient(rgba(89, 4, 156, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(89, 4, 156, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

body.portal-page header {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(216, 199, 235, 0.72) !important;
    box-shadow: 0 10px 30px rgba(89, 4, 156, 0.06) !important;
}

body.portal-page main > section,
body.portal-page main > .max-w-2xl > section,
body.portal-page main > .max-w-5xl > section,
body.portal-page main > .max-w-7xl > section,
body.portal-page main > div > section,
body.portal-page main > div > div.bg-white,
body.portal-page main > .bg-white {
    border-color: var(--portal-border) !important;
    box-shadow: 0 18px 50px rgba(89, 4, 156, 0.07) !important;
}

body.portal-page main > section:hover,
body.portal-page main > .max-w-2xl > section:hover,
body.portal-page main > .max-w-5xl > section:hover {
    border-color: rgba(139, 30, 250, 0.24) !important;
}

body.portal-page input,
body.portal-page textarea,
body.portal-page select {
    background: rgba(248, 247, 251, 0.92) !important;
    color: var(--portal-ink) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
}

body.portal-page input:focus,
body.portal-page textarea:focus,
body.portal-page select:focus {
    border-color: var(--portal-purple) !important;
    box-shadow: 0 0 0 3px rgba(89, 4, 156, 0.1) !important;
}

body.portal-page button:not(.tab-btn),
body.portal-page a.bg-\[\#59049C\] {
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.portal-page button:not(.tab-btn):hover,
body.portal-page a.bg-\[\#59049C\]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(89, 4, 156, 0.16);
}

body.portal-page table tbody tr {
    transition: background-color 160ms ease, transform 160ms ease;
}

body.portal-page table tbody tr:hover {
    background: rgba(243, 232, 255, 0.42) !important;
}

body.portal-page .portal-eyebrow {
    color: var(--portal-purple);
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

body.portal-page .portal-gradient {
    background: linear-gradient(135deg, #0d0417 0%, #59049c 54%, #8b1efa 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.portal-page *,
    body.portal-page *::before,
    body.portal-page *::after {
        transition-duration: 0.01ms !important;
    }
}