/* Logo swap — dark chip on dark theme, light chip on light theme */
.theme-logo-light { display: none; }
html[data-theme="light"] .theme-logo-dark { display: none; }
html[data-theme="light"] .theme-logo-light { display: block; }

/* Faucetrix — matrix theme base styles + shared UI animations. */

/* ============ MOBILE PLATFORM BASELINE ===================================
   Phase 0 of PACKS_COSMETICS_INVENTORY_PLAN.md (skill: mobile-native).
   Requires viewport-fit=cover on every page <head>, already applied to
   views/user/header.php, views/guest/header.php, views/guest/maintenance.php,
   admin/views/header.php and api/captcha/adslab-monetized/forward.php.
   Without that meta tag every env() below resolves to 0px.
   --------------------------------------------------------------------- */

html {
    /* iOS/Android paint a translucent highlight over any tapped element with a
       click handler. It is the loudest "this is a website" signal and it fights
       the :active press feedback set further down. */
    -webkit-tap-highlight-color: transparent;

    /* Stops landscape font inflation on iOS. */
    -webkit-text-size-adjust: 100%;
     --radius-ui: 8px;
}

/* iOS Safari zooms the page when focus lands on an input whose computed
   font-size is under 16px, and does not zoom back out on blur, leaving the
   user on a cropped and drifted layout. Never fix this with
   user-scalable=no or maximum-scale=1 - that is an accessibility failure.
   Scoped to coarse pointers because /admin deliberately uses compact
   controls (admin-responsive.css) and must not grow them on desktop. */
@media (pointer: coarse) {
    input,
    textarea,
    select {
        font-size: 16px;
    }
}

/* Kills the ~300ms click delay: tells the browser this element will never
   double-tap-zoom, so click fires immediately. */
button,
a,
[role="button"],
[role="tab"],
.fx-pill,
.tappable {
    touch-action: manipulation;
}

/* Text that is a CONTROL should not be selectable, or iOS selects the button
   label mid-animation. Never put user-select:none on body - users copy
   addresses, error messages and order numbers, and that is content. */
