/* ==========================================================================
   Trade4U — "Terminal" design layer (public website)
   --------------------------------------------------------------------------
   Visual design only. The first block below is the original base stylesheet,
   unchanged. Everything after it is a scoped override layer: every selector is
   anchored to a public-site wrapper (.ct-site-header, .ct-site-footer,
   .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) and
   written as `html body …` so it wins over the page templates' own <style>
   blocks without touching them or any markup/PHP/JS.
   The admin portal / admin dashboard use none of these wrappers: their own layer
   is the last block of this file ("ADMIN PORTAL & ADMIN DASHBOARD").
   Delete everything from the "TERMINAL" banner down to restore the old look.
   Language: deep navy · hairline borders · square corners · blue→cyan gradient.
   Fonts: Space Grotesk (display) · IBM Plex Sans (text) · IBM Plex Mono (labels).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --primary: #f3ba2f;
    --primary-dark: #d9a52a;
    --secondary: #1e2329;
    --bg-light: #f8f9fa;
    --text-main: #333;
    --text-muted: #666;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    background: var(--white);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.text-center { text-align: center; }

.ct-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ct-btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
}

.ct-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.ct-btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.ct-btn-outline:hover {
    background: var(--primary);
    color: #000;
}


/* ==========================================================================
   TERMINAL — design tokens
   ========================================================================== */
:root {
    --tm-bg: #05080f;
    --tm-panel: linear-gradient(180deg, rgba(17, 27, 46, .94) 0%, rgba(9, 15, 27, .97) 100%);
    --tm-field: #080e1a;
    --tm-line: rgba(140, 165, 220, .14);
    --tm-line-hi: rgba(140, 165, 220, .28);
    --tm-text: #e7ecf7;
    --tm-text-2: #b3bed4;
    --tm-body-text: #a9b6cf;
    --tm-muted: #8190ad;
    --tm-dim: #5a6783;
    --tm-blue: #3d7bff;
    --tm-blue-hi: #6ea2ff;
    --tm-cyan: #22d3ee;
    --tm-violet: #8b7bff;
    --tm-up: #19c98e;
    --tm-down: #ff5c7a;
    --tm-grad: linear-gradient(135deg, #2f6bff 0%, #1ea7ff 55%, #21d4f2 100%);
    --tm-strip: linear-gradient(90deg, #3d7bff 0, #22d3ee 36%, rgba(34, 211, 238, 0) 100%);
    --tm-glow: 0 12px 28px -12px rgba(47, 107, 255, .8);
    --tm-grid: linear-gradient(rgba(140, 180, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 180, 255, .07) 1px, transparent 1px);

    --tm-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tm-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Page canvas (only on the designed public pages; other pages that use the same header/footer,
      such as the shop pages, keep their own white page) ───────────────────── */
html:has(:is(.ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page)) {
    background: var(--tm-bg);
    scrollbar-color: #2a3a5a #05080f;
    scrollbar-width: thin;
}
html:has(:is(.ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page)) ::selection { background: rgba(61, 123, 255, .45); color: #fff; }
/* the base stylesheet paints <body> white: let the navy on <html> show through instead; the
   accent variable that the page templates read is moved to the blue family as well */
html body:has(:is(.ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page)) { background: transparent; --primary: #3d7bff; --primary-dark: #2f6bff; }

html body :is(.ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) {
    font-family: var(--tm-font);
    color: var(--tm-text);
    background:
        radial-gradient(1100px 560px at 90% 0%, rgba(47, 107, 255, .17), transparent 62%),
        radial-gradient(900px 520px at 4% 16%, rgba(34, 211, 238, .06), transparent 60%),
        linear-gradient(180deg, #070b15 0%, #05080f 100%);
    background-attachment: fixed, fixed, scroll;
}
html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--tm-display);
    font-weight: 600;
    letter-spacing: -.03em;
}
/* one shared content width, so the header, page content and footer line up on every page */
html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .container,
html body .ct-about .ab-container {
    max-width: 1320px;
    padding-left: 28px;
    padding-right: 28px;
}


/* ==========================================================================
   BOT TRADING — the logo, drawn in CSS: a gradient robot tile + the wordmark
   --------------------------------------------------------------------------
   One mark for every logo spot: dashboard sidebar, public header (and its mobile menu), footer, the
   sign-in pages and the admin portal / admin dashboard. The picture (or icon) the markup still prints stays in
   the page for screen readers but is not drawn. Each spot sets its own size: --bt-tile (tile) and --bt-text (wordmark).
   (:where() keeps the base rules at zero specificity, so a spot can always override them.)
   ========================================================================== */
html body :where(.ct-logo, .ct-sidebar-logo, .ct-site-header .site-logo a, .ct-site-header .mobile-menu-logo a, .ct-site-footer .footer-logo, .admin-logo-box, .admin-logo) {
    --bt-tile: 40px;
    --bt-text: 22px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--bt-tile) * .27);
    line-height: 1;
    text-decoration: none;
}
/* the picture (or the site-name text) that the markup prints: kept for screen readers, not drawn */
html body .ct-logo :is(img, span),
html body .ct-sidebar-logo :is(img, span),
html body .ct-site-header .site-logo a :is(img, span),
html body .ct-site-header .mobile-menu-logo a :is(img, span),
html body .ct-site-footer .footer-logo :is(img, span),
html body .admin-logo-box :is(i, span),
html body .admin-logo :is(i, span) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* the tile: the same gradient square + robot icon as the dashboard's bot button */
html body :where(.ct-logo, .ct-sidebar-logo, .ct-site-header .site-logo a, .ct-site-header .mobile-menu-logo a, .ct-site-footer .footer-logo, .admin-logo-box, .admin-logo)::before {
    content: '\f544';
    content: '\f544' / '';   /* empty alt text: screen readers skip the icon glyph (the line above is the fallback for older browsers) */
    flex: none;
    display: grid;
    place-items: center;
    width: var(--bt-tile);
    height: var(--bt-tile);
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: calc(var(--bt-tile) * .48);
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #2f6bff 0%, #1ea7ff 55%, #21d4f2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px rgba(47, 107, 255, .9);
}
/* the wordmark: BOT in white, TRADING fading to cyan (one gradient across the word) */
html body :where(.ct-logo, .ct-sidebar-logo, .ct-site-header .site-logo a, .ct-site-header .mobile-menu-logo a, .ct-site-footer .footer-logo, .admin-logo-box, .admin-logo)::after {
    content: 'BOT TRADING';
    flex: none;
    font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: var(--bt-text);
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    text-shadow: none;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 29%, #a9c8ff 36%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ==========================================================================
   Page-load overlay (shown briefly on every non-admin page; defined inline in <head> by inc/assets.php)
   ========================================================================== */
html body #ct-page-loader {
    background:
        radial-gradient(600px 380px at 50% 40%, rgba(47, 107, 255, .2), transparent 70%),
        #05080f;
}
html body #ct-page-loader .ct-loader-ring {
    width: 52px; height: 52px;
    border: 2px solid rgba(140, 165, 220, .16);
    border-top-color: #3d7bff;
    border-right-color: #22d3ee;
}
html body #ct-page-loader .ct-loader-dot { width: 7px; height: 7px; border-radius: 0; background: #22d3ee; transform: rotate(45deg); }


/* ==========================================================================
   Buttons (public site): square, gradient primary, hairline outline
   ========================================================================== */
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    border: 1px solid transparent;
    border-radius: 0;
    font: 600 15px/1 var(--tm-font);
    letter-spacing: .03em;
    transition: filter .16s ease, transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn-primary {
    background: var(--tm-grad);
    color: #fff;
    box-shadow: var(--tm-glow);
}
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn-primary:hover {
    background: var(--tm-grad);
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px rgba(47, 107, 255, .9);
}
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn-primary:active { transform: none; filter: brightness(.96); }
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn-outline {
    background: transparent;
    border-color: var(--tm-line-hi);
    color: #fff;
}
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn-outline:hover {
    background: rgba(61, 123, 255, .16);
    border-color: var(--tm-blue);
    color: #fff;
}
html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page) .ct-btn:focus-visible {
    outline: 2px solid var(--tm-blue-hi);
    outline-offset: 3px;
}


/* ==========================================================================
   Header (guest): a flat bar with a gradient hairline
   ========================================================================== */
html body .ct-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(5, 9, 17, .95);
    border: 0;
    border-bottom: 1px solid var(--tm-line);
    box-shadow: none;
}
html body .ct-site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(61, 123, 255, 0) 0%, #3d7bff 30%, #22d3ee 55%, rgba(34, 211, 238, 0) 100%);
    pointer-events: none;
}
html body .ct-site-header .container { max-width: 1320px; padding: 0 28px; }
html body .ct-site-header .header-inner { height: 76px; }
html body .ct-site-header .site-logo a { --bt-tile: 40px; --bt-text: 22px; }
html body .ct-site-header .main-navigation ul { gap: 2px; align-items: stretch; }
html body .ct-site-header .main-navigation ul > li:not(.mobile-auth-links) > a {
    display: flex;
    align-items: center;
    height: 76px;
    padding: 0 16px;
    font: 500 14px/1 var(--tm-font);
    letter-spacing: .01em;
    color: var(--tm-text-2);
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
html body .ct-site-header .main-navigation ul > li:not(.mobile-auth-links) > a:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(61, 123, 255, 0), rgba(61, 123, 255, .14));
    box-shadow: inset 0 -2px 0 var(--tm-blue);
}
html body .ct-site-header .header-auth { gap: 10px; align-items: center; }
html body .ct-site-header .header-auth .ct-btn { height: 44px; padding: 0 24px; font-size: 14px; }
html body .ct-site-header .menu-toggle {
    width: 44px; height: 44px; display: none; place-items: center; padding: 0;
    border: 1px solid var(--tm-line-hi); border-radius: 0; font-size: 17px;
    background: transparent; color: #fff;
}

@media (max-width: 991px) {
    html body .ct-site-header .header-inner { height: 64px; }
    html body .ct-site-header .site-logo a { --bt-tile: 36px; --bt-text: 20px; }
    html body .ct-site-header .menu-toggle { display: grid; }

    /* the full-screen menu */
    html body .ct-site-header .nav-menu-wrapper {
        background:
            radial-gradient(520px 420px at 100% 100%, rgba(34, 211, 238, .16), transparent 70%),
            radial-gradient(520px 420px at 0% 0%, rgba(47, 107, 255, .28), transparent 70%),
            #05080f;
        box-shadow: none;
        padding: 22px 24px 44px;
    }
    html body .ct-site-header .mobile-menu-logo { margin-bottom: 30px; text-align: left; }
    html body .ct-site-header .mobile-menu-logo a { --bt-tile: 42px; --bt-text: 23px; display: inline-flex; }   /* the page's own CSS makes this link inline-block */
    html body .ct-site-header .main-navigation ul { align-items: stretch; gap: 0; }
    html body .ct-site-header .main-navigation ul > li:not(.mobile-auth-links) { width: 100%; text-align: left; }
    html body .ct-site-header .main-navigation ul > li:not(.mobile-auth-links) > a {
        display: block; width: 100%; height: auto; padding: 19px 4px;
        border-bottom: 1px solid var(--tm-line);
        font: 600 21px/1.2 var(--tm-display); letter-spacing: -.025em; color: #fff;
        box-shadow: none; background: transparent;
    }
    html body .ct-site-header .main-navigation ul > li:not(.mobile-auth-links) > a:hover { background: transparent; box-shadow: none; color: var(--tm-blue-hi); }
    html body .ct-site-header .mobile-auth-links { width: 100%; max-width: 380px; margin: 26px 0 0; }
    html body .ct-site-header .mobile-auth-links .ct-btn { height: 54px; font-size: 15px; }
}


/* ==========================================================================
   Homepage
   ========================================================================== */
html body .ct-homepage { counter-reset: tmsec tmfeat; }
html body .ct-homepage .dynamic-gradient-bg { display: none; }

/* numbered section tags: 01 · 02 · 03 … */
html body .ct-homepage :is(.about-content h2, .section-header h2)::before {
    counter-increment: tmsec;
    content: counter(tmsec, decimal-leading-zero);
    display: block;
    width: max-content;
    margin: 0 0 22px;
    padding: 7px 11px 6px;
    border: 1px solid rgba(61, 123, 255, .5);
    background: rgba(61, 123, 255, .1);
    font: 500 11.5px/1 var(--tm-mono);
    letter-spacing: .14em;
    color: var(--tm-blue-hi);
}
html body .ct-homepage .section-header h2::before { margin-left: auto; margin-right: auto; }

