@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ==========================================================================
   PoolPal — modern UI, phase 2
   --------------------------------------------------------------------------
   Layers on top of modern-ui.css. Phase 1 did colour, shape and depth; this
   pass adds the things that make it feel alive:

     - a modern variable-font pairing (Inter for UI, Plus Jakarta for titles)
     - motion: entrance, hover, focus and loading states
     - glass and glow on the chrome
     - a full dark theme, driven by [data-pp-theme] on <html>

   Phase 1 declared its palette as custom properties, so the dark theme mostly
   works by redefining those tokens rather than restating every rule.

   All motion is disabled under prefers-reduced-motion at the bottom of this
   file. Remove the two lines this file adds to head-css.php to drop phase 2
   and fall back to phase 1.
   ========================================================================== */

:root {
    --pp-font-ui: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-font-display: 'Plus Jakarta Sans', 'Inter', 'Poppins', system-ui, sans-serif;

    --pp-ease: cubic-bezier(.22, 1, .36, 1);
    --pp-ease-soft: cubic-bezier(.4, 0, .2, 1);

    --pp-glow: 0 0 0 1px rgba(21, 103, 211, .12), 0 8px 24px -8px rgba(21, 103, 211, .45);
}

/* --------------------------------------------------------------------------
   A. Typography
   -------------------------------------------------------------------------- */

body,
.btn,
.form-control,
.form-select,
.table,
.dropdown-menu,
input,
select,
textarea,
button {
    font-family: var(--pp-font-ui);
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.page-title-box h4,
.card-title,
.modal-title {
    font-family: var(--pp-font-display);
    letter-spacing: -.028em;
}

.page-title-box h4 {
    font-size: 22px !important;
    font-weight: 700;
}

/* Tabular figures keep the money and date columns from jittering */
.table td,
.table th,
.dataTables_info {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

::selection {
    background: rgba(21, 103, 211, .22);
    color: inherit;
}

/* --------------------------------------------------------------------------
   B. Motion
   -------------------------------------------------------------------------- */

@keyframes pp-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes pp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pp-shimmer {
    from { background-position: -420px 0; }
    to   { background-position: 420px 0; }
}

@keyframes pp-aurora {
    0%   { transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg); }
    50%  { transform: translate3d(4%, 3%, 0) scale(1.18) rotate(8deg); }
    100% { transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg); }
}

@keyframes pp-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(21, 103, 211, .35); }
    70%  { box-shadow: 0 0 0 10px rgba(21, 103, 211, 0); }
    100% { box-shadow: 0 0 0 0 rgba(21, 103, 211, 0); }
}

/* Page content arrives instead of appearing. Staggered, but capped so a long
   report page never feels like it is loading in slow motion. */
.page-content .card {
    animation: pp-rise .42s var(--pp-ease) both;
}

.page-content .card:nth-of-type(1) { animation-delay: .02s; }
.page-content .card:nth-of-type(2) { animation-delay: .07s; }
.page-content .card:nth-of-type(3) { animation-delay: .12s; }
.page-content .card:nth-of-type(4) { animation-delay: .16s; }
.page-content .card:nth-of-type(n+5) { animation-delay: .19s; }

.page-title-box {
    animation: pp-fade .5s var(--pp-ease-soft) both;
}

/* Cards lift toward the cursor */
.card {
    transition:
        transform .28s var(--pp-ease),
        box-shadow .28s var(--pp-ease),
        border-color .28s var(--pp-ease);
    will-change: transform;
}

.page-content .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pp-shadow-lg);
    border-color: #d8e3f4;
}

/* Buttons: a light sweep passes across on hover */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .28) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--pp-ease);
    pointer-events: none;
}

.btn:hover::after {
    transform: translateX(120%);
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover {
    transform: translateY(-1px);
}

/* .btn-label keeps its icon plate; make it react too */
.btn-label .label-icon {
    transition: background-color .2s var(--pp-ease-soft);
}

.btn-label:hover .label-icon {
    background-color: rgba(255, 255, 255, .2);
}

/* Sidebar: items slide, icons scale, the active pill breathes a sheen */
body[data-sidebar=dark] #sidebar-menu ul li a {
    transition:
        background-color .22s var(--pp-ease-soft),
        color .22s var(--pp-ease-soft),
        transform .22s var(--pp-ease),
        padding-left .22s var(--pp-ease);
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover {
    padding-left: 1.1rem;
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    transition: transform .28s var(--pp-ease), color .22s var(--pp-ease-soft);
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
    transform: scale(1.14);
}

body[data-sidebar=dark] #sidebar-menu ul li a.active,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active > a {
    position: relative;
    overflow: hidden;
}