button,
a,
[role="button"],
[role="tab"],
.fx-pill,
.tab,
.chip,
.drag-handle {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html[data-theme="light"] {
    --matrix-bg: #d3dcd3;
}

/* ============ LIGHT THEME ================================================
   The site's dark look is applied by Tailwind utility classes (bg-white/5,
   text-gray-100, border-matrix-green/20, bg-black/40, ...) whose selectors
   have lower specificity than `html[data-theme="light"] .x`, so these
   overrides win regardless of cascade order. Selectors key off the <html>
   attribute because theme.js sets it synchronously in <head> (no flash);
   the <body> attribute only becomes available at DOMContentLoaded.
   --------------------------------------------------------------------- */

/* Surfaces & containers — light-but-not-white sage palette */
html[data-theme="light"] .bg-matrix-bg,
html[data-theme="light"] .bg-matrix-bg\/90,
html[data-theme="light"] .bg-matrix-bg\/75,
html[data-theme="light"] .bg-matrix-bg\/50 {
    background-color: #d3dcd3;
}
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/15 {
    background-color: #e2e9e2;
}
html[data-theme="light"] .bg-black\/40 {
    background-color: #c9d2c9;
}
html[data-theme="light"] .bg-black\/50 {
    background-color: #c9d2c9;
}

/* Text — invert the gray ramp used on the dark background */
html[data-theme="light"] .text-gray-100 { color: #111827; }
html[data-theme="light"] .text-gray-200 { color: #1f2937; }
html[data-theme="light"] .text-gray-300 { color: #374151; }
html[data-theme="light"] .text-gray-400 { color: #4b5563; }
html[data-theme="light"] .text-gray-500 { color: #6b7280; }
html[data-theme="light"] .text-white     { color: #111827; }

/* Accent & status — the primary/accent colors come from the DB via
   `--ct-primary`/`--ct-accent` set inline on <html> (same source as the
   Tailwind `matrix.green`/`matrix.bg` config), so light mode follows
   whatever the admin picked instead of a hardcoded green. */
html[data-theme="light"] .text-matrix-green { color: var(--ct-primary, #00ff66); }
html[data-theme="light"] .text-red-400       { color: #c81e1e; }
html[data-theme="light"] .text-yellow-400    { color: #a16207; }
html[data-theme="light"] .text-yellow-500    { color: #a16207; }

/* Borders / dividers — shift the translucent primary to a readable tone */
html[data-theme="light"] .border-matrix-green,
html[data-theme="light"] .border-matrix-green\/10,
html[data-theme="light"] .border-matrix-green\/15,
html[data-theme="light"] .border-matrix-green\/20,
html[data-theme="light"] .border-matrix-green\/25,
html[data-theme="light"] .border-matrix-green\/30,
html[data-theme="light"] .border-matrix-green\/40,
html[data-theme="light"] .border-matrix-green\/50 {
    border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 40%, transparent);
}
html[data-theme="light"] .divide-matrix-green\/10 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 40%, transparent);
}
html[data-theme="light"] .ring-matrix-green\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ct-primary, #00ff66) 40%, transparent);
}
html[data-theme="light"] .border-gray-600    { border-color: #94a3b8; }
html[data-theme="light"] .border-white\/10   { border-color: rgba(0, 0, 0, 0.12); }
html[data-theme="light"] .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .border-yellow-500\/30,
html[data-theme="light"] .border-yellow-400\/40,
html[data-theme="light"] .border-red-400\/40 {
    border-color: rgba(0, 0, 0, 0.18);
}

/* Active nav / selected chips — keep the accent tint but grounded on the deck */
html[data-theme="light"] .bg-matrix-green\/5  { background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 10%, transparent); }
html[data-theme="light"] .bg-matrix-green\/10 { background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 14%, transparent); }
html[data-theme="light"] .bg-matrix-green\/15 { background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 20%, transparent); }
html[data-theme="light"] .bg-matrix-green\/20 { background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 24%, transparent); }
html[data-theme="light"] .bg-yellow-500\/10   { background-color: rgba(161, 98, 7, 0.12); }

/* Hover states — darken instead of lighten on the light theme */
@media (hover: hover) {
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.07); }
}
@media (hover: hover) {
html[data-theme="light"] .hover\:bg-matrix-green\/5:hover,
    html[data-theme="light"] .hover\:bg-matrix-green\/10:hover,
    html[data-theme="light"] .hover\:bg-matrix-green\/15:hover {
            background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 14%, transparent);
    }
}
@media (hover: hover) {
html[data-theme="light"] .hover\:bg-red-500\/10:hover { background-color: rgba(200, 30, 30, 0.10); }
}
@media (hover: hover) {
html[data-theme="light"] .hover\:border-matrix-green:hover,
    html[data-theme="light"] .hover\:border-matrix-green\/50:hover {
            border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 60%, transparent);
    }
}
@media (hover: hover) {
html[data-theme="light"] .hover\:border-gray-400:hover { border-color: #94a3b8; }
}

/* Shimmer skeleton — invert to a light tone */
html[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.09) 37%, rgba(0,0,0,0.05) 63%);
    background-size: 400% 100%;
}
html[data-theme="light"] .skeleton-gray {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Task cards (PTC / Shortlinks) — lift off the sage background */
html[data-theme="light"] .task-card {
    background-color: #e2e9e2;
    border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 35%, transparent);
}
@media (hover: hover) {
html[data-theme="light"] .task-card:hover {
            border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 60%, transparent);
            box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.25);
    }
}
html[data-theme="light"] .task-tab-btn:not(.active) {
    color: #4b5563;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}
@media (hover: hover) {
html[data-theme="light"] .task-tab-btn:not(.active):hover {
            color: #1f2937;
            background: rgba(0, 0, 0, 0.09);
            border-color: rgba(0, 0, 0, 0.2);
    }
}
html[data-theme="light"] .task-timer-badge {
    color: #4b5563;
    background: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .task-reward { color: var(--ct-primary, #00ff66); }
html[data-theme="light"] .task-start-btn.pending {
    background: rgba(0, 0, 0, 0.08);
    color: #6b7280;
}
html[data-theme="light"] .task-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
}

/* Offerwall provider cards */
html[data-theme="light"] .ow-provider-card {
    background-color: #e2e9e2;
    border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 35%, transparent);
}
@media (hover: hover) {
html[data-theme="light"] .ow-provider-card:hover {
            border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 60%, transparent);
            box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--ct-primary, #00ff66) 20%, transparent);
    }
}
@media (hover: hover) {
html[data-theme="light"] .ow-provider-card:hover::before { opacity: 0.06; }
}
html[data-theme="light"] .ow-badge {
    color: #374151;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.14);
}

/* Ads stay inside the content box at every viewport width. */
.ad-page-shell {
    width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 160px;
    gap: 1rem;
    align-items: start;
}

.ad-page-content {
    min-width: 0;
    overflow: hidden;
}

.ad-side-rail {
    width: 160px;
    min-width: 160px;
    overflow: hidden;
    position: sticky;
    top: 4rem;
    align-self: start;
}

.ad-side-rail .ad-slot {
    margin-block: 0;
}

.guest-ad-page-content {
    width: 100%;
    min-width: 0;
}

/* ---- Ad slots -------------------------------------------------------
   .ad-slot is the bare inner frame around a creative: it only reserves
   space and centres the unit. The visible card treatment lives on the
   .ad-box wrapper (see below), so the creative itself is never restyled
   or resized.                                                          */
.ad-slot {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    contain: layout paint;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.ad-creative {
    width: fit-content;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    background: none;
    border: 0;
    padding: 0;
    margin-top: 1rem;
}

/* ---- ad wrapper -------------------------------------------------------
   The wrapper is a real card (surface + border + radius + lift) so a
   300x250 reads as a deliberate, bounded slot instead of loose content
   floating under the page. The creative inside is still left at the exact
   size the network serves — only the frame around it is ours. */
.ad-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0 1.75rem;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-card, 12px);
    overflow: hidden;
}
html[data-theme='dark'] .ad-box {
    box-shadow: 0 0 0 1px rgba(184, 255, 56, 0.03), 0 20px 60px -30px rgba(0, 0, 0, 0.7);
}
html[data-theme='light'] .ad-box {
    box-shadow: 0 12px 30px -20px rgba(6, 16, 11, 0.15);
}