/* ── Hero slider: full bleed, dark blue wash, engineering grid ─────────── */
html body .ct-homepage .ct-main-slider {
    --swiper-navigation-size: 16px;
    height: auto;
    min-height: clamp(560px, calc(100vh - 76px), 760px);
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--tm-line);
}
html body .ct-homepage .ct-main-slider .swiper-wrapper { min-height: inherit; }
html body .ct-homepage .ct-main-slider .swiper-slide { height: auto; }   /* stretch to the wrapper's min-height instead of 100% of its content height */
html body .ct-homepage .slide-overlay {
    background:
        radial-gradient(900px 480px at 92% 112%, rgba(34, 211, 238, .22), transparent 62%),
        radial-gradient(800px 480px at 100% 0%, rgba(47, 107, 255, .28), transparent 62%),
        linear-gradient(90deg, rgba(4, 7, 14, .97) 0%, rgba(5, 10, 22, .86) 42%, rgba(6, 14, 34, .52) 78%, rgba(6, 14, 34, .42) 100%);
}
html body .ct-homepage .slide-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tm-grid);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(270deg, #000 0%, transparent 70%);
    pointer-events: none;
}
html body .ct-homepage .slide-content { padding: 104px 0 124px; text-align: left; }
html body .ct-homepage .slide-content .container { max-width: 1320px; padding-left: 28px; padding-right: 28px; }
html body .ct-homepage .slide-title {
    max-width: 880px;
    margin-bottom: 24px;
    font-family: var(--tm-display);
    font-size: clamp(36px, 5.2vw, 76px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #fff;
}
html body .ct-homepage .slide-title::before {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 30px;
    background: var(--tm-grad);
}
html body .ct-homepage .slide-subtitle {
    max-width: 640px;
    margin-bottom: 40px;
    font: 400 clamp(16px, 1.4vw, 19px)/1.7 var(--tm-font);
    color: var(--tm-text-2);
}
html body .ct-homepage .slide-content .ct-btn { padding: 18px 40px; font-size: 15px; }

/* arrows: two square buttons at the bottom right; dots: thin bars at the bottom left */
html body .ct-homepage .ct-main-slider .swiper-button-prev,
html body .ct-homepage .ct-main-slider .swiper-button-next {
    top: auto;
    bottom: 36px;
    width: 52px;
    height: 52px;
    margin: 0;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: rgba(5, 9, 17, .7);
    color: #fff !important;
    transition: background .16s ease, border-color .16s ease;
}
html body .ct-homepage .ct-main-slider .swiper-button-prev { left: auto; right: calc(max(28px, (100% - 1264px) / 2) + 60px); }
html body .ct-homepage .ct-main-slider .swiper-button-next { right: max(28px, calc((100% - 1264px) / 2)); }
html body .ct-homepage .ct-main-slider .swiper-button-prev:hover,
html body .ct-homepage .ct-main-slider .swiper-button-next:hover {
    background: var(--tm-grad);
    border-color: transparent;
}
html body .ct-homepage .ct-main-slider .swiper-button-prev::after,
html body .ct-homepage .ct-main-slider .swiper-button-next::after { font-size: 15px; font-weight: 800; }
html body .ct-homepage .ct-main-slider .swiper-pagination { left: max(28px, calc((100% - 1264px) / 2)); bottom: 54px; width: auto; text-align: left; }
html body .ct-homepage .swiper-pagination-bullet {
    width: 28px; height: 3px; margin: 0 6px 0 0 !important; border-radius: 0; opacity: 1;
    background: rgba(255, 255, 255, .28);
    transition: width .25s ease, background .25s ease;
}
html body .ct-homepage .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 56px; border-radius: 0;
    background: var(--tm-grad) !important;
}