body[data-sidebar=dark] #sidebar-menu ul li a.active::before,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: pp-sheen 4.5s var(--pp-ease-soft) 1.2s infinite;
    pointer-events: none;
}

@keyframes pp-sheen {
    0%   { transform: translateX(-100%); }
    28%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Bootstrap paints every cell with --bs-table-bg (#fff) and layers striping on
   top via --bs-table-accent-bg. On a white card that is invisible, but it makes
   the cells opaque — which shows up the moment the surface behind them is not
   white (dark theme, tinted cards). Let the card surface show through instead
   and drive striping/hover ourselves. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: inherit;
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: inherit;
    --bs-table-active-bg: transparent;
    --bs-table-active-color: inherit;
}

/* Table rows grow an accent edge on hover */
.table > tbody > tr > td:first-child {
    position: relative;
}

.table > tbody > tr > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--pp-primary), var(--pp-accent));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .24s var(--pp-ease);
}

.table > tbody > tr:hover > td:first-child::before {
    transform: scaleY(1);
}

/* NOTE: sticky <th> was tried here and removed. DataTables measures and sets
   column widths against the header cells, and taking them out of flow makes
   the header row drift out of alignment with the body on the Pools and Orders
   lists. Not worth the flakiness on the busiest screens in the portal. */
.table > thead th {
    background-color: transparent !important;
}

/* Links get a growing underline rather than a colour flip */
.table a:not(.btn),
.card-body a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
    background-image: linear-gradient(var(--pp-primary), var(--pp-primary));
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .26s var(--pp-ease), color .18s ease;
    padding-bottom: 1px;
}

.table a:not(.btn):hover,
.card-body a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
    background-size: 100% 1.5px;
}

/* Inputs pulse once when focused */
.form-control:focus,
.form-select:focus {
    animation: pp-pulse-ring .5s var(--pp-ease-soft);
}

/* Dropdowns and modals ease in */
.dropdown-menu.show {
    animation: pp-rise .2s var(--pp-ease) both;
}

.modal.fade .modal-dialog {
    transition: transform .32s var(--pp-ease), opacity .32s var(--pp-ease);
    transform: translateY(18px) scale(.98);
}

.modal.show .modal-dialog {
    transform: none;
}

/* DataTables "Processing…" becomes a shimmer bar instead of a grey box */
.dataTables_wrapper .dataTables_processing {
    background: linear-gradient(90deg, #eef2f8 25%, #dfe8f5 50%, #eef2f8 75%) !important;
    background-size: 420px 100% !important;
    animation: pp-shimmer 1.2s linear infinite;
    border: 0 !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
    color: var(--pp-ink-soft) !important;
    font-weight: 550;
}

/* The sidebar menu is fetched over AJAX; show a skeleton until it lands
   instead of an empty navy panel. .pp-menu-ready is set by modern-ui.js. */
#sidebar-menu:empty::before,
#sidebar-menu:not(.pp-menu-ready)::before {
    content: '';
    display: block;
    height: 380px;
    margin: 6px 4px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .04) 75%);
    background-size: 420px 100%;
    animation: pp-shimmer 1.3s linear infinite;
}

/* Toasts slide in from the edge */
#toast-container > div {
    animation: pp-rise .34s var(--pp-ease) both;
}

/* --------------------------------------------------------------------------
   C. Chrome: glass + glow
   -------------------------------------------------------------------------- */

body {
    background-image:
        radial-gradient(900px 480px at 12% -6%, rgba(21, 103, 211, .07) 0%, transparent 60%),
        radial-gradient(760px 420px at 96% 4%, rgba(6, 182, 212, .06) 0%, transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Topbar gains depth once the page is scrolled (class added by modern-ui.js) */
#page-topbar {
    transition: box-shadow .3s var(--pp-ease-soft), background-color .3s var(--pp-ease-soft);
}

#page-topbar.pp-scrolled {
    box-shadow: 0 1px 0 rgba(19, 32, 56, .06), 0 8px 24px -12px rgba(19, 32, 56, .22);
    background-color: rgba(255, 255, 255, .92);
}

