/* Dark dashboard theme from NewPage/style.css. Loaded after the futureshop bundle
   so it overrides Shop.css/bootstrap. Scoped to body.tvp-dash-dark. */

body.tvp-dash-dark {
    --nd-bg-deep: #0B1220;
    --nd-bg-panel: #101A2B;
    --nd-bg-hover: #162133;
    --nd-text-light: #FFFFFF;
    --nd-text-muted: #95A3C0;
    --nd-accent: #F0883E;
    --nd-border: rgba(149, 163, 192, 0.15);
    --nd-font-head: 'Space Grotesk', 'Open Sans', sans-serif;
    --nd-font-body: 'Inter', 'Open Sans', sans-serif;
    --nd-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bootstrap 4 theme colors */
    --primary: #F0883E;
    --secondary: #95A3C0;
    --light: #162133;
    --dark: #FFFFFF;
    --tvp-primary: #F0883E;
    --tvp-primary-dark: #d9752f;
    --tvp-primary-light: #f6a468;
    --tvp-text: #FFFFFF;
    --tvp-text-dark: #FFFFFF;
    --tvp-text-light: #95A3C0;
    --tvp-gray: #95A3C0;
    background-color: var(--nd-bg-deep);
    color: var(--nd-text-muted);
    font-family: var(--nd-font-body) !important;
}

body.tvp-dash-dark h1,
body.tvp-dash-dark h2,
body.tvp-dash-dark h3,
body.tvp-dash-dark h4,
body.tvp-dash-dark h5,
body.tvp-dash-dark h6,
body.tvp-dash-dark .h1,
body.tvp-dash-dark .h2,
body.tvp-dash-dark .h3,
body.tvp-dash-dark .h4,
body.tvp-dash-dark .h5,
body.tvp-dash-dark .h6 {
    font-family: var(--nd-font-head);
    color: var(--nd-text-light);
    letter-spacing: -0.02em;
}

/* ---------- Surfaces ---------- */
body.tvp-dash-dark .main-container,
body.tvp-dash-dark #userdash-main-container,
body.tvp-dash-dark #userdash-main-panel,
body.tvp-dash-dark .userdash-collapse-content {
    background-color: var(--nd-bg-deep);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .bg-white,
body.tvp-dash-dark .bg-light {
    background-color: var(--nd-bg-panel) !important;
}

body.tvp-dash-dark .bg-dark {
    background-color: #060B14 !important;
}

body.tvp-dash-dark .text-dark,
body.tvp-dash-dark .text-black {
    color: var(--nd-text-light) !important;
}

body.tvp-dash-dark .text-muted,
body.tvp-dash-dark .text-secondary {
    color: var(--nd-text-muted) !important;
}

body.tvp-dash-dark .text-primary {
    color: var(--nd-accent) !important;
}

body.tvp-dash-dark .text-white {
    color: var(--nd-text-light) !important;
}

body.tvp-dash-dark .border,
body.tvp-dash-dark .border-top,
body.tvp-dash-dark .border-right,
body.tvp-dash-dark .border-bottom,
body.tvp-dash-dark .border-left {
    border-color: var(--nd-border) !important;
}

/* Crop the wordmark off the logo so only the camera mark shows, at a larger size */
body.tvp-dash-dark .nav-bar-logo {
    height: 40px;
    width: 40px;
    object-fit: cover;
    object-position: left center;
}

/* ---------- Top navbar ---------- */
body.tvp-dash-dark .shop-navbar-top,
body.tvp-dash-dark #navbarTop {
    background: var(--nd-bg-deep) !important;
    border-bottom: 1px solid var(--nd-border);
}

body.tvp-dash-dark .shop-navbar-top .nav-link,
body.tvp-dash-dark #shop-header-usermenu-icon {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .shop-navbar-top .nav-link:hover,
body.tvp-dash-dark #shop-header-usermenu-icon:hover {
    color: var(--nd-accent);
}

/* Top bar inside the dashboard body (name, credits, cart) */
body.tvp-dash-dark .userdash-top-name-holder,
body.tvp-dash-dark #userdash-name-top-head {
    color: var(--nd-text-light);
    font-family: var(--nd-font-head);
}

body.tvp-dash-dark #userdash-top-coin-balance-btn {
    background-color: var(--nd-bg-panel);
    border-color: var(--nd-border) !important;
    border-radius: 999px;
}

/* the plan pill replaced the coin pill, and sits next to the bell */
body.tvp-dash-dark #userdash-top-plan-btn {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-radius: 999px;
    color: var(--nd-text-light);
}