/* ── Flash-news ticker: a data bar with a gradient label ───────────────── */
html body .ct-homepage .ct-news-ticker-section {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--tm-line);
    background: linear-gradient(90deg, #0a1328 0%, #070d1b 100%) !important;
    color: #d6e0f3 !important;
    box-shadow: none;
}
html body .ct-homepage .news-ticker-container { min-height: 62px; padding: 0; }
html body .ct-homepage .news-label {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 28px;
    clip-path: none;
    box-shadow: none;
    background: var(--tm-grad) !important;
    color: #fff !important;
    font: 600 12px/1 var(--tm-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
html body .ct-homepage .news-ticker-content { margin-left: 8px; }
html body .ct-homepage .news-item { padding: 0 36px; font: 500 14.5px/1 var(--tm-font); color: #cdd8ee; }
html body .ct-homepage .news-item i { color: var(--tm-cyan); }

/* ── About ─────────────────────────────────────────────────────────────── */
html body .ct-homepage .ct-about-section { padding: 124px 0 100px; background: transparent; }
html body .ct-homepage .about-flex { gap: 92px; }
html body .ct-homepage .about-image { position: relative; }
html body .ct-homepage .about-image::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 20px -20px -20px 20px;
    border: 1px solid rgba(61, 123, 255, .55);
    background: linear-gradient(135deg, rgba(47, 107, 255, .16), rgba(47, 107, 255, 0) 65%);
    pointer-events: none;
}
html body .ct-homepage .about-image img {
    position: relative;
    z-index: 1;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
html body .ct-homepage .about-img-placeholder {
    position: relative;
    z-index: 1;
    border: 1px dashed var(--tm-line-hi);
    border-radius: 0;
    background: var(--tm-panel);
    color: var(--tm-blue-hi);
}
html body .ct-homepage .about-content h2 {
    margin-bottom: 24px;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #fff;
}
html body .ct-homepage .about-content p {
    margin-bottom: 38px;
    font-size: 17.5px;
    line-height: 1.8;
    color: var(--tm-body-text);
}

/* ── Section headings (features / packages / FAQ / testimonials) ───────── */
html body .ct-homepage .section-header h2 {
    margin-bottom: 16px;
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: #fff !important;
}
html body .ct-homepage .section-header p {
    max-width: 620px;
    margin: 0 auto 60px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--tm-body-text) !important;
}
/* wave dividers are decorative: sections now sit directly on the canvas */
html body .ct-homepage .ct-section-divider { display: none; }

/* ── Features: bordered panels with an index number ────────────────────── */
html body .ct-homepage .ct-features-section { padding: 96px 0 104px; background: transparent; }
html body .ct-homepage .features-grid { gap: 20px; }
html body .ct-homepage .feature-card {
    position: relative;
    counter-increment: tmfeat;
    overflow: hidden;
    padding: 44px 34px 40px;
    text-align: left;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .2s ease, transform .2s ease;
}
html body .ct-homepage .feature-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--tm-strip);
    opacity: .55;
    transition: opacity .2s ease;
}
html body .ct-homepage .feature-card::after {
    content: counter(tmfeat, decimal-leading-zero);
    position: absolute;
    top: 26px;
    right: 28px;
    font: 500 12px/1 var(--tm-mono);
    letter-spacing: .14em;
    color: var(--tm-dim);
}
html body .ct-homepage .feature-card:hover { transform: translateY(-4px); border-color: rgba(61, 123, 255, .55); }
html body .ct-homepage .feature-card:hover::before { opacity: 1; }
html body .ct-homepage .feature-card i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 34px;
    border: 1px solid rgba(61, 123, 255, .5);
    border-radius: 0;
    font-size: 23px;
    line-height: 1;
    color: #8fb7ff;
    background: linear-gradient(135deg, rgba(47, 107, 255, .26), rgba(34, 211, 238, .06));
    box-shadow: 0 0 28px -8px rgba(47, 107, 255, .6);
    transition: background .2s ease, color .2s ease;
}
html body .ct-homepage .feature-card:hover i { transform: none; background: var(--tm-grad); border-color: transparent; color: #fff; }
html body .ct-homepage .feature-card h3 { margin-bottom: 14px; font-size: 21px; font-weight: 600; letter-spacing: -.025em; color: #fff; }
html body .ct-homepage .feature-card p { font-size: 15.5px; line-height: 1.75; color: var(--tm-body-text); }

/* ── Packages ──────────────────────────────────────────────────────────── */
html body .ct-homepage .ct-home-packages-section { padding: 96px 0 104px; background: transparent; }
html body .ct-homepage .pki-grid-wrap { max-width: 1320px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
html body .ct-homepage .pki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: 20px;
    margin-top: 12px;
    align-items: stretch;
}
html body .ct-homepage .pki-card {
    width: 100%;
    max-width: 360px;
    justify-self: center;
    padding: 40px 28px 28px;
    text-align: left;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel);
    color: var(--tm-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .2s ease, transform .2s ease;
}
html body .ct-homepage .pki-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--tm-strip);
    opacity: .5;
}
html body .ct-homepage .pki-card:hover { transform: translateY(-4px); border-color: rgba(61, 123, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
html body .ct-homepage .pki-card--featured {
    border-color: rgba(80, 140, 255, .6);
    background:
        radial-gradient(360px 220px at 100% 0%, rgba(34, 211, 238, .2), transparent 70%),
        linear-gradient(180deg, #14306e 0%, #0d1f48 55%, #09142e 100%);
    box-shadow: 0 30px 60px -36px rgba(47, 107, 255, .7);
}
html body .ct-homepage .pki-card--featured::before { opacity: 1; }
html body .ct-homepage .pki-card--soon { opacity: 1; background: transparent; border: 1px dashed var(--tm-line-hi); box-shadow: none; color: var(--tm-text-2); }
html body .ct-homepage .pki-card--soon::before { display: none; }
html body .ct-homepage .pki-card--soon:hover { border-color: var(--tm-line-hi); transform: none; box-shadow: none; }
html body .ct-homepage .pki-badge {
    top: 0;
    right: 24px;
    transform: none;
    padding: 7px 13px 6px;
    border-radius: 0;
    font: 600 10.5px/1 var(--tm-mono);
    letter-spacing: .14em;
    color: #fff;
    background: var(--tm-grad);
    box-shadow: none;
}
html body .ct-homepage .pki-badge--soon { background: rgba(255, 255, 255, .1); color: var(--tm-text-2); border: 1px solid var(--tm-line-hi); border-top: 0; }
html body .ct-homepage .pki-card-icon {
    width: 56px; height: 56px; margin: 0 0 28px;
    border: 1px solid rgba(61, 123, 255, .5); border-radius: 0; font-size: 21px;
    color: #8fb7ff; background: linear-gradient(135deg, rgba(47, 107, 255, .26), rgba(34, 211, 238, .06));
}
html body .ct-homepage .pki-card--featured .pki-card-icon { color: #fff; background: var(--tm-grad); border-color: transparent; }
html body .ct-homepage .pki-card--soon .pki-card-icon { color: var(--tm-muted); background: rgba(255, 255, 255, .04); border-color: var(--tm-line-hi); }
html body .ct-homepage .pki-card-name { margin-bottom: 14px; font: 500 12px/1.2 var(--tm-mono); letter-spacing: .2em; color: var(--tm-muted); }
html body .ct-homepage .pki-card--featured .pki-card-name { color: #9fc0ff; }
html body .ct-homepage .pki-price { margin-bottom: 26px; }
html body .ct-homepage .pki-price-amt { font-family: var(--tm-display); font-size: 38px; font-weight: 600; letter-spacing: -.04em; color: #fff; }
html body .ct-homepage .pki-price-note { margin-top: 10px; font: 400 11.5px/1.3 var(--tm-mono); letter-spacing: .04em; color: var(--tm-muted); }
html body .ct-homepage .pki-feats { margin-bottom: 28px; }
html body .ct-homepage .pki-feats li { padding: 13px 0; border-bottom: 1px solid var(--tm-line); font-size: 14px; color: var(--tm-muted); }
html body .ct-homepage .pki-feats li i { color: var(--tm-blue-hi); }
html body .ct-homepage .pki-feats li strong { font-family: var(--tm-mono); font-weight: 500; color: #fff; }
html body .ct-homepage .pki-card--featured .pki-feats li { border-bottom-color: rgba(160, 190, 255, .2); color: #a9bce2; }
html body .ct-homepage .pki-card--featured .pki-feats li i { color: #8fe3f5; }
html body .ct-homepage .pki-card-btn {
    padding: 16px 20px;
    border-radius: 0;
    font: 600 14.5px/1 var(--tm-font);
    letter-spacing: .03em;
    color: #fff;
    background: var(--tm-grad);
    box-shadow: var(--tm-glow);
    transition: filter .16s ease, transform .16s ease;
}
html body .ct-homepage .pki-card-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
html body .ct-homepage .pki-card-btn--soon,
html body .ct-homepage .pki-card-btn--soon:hover { transform: none; filter: none; box-shadow: none; background: rgba(255, 255, 255, .05); color: var(--tm-dim); border: 1px solid var(--tm-line); }

/* ── FAQ accordion (homepage, FAQ page, legal pages) ───────────────────── */
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ct-faq-section { padding: 96px 0 108px; background: transparent; }
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-accordion { max-width: 880px; }
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item {
    margin-bottom: 10px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel);
    transition: border-color .2s ease, background .2s ease;
}
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item:hover { border-color: var(--tm-line-hi); }
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item.active {
    border-color: rgba(61, 123, 255, .55);
    background: linear-gradient(90deg, rgba(61, 123, 255, .16), rgba(61, 123, 255, .03) 60%), var(--tm-panel);
    box-shadow: inset 3px 0 0 var(--tm-blue);
}
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-question {
    padding: 22px 22px 22px 28px;
    gap: 18px;
    font: 600 16.5px/1.4 var(--tm-font);
    color: #fff;
}
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-question:hover { background: transparent; }
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item.active .faq-question { background: transparent; color: #fff; }
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-question i {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    font-size: 12px;
    color: var(--tm-blue-hi);
    background: transparent;
    transition: transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item.active .faq-question i { transform: none; background: var(--tm-grad); border-color: transparent; color: #fff; }
/* open row: the plus becomes a minus (the template rotates the icon, which would turn the square into a diamond) */
html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-item.active .faq-question i::before { content: "\f068"; }
html body :is(.ct-homepage, .ct-faq-page) .faq-answer { background: transparent; font-size: 15.5px; line-height: 1.8; color: var(--tm-body-text); }
html body :is(.ct-homepage, .ct-faq-page) .faq-item.active .faq-answer { padding: 0 28px 26px; }

/* ── Testimonials ──────────────────────────────────────────────────────── */
html body .ct-homepage .ct-testimonials-section { padding: 90px 0 120px; background: transparent; }
html body .ct-homepage .ct-testimonials-section .section-header h2 { color: #fff !important; }
html body .ct-homepage .ct-testimonials-section .section-header p { color: var(--tm-body-text) !important; }
html body .ct-homepage .ct-testimonials-slider { padding: 10px 0 74px; }
html body .ct-homepage .testimonial-card {
    position: relative;
    padding: 40px 32px 34px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
html body .ct-homepage .testimonial-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--tm-strip);
    opacity: .55;
}
html body .ct-homepage .testimonial-card:hover { transform: translateY(-4px); border-color: rgba(61, 123, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
html body .ct-homepage .quote-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 24px;
    border: 1px solid rgba(61, 123, 255, .5);
    border-radius: 0;
    font-size: 16px;
    opacity: 1;
    color: #8fb7ff;
    background: linear-gradient(135deg, rgba(47, 107, 255, .26), rgba(34, 211, 238, .06));
}
html body .ct-homepage .testimonial-text { font-style: normal; font-size: 16px; line-height: 1.75; color: #cdd8ee; }
html body .ct-homepage .client-image { width: 52px; height: 52px; border: 1px solid var(--tm-line-hi); border-radius: 0; }
html body .ct-homepage .client-info h4 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
html body .ct-homepage .client-info span { font: 400 12px/1.3 var(--tm-mono); letter-spacing: .04em; color: var(--tm-muted); }
/* avatar initials: one blue gradient for every tile (the colour picked in the admin is an inline background) */
html body .ct-homepage .letter-avatar { font-family: var(--tm-display); font-weight: 600; color: #fff; background: var(--tm-grad) !important; }
html body .ct-homepage .ct-testimonials-slider .swiper-pagination { bottom: 14px; }
html body .ct-homepage .ct-testimonials-slider .swiper-pagination-bullet { width: 28px; height: 3px; background: rgba(255, 255, 255, .22); }
html body .ct-homepage .ct-testimonials-slider .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 56px; background: var(--tm-grad) !important; }


/* ==========================================================================
   About / FAQ / Privacy / Terms pages
   ========================================================================== */
/* hero: a dark blue banner with a grid (a hero photo chosen in the admin shows through the wash) */
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero {
    min-height: 440px;
    overflow: hidden;
    isolation: isolate;
    background-color: #060b17;
    background-clip: padding-box;   /* keeps the photograph out from under the hairline */
    border-bottom: 1px solid var(--tm-line);
}
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-overlay {
    opacity: 1;
    background:
        radial-gradient(800px 420px at 85% 110%, rgba(34, 211, 238, .2), transparent 65%),
        radial-gradient(700px 420px at 10% -10%, rgba(47, 107, 255, .34), transparent 65%),
        linear-gradient(180deg, rgba(5, 9, 18, .88), rgba(5, 9, 18, .94));
}
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--tm-grid);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
}
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-inner { z-index: 2; padding: 104px 28px 100px; }
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-kicker {
    gap: 10px;
    margin-bottom: 26px;
    padding: 9px 16px 8px;
    border: 1px solid rgba(61, 123, 255, .55);
    border-radius: 0;
    font: 500 11.5px/1 var(--tm-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tm-blue-hi);
    background: rgba(61, 123, 255, .1);
}
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-kicker i { color: var(--tm-cyan); }
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-title {
    margin-bottom: 20px;
    font-family: var(--tm-display);
    font-size: clamp(32px, 4.8vw, 62px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.04em;
    color: #fff;
}
html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-sub { font-size: 18px; line-height: 1.7; color: var(--tm-text-2); }

/* stats: one bar of four figures */
html body .ct-about .ab-stats-wrap { margin-top: -52px; }
html body .ct-about .ab-stats {
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    overflow: hidden;
    background: var(--tm-strip) top left / 100% 2px no-repeat, linear-gradient(180deg, #0f1a2f 0%, #09101d 100%);
    box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
}
html body .ct-about .ab-stat { padding: 34px 24px 30px; text-align: left; border-right: 1px solid var(--tm-line); }
html body .ct-about .ab-stat:last-child { border-right: 0; }
html body .ct-about .ab-stat-value {
    font-family: var(--tm-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, #ffffff 0%, #9fc0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
html body .ct-about .ab-stat-label { margin-top: 12px; font: 500 11.5px/1.4 var(--tm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tm-muted); }

/* story sections */
html body .ct-about .ab-section { padding: 112px 0; background: transparent; }
html body .ct-about .ab-section-alt { background: linear-gradient(180deg, rgba(61, 123, 255, .05), rgba(61, 123, 255, 0)); border-top: 1px solid var(--tm-line); }
html body .ct-about .ab-split { gap: 88px; }
html body .ct-about .ab-split-media { position: relative; }
html body .ct-about .ab-split-media::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 20px -20px -20px 20px;
    border: 1px solid rgba(61, 123, 255, .55);
    background: linear-gradient(135deg, rgba(47, 107, 255, .16), rgba(47, 107, 255, 0) 65%);
    pointer-events: none;
}
html body .ct-about .ab-split-reverse .ab-split-media::before { inset: 20px 20px -20px -20px; }
html body .ct-about .ab-split-media img {
    position: relative;
    z-index: 1;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: #0b1220;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
html body .ct-about .ab-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 12px 6px;
    border: 1px solid rgba(61, 123, 255, .5);
    background: rgba(61, 123, 255, .1);
    font: 500 11.5px/1 var(--tm-mono);
    letter-spacing: .16em;
    color: var(--tm-blue-hi);
}
html body .ct-about .ab-h2 { margin-bottom: 22px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: #fff; }
html body .ct-about :is(.ab-text, .ab-rich) { font-size: 17px; line-height: 1.85; color: var(--tm-body-text); }
html body .ct-about .ab-rich :is(h1, h2, h3) { color: #fff; }
html body .ct-about .ab-rich a { color: var(--tm-blue-hi); text-decoration: underline; text-underline-offset: 3px; }

/* closing call-to-action (About + FAQ): a gradient panel */
html body :is(.ct-about, .ct-faq-page) .ab-cta {
    position: relative;
    overflow: hidden;
    padding: 96px 28px;
    border: 0;
    border-top: 1px solid var(--tm-line);
    background:
        radial-gradient(700px 360px at 85% 0%, rgba(34, 211, 238, .2), transparent 70%),
        radial-gradient(700px 360px at 10% 100%, rgba(47, 107, 255, .3), transparent 70%),
        linear-gradient(180deg, #0a1530 0%, #060c1b 100%);
}
html body :is(.ct-about, .ct-faq-page) .ab-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tm-grid);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 78%);
    pointer-events: none;
}
html body :is(.ct-about, .ct-faq-page) .ab-cta > .ab-container { position: relative; z-index: 1; }
html body :is(.ct-about, .ct-faq-page) .ab-cta-title { margin-bottom: 14px; font-family: var(--tm-display); font-size: clamp(28px, 3.8vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: #fff; }
html body :is(.ct-about, .ct-faq-page) .ab-cta-sub { margin-bottom: 36px; font-size: 17.5px; color: var(--tm-text-2); }
html body :is(.ct-about, .ct-faq-page) .ab-cta-btn {
    padding: 18px 40px;
    border-radius: 0;
    font: 600 15px/1 var(--tm-font);
    letter-spacing: .03em;
    color: #fff;
    background: var(--tm-grad);
    box-shadow: var(--tm-glow);
}
html body :is(.ct-about, .ct-faq-page) .ab-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 16px 34px -12px rgba(47, 107, 255, .9); }

/* legal pages: same accordion, rich text inside */
html body :is(.ct-privacy-page, .ct-terms-page) .ct-faq-section { padding: 88px 0 120px; }
html body :is(.ct-privacy-page, .ct-terms-page) .faq-accordion { max-width: 900px; }
html body :is(.ct-privacy-page, .ct-terms-page) .faq-answer { background: transparent; }
html body :is(.ct-privacy-page, .ct-terms-page) .faq-answer-content { padding: 2px 28px 30px; font-size: 15.5px; line-height: 1.85; color: var(--tm-body-text); }
html body :is(.ct-privacy-page, .ct-terms-page) .faq-answer-content :is(h1, h2, h3, h4) { margin: 22px 0 10px; color: #fff; }
html body :is(.ct-privacy-page, .ct-terms-page) .faq-answer-content a { color: var(--tm-blue-hi); text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   Footer
   ========================================================================== */
html body .ct-site-footer {
    position: relative;
    margin: 0;
    padding: 84px 0 30px;
    border: 0;
    border-top: 1px solid var(--tm-line);
    font-family: var(--tm-font);
    color: var(--tm-text-2);
    background:
        radial-gradient(700px 320px at 12% 0%, rgba(47, 107, 255, .14), transparent 70%),
        linear-gradient(180deg, #060a14 0%, #04070d 100%);
}
html body .ct-site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(61, 123, 255, 0) 0%, #3d7bff 30%, #22d3ee 55%, rgba(34, 211, 238, 0) 100%);
    pointer-events: none;
}
html body .ct-site-footer .footer-top { gap: 56px; margin-bottom: 60px; }
html body .ct-site-footer .footer-logo { --bt-tile: 42px; --bt-text: 23px; display: flex; margin-bottom: 22px; }
html body .ct-site-footer .footer-desc { max-width: 430px; font-size: 15px; line-height: 1.85; color: var(--tm-muted); }
html body .ct-site-footer .footer-title {
    margin-bottom: 24px;
    padding-bottom: 0;
    font: 500 12px/1.3 var(--tm-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tm-text);
}
html body .ct-site-footer .footer-title::after {
    position: static;
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 14px;
    background: var(--tm-grad);
}
html body .ct-site-footer .footer-links li { margin-bottom: 14px; }
html body .ct-site-footer .footer-links a { font-size: 15px; font-weight: 500; color: var(--tm-muted); }
html body .ct-site-footer .footer-links a:hover { color: #fff; padding-left: 8px; }
html body .ct-site-footer .footer-bottom {
    padding-top: 28px;
    border-top: 1px solid var(--tm-line);
    font: 400 12.5px/1.6 var(--tm-mono);
    letter-spacing: .04em;
    color: var(--tm-dim);
}


/* ==========================================================================
   Responsive tuning
   ========================================================================== */
@media (max-width: 991px) {
    html body .ct-homepage .ct-main-slider { min-height: 540px; }
    html body .ct-homepage .slide-content { padding: 84px 0 112px; }
    html body .ct-homepage .ct-main-slider .swiper-pagination { left: 28px; bottom: 44px; }
    html body .ct-homepage .ct-about-section,
    html body .ct-homepage .ct-features-section,
    html body .ct-homepage .ct-home-packages-section,
    html body :is(.ct-homepage, .ct-faq-page) .ct-faq-section { padding-top: 76px; padding-bottom: 76px; }
    html body .ct-homepage .ct-testimonials-section { padding: 64px 0 96px; }
    html body .ct-homepage .about-flex { gap: 60px; }
    html body .ct-homepage .about-content { text-align: left; }
    html body .ct-homepage .about-content h2 { font-size: clamp(28px, 6vw, 40px); }
    html body .ct-homepage .about-image::before { inset: 14px -10px -14px 14px; }
    html body .ct-about .ab-split { gap: 56px; }
    html body .ct-about .ab-section { padding: 76px 0; }
    html body .ct-about .ab-split-media::before { inset: 14px -10px -14px 14px; }
    html body .ct-about .ab-split-reverse .ab-split-media::before { inset: 14px 10px -14px -14px; }
    html body .ct-site-footer { padding-top: 68px; }
}
@media (max-width: 767px) {
    html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .container,
    html body .ct-about .ab-container { padding-left: 20px; padding-right: 20px; }

    html body .ct-homepage .ct-main-slider { min-height: 520px; }
    html body .ct-homepage .slide-content { padding: 72px 0 104px; }
    html body .ct-homepage .slide-content .container { padding-left: 20px; padding-right: 20px; }
    html body .ct-homepage .slide-title { font-size: clamp(30px, 8.4vw, 40px); }
    html body .ct-homepage .slide-subtitle { font-size: 16px; margin-left: 0; margin-right: 0; }
    html body .ct-homepage .ct-main-slider .swiper-pagination { left: 20px; bottom: 38px; }
    html body .ct-homepage .news-ticker-container { min-height: 56px; }
    html body .ct-homepage .news-label { padding: 0 18px; font-size: 11px; }
    html body .ct-homepage .pki-grid-wrap { padding-left: 20px; padding-right: 20px; }
    html body .ct-homepage .feature-card { padding: 38px 26px 34px; }
    html body :is(.ct-homepage, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .faq-question { padding: 18px 16px 18px 20px; font-size: 15.5px; }
    html body :is(.ct-homepage, .ct-faq-page) .faq-item.active .faq-answer { padding: 0 20px 24px; }
    html body :is(.ct-privacy-page, .ct-terms-page) .faq-answer-content { padding: 2px 20px 26px; }
    html body .ct-homepage .testimonial-card { padding: 34px 24px 30px; }

    html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero { min-height: 400px; }
    html body :is(.ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) .ab-hero-inner { padding: 76px 20px 84px; }
    html body .ct-about .ab-stats-wrap { margin-top: -40px; }
    html body .ct-about .ab-stat { padding: 26px 18px 24px; }
    html body :is(.ct-about, .ct-faq-page) .ab-cta { padding: 72px 20px; }
    html body .ct-site-footer { padding: 60px 0 26px; text-align: left; }
    html body .ct-site-footer .footer-top { gap: 40px; }
    html body .ct-site-footer .footer-title::after { transform: none; left: auto; }
    html body .ct-site-footer .footer-desc { margin: 0; }
}
@media (max-width: 480px) {
    html body .ct-homepage .pki-card { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html body :is(.ct-site-header, .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) * {
        transition-duration: .01ms !important;
    }
}

/* nothing on the public pages is rounded (the page templates' inline styles round buttons, avatars, slider dots …) */
html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) *,
html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) *::before,
html body :is(.ct-site-header, .ct-site-footer, .ct-homepage, .ct-about, .ct-faq-page, .ct-privacy-page, .ct-terms-page) *::after { border-radius: 0 !important; }


/* ==========================================================================
   "Account restricted" page (templates/disabled.php)
   ========================================================================== */
html:has(.disabled-container) { background: #05080f; }
html body:has(.disabled-container) {
    background: radial-gradient(900px 480px at 50% 0%, rgba(47, 107, 255, .22), transparent 65%), #05080f !important;
    font-family: var(--tm-font);
}
html body .disabled-container { max-width: 500px; }
html body .disabled-card {
    padding: 52px 42px 44px;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: linear-gradient(180deg, #111b2f 0%, #0a111f 100%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
html body .disabled-card::before { height: 2px; background: linear-gradient(90deg, #ff5c7a 0%, #ff8aa0 40%, rgba(255, 138, 160, 0) 100%); }
html body .disabled-card .icon-box {
    width: 80px;
    height: 80px;
    border-radius: 0;
    border: 1px solid rgba(255, 92, 122, .5);
    font-size: 30px;
    color: #ff8aa0;
    background: rgba(255, 92, 122, .1);
    animation: none;
}
html body .disabled-card h1 { margin-bottom: 18px; font: 600 27px/1.2 var(--tm-display); letter-spacing: -.03em; color: #fff; }
html body .disabled-card p { font: 400 15.5px/1.7 var(--tm-font); color: var(--tm-muted); }
html body .disabled-card .logout-link {
    padding: 15px 30px;
    border-radius: 0;
    font: 600 14.5px/1 var(--tm-font);
    letter-spacing: .03em;
    color: #fff;
    background: var(--tm-grad);
    box-shadow: var(--tm-glow);
}
html body .disabled-card .logout-link:hover { background: var(--tm-grad); filter: brightness(1.12); transform: translateY(-1px); }
html body .disabled-container *, html body .disabled-container *::before, html body .disabled-container *::after { border-radius: 0 !important; }


/* ==========================================================================
   ADMIN PORTAL & ADMIN DASHBOARD — the same "Terminal" look as the member area
   --------------------------------------------------------------------------
   /admin-portal/ (templates/admin-login.php) and /admin-dashboard/ (templates/admin-dashboard.php) load only
   style.css + app.css and carry their own inline <style> blocks (violet · gold · rounded). This layer re-skins both
   from here. Every dashboard selector starts with `html body:has(.admin-dashboard-wrapper)`, so it can only ever match on
   the admin dashboard page (the member pages share class names such as .card-title, .status-pill and .ct-modal and must
   not be touched); the sign-in part is anchored to .admin-login-wrap. !important is used only where a template sets the
   value in an inline style="" attribute. No markup, PHP or JS is touched.
   Language (identical to the member area): deep navy · hairline-bordered square panels · blue→cyan gradient for
   actions · green / red only for profit / loss / status · Space Grotesk · IBM Plex Sans · IBM Plex Mono.
   The template's old violet / gold / grey are mapped onto that palette:
        violet #7000ff → blue · gold #f3ba2f → blue (text) or violet (status) · teal #00f5d4 → cyan · #2b3139 buttons → outlined
   ========================================================================== */

/* ── 1 · Canvas and variables ───────────────────────────────────────────── */
html:has(:is(.admin-dashboard-wrapper, .admin-login-wrap)) {
    background: #05080f;
    scrollbar-color: #2a3a5a #05080f;
    scrollbar-width: thin;
}
html:has(:is(.admin-dashboard-wrapper, .admin-login-wrap)) ::selection { background: rgba(61, 123, 255, .45); color: #fff; }

/* the templates read their palette from these variables: point them at the Terminal palette */
html body:has(:is(.admin-dashboard-wrapper, .admin-login-wrap)) {
    --admin-primary: #3d7bff;
    --admin-bg: #05080f;
    --admin-card: #0b1220;
    --admin-input: #080e1a;
    --admin-border: rgba(140, 165, 220, .14);
    --admin-text: #e7ecf7;
    --admin-muted: #8190ad;
    --primary: #3d7bff;
    --primary-dark: #2f6bff;
    font-family: var(--tm-font);
    color: var(--tm-text);
    -webkit-font-smoothing: antialiased;
}
html body:has(.admin-dashboard-wrapper) { background: transparent !important; }

html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :is(h1, h2, h3, h4) { font-family: var(--tm-display); letter-spacing: -.02em; }
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :focus-visible { outline: 2px solid var(--tm-blue-hi); outline-offset: 2px; }


/* ── 2 · Shell: canvas, sidebar, page column ────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-dashboard-wrapper {
    position: relative;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    background:
        radial-gradient(1100px 540px at 88% -10%, rgba(47, 107, 255, .20), transparent 62%),
        radial-gradient(820px 470px at 14% -8%, rgba(34, 211, 238, .08), transparent 60%),
        linear-gradient(180deg, #080d19 0%, #05080f 60%);
    background-attachment: fixed;
    color: var(--tm-text);
    font-family: var(--tm-font);
}
/* a faint engineering grid fading out from the top */
html body:has(.admin-dashboard-wrapper) .admin-dashboard-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(140, 165, 220, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 165, 220, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 0%, transparent 75%);
}

html body:has(.admin-dashboard-wrapper) .admin-sidebar {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    align-self: flex-start;
    flex: none;
    width: 248px;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    padding: 0;
    overflow: hidden auto;
    scrollbar-width: none;
    background: linear-gradient(180deg, #0b1424 0%, #070c17 100%);
    border: 0;
    border-right: 1px solid var(--tm-line);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .02);
}
html body:has(.admin-dashboard-wrapper) .admin-sidebar::-webkit-scrollbar { display: none; }

/* the BOT TRADING mark itself is drawn by the shared logo block near the top of this file */
html body:has(.admin-dashboard-wrapper) .admin-logo-box {
    --bt-tile: 38px;
    --bt-text: 19px;
    flex: none;
    height: 72px;
    margin: 0;
    padding: 0 22px;
    gap: 10px;
    border-bottom: 1px solid var(--tm-line);
}

html body:has(.admin-dashboard-wrapper) .admin-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 18px 12px;
}
html body:has(.admin-dashboard-wrapper) .admin-nav::before {
    content: 'ADMIN CONSOLE';
    content: 'ADMIN CONSOLE' / '';
    padding: 0 14px 12px;
    font: 500 10px/1 var(--tm-mono);
    letter-spacing: .22em;
    color: #7384a3;
}
html body:has(.admin-dashboard-wrapper) .admin-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border-radius: 0;
    font: 500 14px/1 var(--tm-font);
    letter-spacing: .005em;
    white-space: nowrap;
    color: var(--tm-text-2);
    transition: background .16s ease, color .16s ease;
}
html body:has(.admin-dashboard-wrapper) .admin-nav-item i {
    flex: none;
    width: 20px;
    font-size: 15px;
    text-align: center;
    color: var(--tm-muted);
    transition: color .16s ease;
}
html body:has(.admin-dashboard-wrapper) .admin-nav-item:hover { background: rgba(61, 123, 255, .09); color: #fff; }
html body:has(.admin-dashboard-wrapper) .admin-nav-item:hover i { color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .admin-nav-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(61, 123, 255, .26) 0%, rgba(61, 123, 255, .07) 62%, rgba(61, 123, 255, 0) 100%);
    box-shadow: inset 2px 0 0 var(--tm-blue);
}
html body:has(.admin-dashboard-wrapper) .admin-nav-item.active i { color: var(--tm-blue-hi); }

/* pending-withdrawals counter */
html body:has(.admin-dashboard-wrapper) .ct-nav-badge {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255, 92, 122, .14);
    color: #ff8aa0;
    border: 1px solid rgba(255, 92, 122, .5);
    border-radius: 0;
    font: 600 11px/1 var(--tm-mono);
}

html body:has(.admin-dashboard-wrapper) .admin-nav-footer { flex: none; padding: 12px; border-top: 1px solid var(--tm-line); }
html body:has(.admin-dashboard-wrapper) .admin-nav-footer .admin-nav-item { color: #ff8fa4; }
html body:has(.admin-dashboard-wrapper) .admin-nav-footer .admin-nav-item i { color: #ff8fa4; }
html body:has(.admin-dashboard-wrapper) .admin-nav-footer .admin-nav-item:hover { background: rgba(255, 92, 122, .1); color: #ffb0bf; }
html body:has(.admin-dashboard-wrapper) .admin-nav-footer .admin-nav-item:hover i { color: #ffb0bf; }

html body:has(.admin-dashboard-wrapper) .admin-sidebar-overlay { background: rgba(3, 6, 12, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

html body:has(.admin-dashboard-wrapper) .admin-main {
    position: relative;   /* no z-index: it would trap #wc-order-modal beneath the sidebar */
    flex: 1;
    min-width: 0;
    padding: 34px 36px 76px;
}
html body:has(.admin-dashboard-wrapper) .dashboard-section { max-width: 1560px; }
html body:has(.admin-dashboard-wrapper) .dashboard-section.active { animation: adminRise .28s ease-out; }
@keyframes adminRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}


/* ── 3 · Page header ────────────────────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 0 30px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--tm-line);
}
html body:has(.admin-dashboard-wrapper) .admin-welcome h1 {
    margin: 0 0 8px;
    font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--tm-display);
    letter-spacing: -.025em;
    color: #fff !important;
}
/* some page titles are painted gold by an inline style: they are white here */
html body:has(.admin-dashboard-wrapper) .admin-dashboard-wrapper .admin-welcome h1[style] { color: #fff !important; }
html body:has(.admin-dashboard-wrapper) .admin-welcome h1::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin-top: 16px;
    background: var(--tm-grad);
}
html body:has(.admin-dashboard-wrapper) .admin-welcome p { margin: 0; font: 400 14.5px/1.6 var(--tm-font); color: var(--tm-muted); }

html body:has(.admin-dashboard-wrapper) .admin-user-pill {
    height: 44px;
    padding: 0 16px 0 0;
    gap: 12px;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: rgba(255, 255, 255, .03);
}
html body:has(.admin-dashboard-wrapper) .admin-user-pill img { width: 44px; height: 44px; margin: -1px 0 -1px -1px; border: 0; border-radius: 0; }
html body:has(.admin-dashboard-wrapper) .admin-user-pill span { font: 600 13.5px/1.2 var(--tm-font); color: #fff; }

html body:has(.admin-dashboard-wrapper) .admin-mobile-toggle {
    width: 42px;
    height: 42px;
    margin-right: 14px;
    padding: 0;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: transparent;
    color: var(--tm-text);
    font-size: 16px;
    place-items: center;
}
html body:has(.admin-dashboard-wrapper) .admin-mobile-toggle:hover { background: rgba(61, 123, 255, .14); border-color: var(--tm-blue); }


/* ── 4 · Overview: numbered section titles and KPI tiles ────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-reports-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 18px;
    font: 600 17px/1.2 var(--tm-display);
    letter-spacing: -.01em;
    color: #fff;
}
html body:has(.admin-dashboard-wrapper) .admin-reports-section-title::before {
    content: "01";
    order: -1;
    padding: 7px 9px 6px;
    font: 500 11px/1 var(--tm-mono);
    letter-spacing: .1em;
    color: var(--tm-blue-hi);
    border: 1px solid rgba(61, 123, 255, .5);
    background: rgba(61, 123, 255, .1);
}
html body:has(.admin-dashboard-wrapper) .admin-reports-section-title:nth-of-type(2)::before { content: "02"; }
html body:has(.admin-dashboard-wrapper) .admin-reports-section-title i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--tm-blue-hi);
    border: 1px solid var(--tm-line-hi);
    background: rgba(255, 255, 255, .03);
}
html body:has(.admin-dashboard-wrapper) .admin-reports-grid { gap: 16px; margin-bottom: 34px; }

/* each tile carries one accent (--kc, an r,g,b triple) taken from the colour its icon is given in the template */
html body:has(.admin-dashboard-wrapper) :is(.admin-report-card, .general-stat-card) { --kc: 110, 162, 255; }
html body:has(.admin-dashboard-wrapper) .admin-report-card:has(.arc-icon[style*="#0ecb81" i]) { --kc: 25, 201, 142; }
html body:has(.admin-dashboard-wrapper) .admin-report-card:has(.arc-icon[style*="#00d2ff" i]) { --kc: 34, 211, 238; }
html body:has(.admin-dashboard-wrapper) .admin-report-card:has(.arc-icon[style*="#f3ba2f" i]) { --kc: 139, 123, 255; }
html body:has(.admin-dashboard-wrapper) .admin-report-card:has(.arc-icon[style*="#f6465d" i]) { --kc: 255, 92, 122; }
html body:has(.admin-dashboard-wrapper) .admin-report-card:has(.arc-icon[style*="#7000ff" i]) { --kc: 110, 162, 255; }

html body:has(.admin-dashboard-wrapper) .admin-report-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 112px;
    padding: 22px 20px;
    gap: 16px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: linear-gradient(90deg, rgb(var(--kc)), rgba(var(--kc), 0) 70%) top left / 100% 2px no-repeat, var(--tm-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 26px 50px -34px rgba(0, 0, 0, .85);
    transition: border-color .16s ease, transform .16s ease;
}
html body:has(.admin-dashboard-wrapper) .admin-report-card:hover { transform: translateY(-2px); border-color: var(--tm-line-hi); }
/* a soft tint of the tile's own colour in the corner */
html body:has(.admin-dashboard-wrapper) .admin-report-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 180px;
    background: radial-gradient(closest-side, rgba(var(--kc), .2), transparent);
}
html body:has(.admin-dashboard-wrapper) .admin-report-card .arc-icon {
    width: 46px;
    height: 46px;
    border-radius: 0;
    font-size: 18px;
    color: rgb(var(--kc)) !important;
    background: rgba(var(--kc), .14) !important;
    border: 1px solid rgba(var(--kc), .45);
}
html body:has(.admin-dashboard-wrapper) .arc-label { font: 500 10.5px/1.4 var(--tm-mono); letter-spacing: .12em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .arc-value { margin: 6px 0 4px; font: 600 clamp(20px, 1.8vw, 26px)/1.1 var(--tm-display); letter-spacing: -.03em; color: #fff; }
html body:has(.admin-dashboard-wrapper) .arc-sub { font: 400 11px/1.45 var(--tm-mono); color: var(--tm-muted); }


/* ── 5 · Panels, panel titles, stat strip ───────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-content-card {
    padding: 28px;
    background: var(--tm-strip) top left / 100% 2px no-repeat, var(--tm-panel);
    color: var(--tm-text);
    border: 1px solid var(--tm-line);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 26px 50px -34px rgba(0, 0, 0, .85);
}
/* wide tables scroll inside their panel instead of widening the page */
html body:has(.admin-dashboard-wrapper) .admin-content-card:has(> .admin-table, > #users-table-container) { overflow-x: auto; }

html body:has(.admin-dashboard-wrapper) .admin-content-card > p { font: 400 14px/1.65 var(--tm-font); }
html body:has(.admin-dashboard-wrapper) .card-title {
    gap: 12px;
    margin-bottom: 22px;
    font: 600 17px/1.2 var(--tm-display);
    letter-spacing: -.01em;
    color: #fff;
}
html body:has(.admin-dashboard-wrapper) .card-title i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--tm-blue-hi);
    border: 1px solid var(--tm-line-hi);
    background: rgba(255, 255, 255, .03);
}

html body:has(.admin-dashboard-wrapper) .admin-stat-card {
    padding: 20px 22px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: linear-gradient(90deg, var(--tm-blue), rgba(61, 123, 255, 0) 70%) top left / 100% 2px no-repeat, var(--tm-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 26px 50px -34px rgba(0, 0, 0, .85);
}
html body:has(.admin-dashboard-wrapper) .admin-stat-card::after { background: radial-gradient(circle at top right, rgba(61, 123, 255, .16), transparent 70%); }
html body:has(.admin-dashboard-wrapper) .admin-stat-label { margin-bottom: 10px; font: 500 10.5px/1.4 var(--tm-mono); letter-spacing: .12em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .admin-stat-value { font: 600 clamp(22px, 2vw, 28px)/1.1 var(--tm-display); letter-spacing: -.03em; color: #fff; }


/* ── 6 · Ledger tables and status tags ──────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
html body:has(.admin-dashboard-wrapper) .admin-table th {
    padding: 13px 14px;
    vertical-align: middle;
    font: 500 10.5px/1.35 var(--tm-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tm-muted);
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--tm-line-hi);
}
html body:has(.admin-dashboard-wrapper) .admin-table td {
    padding: 13px 14px;
    font: 400 13.5px/1.45 var(--tm-font);
    color: var(--tm-text);
    border-bottom: 1px solid var(--tm-line);
}
html body:has(.admin-dashboard-wrapper) .admin-table tr:last-child td { border-bottom: 0; }
html body:has(.admin-dashboard-wrapper) .admin-table tbody tr:hover td { background: rgba(61, 123, 255, .07); }
/* the user list is wider than its panel: the Manage / Reports column stays in view while the rest scrolls underneath */
html body:has(.admin-dashboard-wrapper) #users-management-table td:last-child { white-space: nowrap; min-width: 188px; }
@media (min-width: 1025px) {
    html body:has(.admin-dashboard-wrapper) #users-management-table :is(th, td):last-child { position: sticky; right: 0; z-index: 1; box-shadow: inset 1px 0 0 var(--tm-line-hi), -18px 0 16px -12px rgba(0, 0, 0, .75); }
    html body:has(.admin-dashboard-wrapper) #users-management-table th:last-child { background: #101a2c; }
    html body:has(.admin-dashboard-wrapper) #users-management-table td:last-child { background: #0c1424; }
    html body:has(.admin-dashboard-wrapper) #users-management-table tbody tr:hover td:last-child { background: #10203a; }
}
/* pending withdrawals: the four buttons wrap into two rows instead of widening the table */
html body:has(.admin-dashboard-wrapper) #pending-withdrawals-body td:last-child { white-space: normal !important; min-width: 208px; }
html body:has(.admin-dashboard-wrapper) #pending-withdrawals-body td:last-child .admin-btn { margin: 0 4px 6px 0 !important; }
html body:has(.admin-dashboard-wrapper) .admin-table td strong { font-weight: 600; color: #fff; }
html body:has(.admin-dashboard-wrapper) .admin-table td small { font-family: var(--tm-mono); }
html body:has(.admin-dashboard-wrapper) .admin-table code {
    padding: 3px 8px !important;
    font: 500 11.5px/1.4 var(--tm-mono) !important;
    color: var(--tm-blue-hi) !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--tm-line);
}

html body:has(.admin-dashboard-wrapper) .status-pill {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    font: 500 10.5px/1.2 var(--tm-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body:has(.admin-dashboard-wrapper) :is(.status-active, .status-approved, .status-completed, .status-success)   { background: rgba(25, 201, 142, .12);  color: #3ee6ad; border-color: rgba(25, 201, 142, .38); }
html body:has(.admin-dashboard-wrapper) :is(.status-pending, .status-processing, .status-on-hold)                    { background: rgba(34, 211, 238, .10);  color: #6fe3f5; border-color: rgba(34, 211, 238, .36); }
html body:has(.admin-dashboard-wrapper) :is(.status-disabled, .status-rejected, .status-failed, .status-cancelled)   { background: rgba(255, 92, 122, .12);  color: #ff8aa0; border-color: rgba(255, 92, 122, .4); }
html body:has(.admin-dashboard-wrapper) .trend-up { color: var(--tm-up); }

/* the order status / verification badges are drawn by inline styles: same tag shape, same palette */
html body:has(.admin-dashboard-wrapper) :is(#wc-orders-table, .admin-table) td span[style*="border-radius:20px"],
html body:has(.admin-dashboard-wrapper) :is(#wc-orders-table, .admin-table) td span[style*="border-radius: 20px"] {
    padding: 4px 10px !important;
    font: 500 10.5px/1.2 var(--tm-mono) !important;
    letter-spacing: .08em !important;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
html body:has(.admin-dashboard-wrapper) #wc-orders-table td span[style*="#f3ba2f20" i] { color: #b3a8ff !important; background: rgba(139, 123, 255, .14) !important; }


/* ── 7 · Buttons ────────────────────────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .admin-btn {
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--tm-grad);
    color: #fff !important;
    font: 600 13px/1 var(--tm-font);
    letter-spacing: .02em;
    box-shadow: var(--tm-glow);
    transition: filter .16s ease, transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html body:has(.admin-dashboard-wrapper) .admin-btn:hover { background: var(--tm-grad); filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .85); color: #fff !important; }
html body:has(.admin-dashboard-wrapper) .admin-btn:active { transform: none; filter: brightness(.96); }
html body:has(.admin-dashboard-wrapper) .admin-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
html body:has(.admin-dashboard-wrapper) .admin-btn-sm { padding: 7px 12px; font-size: 11.5px; }

/* outlined: Cancel / Close / Reports / View … (the template paints these #2b3139 or a faint white) */
html body:has(.admin-dashboard-wrapper) .admin-btn-secondary,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="#2b3139" i],
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="rgba(255,255,255,0.05)" i] {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--tm-line-hi) !important;
    color: var(--tm-text) !important;
    box-shadow: none !important;
}
html body:has(.admin-dashboard-wrapper) .admin-btn-secondary:hover,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="#2b3139" i]:hover,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="rgba(255,255,255,0.05)" i]:hover {
    background: rgba(61, 123, 255, .16) !important;
    border-color: var(--tm-blue) !important;
    color: #fff !important;
    filter: none;
}
/* Several buttons carry an inline `color:#000!important`, which no stylesheet rule can outrank — so the text colour of
   those is set through -webkit-text-fill-color (it is what actually paints the glyphs, and the inline style leaves it alone). */
/* the template's gold "save" buttons are ordinary primary buttons here */
html body:has(.admin-dashboard-wrapper) :is(button, .admin-btn)[style*="background:#f3ba2f" i],
html body:has(.admin-dashboard-wrapper) :is(button, .admin-btn)[style*="background: #f3ba2f" i] {
    background: var(--tm-grad) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: var(--tm-glow) !important;
}
/* approve / confirm = green, reject = red (outlined tags that fill on hover) */
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#0ecb81" i],
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background: #0ecb81" i] {
    background: rgba(25, 201, 142, .14) !important;
    border: 1px solid rgba(25, 201, 142, .55) !important;
    color: #3ee6ad !important;
    -webkit-text-fill-color: #3ee6ad !important;
    box-shadow: none !important;
}
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#0ecb81" i]:hover,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background: #0ecb81" i]:hover { background: #19c98e !important; border-color: #19c98e !important; color: #03140e !important; -webkit-text-fill-color: #03140e !important; filter: none; }
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#ff4d6d" i],
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#f6465d" i],
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#e5484d" i] {
    background: rgba(255, 92, 122, .14) !important;
    border: 1px solid rgba(255, 92, 122, .55) !important;
    color: #ff8aa0 !important;
    box-shadow: none !important;
}
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#ff4d6d" i]:hover,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#f6465d" i]:hover,
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="background:#e5484d" i]:hover { background: #ff5c7a !important; border-color: #ff5c7a !important; color: #fff !important; filter: none; }
/* the "Details" button of the orders table (violet in the template) */
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="rgba(112,0,255" i] {
    background: rgba(61, 123, 255, .14) !important;
    border: 1px solid rgba(61, 123, 255, .5) !important;
    color: var(--tm-blue-hi) !important;
    box-shadow: none !important;
}
html body:has(.admin-dashboard-wrapper) .admin-btn[style*="rgba(112,0,255" i]:hover { background: rgba(61, 123, 255, .28) !important; color: #fff !important; filter: none; }

/* Edit | Delete links of the payment-method list */
html body:has(.admin-dashboard-wrapper) :is(.edit-pm-btn, .delete-pm-btn) {
    font: 500 11px/1 var(--tm-mono) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}
html body:has(.admin-dashboard-wrapper) .edit-pm-btn { color: var(--tm-blue-hi) !important; }
html body:has(.admin-dashboard-wrapper) .edit-pm-btn:hover { color: #fff !important; }
html body:has(.admin-dashboard-wrapper) .delete-pm-btn { color: #ff8aa0 !important; }
html body:has(.admin-dashboard-wrapper) .delete-pm-btn:hover { color: #fff !important; }
html body:has(.admin-dashboard-wrapper) td span[style*="margin:0 5px"] { color: var(--tm-muted) !important; }


/* ── 8 · Forms ──────────────────────────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .form-group label {
    margin-bottom: 9px;
    font: 500 11px/1.3 var(--tm-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tm-text-2);
}
html body:has(.admin-dashboard-wrapper) .form-group small, html body:has(.admin-dashboard-wrapper) .form-group > p { font-family: var(--tm-font); line-height: 1.55; }

html body:has(.admin-dashboard-wrapper) .input-wrapper i { left: 18px; font-size: 14px; color: #6f7d9b; opacity: 1; pointer-events: none; transition: color .16s ease; }
html body:has(.admin-dashboard-wrapper) .input-wrapper:focus-within i { color: var(--tm-blue-hi); }

html body:has(.admin-dashboard-wrapper) :is(.input-field, #wc-order-search) {
    background: var(--tm-field) !important;
    border: 1px solid var(--tm-line-hi) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--tm-font);
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
html body:has(.admin-dashboard-wrapper) :is(.input-field, #wc-order-search):hover { border-color: rgba(140, 165, 220, .45) !important; }
html body:has(.admin-dashboard-wrapper) :is(.input-field, #wc-order-search):focus {
    outline: none;
    background: #0a1222 !important;
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px rgba(61, 123, 255, .2) !important;
}
html body:has(.admin-dashboard-wrapper) :is(.input-field, #wc-order-search)::placeholder { color: #6b7893; }
html body:has(.admin-dashboard-wrapper) .input-field[readonly] { color: var(--tm-text-2) !important; }
/* the template pads every field 50px on the left to clear an icon: fields that have no icon do not need it */
html body:has(.admin-dashboard-wrapper) :not(.input-wrapper) > .input-field { padding-left: 16px; }
html body:has(.admin-dashboard-wrapper) select.input-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236ea2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 18px !important;
}
html body:has(.admin-dashboard-wrapper) select.input-field option { background: #0b1220; color: #fff; }
html body:has(.admin-dashboard-wrapper) input[type="checkbox"], html body:has(.admin-dashboard-wrapper) input[type="radio"] { accent-color: var(--tm-blue); }

html body:has(.admin-dashboard-wrapper) .form-section-divider { margin: 30px 0 20px; }
html body:has(.admin-dashboard-wrapper) .form-group label[style*="text-transform:none" i] { font: 500 14px/1.4 var(--tm-font); letter-spacing: 0; color: #fff; }
html body:has(.admin-dashboard-wrapper) .form-section-divider span { font: 500 11px/1 var(--tm-mono); letter-spacing: .2em; color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .form-section-divider::after { background: linear-gradient(to right, var(--tm-line-hi), transparent); }

/* the sandbox / test-callback box */
html body:has(.admin-dashboard-wrapper) .ct-sandbox-tool { background: rgba(25, 201, 142, .05) !important; border: 1px dashed rgba(25, 201, 142, .5) !important; padding: 22px !important; }

/* toggle switch */
html body:has(.admin-dashboard-wrapper) .ct-switch { width: 50px; height: 26px; }
html body:has(.admin-dashboard-wrapper) .ct-switch-slider { background: #101a2e; border: 1px solid var(--tm-line-hi); transition: background .16s ease, border-color .16s ease; }
html body:has(.admin-dashboard-wrapper) .ct-switch-slider::before { left: 2px; bottom: 2px; width: 20px; height: 20px; background: var(--tm-muted); transition: transform .16s ease, background .16s ease; }
html body:has(.admin-dashboard-wrapper) .ct-switch input:checked + .ct-switch-slider { background: var(--tm-grad); border-color: transparent; }
html body:has(.admin-dashboard-wrapper) .ct-switch input:checked + .ct-switch-slider::before { background: #fff; transform: translateX(24px); }

/* radio cards (crypto gateway, boost scope). The boost-scope cards are <label>s inside a .form-group, which would
   otherwise hand them the small uppercase mono look of a field label */
html body:has(.admin-dashboard-wrapper) .ct-gw-options { gap: 14px; }
html body:has(.admin-dashboard-wrapper) .form-group label:is(.ct-gw-option, .ct-switch) { margin: 0; }
html body:has(.admin-dashboard-wrapper) .form-group label.ct-gw-option {
    display: flex;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
html body:has(.admin-dashboard-wrapper) .ct-gw-option {
    padding: 18px 20px;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    background: rgba(255, 255, 255, .02);
    transition: border-color .16s ease, background .16s ease;
}
html body:has(.admin-dashboard-wrapper) .ct-gw-option:hover { border-color: rgba(61, 123, 255, .6); background: rgba(61, 123, 255, .06); }
html body:has(.admin-dashboard-wrapper) .ct-gw-option.selected { border-color: var(--tm-blue); background: linear-gradient(135deg, rgba(61, 123, 255, .18), rgba(61, 123, 255, .04)); box-shadow: inset 2px 0 0 var(--tm-blue); }
html body:has(.admin-dashboard-wrapper) .ct-gw-radio { width: 14px; height: 14px; margin: 5px 6px 0 3px; border: 1px solid #6f7d9b; transform: rotate(45deg); }
html body:has(.admin-dashboard-wrapper) .ct-gw-option.selected .ct-gw-radio { border-color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .ct-gw-option.selected .ct-gw-radio::after { inset: 2px; background: var(--tm-grad); }
html body:has(.admin-dashboard-wrapper) .ct-gw-name { font: 600 15px/1.3 var(--tm-display); letter-spacing: -.01em; }
html body:has(.admin-dashboard-wrapper) .ct-gw-name i { color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .ct-gw-desc { font-size: 12.5px; line-height: 1.5; color: var(--tm-muted); }


/* ── 9 · Tabs (All Reports) ─────────────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) .reports-tabs {
    gap: 0;
    margin: 0 0 22px;
    padding: 0 6px;
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--tm-line);
}
html body:has(.admin-dashboard-wrapper) .report-tab {
    position: relative;
    padding: 17px 20px;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tm-muted);
    font: 600 13.5px/1 var(--tm-font);
    transition: color .16s ease, background .16s ease;
}
html body:has(.admin-dashboard-wrapper) .report-tab i { color: var(--tm-dim); transition: color .16s ease; }
html body:has(.admin-dashboard-wrapper) .report-tab:hover { background: rgba(61, 123, 255, .07); color: #fff; border: 0; }
html body:has(.admin-dashboard-wrapper) .report-tab.active { background: linear-gradient(180deg, rgba(61, 123, 255, .14), rgba(61, 123, 255, 0)); color: #fff; border: 0; }
html body:has(.admin-dashboard-wrapper) .report-tab.active i, html body:has(.admin-dashboard-wrapper) .report-tab:hover i { color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .report-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tm-grad); }

html body:has(.admin-dashboard-wrapper) .profits-subtabs { gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--tm-line); }
html body:has(.admin-dashboard-wrapper) .profit-subtab {
    padding: 9px 16px;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--tm-line-hi);
    border-radius: 0;
    color: var(--tm-muted);
    font: 500 13px/1 var(--tm-font);
}
html body:has(.admin-dashboard-wrapper) .profit-subtab:hover { background: transparent; border-color: var(--tm-blue); color: #fff; }
html body:has(.admin-dashboard-wrapper) .profit-subtab.active { background: rgba(61, 123, 255, .2); border-color: var(--tm-blue); color: #fff; }


/* ── 10 · All Reports → General: per-user stat tiles ────────────────────── */
html body:has(.admin-dashboard-wrapper) .general-stats-grid { gap: 16px; }
html body:has(.admin-dashboard-wrapper) .general-stat-card:has(.icon-member-since, .icon-investment-payment, .icon-total-balance) { --kc: 34, 211, 238; }
html body:has(.admin-dashboard-wrapper) .general-stat-card:has(.icon-active-packages, .icon-total-referrals) { --kc: 139, 123, 255; }
html body:has(.admin-dashboard-wrapper) .general-stat-card:has(.icon-profit-packages, .icon-profit-referrals) { --kc: 25, 201, 142; }
html body:has(.admin-dashboard-wrapper) .general-stat-card:has(.icon-total-withdrawals) { --kc: 255, 92, 122; }
html body:has(.admin-dashboard-wrapper) .general-stat-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 22px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: linear-gradient(90deg, rgb(var(--kc)), rgba(var(--kc), 0) 70%) top left / 100% 2px no-repeat, var(--tm-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 26px 50px -34px rgba(0, 0, 0, .85);
}
html body:has(.admin-dashboard-wrapper) .general-stat-card::before {
    z-index: -1;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 180px;
    background: radial-gradient(closest-side, rgba(var(--kc), .2), transparent);
}
html body:has(.admin-dashboard-wrapper) .general-stat-card .general-stat-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 0;
    font-size: 17px;
    color: rgb(var(--kc));
    background: rgba(var(--kc), .14);
    border: 1px solid rgba(var(--kc), .45);
}
html body:has(.admin-dashboard-wrapper) .general-stat-label { margin-bottom: 10px; font: 500 10.5px/1.4 var(--tm-mono); letter-spacing: .12em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .general-stat-value { font: 600 clamp(21px, 1.9vw, 27px)/1.15 var(--tm-display); letter-spacing: -.03em; color: #fff; }
html body:has(.admin-dashboard-wrapper) .msi-ago { margin-top: 6px; font: 500 11px/1.3 var(--tm-mono); letter-spacing: .06em; color: var(--tm-cyan); }


/* ── 11 · Charts: category accordion, symbol cards, symbol picker ───────── */
html body:has(.admin-dashboard-wrapper) .ct-chart-category-list { gap: 14px; }
html body:has(.admin-dashboard-wrapper) .ct-chart-category { border: 1px solid var(--tm-line); border-radius: 0; background: rgba(255, 255, 255, .02); }
html body:has(.admin-dashboard-wrapper) .ct-chart-category[open] { border-color: var(--tm-line-hi); }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-head { padding: 16px 20px; color: #fff; transition: background .16s ease; }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-head:hover { background: rgba(61, 123, 255, .07); }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-head::before { color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-head strong { font: 600 16px/1.2 var(--tm-display); letter-spacing: -.01em; }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-head small { font: 500 11px/1 var(--tm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .ct-chart-category-body { padding: 4px 20px 20px; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-card {
    padding: 12px 14px;
    border: 1px solid var(--tm-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .03);
    transition: border-color .16s ease, background .16s ease;
}
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-card:hover { border-color: var(--tm-line-hi); background: rgba(61, 123, 255, .06); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-card.is-drop-target { border-color: var(--tm-blue); background: rgba(61, 123, 255, .14); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-grip { color: var(--tm-dim); }
/* the coin tile keeps its letter but loses the per-coin colour: one blue tile for every symbol */
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-icon { border-radius: 0; background: rgba(61, 123, 255, .16); border: 1px solid rgba(61, 123, 255, .5); color: var(--tm-blue-hi); box-shadow: none; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-copy strong { font: 600 13px/1.2 var(--tm-mono); letter-spacing: .02em; color: #fff; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-copy small { font-family: var(--tm-font); color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-remove { border-radius: 0; border: 1px solid rgba(255, 92, 122, .4); background: rgba(255, 92, 122, .1); color: #ff8aa0; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-remove:hover { background: #ff5c7a; border-color: #ff5c7a; color: #fff; }
html body:has(.admin-dashboard-wrapper) .ct-chart-empty { color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .ct-chart-save-state { margin-right: auto; align-self: center; font: 500 11.5px/1.3 var(--tm-mono); letter-spacing: .04em; color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-menu { background: linear-gradient(180deg, #121d33 0%, #0b1324 100%); border: 1px solid var(--tm-line-hi); border-radius: 0; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-option { border-radius: 0; color: var(--tm-text); transition: background .12s ease; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-option span { font: 500 13px/1.2 var(--tm-mono); letter-spacing: .02em; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-option:hover, html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-option:focus { background: rgba(61, 123, 255, .16); }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-option small { color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .ct-chart-chip { padding: 5px 10px; border-radius: 0; border: 1px solid rgba(61, 123, 255, .45); background: rgba(61, 123, 255, .12); color: var(--tm-blue-hi); font: 500 11.5px/1.2 var(--tm-mono); letter-spacing: .04em; }
html body:has(.admin-dashboard-wrapper) .ct-chart-symbol-trigger { text-align: left; }


/* ── 12 · Modals ────────────────────────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) :is(.ct-modal-overlay, #wc-order-modal) {
    background: rgba(3, 6, 12, .8) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
/* modals centre themselves in the space below the WordPress toolbar, with a small gutter on narrow screens */
html body:has(.admin-dashboard-wrapper) .ct-modal-overlay { padding: calc(var(--wp-admin--admin-bar--height, 0px) + 12px) 12px 12px; }
html body:has(.admin-dashboard-wrapper) #wc-order-modal { padding-top: var(--wp-admin--admin-bar--height, 0px); }
html body:has(.admin-dashboard-wrapper) .ct-modal,
html body:has(.admin-dashboard-wrapper) #wc-order-modal > div {
    background: var(--tm-strip) top left / 100% 2px no-repeat, linear-gradient(180deg, #111b2f 0%, #0a111f 100%) !important;
    color: var(--tm-text);
    border: 1px solid var(--tm-line-hi) !important;
    border-radius: 0 !important;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
html body:has(.admin-dashboard-wrapper) .ct-modal-header,
html body:has(.admin-dashboard-wrapper) #wc-order-modal > div > div:first-child { padding: 20px 26px !important; border-bottom: 1px solid var(--tm-line) !important; }
html body:has(.admin-dashboard-wrapper) .ct-modal-header h2,
html body:has(.admin-dashboard-wrapper) #wc-order-modal h3 { font: 600 18px/1.25 var(--tm-display) !important; letter-spacing: -.01em; color: #fff !important; }
html body:has(.admin-dashboard-wrapper) :is(.ct-modal-close, #wc-order-modal-close) {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tm-line-hi) !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--tm-text-2) !important;
    font-size: 20px !important;
    line-height: 1;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
html body:has(.admin-dashboard-wrapper) :is(.ct-modal-close, #wc-order-modal-close):hover { background: rgba(255, 92, 122, .16) !important; border-color: rgba(255, 92, 122, .55) !important; color: #fff !important; }
html body:has(.admin-dashboard-wrapper) .ct-modal-body { padding: 26px; }
html body:has(.admin-dashboard-wrapper) .ct-modal-footer { padding: 18px 26px; background: rgba(255, 255, 255, .02); border-top: 1px solid var(--tm-line); }
/* the two long modals size their scrolling body as "85vh minus 120px" — this header and footer need a little more room than that */
html body:has(.admin-dashboard-wrapper) :is(#user-history-content, #user-transactions-content) { max-height: calc(85vh - 152px) !important; }
/* the symbol list opens inside the modal (growing it) instead of hanging out of it and being clipped */
html body:has(.admin-dashboard-wrapper) #ct-chart-category-modal .ct-modal { max-height: 92vh; overflow-y: auto; }
html body:has(.admin-dashboard-wrapper) #ct-chart-category-modal .ct-chart-symbol-menu { position: static; max-height: none; margin-top: 8px; box-shadow: none; }

html body:has(.admin-dashboard-wrapper) .user-detail-item label { margin-bottom: 7px; font: 500 10.5px/1.3 var(--tm-mono); letter-spacing: .12em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .user-detail-item span { font: 500 15px/1.4 var(--tm-font); color: #fff; }

html body:has(.admin-dashboard-wrapper) .vwd-label { font: 500 10px/1.3 var(--tm-mono); letter-spacing: .14em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .vwd-value { font: 500 14px/1.45 var(--tm-font); color: var(--tm-text); }
html body:has(.admin-dashboard-wrapper) .vwd-gold { color: var(--tm-blue-hi); font-family: var(--tm-display); font-weight: 600; }
html body:has(.admin-dashboard-wrapper) .vwd-green { color: var(--tm-up); font-family: var(--tm-display); font-weight: 600; }
html body:has(.admin-dashboard-wrapper) .vwd-address-wrap { background: var(--tm-field); border: 1px solid var(--tm-line-hi); border-radius: 0; }
html body:has(.admin-dashboard-wrapper) .vwd-address-val { font-family: var(--tm-mono); color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .vwd-copy-btn { border-radius: 0; background: rgba(61, 123, 255, .14); border: 1px solid rgba(61, 123, 255, .45); color: var(--tm-blue-hi); }
html body:has(.admin-dashboard-wrapper) .vwd-copy-btn:hover { background: rgba(61, 123, 255, .3); color: #fff; }

/* order-detail modal (all inline styles + the small <style> beside it) */
html body:has(.admin-dashboard-wrapper) .wco-detail-label, html body:has(.admin-dashboard-wrapper) .wco-items-title { font: 500 10.5px/1.3 var(--tm-mono); letter-spacing: .12em; color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .wco-detail-val { font: 500 14px/1.4 var(--tm-font); color: var(--tm-text); }
html body:has(.admin-dashboard-wrapper) .wco-item-row { background: rgba(255, 255, 255, .03); border: 1px solid var(--tm-line); border-radius: 0; }
html body:has(.admin-dashboard-wrapper) .wco-item-name { color: #fff; }
html body:has(.admin-dashboard-wrapper) .wco-item-meta { color: var(--tm-muted); }
html body:has(.admin-dashboard-wrapper) .wco-item-total { font-family: var(--tm-display); color: var(--tm-up); }
html body:has(.admin-dashboard-wrapper) .wco-verif-set-btn { font-family: var(--tm-mono) !important; font-weight: 500 !important; letter-spacing: .1em !important; }
html body:has(.admin-dashboard-wrapper) #wc-order-modal-body div[style*="background:#1a1a1a" i] { background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--tm-line); }

/* cards drawn by the user-history script */
html body:has(.admin-dashboard-wrapper) .ct-modal-body div[style*="background: #111" i] { background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--tm-line) !important; }
html body:has(.admin-dashboard-wrapper) .ct-modal-body div[style*="background: #111" i] > span { font: 500 10.5px/1.3 var(--tm-mono) !important; letter-spacing: .12em; }
html body:has(.admin-dashboard-wrapper) .ct-modal-body div[style*="background: #111" i] > div { font-family: var(--tm-display) !important; letter-spacing: -.02em; }

/* Plans → Add / Edit plan: this modal has its own markup (an inline-styled overlay around an .admin-content-card) */
html body:has(.admin-dashboard-wrapper) #ct-plan-modal {
    background: rgba(3, 6, 12, .8) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px) !important;
}
html body:has(.admin-dashboard-wrapper) #ct-plan-modal > .admin-content-card {
    background: var(--tm-strip) top left / 100% 2px no-repeat, linear-gradient(180deg, #111b2f 0%, #0a111f 100%);
    border-color: var(--tm-line-hi);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
html body:has(.admin-dashboard-wrapper) #ct-plan-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tm-line-hi) !important;
    background: transparent !important;
    color: var(--tm-text-2) !important;
    font-size: 20px !important;
    line-height: 1;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
html body:has(.admin-dashboard-wrapper) #ct-plan-close:hover { background: rgba(255, 92, 122, .16) !important; border-color: rgba(255, 92, 122, .55) !important; color: #fff !important; }
html body:has(.admin-dashboard-wrapper) #ct-plan-form label { display: block; font: 500 11px/1.3 var(--tm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tm-text-2); }
html body:has(.admin-dashboard-wrapper) #ct-plan-form label .input-field { display: block; width: 100%; margin-top: 9px; }
html body:has(.admin-dashboard-wrapper) #ct-plan-form .admin-btn { grid-column: 1 / -1; justify-self: start; }

/* search suggestions */
html body:has(.admin-dashboard-wrapper) #autocomplete-dropdown { background: #0b1324 !important; border: 1px solid var(--tm-line-hi) !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
html body:has(.admin-dashboard-wrapper) .autocomplete-item { background: transparent !important; border-bottom: 1px solid var(--tm-line) !important; }
html body:has(.admin-dashboard-wrapper) .autocomplete-item:hover { background: rgba(61, 123, 255, .14) !important; }
/* the person icon is absolutely positioned by the template's .input-wrapper rule (the list sits inside one), which is why the
   text carries a 50px left padding: keep that, and just make the icon a small square tile */
html body:has(.admin-dashboard-wrapper) .autocomplete-item > i { left: 15px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 15px !important; background: rgba(61, 123, 255, .14); border: 1px solid rgba(61, 123, 255, .45); }
html body:has(.admin-dashboard-wrapper) .autocomplete-item > div { padding-left: 50px !important; }
html body:has(.admin-dashboard-wrapper) .autocomplete-item strong { margin-bottom: 2px !important; font-weight: 600; }


/* ── 13 · Inline colours set by the templates → the Terminal palette ─────── */
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :is([style*="color:#f3ba2f" i], [style*="color: #f3ba2f" i], [style*="color:#7000ff" i], [style*="color: #7000ff" i]) { color: var(--tm-blue-hi) !important; }
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :is([style*="color:#00f5d4" i], [style*="color: #00f5d4" i]) { color: var(--tm-cyan) !important; }
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :is([style*="color:#4a5568" i], [style*="color:#888" i], [style*="color: #888" i]) { color: var(--tm-muted) !important; }
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) :is(p, small)[style*="color:#848e9c" i] { line-height: 1.6; }

/* status / result messages that the scripts colour and show */
html body:has(.admin-dashboard-wrapper) :is(#ct-bot-save-msg, #global-settings-msg, #payment-settings-msg, #reject-wd-msg, #pm-modal-msg, #ct-gw-msg, .ct-gw-msg, #ct-rs-msg, #sandbox-result-msg) {
    padding: 10px 14px;
    line-height: 1.5;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-left: 3px solid currentColor;
}


/* ── 14 · Phones and tablets ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* the sidebar becomes a drawer that the ☰ button in each page header opens */
    html body:has(.admin-dashboard-wrapper) .admin-sidebar {
        position: fixed;
        top: var(--wp-admin--admin-bar--height, 0px);
        bottom: 0;
        left: -262px;
        width: 248px;
        height: auto;
        z-index: 1000;
        visibility: hidden;   /* while it is off-screen its links are neither focusable nor read out */
        transition: left .28s cubic-bezier(.22, .9, .22, 1), visibility 0s linear .28s;
        box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .8);
    }
    html body:has(.admin-dashboard-wrapper) .admin-sidebar.active { left: 0; visibility: visible; transition-delay: 0s; }
    html body:has(.admin-dashboard-wrapper) .admin-mobile-toggle { display: grid; }
    html body:has(.admin-dashboard-wrapper) .admin-main { padding: 22px 16px 56px; }
    html body:has(.admin-dashboard-wrapper) .admin-header { margin-bottom: 24px; padding: 0 0 20px; }
    html body:has(.admin-dashboard-wrapper) .admin-content-card { padding: 20px; }
    html body:has(.admin-dashboard-wrapper) .admin-welcome h1 { font-size: 24px; }
    html body:has(.admin-dashboard-wrapper) .admin-welcome h1::after { margin-top: 12px; }
    html body:has(.admin-dashboard-wrapper) .admin-user-pill span { display: none; }
    html body:has(.admin-dashboard-wrapper) .admin-user-pill { padding: 0; }
    html body:has(.admin-dashboard-wrapper) .reports-tabs { overflow-x: auto; flex-wrap: nowrap; }
    html body:has(.admin-dashboard-wrapper) .report-tab { white-space: nowrap; }
}
@media (max-width: 760px) {
    /* KPI tiles: two to a row, icon above the figure */
    html body:has(.admin-dashboard-wrapper) .admin-reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
    html body:has(.admin-dashboard-wrapper) .admin-report-card { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; padding: 16px 14px 14px; }
    html body:has(.admin-dashboard-wrapper) .admin-report-card .arc-icon { width: 38px; height: 38px; font-size: 15px; }
    html body:has(.admin-dashboard-wrapper) .arc-label { font-size: 10px; letter-spacing: .1em; }
    html body:has(.admin-dashboard-wrapper) .arc-value { margin: 4px 0 3px; font-size: 20px; }
    /* All Reports → General: the same two-up tiles */
    html body:has(.admin-dashboard-wrapper) .general-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html body:has(.admin-dashboard-wrapper) .general-stat-card { padding: 16px 14px 14px; }
    html body:has(.admin-dashboard-wrapper) .general-stat-card .general-stat-icon { width: 38px; height: 38px; margin-bottom: 14px; font-size: 15px; }
    html body:has(.admin-dashboard-wrapper) .general-stat-label { font-size: 10px; letter-spacing: .1em; }
    html body:has(.admin-dashboard-wrapper) .general-stat-value { font-size: 20px; }
    /* the signed-in admin's avatar sits at the top right of the Overview header instead of wrapping onto its own row */
    html body:has(.admin-dashboard-wrapper) .admin-header:has(.admin-user-pill) { position: relative; padding-right: 56px; }
    html body:has(.admin-dashboard-wrapper) .admin-header > div:has(> .admin-user-pill) { position: absolute; top: 0; right: 0; }
    html body:has(.admin-dashboard-wrapper) #section-transactions > div[style*="repeat(3,1fr)"],
    html body:has(.admin-dashboard-wrapper) #ct-bot-settings-form,
    html body:has(.admin-dashboard-wrapper) #ct-global-settings-form > div,
    html body:has(.admin-dashboard-wrapper) #rs_boost_fields,
    html body:has(.admin-dashboard-wrapper) .ct-sandbox-tool > div[style*="grid"] { grid-template-columns: 1fr !important; }
    html body:has(.admin-dashboard-wrapper) .user-detail-grid, html body:has(.admin-dashboard-wrapper) .vwd-grid { grid-template-columns: 1fr; }
    html body:has(.admin-dashboard-wrapper) .vwd-full { grid-column: auto; }
    html body:has(.admin-dashboard-wrapper) .ct-modal { max-height: 92vh; overflow-y: auto; }
    html body:has(.admin-dashboard-wrapper) .ct-modal-header, html body:has(.admin-dashboard-wrapper) .ct-modal-body, html body:has(.admin-dashboard-wrapper) .ct-modal-footer { padding-left: 18px; padding-right: 18px; }
    html body:has(.admin-dashboard-wrapper) #wc-order-search { width: 100% !important; }
    html body:has(.admin-dashboard-wrapper) #section-transactions div[style*="position:relative"]:has(> #wc-order-search) { width: 100%; }
}
@media (max-width: 350px) {
    html body:has(.admin-dashboard-wrapper) :is(.admin-reports-grid, .general-stats-grid) { grid-template-columns: 1fr; }
}


/* ── 15 · Nothing here is rounded ───────────────────────────────────────── */
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) *,
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) *::before,
html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) *::after { border-radius: 0 !important; }
@media (prefers-reduced-motion: reduce) {
    html body:has(.admin-dashboard-wrapper) :is(.admin-dashboard-wrapper, .ct-modal-overlay) * { transition-duration: .01ms !important; }
    html body:has(.admin-dashboard-wrapper) .dashboard-section.active { animation: none; }
}


/* ── 16 · The WordPress toolbar (shown to signed-in administrators only: above the admin dashboard and the public pages) ── */
html body #wpadminbar { background: #070c17; border-bottom: 1px solid var(--tm-line); color: var(--tm-text-2); }
html body #wpadminbar :is(.ab-item, a.ab-item, .ab-label, #adminbarsearch::before) { color: var(--tm-text-2); font-family: var(--tm-font); }
html body #wpadminbar .ab-icon::before, html body #wpadminbar .ab-item::before { color: var(--tm-muted); }
html body #wpadminbar .ab-top-menu > li:hover > .ab-item,
html body #wpadminbar .ab-top-menu > li.hover > .ab-item,
html body #wpadminbar .ab-top-menu > li > .ab-item:focus { background: rgba(61, 123, 255, .14); color: #fff; }
html body #wpadminbar li:hover > .ab-item .ab-icon::before,
html body #wpadminbar li:hover > .ab-item::before,
html body #wpadminbar li.hover > .ab-item::before { color: var(--tm-blue-hi); }
html body #wpadminbar .menupop .ab-sub-wrapper,
html body #wpadminbar .ab-sub-wrapper { background: #0b1324; border: 1px solid var(--tm-line-hi); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
html body #wpadminbar .ab-submenu .ab-item, html body #wpadminbar .quicklinks .menupop ul li a { color: var(--tm-text-2); }
html body #wpadminbar .ab-submenu .ab-item:hover, html body #wpadminbar .quicklinks .menupop ul li a:hover { background: rgba(61, 123, 255, .12); color: #fff; }
html body #wpadminbar .quicklinks .menupop ul.ab-sub-secondary { background: #0d1628; }
html body #wpadminbar #adminbarsearch .adminbar-input { background: var(--tm-field); color: #fff; border-radius: 0; }
html body #wpadminbar .avatar { border-radius: 0; }
html body #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before { color: var(--tm-blue-hi); }


/* ==========================================================================
   ADMIN PORTAL — sign-in (templates/admin-login.php)
   The same stage as the member sign-in pages: the photograph full-screen, the logo above, ONE frosted-glass panel holding
   the heading, the paragraph, the embossed divider and the form. (Grid + display-free layout as in login.css: the glass is
   the card's ::before behind rows 2–4, so the markup stays as it is.)
   ========================================================================== */
html body:has(.admin-login-wrap) {
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: #05080f;
}
/* the photograph, toned to monochrome so it sits in the blue family, then a navy wash with blue light and a faint grid */
html body:has(.admin-login-wrap)::before {
    content: '';
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2000') no-repeat center center;
    background-size: cover;
    filter: grayscale(1) contrast(1.15) brightness(.82);
}
html body:has(.admin-login-wrap)::after {
    content: '';
    position: fixed;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(140, 180, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(140, 180, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
        radial-gradient(900px 560px at 88% -6%, rgba(47, 107, 255, .42), transparent 65%),
        radial-gradient(800px 560px at 6% 106%, rgba(34, 211, 238, .22), transparent 65%),
        linear-gradient(180deg, rgba(5, 9, 20, .70) 0%, rgba(8, 20, 50, .62) 50%, rgba(5, 9, 20, .82) 100%);
}
html body .bg-glow { display: none; }
html body .admin-login-wrap :is(h1, h2, h3, h4) { font-family: var(--tm-display); letter-spacing: -.02em; }
html body .admin-login-wrap *, html body .admin-login-wrap *::before, html body .admin-login-wrap *::after { border-radius: 0 !important; }

html body .admin-login-wrap { position: relative; z-index: 10; width: 100%; max-width: 480px; margin: auto; padding: 48px 20px; }
/* behind the column: a soft blue light for the glass to blur, under a dark scrim that keeps text readable on a busy photo */
html body .admin-login-wrap::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -40px -130px;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(3, 7, 16, .52) 0%, rgba(3, 7, 16, .30) 58%, transparent 100%),
        radial-gradient(closest-side, rgba(47, 107, 255, .34), rgba(34, 211, 238, .09) 62%, transparent 100%);
}

html body .admin-login-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
    color: var(--tm-text);
    color-scheme: dark;
    animation: adminRise .45s ease-out;
}
/* row 1 — the logo, outside the glass */
html body .admin-login-card .admin-logo {
    --bt-tile: 56px;
    --bt-text: 32px;
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    display: flex;
    margin: 0 0 28px;
}
/* rows 2–4 — the glass */
html body .admin-login-card::before {
    content: '';
    grid-row: 2 / 5;
    grid-column: 1;
    border: 1px solid rgba(160, 188, 245, .26);
    background:
        linear-gradient(90deg, #3d7bff 0%, #22d3ee 38%, rgba(34, 211, 238, 0) 100%) top left / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(48, 78, 138, .36) 0%, rgba(12, 22, 46, .52) 55%, rgba(8, 15, 32, .62) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .02), 0 40px 90px -30px rgba(0, 0, 0, .85);
}
/* everything ON the glass is positioned, so it paints above the glass layer */
html body .admin-login-card h1 {
    position: relative;
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    padding: 38px 32px 0;
    font: 600 28px/1.15 var(--tm-display);
    letter-spacing: -.025em;
    color: #fff;
}
html body .admin-login-card p {
    position: relative;
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    padding: 12px 32px 0;
    font: 400 14.5px/1.6 var(--tm-font);
    color: #c3cee4;
}
/* the embossed divider: bright top edge, soft body, dark underside — fading out towards the ends — with a small diamond set into it */
html body .admin-login-card p::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 28px;
    background:
        linear-gradient(90deg, rgba(205, 225, 255, 0), rgba(205, 225, 255, .55) 16%, rgba(205, 225, 255, .55) 84%, rgba(205, 225, 255, 0)) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(110, 150, 225, 0), rgba(110, 150, 225, .22) 16%, rgba(110, 150, 225, .22) 84%, rgba(110, 150, 225, 0)) 0 1px / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(2, 6, 16, 0), rgba(2, 6, 16, .85) 16%, rgba(2, 6, 16, .85) 84%, rgba(2, 6, 16, 0)) 0 2px / 100% 1px no-repeat;
}
html body .admin-login-card::after {
    content: '';
    grid-row: 3;
    grid-column: 1;
    justify-self: center;
    align-self: end;
    width: 9px;
    height: 9px;
    margin-bottom: -3px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #2f6bff, #21d4f2);
    box-shadow: 0 0 0 3px rgba(14, 26, 54, .55), 0 0 14px rgba(34, 211, 238, .55);
    pointer-events: none;
}
/* row 4 — the form */
html body #ct-admin-login-form { position: relative; grid-row: 4; grid-column: 1; padding: 28px 32px 32px; text-align: left; }
html body .admin-login-card .form-group { margin-bottom: 18px; }
html body .admin-login-card .form-group label { margin-bottom: 9px; font: 500 11px/1.3 var(--tm-mono); letter-spacing: .1em; color: #a8b5cf; }
html body .admin-login-card .input-field {
    height: 52px;
    padding: 0 16px;
    background: rgba(4, 8, 16, .55) !important;
    border: 1px solid rgba(160, 188, 245, .28) !important;
    border-radius: 0;
    color: #fff;
    font: 400 15px/1.4 var(--tm-font);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
html body .admin-login-card .input-field:hover { border-color: rgba(160, 188, 245, .5) !important; }
html body .admin-login-card .input-field:focus {
    outline: none;
    background: rgba(4, 8, 16, .75) !important;
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px rgba(61, 123, 255, .22);
}
html body .admin-login-card .input-field::placeholder { color: #6b7893; }
html body .admin-login-card .input-field:-webkit-autofill,
html body .admin-login-card .input-field:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    box-shadow: 0 0 0 1000px #0b1426 inset !important;
}
html body .admin-login-card .admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 22px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--tm-grad);
    color: #fff;
    font: 600 15px/1 var(--tm-font);
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: 0 12px 28px -12px rgba(47, 107, 255, .8);
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
html body .admin-login-card .admin-btn:hover { background: var(--tm-grad); filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(47, 107, 255, .9); }
html body .admin-login-card .admin-btn:active { transform: none; filter: brightness(.96); }
html body .admin-login-card .admin-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html body .admin-login-card .admin-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; filter: none; }
html body #admin-message { margin-top: 0; margin-bottom: 4px; padding: 12px 14px; font: 400 13.5px/1.5 var(--tm-font); text-align: left; }
html body #admin-message.error   { background: rgba(255, 92, 122, .12); color: #ffa3b4; border: 1px solid rgba(255, 92, 122, .42); border-left: 3px solid #ff5c7a; }
html body #admin-message.success { background: rgba(25, 201, 142, .12); color: #5eeab4; border: 1px solid rgba(25, 201, 142, .42); border-left: 3px solid #19c98e; }

@media (max-width: 560px) {
    html body .admin-login-wrap { padding: 28px 14px; }
    html body .admin-login-wrap::before { inset: -20px -30px; }
    html body .admin-login-card .admin-logo { --bt-tile: 48px; --bt-text: 27px; margin-bottom: 22px; }
    html body .admin-login-card h1 { padding: 30px 20px 0; font-size: 25px; }
    html body .admin-login-card p { padding: 10px 20px 0; }
    html body .admin-login-card p::after { margin-top: 24px; }
    html body #ct-admin-login-form { padding: 24px 20px 26px; }
}
@media (max-width: 350px) {
    html body .admin-login-card .admin-logo { --bt-tile: 42px; --bt-text: 22px; }
    html body .admin-login-card h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .admin-login-card { animation: none; }
}