/* A hairline of brand colour along the top of the app */
#page-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--pp-primary) 0%, var(--pp-accent) 45%, transparent 85%);
    opacity: .55;
}

/* The logo markup hard-codes height="75" on the artwork, but the header it sits
   in is 70px tall. The image overhangs by 3px above the viewport and 2px below
   the header, which clips the "Fiberglass Pools" line at the bottom of the SVG.
   A CSS height beats the HTML height attribute, so this is fixed here rather
   than in the template. 56px leaves even breathing room top and bottom. */
.navbar-brand-box .logo-lg img {
    height: 56px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    position: relative;
    top: -1px; /* line-height centring lands 2px low; this evens it out */
}

/* Brand box glow */
body[data-sidebar=dark] .navbar-brand-box {
    position: relative;
}

body[data-sidebar=dark] .navbar-brand-box::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 142, 240, .55), transparent);
}

/* Search field reads as a command bar */
.app-search .form-control {
    transition:
        background-color .2s var(--pp-ease-soft),
        box-shadow .25s var(--pp-ease),
        width .25s var(--pp-ease);
}

.app-search .form-control:focus {
    box-shadow: var(--pp-glow);
}

/* Theme toggle injected by modern-ui.js */
.pp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 16px 4px 0;
    border: 1px solid var(--pp-border);
    border-radius: 10px;
    background: transparent;
    color: var(--pp-ink-soft);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s var(--pp-ease-soft), color .2s var(--pp-ease-soft),
                border-color .2s var(--pp-ease-soft), transform .3s var(--pp-ease);
}

.pp-theme-toggle:hover {
    background-color: var(--pp-primary-soft);
    border-color: #bcd4f3;
    color: var(--pp-primary);
    transform: rotate(-18deg);
}

.pp-theme-toggle:active {
    transform: rotate(-18deg) scale(.92);
}

/* --------------------------------------------------------------------------
   D. Login — animated aurora
   -------------------------------------------------------------------------- */

.account-pages {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.account-pages::before,
.account-pages::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.account-pages::before {
    width: 46vw;
    height: 46vw;
    top: -14vw;
    left: -8vw;
    background: radial-gradient(circle, rgba(21, 103, 211, .30) 0%, rgba(21, 103, 211, 0) 70%);
    animation: pp-aurora 22s var(--pp-ease-soft) infinite;
}

.account-pages::after {
    width: 40vw;
    height: 40vw;
    right: -10vw;
    bottom: -16vw;
    background: radial-gradient(circle, rgba(6, 182, 212, .26) 0%, rgba(6, 182, 212, 0) 70%);
    animation: pp-aurora 27s var(--pp-ease-soft) reverse infinite;
}

.account-pages .card {
    animation: pp-rise .6s var(--pp-ease) both;
    transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease);
}

.account-pages .card:hover {
    transform: translateY(-3px);
}