/* the bell sits outside the coin pill, so it needs its own rounding */
body.tvp-dash-dark #userdash-top-notif-btn {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-radius: 999px;
    color: var(--nd-text-light);
}

body.tvp-dash-dark #userdash-top-notif-btn:hover {
    background-color: var(--nd-bg-hover);
}

/* pinned to the bell's top right corner rather than sitting in the text flow, so the
       button does not change width as the count grows */
body.tvp-dash-dark #userdash-top-notif-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.65rem;
    /* above the working ring, which is a later positioned sibling and would otherwise
       draw its edge across the count */
    z-index: 1;
}

/* a render takes minutes and the drawer is shut for most of them, so the bell has to carry
       the fact that something is still running. The old 2px bar along the bottom edge was too
       small to notice, so the whole button pings instead: an accent ring grows out of it and
       fades, and the bell itself rocks once every couple of seconds.
       Indeterminate on purpose - we cannot know how long is left, so it never fills.
       Driven entirely by transform and opacity: both composite, where an animated border or
       box-shadow would repaint the button on every frame of an animation that may run for
       minutes. */
body.tvp-dash-dark #userdash-top-notif-btn.is-working {
    border-color: var(--nd-accent);
}

body.tvp-dash-dark #userdash-top-notif-btn.is-working::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 2px solid var(--nd-accent);
    border-radius: 999px;
    /* the ring sweeps out past the button, and a click on it still lands on the button,
       but the badge sits under it - keep it out of hit testing anyway */
    pointer-events: none;
    animation: userdash-notif-ping 1.8s ease-out infinite;
}

/* one ring expanding out of the button edge and fading as it goes */
@keyframes userdash-notif-ping {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* the icon is what the eye lands on, so it moves too - a short rock, then a long rest, so a
       render that runs for minutes does not end up shaking the header the whole time */
body.tvp-dash-dark #userdash-top-notif-btn.is-working .fa-bell {
    display: inline-block;
    animation: userdash-notif-rock 2.4s ease-in-out infinite;
}

@keyframes userdash-notif-rock {
    0%, 18%, 100% {
        transform: rotate(0);
    }

    4% {
        transform: rotate(-12deg);
    }

    10% {
        transform: rotate(12deg);
    }

    14% {
        transform: rotate(-6deg);
    }
}

/* still say that work is happening, just without the motion */
@media (prefers-reduced-motion: reduce) {
    body.tvp-dash-dark #userdash-top-notif-btn.is-working::after {
        animation: none;
        transform: none;
        opacity: 0.7;
    }

    body.tvp-dash-dark #userdash-top-notif-btn.is-working .fa-bell {
        animation: none;
    }
}

/* ---------- Notification drawer ---------- */
body.tvp-dash-dark #userdash-notif-drawer .modal-content {
    background-color: var(--nd-bg-panel);
    color: var(--nd-text-light);
}

body.tvp-dash-dark #userdash-notif-drawer .modal-header {
    border-bottom: 1px solid var(--nd-border);
}

body.tvp-dash-dark .userdash-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--nd-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

body.tvp-dash-dark .userdash-notif-item:hover {
    background-color: var(--nd-bg-hover);
}

/* an unread item carries an accent edge - the only thing separating it from a read one,
       since the drawer clears them all the moment it opens */
body.tvp-dash-dark .userdash-notif-item.is-unread {
    border-left: 3px solid var(--nd-accent);
}

body.tvp-dash-dark .userdash-notif-item-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    padding-top: 2px;
}

body.tvp-dash-dark .userdash-notif-item-body {
    min-width: 0;
}

body.tvp-dash-dark .userdash-notif-item-title {
    font-family: var(--nd-font-head);
    font-size: 0.9rem;
}