/* Centred 728x90 leaderboard, directly under the page title + description. */
.ad-box.ad-leaderboard {
    margin: 0 auto 1.5rem;
}

/* The single 300x250 that sits above the claim button: same card, but tight
   against the button so the two read as one control cluster. */
.ad-box.ad-single {
    margin: 0.25rem 0 1rem;
    padding: 0.65rem;
}

/* Under a card: generous air, still centred. */
.ad-box.ad-below-cards {
    text-align: center;
}

/* ---- 3x 300x250 row ---------------------------------------------------
   The ad-box row is nowrap per site preference, so the slots never wrap to a
   second line. A bare .ad-slot only carries width:100%, so inside the flex
   row every slot would demand the FULL column width; the 300px basis below
   keeps all units on one line. On a phone the media query hides slots 2 and
   3 so exactly one shows. Nothing is resized; the creative keeps the size
   its network serves. */
.ad-box.ad-below-cards > .ad-slot {
    flex: 0 1 300px;
    width: 300px;
    max-width: 100%;
}
@media (max-width: 639px) {
    .ad-box.ad-below-cards > .ad-slot:nth-child(n+2) { display: none; }
}
/* Below ~332px of column a 300px unit no longer fits. Scrolling shows the whole
   creative; clipping would hide the ad entirely. */