.account-pages .btn-primary {
    background-image: linear-gradient(135deg, var(--pp-primary) 0%, #2b82ea 100%);
    border: 0;
}

/* --------------------------------------------------------------------------
   E. Dark theme
   Driven by data-pp-theme="dark" on <html>, set by modern-ui.js before paint.
   Phase 1's tokens are redefined here, so most of the refresh flips for free.
   -------------------------------------------------------------------------- */

html[data-pp-theme="dark"] {
    --pp-primary: #3b8ef0;
    --pp-primary-hover: #5aa2f5;
    --pp-primary-soft: #17263f;
    --pp-primary-ring: rgba(59, 142, 240, .26);

    --pp-success-soft: #10281f;
    --pp-danger-soft: #2c1418;
    --pp-warning-soft: #2b2113;
    --pp-info-soft: #10243a;

    /* Deliberately a slate dark, not a black void — the first pass sat too
       close to #000 and the whole portal read as a hole in the screen. */
    --pp-canvas: #111a2c;
    --pp-surface: #1a2439;
    --pp-border: #2b3854;
    --pp-border-soft: #232e46;

    --pp-ink: #eaf0fa;
    --pp-ink-soft: #b3bfd4;
    --pp-ink-mute: #8593ac;

    --pp-nav-bg: #141e33;
    --pp-nav-bg-2: #1b273f;

    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --pp-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -8px rgba(0, 0, 0, .6);
    --pp-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 40px -14px rgba(0, 0, 0, .75);

    color-scheme: dark;
}

html[data-pp-theme="dark"] body {
    background-color: var(--pp-canvas);
    color: var(--pp-ink);
    background-image:
        radial-gradient(900px 480px at 12% -6%, rgba(59, 142, 240, .10) 0%, transparent 60%),
        radial-gradient(760px 420px at 96% 4%, rgba(6, 182, 212, .08) 0%, transparent 62%);
}

html[data-pp-theme="dark"] #page-topbar {
    background-color: rgba(20, 30, 51, .84);
    border-bottom-color: var(--pp-border);
}

html[data-pp-theme="dark"] #page-topbar.pp-scrolled {
    background-color: rgba(20, 30, 51, .95);
}

html[data-pp-theme="dark"] .header-item,
html[data-pp-theme="dark"] .noti-icon i {
    color: var(--pp-ink-soft);
}