body.tvp-dash-dark .userdash-notif-item-text {
    color: var(--nd-text-muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

body.tvp-dash-dark .userdash-notif-item-time {
    color: var(--nd-text-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

/* ---------- Left menu ---------- */
body.tvp-dash-dark .bbpage-left-menu-holder {
    background-color: var(--nd-bg-deep);
    border-right: 1px solid var(--nd-border);
}

body.tvp-dash-dark .bbpage-left-menu {
    border-right-color: transparent;
}

body.tvp-dash-dark .bbpage-left-menu > li {
    color: var(--nd-text-muted);
    font-family: var(--nd-font-head);
    font-weight: 500;
    border-right: 2px solid transparent;
    border-radius: 4px 0 0 4px;
    transition: color 0.3s ease, background-color 0.15s ease-in, transform 0.4s var(--nd-spring);
}

body.tvp-dash-dark .bbpage-left-menu > li:hover:not(.userdash-left-menu-divider) {
    background-color: var(--nd-bg-hover);
    border-right-color: var(--nd-accent);
    color: var(--nd-accent);
    transform: translateX(4px);
}

body.tvp-dash-dark .bbpage-left-menu > li[aria-expanded="true"] {
    background-color: var(--nd-bg-panel);
    border-right: 2px solid var(--nd-accent);
    color: var(--nd-text-light);
    font-weight: 700;
}

body.tvp-dash-dark .bbpage-left-menu > li[aria-expanded="true"] > i,
body.tvp-dash-dark .bbpage-left-menu > li[aria-expanded="true"] i.bb-icon-large,
body.tvp-dash-dark .bbpage-left-menu > li:hover > i {
    color: var(--nd-accent);
}

/* Inline-coloured SVG icons in the menu (e.g. Usage) */
body.tvp-dash-dark .bbpage-left-menu > li svg path[fill="#565D64"] {
    fill: currentColor;
}

body.tvp-dash-dark .bbpage-left-menu-toggle {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .bbpage-left-menu-toggle:hover {
    color: var(--nd-accent);
}

/* ---------- Cards / panels ---------- */
body.tvp-dash-dark .card {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-radius: 4px;
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .card-header,
body.tvp-dash-dark .card-footer {
    background-color: var(--nd-bg-hover);
    border-color: var(--nd-border);
    color: var(--nd-text-light);
}

body.tvp-dash-dark .card-header.bg-primary {
    background-color: var(--nd-accent) !important;
    color: var(--nd-bg-deep) !important;
}

body.tvp-dash-dark .list-group-item {
    background-color: var(--nd-bg-panel);
    border-color: var(--nd-border);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .dropdown-header {
    color: var(--nd-text-muted);
}

/* ---------- Buttons ---------- */
body.tvp-dash-dark .btn-primary {
    background-color: var(--nd-accent);
    border-color: var(--nd-accent);
    color: var(--nd-bg-deep);
    font-family: var(--nd-font-head);
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: transform 0.3s var(--nd-spring), box-shadow 0.3s ease;
}

body.tvp-dash-dark .btn-primary:hover,
body.tvp-dash-dark .btn-primary:focus {
    background-color: #f6a468;
    border-color: #f6a468;
    color: var(--nd-bg-deep);
    box-shadow: 0 10px 20px rgba(240, 136, 62, 0.2);
    transform: translateY(-2px);
}

body.tvp-dash-dark .btn-light,
body.tvp-dash-dark .btn-secondary {
    background-color: var(--nd-bg-hover);
    border-color: var(--nd-border);
    color: var(--nd-text-light);
}

body.tvp-dash-dark .btn-light:hover,
body.tvp-dash-dark .btn-secondary:hover {
    background-color: var(--nd-bg-panel);
    border-color: var(--nd-accent);
    color: var(--nd-accent);
}

body.tvp-dash-dark .btn-outline-secondary {
    border-color: var(--nd-border);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .btn-outline-secondary:hover {
    background-color: var(--nd-bg-hover);
    border-color: var(--nd-accent);
    color: var(--nd-accent);
}

body.tvp-dash-dark .btn-link {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .btn-link:hover {
    color: var(--nd-accent);
}

body.tvp-dash-dark .badge-primary {
    background-color: var(--nd-accent);
    color: var(--nd-bg-deep);
}

/* ---------- Forms ---------- */
body.tvp-dash-dark .form-control,
body.tvp-dash-dark .custom-select,
body.tvp-dash-dark textarea.form-control {
    background-color: var(--nd-bg-panel);
    border-color: var(--nd-border);
    color: var(--nd-text-light);
}

body.tvp-dash-dark .form-control:focus {
    background-color: var(--nd-bg-panel);
    border-color: var(--nd-accent);
    color: var(--nd-text-light);
    box-shadow: 0 0 0 0.2rem rgba(240, 136, 62, 0.2);
}

body.tvp-dash-dark .form-control::placeholder {
    color: var(--nd-text-muted);
    opacity: 0.7;
}

body.tvp-dash-dark .input-group-text {
    background-color: var(--nd-bg-hover);
    border-color: var(--nd-border);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .col-form-label,
body.tvp-dash-dark label {
    color: var(--nd-text-muted);
}

/* ---------- Dropdowns / modals ---------- */
body.tvp-dash-dark .dropdown-menu {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.tvp-dash-dark .dropdown-item {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .dropdown-item:hover,
body.tvp-dash-dark .dropdown-item:focus {
    background-color: var(--nd-bg-hover);
    color: var(--nd-accent);
}

body.tvp-dash-dark .dropdown-divider {
    border-top-color: var(--nd-border);
}

body.tvp-dash-dark .modal-content {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .modal-header,
body.tvp-dash-dark .modal-footer {
    border-color: var(--nd-border);
}

body.tvp-dash-dark .modal-header .close {
    color: var(--nd-text-light);
    text-shadow: none;
    opacity: 0.8;
}

/* ---------- Tables ---------- */
body.tvp-dash-dark .table {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .table th,
body.tvp-dash-dark .table td {
    border-color: var(--nd-border);
}

body.tvp-dash-dark .table thead th {
    color: var(--nd-text-light);
    font-family: var(--nd-font-head);
    border-bottom-color: var(--nd-border);
}

body.tvp-dash-dark .table-hover tbody tr:hover {
    background-color: var(--nd-bg-hover);
    color: var(--nd-text-light);
}

/* ---------- Loaders / misc ---------- */
body.tvp-dash-dark .bb-full-loader {
    background-color: rgba(11, 18, 32, 0.8);
    backdrop-filter: blur(3px);
    color: var(--nd-text-muted);
}

body.tvp-dash-dark .bb-full-loader-box {
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-top: 3px solid var(--nd-accent);
    border-radius: 6px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

body.tvp-dash-dark .bb-full-loader-box p {
    font-family: var(--nd-font-head);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nd-text-light);
}

body.tvp-dash-dark .bb-full-loader-box i {
    color: var(--nd-accent);
    opacity: 1;
}

body.tvp-dash-dark .userdash-coins-products-modal,
body.tvp-dash-dark .userdash-plans-modal {
    background-color: var(--nd-bg-deep);
}

/* the plan cards pick up the dark .card rules already; only the accents need restating,
   because --primary is the light-theme blue and disappears against the panel */
body.tvp-dash-dark .userdash-plans-card-popular {
    border-color: var(--nd-accent);
    /* a black drop shadow does nothing against a dark panel, so the elevation here is the
       accent glow instead */
    box-shadow: 0 0 0 1px var(--nd-accent), 0 12px 28px rgba(240, 136, 62, 0.22);
}

body.tvp-dash-dark .userdash-plans-popular-badge,
body.tvp-dash-dark .userdash-plans-price {
    background-color: var(--nd-accent);
    color: #fff;
}

/* ...except the top-up, which is not a tier and keeps its blue in both themes. Restated here
   only because the rule above is one specificity point heavier than the one in Shop.css */
body.tvp-dash-dark .userdash-plans-card-topup .userdash-plans-price {
    background-color: var(--tvp-topup-blue);
}

/* the trial keeps its green in both themes, for the same reason and against the same rule */
body.tvp-dash-dark .userdash-plans-card-trial .userdash-plans-price {
    background-color: var(--tvp-trial-green);
}

body.tvp-dash-dark .bb-checkbox label {
    color: var(--nd-text-muted);
}

body.tvp-dash-dark ::-webkit-scrollbar-thumb {
    background: var(--nd-bg-hover);
}

body.tvp-dash-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--nd-accent);
}

/* ---------- Create-video tiles ---------- */
body.tvp-dash-dark #userdash-vi-helper > h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

body.tvp-dash-dark #userdash-vi-helper > .d-flex.flex-wrap {
    justify-content: center;
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile {
    --tile-accent: var(--nd-accent);
    position: relative;
    height: auto;
    min-height: 210px;
    width: 240px;
    padding: 1.75rem 1.25rem 1.5rem;
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-top: 3px solid var(--tile-accent);
    border-radius: 6px;
    margin: 0 0.625rem 1.25rem;
    transition: transform 0.3s var(--nd-spring), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile:hover {
    background-color: var(--nd-bg-hover);
    border-color: var(--tile-accent);
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-tile-ai {
    --tile-accent: #8B7CF6;
}

body.tvp-dash-dark .userdash-vi-tile-badge {
    font-family: var(--nd-font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--tile-accent);
    margin-bottom: 0.75rem;
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile-icon,
body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile-icon-running {
    font-size: 34px;
    color: var(--tile-accent);
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile-title {
    font-family: var(--nd-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: normal;
    color: var(--nd-text-light);
}

body.tvp-dash-dark #userdash-vi-helper .userdash-vi-create-video-tile-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--nd-text-muted);
}

/* ---------- Video gallery cards ---------- */
body.tvp-dash-dark .userdash-video-list {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* gutter and row gap both 1rem: 0.5rem padding each side horizontally, 1rem below */
body.tvp-dash-dark .userdash-video-list > div {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
}

/* the card body; no transform here, it would trap the fixed-position modals inside it */
body.tvp-dash-dark .userdash-video-list > div > div[bb-pending-vc] {
    height: 100%;
    margin-bottom: 0 !important;
    background-color: var(--nd-bg-panel);
    border: 1px solid var(--nd-border);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.tvp-dash-dark .userdash-video-list > div > div[bb-pending-vc]:hover {
    border-color: rgba(240, 136, 62, 0.45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-livid {
    border-radius: 9px 9px 0 0;
    background-color: var(--nd-bg-hover);
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-livid i.fa-play-circle {
    font-size: 48px;
    left: calc(50% - 24px);
    top: calc(50% - 24px);
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: color 0.2s ease;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-livid:hover i.fa-play-circle {
    color: var(--nd-accent);
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-livid i.fa-spinner {
    font-size: 48px;
    left: calc(50% - 24px);
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body.tvp-dash-dark .userdash-video-list .userdash-video-li-length,
body.tvp-dash-dark .userdash-video-list .userdash-video-li-play-count {
    bottom: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(11, 18, 32, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 999px;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-li-length {
    right: 8px;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-li-play-count {
    left: 8px;
    min-width: 0;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont {
    background-color: transparent;
    padding: 0.35rem 0.75rem 0.75rem;
}

/* negative margin cancels the buttons' own px-2 so the icons line up with the text below;
   w-100 must be overridden or the right negative margin has nothing to pull */
body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 -0.5rem 0.1rem;
}

/* Bootstrap's .table paints its own light borders and inherits body colour, neither of which
   survives the dark card behind the metrics drawer */
body.tvp-dash-dark .userdash-vg-social-table {
    color: var(--nd-text-light);
}

body.tvp-dash-dark .userdash-vg-social-table th,
body.tvp-dash-dark .userdash-vg-social-table td {
    border-color: var(--nd-border) !important;
}

body.tvp-dash-dark .userdash-vg-social-table th,
body.tvp-dash-dark .userdash-vg-social-table td.text-muted {
    color: var(--nd-text-muted) !important;
}

/* the social rules in Shop.css are light-palette only; --tvp-primary there is unreadable on the
   dark card, and the stat row is new markup that never had a dark rule at all */
body.tvp-dash-dark .userdash-video-list .userdash-video-social-post {
    color: var(--nd-text-muted) !important;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-li-social:hover,
body.tvp-dash-dark .userdash-video-list .userdash-video-social-post-note-toggle {
    color: var(--nd-text-light) !important;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu .dropdown {
    display: none;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone {
    width: 180px;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem;
    border: 2px dashed var(--nd-text-muted);
    border-radius: 8px;
    background-color: var(--nd-bg-hover);
    background-size: cover;
    background-position: center;
    color: var(--nd-text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone i {
    font-size: 1.75rem;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone:hover,
body.tvp-dash-dark .userdash-vi-ai-dropzone:focus,
body.tvp-dash-dark .userdash-vi-ai-dropzone.is-dragging {
    border-color: var(--nd-accent);
    color: var(--nd-text-light);
    outline: none;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone.is-dragging {
    background-color: rgba(240, 136, 62, 0.12);
}

body.tvp-dash-dark .userdash-vi-ai-dropzone.has-image > * {
    display: none;
}

/* the two optional views stack beside the main picture; 124 + 12 + 124 matches its 260px height.
   wrap is the phone fallback - 180 + 12 + 120 is already tight at 320px wide */
body.tvp-dash-dark .userdash-vi-ai-dropzone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone-sub {
    width: 120px;
    height: 124px;
    gap: 0.35rem;
    padding: 0.5rem;
    font-size: 0.7rem;
}

body.tvp-dash-dark .userdash-vi-ai-dropzone-sub i {
    font-size: 1.1rem;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu .btn-link.text-secondary,
body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu .bb-menu-link {
    color: var(--nd-text-muted) !important;
    font-size: 0.9rem;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu .btn-link.text-secondary:hover,
body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont-menu .bb-menu-link:hover {
    color: var(--nd-text-light) !important;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont > .lead {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    font-family: var(--nd-font-head);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--nd-text-light);
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont > .justify-content-between {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0.2rem 0.6rem;
    margin-top: 0.35rem !important;
    font-size: 0.7rem;
    line-height: 1.5;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont > .justify-content-between > div {
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem !important;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont > .justify-content-between span {
    margin-left: 0 !important;
    white-space: nowrap;
    color: var(--nd-text-muted) !important;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-list-licont > .justify-content-between span:empty {
    display: none;
}

body.tvp-dash-dark .userdash-video-list .userdash-video-tags {
    font-size: 0.7rem;
    color: var(--nd-text-muted) !important;
}