@media (max-width: 380px) {
    .ad-box.ad-below-cards { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ad-box.ad-below-cards > .ad-slot { flex: 0 0 300px; max-width: none; }
}

@media (max-width: 639px) {
    .ad-box { padding: 0.6rem; margin: 1rem 0 1.5rem; }
    .ad-box.ad-single { padding: 0.5rem; }
}

/* Two 300x250 side by side on wide screens. */
.ad-inline-pair {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.ad-inline-pair .ad-slot {
    flex: 0 1 300px;
    width: min(300px, 100%);
    max-width: 300px;
}

.ad-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: rgba(156, 163, 175, 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ct-primary, #00ff66) 4%, transparent) 0 1px, transparent 1px 10px);
}

.ad-placeholder-content small {
    color: rgba(156, 163, 175, 0.45);
    font-size: 0.6rem;
}

.ad-faucet-inline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.ad-faucet-inline .ad-slot {
    flex: 1 1 260px;
    width: min(300px, 100%);
    max-width: 300px;
    margin: 0;
}

.ad-type {
    max-width: 100%;
    overflow: hidden;
    z-index: 60;
}

.ad-type-inpage_push {
    width: min(100%, 728px);
    margin: 1rem auto;
}

.ad-type-interstitial,
.ad-type-popup {
    display: none;
}

.ad-type-interstitial.ad-type-visible,
.ad-type-popup.ad-type-visible {
    display: block;
    position: fixed;
    inset: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.76);
    overflow: auto;
}

.ad-type-interstitial > *,
.ad-type-popup > * {
    max-width: min(100%, 728px);
    margin: 10vh auto 0;
}

.ad-dismiss {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 1rem auto 0;
    border: 1px solid color-mix(in srgb, var(--ct-primary, #00ff66) 35%, transparent);
    color: #d1d5db;
    background: rgba(13, 17, 23, 0.9);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ad-type-popunder {
    display: none;
}

@media (max-width: 1199px) {
    .ad-page-shell {
        display: block;
        width: 100%;
    }

    .ad-side-rail {
        display: none;
    }
}

@media (max-width: 640px) {
    .ad-page-content {
        overflow-x: hidden;
    }

    .ad-slot {
        margin-block: 0.75rem;
    }
}

/* ============ Toast notifications (Phase 4 redesign) ============
 * Phone: bottom-center stack, slides up from the bottom edge (thumb reach).
 * md and up: top-right, slides in from the right, clear of the sticky top bar.
 * Type accent, icon chip and the life bar are all CSS - no dependency on the
 * Tailwind CDN scanning dynamically injected classes. */
#toast-container {
    position: fixed;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    left: 0;
    right: 0;
    bottom: 1rem;
    width: 100%;
    max-width: 24rem;
    padding-inline: 1rem;
    align-items: stretch;
    pointer-events: none;
}

@media (min-width: 768px) {
    #toast-container {
        top: 4.25rem;
        bottom: auto;
        left: auto;
        right: 0.5rem;
        max-width: 22.5rem;
        padding-inline: 0;
        align-items: flex-end;
    }
}

.toast-item {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    overflow: hidden;
    padding: 0.7rem 0.8rem;
    border-radius: 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-1, #e5e7eb);
    background: color-mix(in srgb, var(--surface, #0d1117) 96%, transparent);
    border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(130%);
    transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}

@media (min-width: 768px) {
    .toast-item {
        transform: translateX(120%);
    }
}

.toast-item.toast-show {
    opacity: 1;
    transform: none;
}

.toast-item.toast-hide {
    opacity: 0;
    transform: translateY(130%);
}

@media (min-width: 768px) {
    .toast-item.toast-hide {
        transform: translateX(120%);
    }
}

.toast-item .toast-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.45rem;
    font-size: 0.7rem;
}

.toast-item .toast-msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.toast-item.toast-success { border-color: color-mix(in srgb, var(--ct-primary, #00ff66) 38%, transparent); }
.toast-item.toast-success .toast-icon { color: var(--ct-primary, #00ff66); background: color-mix(in srgb, var(--ct-primary, #00ff66) 16%, transparent); }

.toast-item.toast-error { border-color: color-mix(in srgb, #ef4444 42%, transparent); }
.toast-item.toast-error .toast-icon { color: #f87171; background: color-mix(in srgb, #ef4444 16%, transparent); }

.toast-item.toast-warning { border-color: color-mix(in srgb, #eab308 42%, transparent); }
.toast-item.toast-warning .toast-icon { color: #facc15; background: color-mix(in srgb, #eab308 16%, transparent); }

.toast-item.toast-info { border-color: color-mix(in srgb, #38bdf8 42%, transparent); }
.toast-item.toast-info .toast-icon { color: #7dd3fc; background: color-mix(in srgb, #38bdf8 16%, transparent); }

/* Life bar — counts the auto-dismiss window down. */
.toast-item .toast-life {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform-origin: left center;
    background: currentColor;
    opacity: 0.35;
}
.toast-item.toast-running .toast-life {
    animation-name: toast-life;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes toast-life {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-item {
        transition: opacity 0.2s ease;
        transform: none;
    }
    .toast-item.toast-hide {
        transform: none;
    }
    .toast-item .toast-life {
        display: none;
    }
}

/* Auth modals (home page + /login) — animated fade/scale overlay. */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0.3s;
}

.auth-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.auth-modal-card {
    width: min(100%, 26rem);
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--ct-primary, #00ff66) 30%, transparent);
    background: var(--matrix-bg, #0d1117);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(14px) scale(0.95);
    transition: opacity 0.28s ease, transform 0.34s var(--ease-out);
}

.auth-modal.is-open .auth-modal-card {
    opacity: 1;
    transform: none;
}

/* Custom scrollbars for modals, sidebars and pop-ups — matched to the site
   accent. The main page (html/body) scrollbar is intentionally left native. */
.ct-scrollbar,
.auth-modal,
.ad-type-interstitial.ad-type-visible,
.ad-type-popup.ad-type-visible {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ct-primary, #00ff66) 55%, transparent) transparent;
}

.ct-scrollbar::-webkit-scrollbar,
.auth-modal::-webkit-scrollbar,
.ad-type-interstitial.ad-type-visible::-webkit-scrollbar,
.ad-type-popup.ad-type-visible::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ct-scrollbar::-webkit-scrollbar-track,
.auth-modal::-webkit-scrollbar-track,
.ad-type-interstitial.ad-type-visible::-webkit-scrollbar-track,
.ad-type-popup.ad-type-visible::-webkit-scrollbar-track {
    background: transparent;
}

.ct-scrollbar::-webkit-scrollbar-thumb,
.auth-modal::-webkit-scrollbar-thumb,
.ad-type-interstitial.ad-type-visible::-webkit-scrollbar-thumb,
.ad-type-popup.ad-type-visible::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ct-primary, #00ff66) 45%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

@media (hover: hover) {
.ct-scrollbar::-webkit-scrollbar-thumb:hover,
    .auth-modal::-webkit-scrollbar-thumb:hover,
    .ad-type-interstitial.ad-type-visible::-webkit-scrollbar-thumb:hover,
    .ad-type-popup.ad-type-visible::-webkit-scrollbar-thumb:hover {
            background-color: color-mix(in srgb, var(--ct-primary, #00ff66) 75%, transparent);
    }
}

.ct-scrollbar::-webkit-scrollbar-corner,
.auth-modal::-webkit-scrollbar-corner,
.ad-type-interstitial.ad-type-visible::-webkit-scrollbar-corner,
.ad-type-popup.ad-type-visible::-webkit-scrollbar-corner {
    background: transparent;
}

.toast-item {
    pointer-events: auto;
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
}

.toast-item.toast-show {
    opacity: 1;
    transform: none;
}

/* Skeleton loading state — used when the final card/table layout is already known. */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Text-scramble / decode effect for loading numeric data (balances, stats). */
.text-scramble {
    font-variant-numeric: tabular-nums;
}

/* Support unread notification badges — blink until the thread is opened. */
.notify-badge {
    animation: notify-blink 1.2s ease-in-out infinite;
}
@keyframes notify-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* AdsLab Monetized captcha widget � reCAPTCHA-style redirect checkbox. */
.al-cw { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; display: inline-flex; flex-direction: column; gap: 4px; }
.al-cw-box { display: flex; align-items: center; width: 100%; min-width: 300px; max-width: 340px; background: #101915; border: 1px solid #24402c; border-radius: 6px; padding: 10px 12px; }
.al-cw-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; background: #0b120d; border: 1px solid #3d5c47; border-radius: 5px; cursor: pointer; padding: 0; transition: background 0.15s ease, border-color 0.15s ease; }
/*.al-cw-checkbox { width: 14px; height: 14px; display: block; }*/
.al-cw-label { margin-left: 10px; font-size: 13px; color: #cfe6d5; flex: 1; text-align: left; }
.al-cw-brand { display: flex; align-items: center; justify-content: center; }
.al-cw-brand-dot { width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #6fcf97, #1f7a3d); border-radius: 50%; }
.al-cw-footline { display: flex; justify-content: space-between; font-size: 10px; color: #5f7a68; letter-spacing: 0.4px; padding: 0 2px; }
.al-cw-retry { background: none; border: none; color: #ff8a76; font-size: 13px; cursor: pointer; padding: 0; }
@media (hover: hover) {
.al-cw-retry:hover { color: #ffab98; }
}

/* solved: green check mark in a filled box */
.al-cw-solved .al-cw-check { background: #2e7d32; border-color: #2e7d32; cursor: default; }
.al-cw-solved .al-cw-checkbox, .al-cw-redirect .al-cw-check[aria-checked="true"] .al-cw-checkbox { background: transparent; }
.al-cw-solved .al-cw-check::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

/* loading: spinner inside the checkbox */
.al-cw-loading .al-cw-check { cursor: default; }
.al-cw-loading .al-cw-checkbox { width: 14px; height: 14px; border: 2px solid rgba(76, 175, 80, 0.25); border-top-color: #4caf50; border-radius: 50%; animation: al-cw-spin 0.9s linear infinite; }
@keyframes al-cw-spin { to { transform: rotate(360deg); } }

/* failed / error states */
.al-cw-failed .al-cw-check { border-color: #b3563f; cursor: default; }
.al-cw-failed .al-cw-label, .al-cw-error .al-cw-label { color: #e0a294; }
.al-cw-error .al-cw-check { border-color: #7a5235; cursor: default; }