html[data-pp-theme="dark"] .app-search .form-control {
    background-color: #202b42;
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .app-search .form-control::placeholder {
    color: var(--pp-ink-mute);
}

html[data-pp-theme="dark"] .card,
html[data-pp-theme="dark"] .modal-content,
html[data-pp-theme="dark"] .dropdown-menu {
    background-color: var(--pp-surface);
    border-color: var(--pp-border);
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .page-content .card:hover {
    border-color: #2c3d5c;
}

html[data-pp-theme="dark"] h1,
html[data-pp-theme="dark"] h2,
html[data-pp-theme="dark"] h3,
html[data-pp-theme="dark"] h4,
html[data-pp-theme="dark"] h5,
html[data-pp-theme="dark"] h6,
html[data-pp-theme="dark"] .card-title,
html[data-pp-theme="dark"] .page-title-box h4,
html[data-pp-theme="dark"] .modal-title,
html[data-pp-theme="dark"] label,
html[data-pp-theme="dark"] .form-label {
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .table {
    color: var(--pp-ink);
    border-color: var(--pp-border-soft);
}

html[data-pp-theme="dark"] .table > thead th {
    color: var(--pp-ink-mute);
    background-color: var(--pp-surface) !important;
    border-bottom-color: var(--pp-border);
}

html[data-pp-theme="dark"] .table > tbody > tr > td {
    border-bottom-color: var(--pp-border-soft);
}

html[data-pp-theme="dark"] .table > tbody > tr:hover > *,
html[data-pp-theme="dark"] table.dataTable.table-hover > tbody > tr:hover > *,
html[data-pp-theme="dark"] table.dataTable > tbody > tr:hover > * {
    background-color: #222d47 !important;
}

html[data-pp-theme="dark"] .thead-light th,
html[data-pp-theme="dark"] .table-light,
html[data-pp-theme="dark"] .table-light > th,
html[data-pp-theme="dark"] .table-light > td {
    background-color: #202b42 !important;
    color: var(--pp-ink-soft) !important;
    border-color: var(--pp-border) !important;
}

html[data-pp-theme="dark"] .form-control,
html[data-pp-theme="dark"] .form-select,
html[data-pp-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-pp-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: #202b42;
    border-color: #33415f;
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .form-control::placeholder {
    color: var(--pp-ink-mute);
}

html[data-pp-theme="dark"] .form-control:disabled,
html[data-pp-theme="dark"] .form-control[readonly] {
    background-color: #1a2439;
    color: var(--pp-ink-mute);
}

html[data-pp-theme="dark"] .input-group-text {
    background-color: #242f49;
    border-color: #33415f;
    color: var(--pp-ink-soft);
}

html[data-pp-theme="dark"] .btn-light {
    background-color: #242f49;
    border-color: #33415f;
    color: var(--pp-ink-soft);
}

html[data-pp-theme="dark"] .btn-light:hover {
    background-color: #2b3854;
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .btn-secondary {
    background-color: #33415c;
    border-color: #33415c;
}

html[data-pp-theme="dark"] .dt-buttons .dt-button,
html[data-pp-theme="dark"] div.dt-buttons .btn {
    background: #242f49 !important;
    border-color: #33415f !important;
    color: var(--pp-ink-soft) !important;
}

html[data-pp-theme="dark"] .dt-buttons .dt-button:hover,
html[data-pp-theme="dark"] div.dt-buttons .btn:hover {
    background: var(--pp-primary-soft) !important;
    color: var(--pp-primary) !important;
}

html[data-pp-theme="dark"] .dropdown-item {
    color: var(--pp-ink-soft);
}

html[data-pp-theme="dark"] .dropdown-item:hover,
html[data-pp-theme="dark"] .dropdown-item:focus {
    background-color: var(--pp-primary-soft);
    color: var(--pp-primary);
}

html[data-pp-theme="dark"] .modal-header,
html[data-pp-theme="dark"] .modal-footer,
html[data-pp-theme="dark"] .card-header,
html[data-pp-theme="dark"] .nav-tabs {
    border-color: var(--pp-border);
}

html[data-pp-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

html[data-pp-theme="dark"] .page-link {
    color: var(--pp-ink-soft);
    background-color: transparent;
}

html[data-pp-theme="dark"] .page-link:hover {
    background-color: var(--pp-primary-soft);
    color: var(--pp-primary);
}

html[data-pp-theme="dark"] .footer {
    background-color: transparent;
    border-top-color: var(--pp-border);
}

html[data-pp-theme="dark"] .select2-container--default .select2-selection--single,
html[data-pp-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-pp-theme="dark"] .select2-dropdown {
    background-color: #202b42 !important;
    border-color: #33415f !important;
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-pp-theme="dark"] .select2-results__option {
    color: var(--pp-ink);
}

html[data-pp-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #242f49;
}

html[data-pp-theme="dark"] hr {
    border-color: var(--pp-border);
}

html[data-pp-theme="dark"] .text-dark {
    color: var(--pp-ink) !important;
}

html[data-pp-theme="dark"] .bg-white,
html[data-pp-theme="dark"] .bg-light {
    background-color: var(--pp-surface) !important;
}

html[data-pp-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background: linear-gradient(90deg, #202b42 25%, #2b3854 50%, #202b42 75%) !important;
    background-size: 420px 100% !important;
    color: var(--pp-ink-soft) !important;
}

/* The announcement colours are inline in the template and stay brand-yellow in
   light mode by request. In dark mode they get a deep amber surface rather
   than a brightness filter — a filter dims the photo and the copy along with
   the background and leaves the whole notice unreadable. */
html[data-pp-theme="dark"] .announcement_bg_active,
html[data-pp-theme="dark"] div.announcement_bg_active {
    background: #3a2e12 !important;
    border-left: 4px solid #e0a020 !important;
    color: #f6e9cb !important;
}

html[data-pp-theme="dark"] .announcement_bg_inactive,
html[data-pp-theme="dark"] div.announcement_bg_inactive {
    background: #1e2740 !important;
    border-left: 4px solid #4a5875 !important;
    color: var(--pp-ink-soft) !important;
}

/* Carry the readable colour onto the copy inside, without touching links. */
html[data-pp-theme="dark"] .announcement_bg_active :not(a):not(img):not(i),
html[data-pp-theme="dark"] .announcement_bg_inactive :not(a):not(img):not(i) {
    color: inherit !important;
    background-color: transparent !important;
}

html[data-pp-theme="dark"] .announcement_bg_active a,
html[data-pp-theme="dark"] .announcement_bg_inactive a {
    color: #ffd479 !important;
}

html[data-pp-theme="dark"] .account-pages {
    background:
        radial-gradient(1100px 520px at 50% -8%, #16233c 0%, rgba(22, 35, 60, 0) 62%),
        var(--pp-canvas);
}

/* --------------------------------------------------------------------------
   F. Reduced motion — everything above degrades to a static, still interface
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .page-content .card:hover,
    .account-pages .card:hover,
    .btn-primary:hover {
        transform: none;
    }
}