/* main.css */

/* Announcement bar styles - highest specificity */
html .bg-announcement-bar,
body .bg-announcement-bar,
div.bg-announcement-bar,
.bg-announcement-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1003 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 3rem !important;
    padding: 0 .75rem !important;
    text-align: center !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.dark .bg-announcement-bar,
body.dark .bg-announcement-bar {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
}

.bg-announcement-bar * {
    opacity: 1 !important;
}

.bg-announcement-bar a {
    color: inherit;
}

.bg-announcement-bar .tag {
    display: inline-block;
    padding: 0 .25rem;
    margin-right: .25rem;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: .125rem;
}

.bg-announcement-bar .tag-red {
    background-color: #ef4444;
    color: #fff;
}

@media (min-width: 640px) {
    .bg-announcement-bar {
        font-size: .875rem;
    }
}

/* Push nav down to make room for fixed announcement bar */
nav#topNav {
    position: fixed !important;
    top: 3rem !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    margin-top: 0 !important;
}

/* Push main content down to make room for both announcement bar and fixed nav */
body, main, #content, .page-content {
    padding-top: 8rem !important;
}

/* Mobile search container also needs to be positioned below fixed nav */
#mobileSearchContainer {
    position: fixed;
    top: 7rem;
    left: 0;
    right: 0;
    z-index: 999;
    margin-top: 0;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Global theme-aware text color
   - Default (light theme): use a dark readable text color
   - Dark theme (when `html.dark` or `body.dark` is present): use white text
   This sets a CSS variable and applies it as the page default. We avoid
   using !important so components that intentionally set a contrasting
   text color (e.g. buttons, badges) keep their styles. */
:root {
    --site-text: #0b1220; /* dark text for light backgrounds */
}
html.dark, body.dark {
    --site-text: #ffffff; /* white text for dark backgrounds */
}

/* Apply the variable as the default text color for the page */
body {
    color: var(--site-text);
}

/* Make common text-bearing elements inherit the page color by default. */
body, body p, body li, body span, body div, body label, body small,
body strong, body em, body b, body i, body a, body h1, body h2, body h3,
body h4, body h5, body h6, input, textarea, select {
    color: inherit;
}

/* Theme-aware panel border color
   - Use a CSS variable so we can switch border tone between light and dark modes
   - Default (light): slightly dark borders for contrast on pale backgrounds
   - Dark mode: slightly light borders for contrast on dark backgrounds
   This block will be used by the generic border override below to keep border
   tones consistent across the site. */
:root {
    --panel-border: rgba(0,0,0,0.15);
}
html.dark, body.dark {
    --panel-border: rgba(255,255,255,0.10);
}

/* Apply the theme-aware panel border color to elements that use borders.
   This intentionally targets the generic `border` utility and any class
   that includes `border-` so panels and thin separators follow the
   theme variable. Use !important to ensure it overrides utility classes
   (this matches the intent to have uniform border color across themes).
   If you want exceptions (e.g., colored badges), add more specific rules
   to preserve those colors later. */
.border, [class*="border-"] {
    border-color: var(--panel-border) !important;
}


/* Neutralize any reddish tint in dark mode by forcing a cool slate background */
html.dark body,
body.dark {
    background: radial-gradient(circle at top left, #050c2e 0%, #141414 100%) !important;
    color: #f8dcdc !important;
}

/* Sidebar color is controlled by utility classes on the element (bg-white/70 dark:bg-slate-800/60)
   and the presence of html.dark/body.dark. Avoid forcing a default here so the theme class is authoritative. */

/* Dark-mode strong overrides -------------------------------------------------- */
/* Ensure top nav is fully dark and not translucent in dark mode */
html.dark nav#topNav, body.dark nav#topNav {
    background-color: rgba(8,12,24,0.98) !important;
    border-bottom-color: rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
}

/* Sidebar should be a solid dark panel in dark mode (avoid pale/translucent look) */
html.dark #sidebar, body.dark #sidebar,
html.dark #adminSidebar, body.dark #adminSidebar {
    background-color: rgba(10,14,26,0.98) !important;
    border-right-color: rgba(255,255,255,0.03) !important;
}

/* Cards that use bg-white/60 or similar should be darker and less transparent in dark mode */
/* (light-mode utility classes present; dark-mode overrides below) */
html.dark .bg-white\/60, body.dark .bg-white\/60,
html.dark .bg-white\/70, body.dark .bg-white\/70 {
    background-color: rgba(14,18,28,0.9) !important; /* deeper, less translucent */
    color: #dbeafe !important;
    border-color: rgba(255,255,255,0.03) !important;
}

/* Make modal/backdrop areas darker in dark mode */
html.dark #loginModalOverlay, body.dark #loginModalOverlay,
html.dark #previewModalOverlay, body.dark #previewModalOverlay {
    background: rgba(3,6,12,0.7) !important;
}

/* Tweak any remaining rose/pink alert backgrounds to be muted in dark mode */
html.dark .bg-rose-50, body.dark .bg-rose-50 {
    background-color: rgba(255,240,244,0.02) !important;
}

/* Reduce contrast of bright gradients on dark mode by clamping brightness via overlay */
html.dark .gradient-damp, body.dark .gradient-damp {
    position: relative;
}
html.dark .gradient-damp::after, body.dark .gradient-damp::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(3,6,12,0.35);
    border-radius: inherit;
    pointer-events: none;
}

/* Brighten text colors in dark mode for readability --------------------------------- */
html.dark, body.dark {
    color: #e6eef8;
}

/* Ensure common slate text utility classes are readable in dark mode */
html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-slate-900, html.dark .text-slate-600,
body.dark .text-slate-800, body.dark .text-slate-700, body.dark .text-slate-600 {
    color: rgba(230,238,248,0.95) !important;
}

/* Muted text in dark mode should be lighter than in light mode */
html.dark .text-slate-500, body.dark .text-slate-500,
html.dark .text-slate-400, body.dark .text-slate-400 {
    color: rgba(230,238,248,0.65) !important;
}

/* Force nav and sidebar children to be light in dark mode to avoid low-contrast areas */
html.dark nav#topNav, body.dark nav#topNav,
html.dark nav#topNav * , body.dark nav#topNav * {
    color: rgba(230,238,248,0.95) !important;
}

html.dark #sidebar, body.dark #sidebar, html.dark #sidebar *, body.dark #sidebar * {
    color: rgba(230,238,248,0.92) !important;
}

/* Cards and content areas: make sure headings and paragraphs are legible */
html.dark .text-3xl, body.dark .text-3xl, html.dark h1, body.dark h1,
html.dark h2, body.dark h2, html.dark .prose, body.dark .prose {
    color: rgba(230,238,248,0.96) !important;
}


/* Prevent horizontal overflow on small devices and allow flex children to shrink */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure flex children can shrink instead of forcing horizontal scroll */
.flex-1, main, .container, .page-content {
    min-width: 0;
}

/* Ẩn scrollbar xấu */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 999px;
}

/* Mobile sidebar (slide in/out using transform for smooth animation) */
/* Base: hidden off-screen */
/* keep existing desktop rules; mobile-specific adjustments are below in the media query */

/* Mobile initial (off-canvas) state */
@media (max-width: 767px) {
    /* Mobile: compact off-canvas sidebar (small, touch-friendly items) */
    /* Mobile: start with a narrow/hidden sidebar and reveal by animating width
       This mimics the desktop sidebar's expand/collapse motion (width transition)
       while still using translate3d for final positioning to keep animations smooth. */
    #sidebar, #adminSidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 90;
        /* start collapsed for mobile: 0 width so it grows like desktop */
        width: 0;
        max-width: 420px;
        transform: none;
        transition: width 320ms cubic-bezier(.22,1,.36,1), opacity 240ms ease, box-shadow 260ms ease;
        will-change: width, opacity;
        backface-visibility: hidden;
        display: block !important;
        background: #141416; /* darker mobile backdrop */
        backdrop-filter: blur(8px);
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 0 8px 40px rgba(0,0,0,0.7);
        opacity: 0; /* hide by default until opened to allow fade-in */
        overflow-y: hidden; /* prevent content showing while closed */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        height: 100dvh;
        height: 100vh;
    }

    /* When open, slide into view */
    /* When opened on mobile, expand width and reveal contents smoothly */
    #sidebar.mobile-open, #adminSidebar.mobile-open {
        /* use a percent width so it adapts to small viewports */
        width: 72%;
        transform: translate3d(0, 0, 0);
        opacity: 1;
        overflow-y: auto;
        padding-top: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-shadow: 0 12px 48px rgba(0,0,0,0.72);
        will-change: transform, opacity;
    }

    /* Close button: floating, visible and touch-friendly */
    #sidebar .md\:hidden.p-3, #adminSidebar .md\:hidden.p-3 {
        position: absolute;
        right: 0.6rem;
        top: 0.6rem;
        z-index: 70;
        background: rgba(255,255,255,0.04);
        color: #fff;
        padding: 0.45rem;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.04);
    }

    /* Compact nav items for mobile: smaller padding, tighter gaps */
    /* nav items start slightly offset/transparent and animate in when sidebar opens */
    #sidebar nav a, #adminSidebar nav a {
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
        border-radius: 8px;
        font-size: 0.95rem;
        align-items: center;
        margin: 0 0 0.2rem 0;
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity 260ms cubic-bezier(.22,1,.36,1), transform 260ms cubic-bezier(.22,1,.36,1);
    }

    /* when sidebar open, reveal nav items; use small stagger so they appear gradually */
    #sidebar.mobile-open nav a, #adminSidebar.mobile-open nav a {
        opacity: 1;
        transform: translateX(0);
    }
    /* small stagger using nth-child (up to 8 items) */
    #sidebar.mobile-open nav a:nth-child(1) { transition-delay: 0ms; }
    #sidebar.mobile-open nav a:nth-child(2) { transition-delay: 30ms; }
    #sidebar.mobile-open nav a:nth-child(3) { transition-delay: 60ms; }
    #sidebar.mobile-open nav a:nth-child(4) { transition-delay: 90ms; }
    #sidebar.mobile-open nav a:nth-child(5) { transition-delay: 120ms; }
    #sidebar.mobile-open nav a:nth-child(6) { transition-delay: 150ms; }
    #sidebar.mobile-open nav a:nth-child(7) { transition-delay: 180ms; }
    #sidebar.mobile-open nav a:nth-child(8) { transition-delay: 210ms; }

    /* Smaller icon and dot sizes */
    #sidebar.mobile-open nav a i, #adminSidebar.mobile-open nav a i {
        font-size: 16px;
        min-width: 18px;
        text-align: center;
    }
    #sidebar.mobile-open nav a .w-2.h-2, #adminSidebar.mobile-open nav a .w-2.h-2 {
        width: 6px;
        height: 6px;
        margin-left: 2px;
    }

    /* NEW badge smaller and less tall */
    #sidebar.mobile-open .bg-red-500, #adminSidebar.mobile-open .bg-red-500 {
        font-size: 9px;
        padding: 2px 6px;
        right: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Bottom compact actions */
    #sidebar.mobile-open .grid-cols-3, #adminSidebar.mobile-open .grid-cols-3 {
        gap: 0.25rem;
        padding: 0 0.25rem;
    }
    #sidebar.mobile-open .grid-cols-3 a, #adminSidebar.mobile-open .grid-cols-3 a {
        padding: 6px 4px;
        border-radius: 6px;
        font-size: 11px;
    }
    #sidebar.mobile-open .grid-cols-3 a i, #adminSidebar.mobile-open .grid-cols-3 a i {
        font-size: 16px;
    }

    /* Compact search and balance blocks */
    #sidebar.mobile-open .md\:hidden input, #adminSidebar.mobile-open .md\:hidden input {
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.04);
        font-size: 0.95rem;
        padding: 0.55rem 0.6rem 0.55rem 2.1rem;
        border-radius: 8px;
    }

    /* Slightly reduce spacing for header and sections */
    #sidebar.mobile-open .p-4, #adminSidebar.mobile-open .p-4 { padding: 0.6rem 0.6rem; }

    /* Make text slightly brighter for contrast */
    #sidebar.mobile-open, #adminSidebar.mobile-open { color: rgba(255,255,255,0.95); }
}

/* No emergency mobile override: let the element-level utility classes and html.dark determine sidebar color. */

/* Ensure text/icons inside mobile sidebar are legible on the dark overlay (only in dark mode) */
html.dark #sidebar.mobile-open, body.dark #sidebar.mobile-open,
html.dark #adminSidebar.mobile-open, body.dark #adminSidebar.mobile-open {
    color: rgba(255,255,255,0.95);
}
html.dark #sidebar.mobile-open a, body.dark #sidebar.mobile-open a,
html.dark #adminSidebar.mobile-open a, body.dark #adminSidebar.mobile-open a,
html.dark #sidebar.mobile-open span, body.dark #sidebar.mobile-open span,
html.dark #adminSidebar.mobile-open span, body.dark #adminSidebar.mobile-open span,
html.dark #sidebar.mobile-open i, body.dark #sidebar.mobile-open i,
html.dark #adminSidebar.mobile-open i, body.dark #adminSidebar.mobile-open i {
    color: rgba(255,255,255,0.95) !important;
}
html.dark #sidebar.mobile-open a:hover, body.dark #sidebar.mobile-open a:hover,
html.dark #adminSidebar.mobile-open a:hover, body.dark #adminSidebar.mobile-open a:hover {
    background: rgba(255,255,255,0.04) !important;
}
html.dark #sidebar.mobile-open .fi-rr-cross, body.dark #sidebar.mobile-open .fi-rr-cross,
html.dark #adminSidebar.mobile-open .fi-rr-cross, body.dark #adminSidebar.mobile-open .fi-rr-cross {
    color: rgba(255,255,255,0.95);
}

/* Sera-inspired compact sidebar styles (applies to both desktop and mobile when halowin enabled) */
.halowin-sidebar {
    background: linear-gradient(180deg, #0f1724 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border-right-color: rgba(255,255,255,0.04) !important;
}
.halowin-sidebar nav a {
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 160ms ease, box-shadow 200ms ease;
    border-radius: 12px;
}
.halowin-sidebar nav a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.03) !important;
    box-shadow: 0 6px 22px rgba(2,6,23,0.35);
}
.halowin-sidebar .text-xs { color: rgba(255,255,255,0.72) !important; }
.halowin-sidebar .p-4 { padding: 0.9rem !important; }

/* Sample sidebar design styles matching the UI image */
.sample-sidebar {
    background: #1e1e1e !important;
}

.sample-sidebar nav a {
    margin: 0;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.sample-sidebar nav a:hover {
    background: rgba(255,255,255,0.05) !important;
    transform: translateX(4px);
}

.sample-sidebar nav a .w-2.h-2 {
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

/* NEW badges styling */
.sample-sidebar nav a span.bg-red-500 {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Bottom section grid styling */
.sample-sidebar .grid-cols-3 a {
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sample-sidebar .grid-cols-3 a:hover {
    background: rgba(255,255,255,0.05) !important;
    transform: translateY(-2px);
}

.sample-sidebar .grid-cols-3 a i {
    margin-bottom: 2px;
}

/* Sera-like small utility button for compact collapse handle */
button#sidebarCollapseHandle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.02);
    color: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}
button#sidebarCollapseHandle:hover { transform: translateY(-2px); }

/* focus ring to match Sera UI subtle style */
button#sidebarCollapseHandle:focus { outline: 3px solid rgba(99,102,241,0.12); }

/* prevent body scroll when sidebar mobile is open */
.no-scroll {
    overflow: hidden !important;
}

/* collapsed sidebar on desktop (regular + admin) */
#sidebar, #adminSidebar {
    transition: transform 220ms ease, width 220ms ease, padding 220ms ease, opacity 180ms ease;
}

/* small helper for overlay transitions (used by JS) */
#sidebarOverlay {
    transition: background 240ms ease, opacity 240ms ease;
}


/* Desktop sidebar: keep the desktop (PC) sidebar opaque and above the site
   background. This ensures the sidebar's top layer is not visually affected
   by the site background image or any backdrop filters. We use a moderate
   z-index so it sits above background layers but below global modals. */
@media (min-width: 768px) {
    #sidebar, #adminSidebar {
        position: relative; /* ensure z-index applies */
        z-index: 120 !important; /* above page background but below top modals */
        background-color: rgba(255,255,255,0.98) !important; /* light default */
        backdrop-filter: none !important; /* avoid blur through the sidebar */
        box-shadow: 0 8px 30px rgba(2,6,23,0.06) !important;
    }
    /* dark mode desktop sidebar */
    html.dark #sidebar, body.dark #sidebar, html.dark #adminSidebar, body.dark #adminSidebar {
        background-color: rgba(10,14,26,0.98) !important;
        color: rgba(230,238,248,0.96) !important;
        box-shadow: 0 8px 30px rgba(2,6,23,0.28) !important;
    }
}

/* When collapsed we free the layout space so the nav/main expand to full width */
#sidebar.collapsed, #adminSidebar.collapsed {
    width: 0 !important;
    transform: none !important;
    overflow: hidden;
    padding: 0 !important;
}

/* Ensure mobile-open overrides collapsed state */
#sidebar.mobile-open, #adminSidebar.mobile-open {
    width: 16rem !important;
    transform: none !important;
    padding: 0.75rem !important;
}

/* ensure mobile close button area looks ok */
#sidebar .fi-rr-cross {
    font-size: 18px;
}

/* Mobile-specific refinements for sidebar: compact, readable, and nicer contrast */
@media (max-width: 767px) {
    /* make the overlay slightly lighter and less harsh */
    #sidebar.mobile-open, #adminSidebar.mobile-open {
        width: 72%; /* cover most of the screen but leave a little context */
        /* light mode open sidebar keeps white background; dark-mode override applied below */
        background: #ffffff;
        backdrop-filter: blur(6px);
        padding-top: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-radius: 0 12px 12px 0;
        /* allow vertical scrolling inside the sidebar on mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* prevent viewport from 'bouncing' and keep scroll inside the sidebar */
    overscroll-behavior-y: contain;
          /* ensure the sidebar fills the viewport height so overflow works
              use dynamic viewport unit when available to handle mobile browser chrome */
          height: 100dvh;
          height: 100vh;
    }

    /* Ensure dark mode gets the intended dark gradient on mobile (use !important to override defaults) */
    html.dark #sidebar.mobile-open, body.dark #sidebar.mobile-open,
    html.dark #adminSidebar.mobile-open, body.dark #adminSidebar.mobile-open {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 0, 0, 0.9) 100%) !important;
        box-shadow: 8px 0 30px rgba(2,6,23,0.45) !important;
    }

    /* position close button as a floating control */
    #sidebar .md\:hidden.p-3, #adminSidebar .md\:hidden.p-3 {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        z-index: 60;
        background: rgba(255,255,255,0.06);
        backdrop-filter: none;
        padding: 0.35rem;
        border-radius: 8px;
    }

    /* compact nav items */
    #sidebar.mobile-open nav a, #adminSidebar.mobile-open nav a {
        padding: 0.75rem 0.75rem;
        gap: 0.75rem;
        border-radius: 10px;
        font-size: 0.98rem;
        align-items: center;
    }

    #sidebar.mobile-open nav a i, #adminSidebar.mobile-open nav a i {
        font-size: 18px;
        min-width: 22px;
        text-align: center;
    }

    /* make text slightly brighter for contrast */
    #sidebar.mobile-open, #adminSidebar.mobile-open {
        color: rgba(255,255,255,0.95);
    }

    /* reduce spacing between sections */
    #sidebar.mobile-open .p-4, #adminSidebar.mobile-open .p-4 { padding: 0.75rem 0.75rem; }

    /* bottom logout / action button smaller and full-width but compact */
    #sidebar.mobile-open .px-3.py-3, #adminSidebar.mobile-open .px-3.py-3 {
        padding: 0.6rem;
    }
    #sidebar.mobile-open .px-3.py-3 a, #adminSidebar.mobile-open .px-3.py-3 a {
        display: block;
        width: 100%;
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
        text-align: center;
        font-weight: 600;
    }

    /* smaller header label */
    #sidebar.mobile-open .text-xs, #adminSidebar.mobile-open .text-xs { font-size: 11px; }
}

/* small optimizations for mobile nav spacing */
@media (max-width: 640px) {
    nav .flex.items-center.justify-between.px-4.py-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Make header action buttons slightly smaller on mobile to avoid wrapping */
@media (max-width: 640px) {
    nav .flex.items-center.gap-3 > * {
        padding: 0.35rem 0.5rem;
    }
    nav .flex.items-center.gap-3 a, nav .flex.items-center.gap-3 button {
        font-size: 0.85rem;
    }
    /* reduce avatar/logo spacing */
    nav img.w-8 { width: 32px; height: 32px; }
}

/* ------------------ Dark-mode form and editor tweaks ------------------ */
/* Ensure native form controls aren't bright white in dark mode */
html.dark input, body.dark input,
html.dark textarea, body.dark textarea,
html.dark select, body.dark select,
html.dark .rounded.border input, html.dark .w-full input {
    /* background-color: rgba(14,18,28,0.95) !important; */
    color: rgba(230,238,248,0.96) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html.dark input::placeholder, body.dark input::placeholder,
html.dark textarea::placeholder, body.dark textarea::placeholder {
    color: rgba(230,238,248,0.45) !important;
}

/* Specific rule for inputs that use simple .rounded.border pattern */
html.dark input.rounded, html.dark textarea.rounded, body.dark input.rounded, body.dark textarea.rounded {
    /* background-color: rgba(17,24,39,0.92) !important; */
    color: rgba(230,238,248,0.96) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Make any element with bg-white less glaring in dark mode (selective) */
html.dark .bg-white, body.dark .bg-white,
html.dark .bg-white\/60, body.dark .bg-white\/60,
html.dark .bg-white\/70, body.dark .bg-white\/70 {
    background-color: rgba(14,18,28,0.92) !important;
    color: rgba(230,238,248,0.96) !important;
    border-color: rgba(255,255,255,0.04) !important;
}

/* Quill editor: make toolbar and editor dark so admin editor matches theme */
.ql-toolbar.ql-snow, .ql-container.ql-snow, .ql-editor {
    background: rgba(14,18,28,0.97) !important;
    color: rgba(230,238,248,0.96) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.ql-toolbar.ql-snow button, .ql-toolbar.ql-snow .ql-picker-label, .ql-toolbar.ql-snow .ql-picker-item {
    color: rgba(230,238,248,0.9) !important;
}
.ql-editor a { color: #93c5fd !important; }
.ql-editor .spoiler { color: transparent !important; background: rgba(255,255,255,0.02) !important; }
.ql-editor .spoiler.revealed { color: inherit !important; background: transparent !important; }

/* Slightly increase contrast for form labels in dark mode */
html.dark label, body.dark label { color: rgba(230,238,248,0.9) !important; }

/* Buttons that are light in default styles should get dark variants forced */
html.dark .bg-slate-200, body.dark .bg-slate-200 { background-color: rgba(255,255,255,0.04) !important; color: rgba(230,238,248,0.9) !important; }

/* End dark-mode tweaks */

/* Fix: Tailwind Preflight removes list-style for ul/ol with a class attribute
   (it sets ul[class], ol[class] { list-style: none; }). Quill and other editors
   often output lists with a class attribute which causes markers to disappear.
   Restore sensible list markers for article content using the `.prose` wrapper. */
.prose ul[class], .prose ol[class] {
    list-style: revert; /* restore browser/default/author list style */
    margin-left: 1.25rem; /* spacing so markers are visible */
    padding-left: 0; /* prefer margin-based offset to avoid double-padding */
}
.prose ul[class] li, .prose ol[class] li {
    /* ensure marker color matches text in light/dark themes */
    color: inherit;
}

/* Stronger override to catch Tailwind/typography variants and ensure markers are visible
   across themes and when lists have classes (Quill outputs lists with classes). */
.prose ul, .prose ol, .prose ul[class], .prose ol[class] {
    list-style-position: outside !important;
    list-style-type: disc !important; /* fallback for ul */
    margin-left: 1.25rem !important;
    padding-left: 0 !important;
}
.prose ol, .prose ol[class] { list-style-type: decimal !important; }
.prose li::marker {
    color: currentColor !important; /* ensure marker is same color as text */
    opacity: 0.95 !important;
}

/* Most aggressive fallback: force list-item display and visible markers */
.prose li {
    display: list-item !important;
    margin: 0.5rem 0 !important; /* increased vertical spacing between items */
    line-height: 1.6 !important; /* improve readability */
}
.prose ul, .prose ol {
    /* custom styles appended below */
    margin-left: 1.75rem !important; /* increase indent so markers are clearly visible */
    padding-left: 0 !important;
}

/* Password visibility toggle (eye) */
.pw-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: inherit;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transform: translateY(-20%);
}

.pw-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2,6,23,0.12);
}
.pw-toggle:active { transform: translateY(0); }
.pw-toggle .icon { width: 18px; height: 18px; display: inline-block; }

/* Light mode tweak */
html:not(.dark) .pw-toggle { border-color: rgba(2,6,23,0.06); background: rgba(255,255,255,0.98); }

/* Dark mode tweak */
html.dark .pw-toggle, body.dark .pw-toggle {
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

/* Small accessibility outline when toggled */
.pw-toggle[aria-pressed="true"] { outline: 2px solid rgba(59,130,246,0.12); }


/* ================= Products filter UI styles ================= */
.products-filter-toggle {
    position: fixed;
    top: 84px;
    left: 12px;
    z-index: 1100;
    background: transparent; /* transparent background per design */
    color: #fff;
    border: 2px solid rgba(255,255,255,0.06);
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.18);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.products-filter-toggle i { font-size: 16px; color: #06b6d4; }
.products-filter-toggle:focus { outline: 3px solid rgba(14,165,233,0.18); }

#productsFilterPanel {
    /* anchor the panel near the top-left toggle so it appears "sang bên trái" */
    position: fixed;
    top: calc(84px + 48px); /* below the toggle */
    left: 12px;
    z-index: 1150;
    width: min(420px, calc(100% - 48px));
    max-width: none; /* override utility class max-width */
    margin: 0; /* override mx-auto */
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
    transform-origin: top left;
    will-change: transform, opacity;
    box-shadow: 0 18px 40px rgba(2,6,23,0.28);
}
#productsFilterPanel.hidden { transform: translateY(-8px) scale(0.995); opacity: 0; pointer-events: none; }
#productsFilterPanel:not(.hidden) { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* When the panel is open on wide screens, push the products grid to the right so
   the panel does not overlap the first card. On small screens we keep overlay behavior. */
/* Previously we pushed the grid right; override that and instead make the panel
   flow into the document on desktop so it naturally pushes the products down. */
.products-filter-open #productsGrid { margin-left: 0; }

@media (min-width: 768px) {
    /* When the filter is opened on desktop, make the panel static so it occupies
       space above the products grid and pushes content downward. */
    body.products-filter-open #productsFilterPanel {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        max-width: none;
        margin: 0 0 16px 12px; /* small left indent to match toggle */
        box-shadow: none;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Ensure the hidden state removes the panel from the flow on desktop. */
    #productsFilterPanel.hidden { display: none; }
}

/* style the letter buttons inside the panel */
#productsFilterPanel a {
    transition: all 160ms ease;
}
#productsFilterPanel a.bg-indigo-600 { box-shadow: 0 8px 20px rgba(14,165,233,0.12); }
#productsFilterPanel a:hover { transform: translateY(-3px); }

/* responsive: keep toggle visible on small screens if desired */
@media (max-width: 767px) {
    .products-filter-toggle { display: inline-flex !important; left: 12px; top: 84px; }
    /* On mobile make the panel part of the document flow (pushes content down)
       when opened. Hide it by default to avoid overlapping. */
    #productsFilterPanel {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 12px !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: none; /* hidden by default on mobile */
    }
    /* when the body has the open class, show the panel as a block so it pushes content */
    body.products-filter-open #productsFilterPanel { display: block !important; }
}

/* Toast styling for AJAX feedback */
#ajaxToastContainer { pointer-events: none; }
.ajax-toast { pointer-events: auto; }
.ajax-toast.success { background: linear-gradient(90deg,#059669,#10b981); }
.ajax-toast.error { background: linear-gradient(90deg,#dc2626,#ef4444); }
.ajax-toast.info { background: linear-gradient(90deg,#334155,#475569); }

/* small polish on product cards to show likes nicely */
.product-like-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(148,163,184,0.08);
    color: inherit;
}
html.dark .product-like-pill { border-color: rgba(255,255,255,0.04); }

/* Generic small pill for product stats (likes, views) when rendered outside the
   price container. Matches the look of the like pill and keeps spacing consistent. */
.product-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(148,163,184,0.08);
    color: inherit;
    font-weight: 600;
}
html.dark .product-stat-pill { border-color: rgba(255,255,255,0.04); }

/* --- Smooth toggle button + panel animations --- */
.products-filter-toggle {
    transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease, background 180ms ease;
    will-change: transform;
}
.products-filter-toggle:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 14px 36px rgba(2,6,23,0.28); }
.products-filter-toggle:active { transform: scale(0.98); }
.products-filter-toggle.open { transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 44px rgba(2,6,23,0.36); border-color: rgba(6,182,212,0.95); background: rgba(6,182,212,0.06); }
.products-filter-toggle .filter-label { font-weight:700; letter-spacing:0.2px; }

/* enhance panel transitions (transform+opacity already exist), add subtle transition on box-shadow */
#productsFilterPanel { transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, box-shadow 220ms ease; }

/* Smoothly animate the grid when the panel becomes static (push down) */
#productsGrid { transition: margin 220ms ease, transform 220ms ease; }

@media (min-width: 768px) {
    body.products-filter-open #productsFilterPanel { margin-bottom: 18px; }
}

/* end custom styles */

/* ensure paragraphs inside article have comfortable spacing too */
.prose p {
    margin-bottom: 0.85rem !important;
    line-height: 1.6 !important;
}

/* Prevent content from overflowing the article card on small screens: wrap long words/URLs,
   make images responsive, and allow code/pre blocks to wrap. This fixes mobile cases where
   long links or unbroken text push outside the card. */
.prose {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    /* Preserve administrator-entered newlines in plain-text descriptions */
    white-space: pre-wrap !important;
}
.prose a, .prose span, .prose li {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.prose img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
.prose pre, .prose code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Small-screen tweak: reduce side paddings inside prose so content fits better */
@media (max-width: 480px) {
    .prose { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
}

/* Global error message: allow admin-provided HTML and preserve newlines for plain text
   Use pre-wrap so line breaks are kept for messages that are plain text, and ensure
   links/images inside the message are responsive. */
.global-error-message {
    white-space: pre-wrap !important; /* preserve newlines */
    word-break: break-word !important;
}
.global-error-message img {
    max-width: 100% !important;
    height: auto !important;
}
.global-error-message a {
    word-break: break-word !important;
}



/* --- Login page small link area (forgot / register) --- */
.auth-links {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
}
.auth-links .auth-link {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: .6rem;
    font-weight: 600;
    color: #60a5fa; /* fallback link color (indigo-400) */
    background: rgba(255,255,255,0.02);
    transition: transform .12s ease, background .12s ease, color .12s ease;
    text-decoration: none;
}
.auth-links .auth-link:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Dark-mode adjustments (non-Halowin): slightly brighter links */
html.dark .auth-links .auth-link, body.dark .auth-links .auth-link {
    color: #93c5fd !important; /* light indigo */
    background: rgba(255,255,255,0.02) !important;
}

/* Custom checkbox for auth forms (remember me) */
.auth-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: .6rem;
    border-radius: 4px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    position: relative;
    transition: background .12s ease, transform .08s ease, border-color .12s ease;
}
.auth-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.auth-checkbox:checked {
    border: none;
    background: linear-gradient(90deg,#6366f1,#60a5fa);
    background-size: cover;
    background-position: center;
    /* white checkmark SVG */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}
.auth-checkbox:active { transform: translateY(1px); }

/* Ensure label sits nicely when checkbox uses inline-block */
.auth-links input.auth-checkbox + label[for="remember"],
.auth-links input.auth-checkbox + label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}



/*
    Fallback: if the browser/OS prefers dark mode via media query, apply the
    same dark-mode overrides even when the JS theme initializer can't run
    (e.g. private browsing/localStorage blocked, or JS disabled). This makes
    translucent panels and sidebar render correctly on devices like iPhone/Safari.
*/
@media (prefers-color-scheme: dark) {
        /* panels and translucent whites */
        .bg-white, .bg-white\/60, .bg-white\/70 {
                background-color: rgba(14,18,28,0.92) !important;
                color: rgba(230,238,248,0.96) !important;
                border-color: rgba(255,255,255,0.04) !important;
        }

        /* nav and sidebars */
        nav#topNav { background-color: rgba(8,12,24,0.98) !important; border-bottom-color: rgba(255,255,255,0.03) !important; box-shadow: none !important; }
        #sidebar, #adminSidebar { background-color: rgba(10,14,26,0.98) !important; border-right-color: rgba(255,255,255,0.03) !important; }

        /* modals, overlays, inputs */
        #loginModalOverlay, #previewModalOverlay { background: rgba(3,6,12,0.7) !important; }
        input, textarea, select { color: rgba(230,238,248,0.96) !important; }
        input.rounded, textarea.rounded { background-color: rgba(17,24,39,0.92) !important; border-color: rgba(255,255,255,0.06) !important; }

        /* reduce harshness of bright gradients */
        .gradient-damp::after { background: rgba(3,6,12,0.35) !important; }
}

/* Removed mobile-light helper to avoid forcing styles; rely on html.dark and element utility classes. */

/* ---------------- Admin settings page styles ---------------- */
.admin-settings-section {
    /* subtle card look that adapts to dark mode */
    background: rgba(255,255,255,0.02);
    border-radius: 0.6rem;
}
.admin-settings-section .text-sm { font-weight: 600; }
.admin-settings-section .text-xs { color: rgba(100,116,139,0.9); }
.admin-settings-section + .admin-settings-section { margin-top: 0.85rem; }

/* fine-tune inner paddings for smaller screens */
@media (max-width: 640px) {
    .admin-settings-section { padding: 0.9rem !important; }
}

/* make labels slightly bolder and inputs consistent inside admin sections */
.admin-settings-section label { color: rgba(55,65,81,0.92); }
html.dark .admin-settings-section label, body.dark .admin-settings-section label { color: rgba(226,232,240,0.92) !important; }

/* small helper to visually separate the form actions */
.admin-settings-actions { display: flex; gap: .5rem; align-items: center; }

/* Highlight the top area title */
.admin-settings-section > .text-sm { margin-bottom: .25rem; }

/* Global Error Modal styles
   Hidden by default. When the element does NOT have the 'hidden' class it becomes visible.
   Uses a very large z-index so it overlays other UI (sidebars, nav, admin panels, etc.). */
#globalErrorModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999; /* top-most overlay */
    -webkit-overflow-scrolling: touch;
}
#globalErrorModal:not(.hidden) { display: block; }

/* Backdrop that blocks interaction behind the modal */
#globalErrorModal #globalErrorBackdrop,
#globalErrorModal .global-error-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    pointer-events: auto;
}

/* Card content centered and above the backdrop */
#globalErrorCard, #globalErrorModal .global-error-content {
    position: relative;
    z-index: 1000000; /* above the backdrop */
    max-width: 720px;
    margin: 6vh auto 0 auto;
}

@media (prefers-color-scheme: dark) {
    #globalErrorCard { background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(20,27,45,0.96)); color: rgba(230,238,248,0.96); }
}

/* Smooth animation and polished controls for global error modal */
#globalErrorCard {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .32s cubic-bezier(.16,.84,.24,1), opacity .28s ease;
    padding: 1.25rem;
}
#globalErrorModal:not(.hidden) #globalErrorCard {
    transform: translateY(0);
    opacity: 1;
}

.global-error-title {
    color: #0f172a; /* slate-900 */
}
html.dark .global-error-title { color: #e6eef8; }

.global-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: .6rem;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.global-action-btn:active { transform: translateY(1px); }
.global-action-btn.primary {
    background: linear-gradient(90deg,#0ea5e9,#6366f1);
    color: white;
    box-shadow: 0 6px 20px rgba(99,102,241,0.16);
}
.global-action-btn.primary:hover { opacity: .95; }
.global-action-btn.mute {
    /* Soft frosted pill for secondary action */
    background: linear-gradient(180deg, rgba(253, 0, 0, 0.95), rgba(247,250,252,0.95));
    color: #0f172a;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    backdrop-filter: blur(6px);
}
.global-action-btn.mute:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15,23,42,0.12);
}

/* Dark mode variant: softer, inverted tones */
html.dark .global-action-btn.mute {
    background: linear-gradient(180deg, rgba(255, 0, 0 ,0.95), rgba(182, 0, 0, 0.02));
    color: #e6eef8;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 24px rgba(2,6,23,0.6);
}
html.dark .global-action-btn.mute:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(2,6,23,0.45);
}

/* Improve the card header / icon spacing on smaller screens */
@media (max-width:640px) {
    #globalErrorCard { margin: 3vh 1rem 0 1rem; }
    .global-action-btn { width: auto; padding: .45rem .75rem; }
}

/* Mobile product card styles to mirror the provided mock */
.product-mobile-card .product-price-card {
    border-style: dashed;
    border-color: rgba(148,163,184,0.12);
    background: linear-gradient(180deg, rgba(7,10,16,0.6), rgba(12,16,24,0.6));
}
.product-mobile-card .product-price {
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
}
.product-mobile-card .product-alert {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-left: 3px solid rgba(234,88,12,0.18);
}
.product-mobile-card .product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .9rem;
    border-radius: 12px;
    background: linear-gradient(180deg,#60a5fa,#3b82f6);
    color: #fff !important;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(59,130,246,0.14), inset 0 -3px 6px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.08);
    text-shadow: 0 1px 0 rgba(0,0,0,0.12);
    transition: transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s ease, opacity .12s ease;
}
.product-mobile-card .product-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(59,130,246,0.16);
}
.product-mobile-card .product-cta:active { transform: translateY(1px); }

/* Desktop / generic CTA styling */
.product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg,#60a5fa,#3b82f6);
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(59,130,246,0.12), inset 0 -3px 6px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .12s ease, box-shadow .12s ease;
}
.product-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(59,130,246,0.14); }
.product-cta:active { transform: translateY(1px); }
.product-mobile-card .product-cta-login {
    background: #2b8be6;
}
.product-mobile-card .product-cta:active { transform: translateY(1px); }
.product-mobile-card .product-price-card { padding: 1rem; border-radius: 0.6rem; }

@media (max-width:420px) {
    .product-mobile-card .product-price { font-size: 1.9rem; }
    .product-mobile-card .product-cta { padding: .7rem; }
}

/* Fix: remove pale outer container on mobile so the inner dark mobile card shows cleanly */
@media (max-width:640px) {
    /* Make the whole product area dark on mobile so there is no pale white band */
    .product-detail-card-container {
        /* background: linear-gradient(180deg, rgba(17,24,39,1), rgba(10,14,26,1)) !important; */
        padding: 0.85rem !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(2,6,23,0.25) !important;
    }
    /* Ensure the inner mobile card blends with the outer container (avoid double boxes) */
    .product-detail-card-container .product-mobile-card { margin: 0; }
    .product-detail-card-container .product-mobile-card > div { border-radius: 12px; background: transparent !important; box-shadow: none !important; }
}

/* Light-mode overrides: if page is in light mode (no html.dark), keep the outer container white */
@media (max-width:640px) {
    html:not(.dark) .product-detail-card-container,
    body:not(.dark) .product-detail-card-container {
        /* background: #ffffff !important; */
        padding: 0.85rem !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(2,6,23,0.06) !important;
    }
    /* Inner card should have a transparent background in light mode so the
       price panel can appear see-through (user requested transparent price) */
    html:not(.dark) .product-detail-card-container .product-mobile-card > div {
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Demo thumbs light-mode style */
    html:not(.dark) .demo-thumb {
        background: #ffffff !important;
        border: 1px solid rgba(2,6,23,0.06) !important;
    }
    /* Support box in light mode */
    html:not(.dark) .product-mobile-card .product-support-box {
        /* background: #ffffff !important; */
        border: 1px solid rgba(2,6,23,0.06) !important;
        color: #0f172a !important;
    }
    /* Title colors in light mode */
    html:not(.dark) .product-desc-title, html:not(.dark) .product-section-title {
        color: #0f172a !important;
    }
}

/* Ensure text inside the white mobile product container is dark and high-contrast */
@media (max-width:640px) {
    html:not(.dark) .product-detail-card-container,
    body:not(.dark) .product-detail-card-container {
        color: #0f172a !important; /* base text color */
    }
    html:not(.dark) .product-detail-card-container .text-sm,
    html:not(.dark) .product-detail-card-container .text-base,
    html:not(.dark) .product-detail-card-container p,
    html:not(.dark) .product-detail-card-container div,
    html:not(.dark) .product-detail-card-container span {
        color: #ffffff !important;
    }
    /* specifically tune small-muted text and support box text */
    html:not(.dark) .product-detail-card-container .product-support-text,
    html:not(.dark) .product-detail-card-container .product-updated-wrapper .product-updated {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    /* price should remain prominent (keep existing rose color) but ensure background contrast */
    html:not(.dark) .product-detail-card-container .product-price { color: #ef4444 !important; }
    /* button text color for CTA */
    html:not(.dark) .product-mobile-card .product-cta,
    html:not(.dark) .product-mobile-card .product-cta-login { color: #ffffff !important; }
}

/* Product description title styling */
.product-desc-title {
    display: inline-block;
    font-weight: 800;
    font-size: 1.05rem;
    color: #e6eef8;
    position: relative;
}
.product-desc-title::after {
    content: '';
    display: block;
    height: 4px;
    width: 44px;
    margin-top: 6px;
    background: linear-gradient(90deg,#ff2d55,#ff5e7a);
    border-radius: 4px;
}
html.dark .product-desc-title { color: #e6eef8; }
@media (max-width:640px) {
    .product-desc-title { font-size: 1rem; }
}

/* Slightly smaller section title variant for demo/gallery headings */
.product-section-title {
    display: inline-block;
    font-weight: 700;
    font-size: .95rem;
    color: rgba(230,238,248,0.95);
    position: relative;
}
.product-section-title::after {
    content: '';
    display: block;
    height: 3px;
    width: 36px;
    margin-top: 6px;
    background: linear-gradient(90deg,#ff2d55,#ff5e7a);
    border-radius: 3px;
}
html.dark .product-section-title { color: rgba(230,238,248,0.95); }

/* Desktop-specific readability fixes: ensure text and demo are visible in light-mode */
.product-detail-desktop { padding: 0; }
.product-detail-desktop .product-desc-title, .product-detail-desktop .product-section-title {
    color: #0f172a !important; /* Light mode text color */
}
.product-detail-desktop .product-support-text,
.product-detail-desktop .product-updated-wrapper .product-updated,
.product-detail-desktop .text-sm,
.product-detail-desktop .text-base,
.product-detail-desktop p,
.product-detail-desktop span {
    color: #0f172a !important; /* Light mode text color */
}
.product-detail-desktop .demo-thumb { background: #ffffff !important; border: 1px solid rgba(2,6,23,0.06) !important; }
.product-detail-desktop .product-price { color: #ef4444 !important; }
.product-detail-desktop .product-cta { margin: 0; }

@media (min-width: 768px) {
    /* Force desktop product detail to use a light card background and readable text
       (user requested the desktop product card to be white). This intentionally
       overrides any global dark-mode panel rules so the product section stays
       light on desktop. If you later want theme-aware behavior, remove this block. */
    html:not(.dark) .product-detail-card-container {
        /* background: #ffffff !important; Light mode background */
        color: #0f172a !important; /* Light mode text color */
        box-shadow: 0 8px 30px rgba(2,6,23,0.06) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
    html:not(.dark) .product-detail-card-container .product-desc-title,
    html:not(.dark) .product-detail-card-container .product-section-title,
    html:not(.dark) .product-detail-card-container .product-support-text,
    html:not(.dark) .product-detail-card-container .product-updated-wrapper .product-updated,
    html:not(.dark) .product-detail-card-container .text-sm,
    html:not(.dark) .product-detail-card-container .text-base,
    html:not(.dark) .product-detail-card-container p,
    html:not(.dark) .product-detail-card-container span {
        color: #ffffff !important; /* Light mode text color */
    }
    html:not(.dark) .product-detail-card-container .demo-thumb { background: #ffffff !important; border: 1px solid rgba(2,6,23,0.06) !important; }
    /* Dark mode desktop card */
    html.dark .product-detail-card-container,
    body.dark .product-detail-card-container {
        /* background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(10,14,26,0.98)) !important; */
        color: rgba(230,238,248,0.96) !important;
        box-shadow: 0 8px 30px rgba(2,6,23,0.25) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
    html.dark .product-detail-card-container .product-desc-title,
    html.dark .product-detail-card-container .product-section-title,
    html.dark .product-detail-card-container .product-support-text,
    html.dark .product-detail-card-container .product-updated-wrapper .product-updated,
    html.dark .product-detail-card-container .text-sm,
    html.dark .product-detail-card-container .text-base,
    html.dark .product-detail-card-container p,
    html.dark .product-detail-card-container span {
        color: rgba(230,238,248,0.9) !important;
    }
    html.dark .product-detail-card-container .demo-thumb { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.04) !important; }
}

/* product updated footer styling */
.product-updated-wrapper { margin-top: 1rem; }
.product-updated-wrapper .product-updated { color: rgba(15,23,42,0.85); }
html.dark .product-updated-wrapper .product-updated { color: rgba(230,238,248,0.9); }
.product-updated-wrapper { border-color: rgba(148,163,184,0.06); }

/* Support box and button styling */
.product-support-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
    border-radius: 0.6rem;
    padding: 0.9rem;
    border: 1px solid rgba(255,255,255,0.04);
}
.product-support-text { color: rgba(230,238,248,0.9); }
.product-support-box {
    /* Make support boxes fully transparent so the site background shows through.
       Keep a subtle border for separation and ensure padding/rounding remain. */
    background: transparent !important;
    border-radius: 0.6rem;
    padding: 0.9rem;
    border: 1px solid rgba(255,255,255,0.04);
}
.product-support-text { color: rgba(230,238,248,0.9); }
.product-support-btn {
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(99,102,241,0.12);
}
.product-support-btn:hover { opacity: .95; transform: translateY(-1px); }

@media (max-width:640px) {
    .product-support-box { padding: .75rem; }
    .product-support-btn { width: 100%; display: inline-flex; justify-content: center; }
}

/* Force demo thumbnail background + border to dark variants to avoid white blocks */
.demo-thumb {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}
.demo-thumb img { background: transparent; display: block; width: 100%; height: 100%; object-fit: contain; }

.product-mobile-card .product-support-box {
    /* Force transparent on mobile as well; remove heavy gradients that block the page background. */
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Make mobile product CTAs smaller (reduce height/padding and font-size) to match mock */
.product-mobile-card .product-cta,
.product-mobile-card .product-cta-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem; /* reduced vertical padding */
    font-size: 0.95rem; /* slightly smaller text */
    line-height: 1;
    border-radius: 0.6rem;
    height: auto;
    min-height: 36px; /* smaller touch target but still usable */
}

/* On small screens make the CTA occupy about half width and stay right-aligned */
/* Mobile: make CTA a small centered pill instead of half-width */
@media (max-width:640px) {
    .product-mobile-card .product-cta,
    .product-mobile-card .product-cta-login {
        width: auto !important;
        padding: .45rem .7rem !important;
        font-size: 0.9rem !important;
        min-height: 34px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 8px 22px rgba(59,130,246,0.12) !important;
        white-space: normal !important; /* allow wrapping to stack text if needed */
    }
    /* ensure the inline button doesn't force centering (container controls alignment) */
    .product-mobile-card .product-cta { margin: 0; }
}

/* Theme-aware borders for CTA and boxes */
html.dark .product-cta, html.dark .product-mobile-card .product-cta {
    border: 1px solid rgba(255,255,255,0.06) !important;
}
html:not(.dark) .product-cta, html:not(.dark) .product-mobile-card .product-cta {
    border: 1px solid rgba(2,6,23,0.06) !important;
}

/* Password toggle button (eye) alignment helper:
   Use inset vertical centering so the icon always sits centered inside the input
   regardless of input padding/line-height variations across themes. */
.password-toggle {
    position: absolute;
    right: 0.75rem; /* matches .right-3 */
    top: 50%;
        /* Nudge slightly down to match input visual center across themes (user requested -10%) */
        transform: translateY(-10%) !important;
    height: 36px; /* friendly touch target */
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(148,163,184,0.9);
    cursor: pointer;
    z-index: 6;
    padding: 0;
}
.password-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.08); border-radius: 8px; }
.password-toggle i { font-size: 16px; line-height: 1; vertical-align: middle; }

@media (max-width:640px) {
    .password-toggle { height: 32px; width: 32px; right: 0.6rem; }
    .password-toggle i { font-size: 14px; }
}

/* Ensure inputs inside .relative containers leave room for the toggle button */
.relative input[type="password"], .relative input[type="text"] {
    padding-right: 3.25rem !important; /* space for the 36px button + gap */
}

/* Price card border tuning */
.product-price-card { border: 1px solid rgba(255,255,255,0.04); }
/* Make the mobile price card transparent in light mode (remove white background).
    This keeps the outer product container light but the inner price area shows
    the outer background so the price appears 'inset' and not on a white box. */
html:not(.dark) .product-price-card {
    background: transparent !important;
    border: 1px solid rgba(2,6,23,0.06) !important; /* subtle thin border */
    box-shadow: 0 6px 18px rgba(2,6,23,0.035) !important; /* soft lift for readability */
}

/* Ensure support-box has visible border in both themes */
html.dark .product-support-box { border-color: rgba(255,255,255,0.04) !important; }
/* html:not(.dark) .product-support-box { border-color: rgba(2,6,23,0.06) !important; background: linear-gradient(180deg,#ffffff,#f8fafc) !important; color: #0f172a !important; } */

/* If you want the buttons even smaller, reduce min-height and font-size further */
@media (min-width: 641px) {
    /* keep default on larger screens */
    .product-mobile-card .product-cta,
    .product-mobile-card .product-cta-login { padding: 0.6rem 1rem; font-size: 1rem; }
}

/* ---------------- Decorative bottom info panel ---------------- */
.product-info-panel { padding-bottom: 0.5rem; }
.product-info-accent {
    /* keep room for corner accents using pseudo-elements */
    position: relative;
    border-radius: 18px;
}
.product-info-accent::before,
.product-info-accent::after {
    content: '';
    position: absolute;
    width: 64px;
    height: 28px;
    z-index: 2;
    border-radius: 10px;
}
.product-info-accent::before {
    left: -12px;
    top: -12px;
    background: linear-gradient(90deg,#9b5cff,#ff49b1); /* purple -> pink */
    transform: rotate(-14deg);
}
.product-info-accent::after {
    right: -12px;
    bottom: -12px;
    background: linear-gradient(90deg,#06b6d4,#7c3aed); /* cyan -> violet */
    transform: rotate(14deg);
}
.product-info-inner {
    position: relative;
    z-index: 3;
    /* make inner panel transparent per request */
    background: transparent !important;
    padding: 18px;
    border-radius: 14px;
    box-shadow: none !important; /* remove heavy shadow so underlying content shows through */
    color: #60a5fa;
    border: 1px solid rgba(255,255,255,0.03); /* subtle outline to hold shape */
    backdrop-filter: none; /* avoid additional blur unless desired */
}
.product-info-inner p { margin: 0 0 8px 0; color: #7dd3fc; }

/* Light-mode variant: transparent but keep a subtle dark outline for readability */
html:not(.dark) .product-info-inner {
    background: transparent !important;
    color: #0369a1;
    border-color: rgba(2,6,23,0.06) !important;
}
html:not(.dark) .product-info-inner p { color: #000000; }

@media (max-width:640px) {
    .product-info-accent::before, .product-info-accent::after { width: 52px; height: 22px; }
    .product-info-inner { padding: 14px; }
}

/* Simple gallery/lightbox for demo images */
.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200000 !important;
}
.gallery-modal.open { display: flex; }
.gallery-modal .gallery-inner { max-width: 95vw; max-height: 90vh; position: relative; }
.gallery-modal img { max-width: 100%; max-height: 90vh; display: block; border-radius: 8px; }
.gallery-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    border: none;
    z-index: 12;
}
.gallery-prev, .gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 999px;
    padding: 10px;
    cursor: pointer;
    border: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(2,6,23,0.35);
    z-index: 11;
}
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-caption { margin-top: 8px; text-align: center; color: rgba(255,255,255,0.9); font-size: .95rem; }
@media (max-width:640px) {
    .gallery-prev { left: 8px; width: 40px; height: 40px; padding: 8px; }
    .gallery-next { right: 8px; width: 40px; height: 40px; padding: 8px; }
    .gallery-close { right: 8px; top: 8px; }
}



.hk-pinned.img-badge.left.jb-red {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 0 5px;
    background: linear-gradient(to right, #FF5722, #ff9800, #FFC107) !important;
    border-radius: 9px 5px 5px 9px;
    color: #fff;
    padding-right: 10px;
}

.hk-pinned.img-badge.left.jb-red:before {
    -webkit-animation: burn 0.9s linear alternate infinite;
    animation: burn .9s linear alternate infinite;
    right: -43px;
    top: -26px;
    z-index: 2;
    background: linear-gradient(0deg, #ffb305 10%, #FF9800 20%, #E91E63 50%, #e91e1e 99%);
    opacity: 0.7;
    position: absolute;
    content: "";
    transform: rotate(90deg);
    height: 70px;
    width: 35px;
}

.hk-pinned.img-badge.left.jb-red:after {
    z-index: 1;
    opacity: 1;
    -webkit-animation: burn_alt .7s linear alternate infinite;
    animation: burn_alt .7s linear alternate infinite;
    right: -45px;
    top: -32px;
    background: linear-gradient(0deg, #ffb305 10%, #ffbd04 20%, #ed6434 50%, #fa4708 59%);
    position: absolute;
    content: "";
    transform: rotate(90deg);
    height: 80px;
    width: 30px;
}

@-webkit-keyframes burn {
    0% {
        -webkit-clip-path: polygon(51% 94%, 44% 93%, 40% 92%, 35% 89%, 31% 83%, 32% 77%, 34% 71%, 38% 62%, 38% 55%, 38% 47%, 42% 52%, 45% 56%, 45% 53%, 45% 47%, 45% 42%, 46% 40%, 49% 35%, 50% 44%, 51% 49%, 54% 54%, 56% 59%, 58% 62%, 59% 56%, 60% 52%, 63% 57%, 63% 62%, 61% 68%, 63% 72%, 65% 77%, 67% 81%, 66% 86%, 63% 90%, 60% 92%);
        clip-path: polygon(51% 94%, 44% 93%, 40% 92%, 35% 89%, 31% 83%, 32% 77%, 34% 71%, 38% 62%, 38% 55%, 38% 47%, 42% 52%, 45% 56%, 45% 53%, 45% 47%, 45% 42%, 46% 40%, 49% 35%, 50% 44%, 51% 49%, 54% 54%, 56% 59%, 58% 62%, 59% 56%, 60% 52%, 63% 57%, 63% 62%, 61% 68%, 63% 72%, 65% 77%, 67% 81%, 66% 86%, 63% 90%, 60% 92%);
    }

    25% {
        -webkit-clip-path: polygon(49% 97%, 41% 97%, 35% 92%, 33% 86%, 34% 80%, 30% 74%, 34% 77%, 38% 81%, 38% 78%, 36% 72%, 35% 67%, 37% 61%, 37% 54%, 39% 61%, 39% 67%, 43% 63%, 43% 58%, 45% 44%, 44% 58%, 48% 66%, 51% 67%, 51% 59%, 54% 67%, 56% 72%, 57% 79%, 59% 77%, 60% 71%, 61% 77%, 61% 83%, 60% 89%, 61% 94%, 57% 97%, 52% 98%);
        clip-path: polygon(49% 97%, 41% 97%, 35% 92%, 33% 86%, 34% 80%, 30% 74%, 34% 77%, 38% 81%, 38% 78%, 36% 72%, 35% 67%, 37% 61%, 37% 54%, 39% 61%, 39% 67%, 43% 63%, 43% 58%, 45% 44%, 44% 58%, 48% 66%, 51% 67%, 51% 59%, 54% 67%, 56% 72%, 57% 79%, 59% 77%, 60% 71%, 61% 77%, 61% 83%, 60% 89%, 61% 94%, 57% 97%, 52% 98%);
    }

    50% {
        -webkit-clip-path: polygon(46% 97%, 39% 96%, 35% 89%, 36% 84%, 34% 77%, 30% 73%, 30% 65%, 30% 70%, 35% 75%, 38% 68%, 37% 61%, 40% 53%, 41% 42%, 42% 56%, 44% 65%, 50% 67%, 51% 57%, 53% 68%, 52% 74%, 51% 81%, 55% 78%, 57% 72%, 58% 79%, 57% 85%, 55% 88%, 60% 87%, 63% 82%, 63% 89%, 59% 94%, 55% 98%, 51% 92%, 50% 99%, 45% 96%);
        clip-path: polygon(46% 97%, 39% 96%, 35% 89%, 36% 84%, 34% 77%, 30% 73%, 30% 65%, 30% 70%, 35% 75%, 38% 68%, 37% 61%, 40% 53%, 41% 42%, 42% 56%, 44% 65%, 50% 67%, 51% 57%, 53% 68%, 52% 74%, 51% 81%, 55% 78%, 57% 72%, 58% 79%, 57% 85%, 55% 88%, 60% 87%, 63% 82%, 63% 89%, 59% 94%, 55% 98%, 51% 92%, 50% 99%, 45% 96%);
    }

    75% {
        -webkit-clip-path: polygon(45% 97%, 38% 97%, 33% 93%, 31% 87%, 31% 81%, 29% 76%, 25% 69%, 29% 61%, 30% 69%, 35% 71%, 35% 62%, 34% 54%, 38% 45%, 38% 54%, 43% 62%, 47% 57%, 48% 49%, 44% 38%, 50% 46%, 53% 60%, 54% 71%, 53% 79%, 59% 76%, 60% 66%, 64% 73%, 63% 79%, 59% 85%, 64% 90%, 68% 84%, 68% 92%, 60% 97%, 53% 98%, 48% 99%);
        clip-path: polygon(45% 97%, 38% 97%, 33% 93%, 31% 87%, 31% 81%, 29% 76%, 25% 69%, 29% 61%, 30% 69%, 35% 71%, 35% 62%, 34% 54%, 38% 45%, 38% 54%, 43% 62%, 47% 57%, 48% 49%, 44% 38%, 50% 46%, 53% 60%, 54% 71%, 53% 79%, 59% 76%, 60% 66%, 64% 73%, 63% 79%, 59% 85%, 64% 90%, 68% 84%, 68% 92%, 60% 97%, 53% 98%, 48% 99%);
    }

    100% {
        -webkit-clip-path: polygon(48% 97%, 42% 97%, 37% 93%, 31% 92%, 28% 88%, 26% 81%, 29% 84%, 34% 84%, 33% 79%, 30% 74%, 31% 67%, 34% 57%, 34% 65%, 39% 71%, 43% 65%, 43% 55%, 40% 45%, 48% 59%, 49% 69%, 51% 76%, 55% 71%, 54% 65%, 54% 58%, 58% 64%, 61% 72%, 57% 82%, 61% 87%, 64% 78%, 66% 85%, 64% 93%, 57% 96%, 54% 93%, 48% 97%);
        clip-path: polygon(48% 97%, 42% 97%, 37% 93%, 31% 92%, 28% 88%, 26% 81%, 29% 84%, 34% 84%, 33% 79%, 30% 74%, 31% 67%, 34% 57%, 34% 65%, 39% 71%, 43% 65%, 43% 55%, 40% 45%, 48% 59%, 49% 69%, 51% 76%, 55% 71%, 54% 65%, 54% 58%, 58% 64%, 61% 72%, 57% 82%, 61% 87%, 64% 78%, 66% 85%, 64% 93%, 57% 96%, 54% 93%, 48% 97%);
    }
}

@keyframes burn {
    0% {
        -webkit-clip-path: polygon(51% 94%, 44% 93%, 40% 92%, 35% 89%, 31% 83%, 32% 77%, 34% 71%, 38% 62%, 38% 55%, 38% 47%, 42% 52%, 45% 56%, 45% 53%, 45% 47%, 45% 42%, 46% 40%, 49% 35%, 50% 44%, 51% 49%, 54% 54%, 56% 59%, 58% 62%, 59% 56%, 60% 52%, 63% 57%, 63% 62%, 61% 68%, 63% 72%, 65% 77%, 67% 81%, 66% 86%, 63% 90%, 60% 92%);
        clip-path: polygon(51% 94%, 44% 93%, 40% 92%, 35% 89%, 31% 83%, 32% 77%, 34% 71%, 38% 62%, 38% 55%, 38% 47%, 42% 52%, 45% 56%, 45% 53%, 45% 47%, 45% 42%, 46% 40%, 49% 35%, 50% 44%, 51% 49%, 54% 54%, 56% 59%, 58% 62%, 59% 56%, 60% 52%, 63% 57%, 63% 62%, 61% 68%, 63% 72%, 65% 77%, 67% 81%, 66% 86%, 63% 90%, 60% 92%);
    }

    25% {
        -webkit-clip-path: polygon(49% 97%, 41% 97%, 35% 92%, 33% 86%, 34% 80%, 30% 74%, 34% 77%, 38% 81%, 38% 78%, 36% 72%, 35% 67%, 37% 61%, 37% 54%, 39% 61%, 39% 67%, 43% 63%, 43% 58%, 45% 44%, 44% 58%, 48% 66%, 51% 67%, 51% 59%, 54% 67%, 56% 72%, 57% 79%, 59% 77%, 60% 71%, 61% 77%, 61% 83%, 60% 89%, 61% 94%, 57% 97%, 52% 98%);
        clip-path: polygon(49% 97%, 41% 97%, 35% 92%, 33% 86%, 34% 80%, 30% 74%, 34% 77%, 38% 81%, 38% 78%, 36% 72%, 35% 67%, 37% 61%, 37% 54%, 39% 61%, 39% 67%, 43% 63%, 43% 58%, 45% 44%, 44% 58%, 48% 66%, 51% 67%, 51% 59%, 54% 67%, 56% 72%, 57% 79%, 59% 77%, 60% 71%, 61% 77%, 61% 83%, 60% 89%, 61% 94%, 57% 97%, 52% 98%);
    }

    50% {
        -webkit-clip-path: polygon(46% 97%, 39% 96%, 35% 89%, 36% 84%, 34% 77%, 30% 73%, 30% 65%, 30% 70%, 35% 75%, 38% 68%, 37% 61%, 40% 53%, 41% 42%, 42% 56%, 44% 65%, 50% 67%, 51% 57%, 53% 68%, 52% 74%, 51% 81%, 55% 78%, 57% 72%, 58% 79%, 57% 85%, 55% 88%, 60% 87%, 63% 82%, 63% 89%, 59% 94%, 55% 98%, 51% 92%, 50% 99%, 45% 96%);
        clip-path: polygon(46% 97%, 39% 96%, 35% 89%, 36% 84%, 34% 77%, 30% 73%, 30% 65%, 30% 70%, 35% 75%, 38% 68%, 37% 61%, 40% 53%, 41% 42%, 42% 56%, 44% 65%, 50% 67%, 51% 57%, 53% 68%, 52% 74%, 51% 81%, 55% 78%, 57% 72%, 58% 79%, 57% 85%, 55% 88%, 60% 87%, 63% 82%, 63% 89%, 59% 94%, 55% 98%, 51% 92%, 50% 99%, 45% 96%);
    }

    75% {
        -webkit-clip-path: polygon(45% 97%, 38% 97%, 33% 93%, 31% 87%, 31% 81%, 29% 76%, 25% 69%, 29% 61%, 30% 69%, 35% 71%, 35% 62%, 34% 54%, 38% 45%, 38% 54%, 43% 62%, 47% 57%, 48% 49%, 44% 38%, 50% 46%, 53% 60%, 54% 71%, 53% 79%, 59% 76%, 60% 66%, 64% 73%, 63% 79%, 59% 85%, 64% 90%, 68% 84%, 68% 92%, 60% 97%, 53% 98%, 48% 99%);
        clip-path: polygon(45% 97%, 38% 97%, 33% 93%, 31% 87%, 31% 81%, 29% 76%, 25% 69%, 29% 61%, 30% 69%, 35% 71%, 35% 62%, 34% 54%, 38% 45%, 38% 54%, 43% 62%, 47% 57%, 48% 49%, 44% 38%, 50% 46%, 53% 60%, 54% 71%, 53% 79%, 59% 76%, 60% 66%, 64% 73%, 63% 79%, 59% 85%, 64% 90%, 68% 84%, 68% 92%, 60% 97%, 53% 98%, 48% 99%);
    }

    100% {
        -webkit-clip-path: polygon(48% 97%, 42% 97%, 37% 93%, 31% 92%, 28% 88%, 26% 81%, 29% 84%, 34% 84%, 33% 79%, 30% 74%, 31% 67%, 34% 57%, 34% 65%, 39% 71%, 43% 65%, 43% 55%, 40% 45%, 48% 59%, 49% 69%, 51% 76%, 55% 71%, 54% 65%, 54% 58%, 58% 64%, 61% 72%, 57% 82%, 61% 87%, 64% 78%, 66% 85%, 64% 93%, 57% 96%, 54% 93%, 48% 97%);
        clip-path: polygon(48% 97%, 42% 97%, 37% 93%, 31% 92%, 28% 88%, 26% 81%, 29% 84%, 34% 84%, 33% 79%, 30% 74%, 31% 67%, 34% 57%, 34% 65%, 39% 71%, 43% 65%, 43% 55%, 40% 45%, 48% 59%, 49% 69%, 51% 76%, 55% 71%, 54% 65%, 54% 58%, 58% 64%, 61% 72%, 57% 82%, 61% 87%, 64% 78%, 66% 85%, 64% 93%, 57% 96%, 54% 93%, 48% 97%);
    }
}

@-webkit-keyframes burn_alt {
    0% {
        -webkit-clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%);
        clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%);
    }

    25% {
        -webkit-clip-path: polygon(44% 99%, 41% 99%, 35% 98%, 29% 97%, 24% 93%, 21% 86%, 20% 80%, 16% 74%, 16% 64%, 16% 71%, 21% 75%, 25% 72%, 25% 65%, 22% 59%, 19% 53%, 19% 44%, 21% 52%, 25% 59%, 29% 57%, 29% 51%, 26% 44%, 26% 38%, 30% 32%, 31% 26%, 30% 18%, 34% 25%, 33% 35%, 33% 44%, 34% 50%, 39% 53%, 44% 52%, 45% 49%, 44% 44%, 42% 38%, 44% 33%, 48% 26%, 45% 35%, 47% 41%, 50% 44%, 51% 52%, 49% 60%, 48% 65%, 53% 69%, 58% 65%, 57% 59%, 58% 51%, 62% 41%, 66% 40%, 64% 47%, 61% 58%, 63% 66%, 66% 68%, 70% 67%, 72% 62%, 73% 57%, 71% 48%, 75% 53%, 79% 57%, 79% 64%, 76% 70%, 72% 75%, 70% 78%, 74% 80%, 78% 79%, 82% 76%, 84% 71%, 85% 66%, 84% 62%, 88% 67%, 89% 72%, 89% 79%, 87% 83%, 84% 89%, 81% 93%, 76% 97%, 69% 98%, 60% 99%, 54% 99%, 48% 100%, 45% 97%);
        clip-path: polygon(44% 99%, 41% 99%, 35% 98%, 29% 97%, 24% 93%, 21% 86%, 20% 80%, 16% 74%, 16% 64%, 16% 71%, 21% 75%, 25% 72%, 25% 65%, 22% 59%, 19% 53%, 19% 44%, 21% 52%, 25% 59%, 29% 57%, 29% 51%, 26% 44%, 26% 38%, 30% 32%, 31% 26%, 30% 18%, 34% 25%, 33% 35%, 33% 44%, 34% 50%, 39% 53%, 44% 52%, 45% 49%, 44% 44%, 42% 38%, 44% 33%, 48% 26%, 45% 35%, 47% 41%, 50% 44%, 51% 52%, 49% 60%, 48% 65%, 53% 69%, 58% 65%, 57% 59%, 58% 51%, 62% 41%, 66% 40%, 64% 47%, 61% 58%, 63% 66%, 66% 68%, 70% 67%, 72% 62%, 73% 57%, 71% 48%, 75% 53%, 79% 57%, 79% 64%, 76% 70%, 72% 75%, 70% 78%, 74% 80%, 78% 79%, 82% 76%, 84% 71%, 85% 66%, 84% 62%, 88% 67%, 89% 72%, 89% 79%, 87% 83%, 84% 89%, 81% 93%, 76% 97%, 69% 98%, 60% 99%, 54% 99%, 48% 100%, 45% 97%);
    }

    50% {
        -webkit-clip-path: polygon(45% 99%, 40% 98%, 34% 98%, 31% 96%, 28% 93%, 26% 89%, 27% 84%, 26% 81%, 23% 77%, 20% 73%, 18% 70%, 19% 65%, 19% 60%, 20% 53%, 20% 43%, 24% 41%, 28% 32%, 28% 40%, 28% 48%, 29% 53%, 33% 52%, 35% 49%, 36% 42%, 36% 35%, 36% 27%, 39% 19%, 42% 12%, 40% 23%, 39% 29%, 41% 37%, 43% 41%, 44% 47%, 45% 52%, 47% 55%, 50% 57%, 52% 54%, 53% 48%, 52% 42%, 51% 33%, 50% 26%, 54% 36%, 55% 39%, 57% 46%, 57% 52%, 55% 58%, 55% 61%, 58% 65%, 62% 64%, 64% 60%, 65% 54%, 64% 49%, 65% 43%, 68% 38%, 67% 44%, 69% 51%, 72% 53%, 72% 59%, 70% 65%, 68% 69%, 68% 74%, 71% 75%, 74% 73%, 76% 69%, 78% 63%, 82% 58%, 81% 63%, 81% 69%, 81% 75%, 76% 80%, 75% 85%, 79% 87%, 82% 84%, 83% 91%, 79% 94%, 75% 96%, 71% 97%, 64% 98%, 58% 99%, 53% 98%, 46% 100%);
        clip-path: polygon(45% 99%, 40% 98%, 34% 98%, 31% 96%, 28% 93%, 26% 89%, 27% 84%, 26% 81%, 23% 77%, 20% 73%, 18% 70%, 19% 65%, 19% 60%, 20% 53%, 20% 43%, 24% 41%, 28% 32%, 28% 40%, 28% 48%, 29% 53%, 33% 52%, 35% 49%, 36% 42%, 36% 35%, 36% 27%, 39% 19%, 42% 12%, 40% 23%, 39% 29%, 41% 37%, 43% 41%, 44% 47%, 45% 52%, 47% 55%, 50% 57%, 52% 54%, 53% 48%, 52% 42%, 51% 33%, 50% 26%, 54% 36%, 55% 39%, 57% 46%, 57% 52%, 55% 58%, 55% 61%, 58% 65%, 62% 64%, 64% 60%, 65% 54%, 64% 49%, 65% 43%, 68% 38%, 67% 44%, 69% 51%, 72% 53%, 72% 59%, 70% 65%, 68% 69%, 68% 74%, 71% 75%, 74% 73%, 76% 69%, 78% 63%, 82% 58%, 81% 63%, 81% 69%, 81% 75%, 76% 80%, 75% 85%, 79% 87%, 82% 84%, 83% 91%, 79% 94%, 75% 96%, 71% 97%, 64% 98%, 58% 99%, 53% 98%, 46% 100%);
    }

    75% {
        -webkit-clip-path: polygon(45% 99%, 41% 99%, 35% 98%, 30% 98%, 25% 94%, 22% 89%, 21% 84%, 23% 77%, 23% 70%, 19% 63%, 23% 66%, 27% 71%, 28% 76%, 32% 78%, 35% 72%, 32% 67%, 28% 64%, 24% 58%, 24% 49%, 27% 42%, 30% 34%, 31% 24%, 29% 13%, 33% 18%, 38% 25%, 38% 36%, 37% 44%, 41% 48%, 45% 48%, 48% 45%, 48% 39%, 46% 33%, 48% 27%, 52% 20%, 50% 29%, 51% 38%, 53% 44%, 54% 52%, 56% 57%, 61% 57%, 64% 55%, 65% 48%, 63% 39%, 63% 32%, 66% 37%, 69% 44%, 70% 52%, 68% 59%, 66% 64%, 67% 69%, 73% 72%, 76% 71%, 77% 66%, 76% 58%, 76% 51%, 80% 57%, 82% 62%, 82% 68%, 80% 73%, 77% 78%, 74% 82%, 75% 87%, 78% 87%, 81% 84%, 84% 79%, 86% 74%, 88% 78%, 87% 83%, 84% 89%, 82% 92%, 78% 97%, 74% 97%, 69% 97%, 66% 98%, 61% 98%, 57% 97%, 53% 99%, 49% 96%, 47% 99%, 48% 99%);
        clip-path: polygon(45% 99%, 41% 99%, 35% 98%, 30% 98%, 25% 94%, 22% 89%, 21% 84%, 23% 77%, 23% 70%, 19% 63%, 23% 66%, 27% 71%, 28% 76%, 32% 78%, 35% 72%, 32% 67%, 28% 64%, 24% 58%, 24% 49%, 27% 42%, 30% 34%, 31% 24%, 29% 13%, 33% 18%, 38% 25%, 38% 36%, 37% 44%, 41% 48%, 45% 48%, 48% 45%, 48% 39%, 46% 33%, 48% 27%, 52% 20%, 50% 29%, 51% 38%, 53% 44%, 54% 52%, 56% 57%, 61% 57%, 64% 55%, 65% 48%, 63% 39%, 63% 32%, 66% 37%, 69% 44%, 70% 52%, 68% 59%, 66% 64%, 67% 69%, 73% 72%, 76% 71%, 77% 66%, 76% 58%, 76% 51%, 80% 57%, 82% 62%, 82% 68%, 80% 73%, 77% 78%, 74% 82%, 75% 87%, 78% 87%, 81% 84%, 84% 79%, 86% 74%, 88% 78%, 87% 83%, 84% 89%, 82% 92%, 78% 97%, 74% 97%, 69% 97%, 66% 98%, 61% 98%, 57% 97%, 53% 99%, 49% 96%, 47% 99%, 48% 99%);
    }

    100% {
        -webkit-clip-path: polygon(47% 99%, 42% 99%, 37% 98%, 32% 96%, 28% 92%, 26% 89%, 26% 83%, 26% 80%, 26% 72%, 23% 67%, 16% 63%, 14% 52%, 16% 46%, 16% 53%, 20% 60%, 26% 58%, 27% 51%, 25% 46%, 20% 41%, 19% 36%, 19% 30%, 21% 26%, 24% 20%, 23% 13%, 22% 7%, 26% 11%, 28% 17%, 28% 24%, 26% 30%, 30% 34%, 34% 34%, 39% 32%, 40% 27%, 38% 21%, 43% 28%, 43% 36%, 41% 41%, 46% 44%, 51% 41%, 53% 35%, 53% 26%, 57% 26%, 59% 33%, 60% 39%, 57% 46%, 55% 53%, 58% 57%, 64% 56%, 66% 52%, 69% 41%, 70% 48%, 69% 56%, 66% 63%, 64% 67%, 65% 71%, 70% 71%, 74% 68%, 76% 62%, 77% 54%, 79% 60%, 81% 66%, 80% 71%, 76% 75%, 72% 78%, 71% 82%, 75% 84%, 80% 83%, 84% 78%, 86% 83%, 83% 89%, 78% 92%, 74% 92%, 73% 96%, 69% 97%, 65% 96%, 62% 98%, 57% 99%, 54% 97%, 51% 99%, 46% 99%);
        clip-path: polygon(47% 99%, 42% 99%, 37% 98%, 32% 96%, 28% 92%, 26% 89%, 26% 83%, 26% 80%, 26% 72%, 23% 67%, 16% 63%, 14% 52%, 16% 46%, 16% 53%, 20% 60%, 26% 58%, 27% 51%, 25% 46%, 20% 41%, 19% 36%, 19% 30%, 21% 26%, 24% 20%, 23% 13%, 22% 7%, 26% 11%, 28% 17%, 28% 24%, 26% 30%, 30% 34%, 34% 34%, 39% 32%, 40% 27%, 38% 21%, 43% 28%, 43% 36%, 41% 41%, 46% 44%, 51% 41%, 53% 35%, 53% 26%, 57% 26%, 59% 33%, 60% 39%, 57% 46%, 55% 53%, 58% 57%, 64% 56%, 66% 52%, 69% 41%, 70% 48%, 69% 56%, 66% 63%, 64% 67%, 65% 71%, 70% 71%, 74% 68%, 76% 62%, 77% 54%, 79% 60%, 81% 66%, 80% 71%, 76% 75%, 72% 78%, 71% 82%, 75% 84%, 80% 83%, 84% 78%, 86% 83%, 83% 89%, 78% 92%, 74% 92%, 73% 96%, 69% 97%, 65% 96%, 62% 98%, 57% 99%, 54% 97%, 51% 99%, 46% 99%);
    }
}

@keyframes burn_alt {
    0% {
        -webkit-clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%);
        clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%);
    }

    25% {
        -webkit-clip-path: polygon(44% 99%, 41% 99%, 35% 98%, 29% 97%, 24% 93%, 21% 86%, 20% 80%, 16% 74%, 16% 64%, 16% 71%, 21% 75%, 25% 72%, 25% 65%, 22% 59%, 19% 53%, 19% 44%, 21% 52%, 25% 59%, 29% 57%, 29% 51%, 26% 44%, 26% 38%, 30% 32%, 31% 26%, 30% 18%, 34% 25%, 33% 35%, 33% 44%, 34% 50%, 39% 53%, 44% 52%, 45% 49%, 44% 44%, 42% 38%, 44% 33%, 48% 26%, 45% 35%, 47% 41%, 50% 44%, 51% 52%, 49% 60%, 48% 65%, 53% 69%, 58% 65%, 57% 59%, 58% 51%, 62% 41%, 66% 40%, 64% 47%, 61% 58%, 63% 66%, 66% 68%, 70% 67%, 72% 62%, 73% 57%, 71% 48%, 75% 53%, 79% 57%, 79% 64%, 76% 70%, 72% 75%, 70% 78%, 74% 80%, 78% 79%, 82% 76%, 84% 71%, 85% 66%, 84% 62%, 88% 67%, 89% 72%, 89% 79%, 87% 83%, 84% 89%, 81% 93%, 76% 97%, 69% 98%, 60% 99%, 54% 99%, 48% 100%, 45% 97%);
        clip-path: polygon(44% 99%, 41% 99%, 35% 98%, 29% 97%, 24% 93%, 21% 86%, 20% 80%, 16% 74%, 16% 64%, 16% 71%, 21% 75%, 25% 72%, 25% 65%, 22% 59%, 19% 53%, 19% 44%, 21% 52%, 25% 59%, 29% 57%, 29% 51%, 26% 44%, 26% 38%, 30% 32%, 31% 26%, 30% 18%, 34% 25%, 33% 35%, 33% 44%, 34% 50%, 39% 53%, 44% 52%, 45% 49%, 44% 44%, 42% 38%, 44% 33%, 48% 26%, 45% 35%, 47% 41%, 50% 44%, 51% 52%, 49% 60%, 48% 65%, 53% 69%, 58% 65%, 57% 59%, 58% 51%, 62% 41%, 66% 40%, 64% 47%, 61% 58%, 63% 66%, 66% 68%, 70% 67%, 72% 62%, 73% 57%, 71% 48%, 75% 53%, 79% 57%, 79% 64%, 76% 70%, 72% 75%, 70% 78%, 74% 80%, 78% 79%, 82% 76%, 84% 71%, 85% 66%, 84% 62%, 88% 67%, 89% 72%, 89% 79%, 87% 83%, 84% 89%, 81% 93%, 76% 97%, 69% 98%, 60% 99%, 54% 99%, 48% 100%, 45% 97%);
    }

    50% {
        -webkit-clip-path: polygon(45% 99%, 40% 98%, 34% 98%, 31% 96%, 28% 93%, 26% 89%, 27% 84%, 26% 81%, 23% 77%, 20% 73%, 18% 70%, 19% 65%, 19% 60%, 20% 53%, 20% 43%, 24% 41%, 28% 32%, 28% 40%, 28% 48%, 29% 53%, 33% 52%, 35% 49%, 36% 42%, 36% 35%, 36% 27%, 39% 19%, 42% 12%, 40% 23%, 39% 29%, 41% 37%, 43% 41%, 44% 47%, 45% 52%, 47% 55%, 50% 57%, 52% 54%, 53% 48%, 52% 42%, 51% 33%, 50% 26%, 54% 36%, 55% 39%, 57% 46%, 57% 52%, 55% 58%, 55% 61%, 58% 65%, 62% 64%, 64% 60%, 65% 54%, 64% 49%, 65% 43%, 68% 38%, 67% 44%, 69% 51%, 72% 53%, 72% 59%, 70% 65%, 68% 69%, 68% 74%, 71% 75%, 74% 73%, 76% 69%, 78% 63%, 82% 58%, 81% 63%, 81% 69%, 81% 75%, 76% 80%, 75% 85%, 79% 87%, 82% 84%, 83% 91%, 79% 94%, 75% 96%, 71% 97%, 64% 98%, 58% 99%, 53% 98%, 46% 100%);
        clip-path: polygon(45% 99%, 40% 98%, 34% 98%, 31% 96%, 28% 93%, 26% 89%, 27% 84%, 26% 81%, 23% 77%, 20% 73%, 18% 70%, 19% 65%, 19% 60%, 20% 53%, 20% 43%, 24% 41%, 28% 32%, 28% 40%, 28% 48%, 29% 53%, 33% 52%, 35% 49%, 36% 42%, 36% 35%, 36% 27%, 39% 19%, 42% 12%, 40% 23%, 39% 29%, 41% 37%, 43% 41%, 44% 47%, 45% 52%, 47% 55%, 50% 57%, 52% 54%, 53% 48%, 52% 42%, 51% 33%, 50% 26%, 54% 36%, 55% 39%, 57% 46%, 57% 52%, 55% 58%, 55% 61%, 58% 65%, 62% 64%, 64% 60%, 65% 54%, 64% 49%, 65% 43%, 68% 38%, 67% 44%, 69% 51%, 72% 53%, 72% 59%, 70% 65%, 68% 69%, 68% 74%, 71% 75%, 74% 73%, 76% 69%, 78% 63%, 82% 58%, 81% 63%, 81% 69%, 81% 75%, 76% 80%, 75% 85%, 79% 87%, 82% 84%, 83% 91%, 79% 94%, 75% 96%, 71% 97%, 64% 98%, 58% 99%, 53% 98%, 46% 100%);
    }

    75% {
        -webkit-clip-path: polygon(45% 99%, 41% 99%, 35% 98%, 30% 98%, 25% 94%, 22% 89%, 21% 84%, 23% 77%, 23% 70%, 19% 63%, 23% 66%, 27% 71%, 28% 76%, 32% 78%, 35% 72%, 32% 67%, 28% 64%, 24% 58%, 24% 49%, 27% 42%, 30% 34%, 31% 24%, 29% 13%, 33% 18%, 38% 25%, 38% 36%, 37% 44%, 41% 48%, 45% 48%, 48% 45%, 48% 39%, 46% 33%, 48% 27%, 52% 20%, 50% 29%, 51% 38%, 53% 44%, 54% 52%, 56% 57%, 61% 57%, 64% 55%, 65% 48%, 63% 39%, 63% 32%, 66% 37%, 69% 44%, 70% 52%, 68% 59%, 66% 64%, 67% 69%, 73% 72%, 76% 71%, 77% 66%, 76% 58%, 76% 51%, 80% 57%, 82% 62%, 82% 68%, 80% 73%, 77% 78%, 74% 82%, 75% 87%, 78% 87%, 81% 84%, 84% 79%, 86% 74%, 88% 78%, 87% 83%, 84% 89%, 82% 92%, 78% 97%, 74% 97%, 69% 97%, 66% 98%, 61% 98%, 57% 97%, 53% 99%, 49% 96%, 47% 99%, 48% 99%);
        clip-path: polygon(45% 99%, 41% 99%, 35% 98%, 30% 98%, 25% 94%, 22% 89%, 21% 84%, 23% 77%, 23% 70%, 19% 63%, 23% 66%, 27% 71%, 28% 76%, 32% 78%, 35% 72%, 32% 67%, 28% 64%, 24% 58%, 24% 49%, 27% 42%, 30% 34%, 31% 24%, 29% 13%, 33% 18%, 38% 25%, 38% 36%, 37% 44%, 41% 48%, 45% 48%, 48% 45%, 48% 39%, 46% 33%, 48% 27%, 52% 20%, 50% 29%, 51% 38%, 53% 44%, 54% 52%, 56% 57%, 61% 57%, 64% 55%, 65% 48%, 63% 39%, 63% 32%, 66% 37%, 69% 44%, 70% 52%, 68% 59%, 66% 64%, 67% 69%, 73% 72%, 76% 71%, 77% 66%, 76% 58%, 76% 51%, 80% 57%, 82% 62%, 82% 68%, 80% 73%, 77% 78%, 74% 82%, 75% 87%, 78% 87%, 81% 84%, 84% 79%, 86% 74%, 88% 78%, 87% 83%, 84% 89%, 82% 92%, 78% 97%, 74% 97%, 69% 97%, 66% 98%, 61% 98%, 57% 97%, 53% 99%, 49% 96%, 47% 99%, 48% 99%);
    }

    100% {
        -webkit-clip-path: polygon(47% 99%, 42% 99%, 37% 98%, 32% 96%, 28% 92%, 26% 89%, 26% 83%, 26% 80%, 26% 72%, 23% 67%, 16% 63%, 14% 52%, 16% 46%, 16% 53%, 20% 60%, 26% 58%, 27% 51%, 25% 46%, 20% 41%, 19% 36%, 19% 30%, 21% 26%, 24% 20%, 23% 13%, 22% 7%, 26% 11%, 28% 17%, 28% 24%, 26% 30%, 30% 34%, 34% 34%, 39% 32%, 40% 27%, 38% 21%, 43% 28%, 43% 36%, 41% 41%, 46% 44%, 51% 41%, 53% 35%, 53% 26%, 57% 26%, 59% 33%, 60% 39%, 57% 46%, 55% 53%, 58% 57%, 64% 56%, 66% 52%, 69% 41%, 70% 48%, 69% 56%, 66% 63%, 64% 67%, 65% 71%, 70% 71%, 74% 68%, 76% 62%, 77% 54%, 79% 60%, 81% 66%, 80% 71%, 76% 75%, 72% 78%, 71% 82%, 75% 84%, 80% 83%, 84% 78%, 86% 83%, 83% 89%, 78% 92%, 74% 92%, 73% 96%, 69% 97%, 65% 96%, 62% 98%, 57% 99%, 54% 97%, 51% 99%, 46% 99%);
        clip-path: polygon(47% 99%, 42% 99%, 37% 98%, 32% 96%, 28% 92%, 26% 89%, 26% 83%, 26% 80%, 26% 72%, 23% 67%, 16% 63%, 14% 52%, 16% 46%, 16% 53%, 20% 60%, 26% 58%, 27% 51%, 25% 46%, 20% 41%, 19% 36%, 19% 30%, 21% 26%, 24% 20%, 23% 13%, 22% 7%, 26% 11%, 28% 17%, 28% 24%, 26% 30%, 30% 34%, 34% 34%, 39% 32%, 40% 27%, 38% 21%, 43% 28%, 43% 36%, 41% 41%, 46% 44%, 51% 41%, 53% 35%, 53% 26%, 57% 26%, 59% 33%, 60% 39%, 57% 46%, 55% 53%, 58% 57%, 64% 56%, 66% 52%, 69% 41%, 70% 48%, 69% 56%, 66% 63%, 64% 67%, 65% 71%, 70% 71%, 74% 68%, 76% 62%, 77% 54%, 79% 60%, 81% 66%, 80% 71%, 76% 75%, 72% 78%, 71% 82%, 75% 84%, 80% 83%, 84% 78%, 86% 83%, 83% 89%, 78% 92%, 74% 92%, 73% 96%, 69% 97%, 65% 96%, 62% 98%, 57% 99%, 54% 97%, 51% 99%, 46% 99%);
    }
}

#hk-rainbow {
    margin: 0;
    background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 2s infinite linear;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100%, 0;
    }
}

/* Tight circular border for nav theme toggle (matches attached mock) */
#topNav .theme-toggle,
#topNav #themeToggle {
    /* small inner gap so the border hugs the icon */
    padding: 4px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important; /* fully circular */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    /* keep border color coming from the existing utility classes but ensure 1px width */
    border-width: 1px !important;
    background-clip: padding-box !important;
    /* subtle shadow to lift the control slightly */
    box-shadow: 0 6px 18px rgba(2,6,23,0.12);
    transform: none !important; /* avoid inherited tiny scale on hover/active */
}

#topNav .theme-toggle i,
#topNav #themeToggle i {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block;
}

/* Hover/active refinements: keep the ring tight and avoid large scaling */
#topNav .theme-toggle:hover,
#topNav #themeToggle:hover {
    transform: none !important;
    box-shadow: 0 10px 26px rgba(2,6,23,0.16);
}

@media (max-width: 640px) {
    #topNav .theme-toggle { width: 34px !important; height: 34px !important; padding: 4px !important; }
    #topNav .theme-toggle i { font-size: 16px !important; }
}


/* Make top navigation background fully transparent on all viewports
   (applies to light and dark mode). This removes the nav panel fill so
   page content or the underlying background shows through on PC and mobile. */
nav#topNav,
html body nav#topNav {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Also override the dark-mode override earlier in the file so dark-theme
   doesn't force an opaque background. Keep the subtle border if present. */
html.dark nav#topNav, body.dark nav#topNav {
    background: transparent !important;
    /* keep border if you want a subtle separator; remove if you want fully invisible */
    /* border-bottom-color: rgba(255,255,255,0.03) !important; */
}

/* Small mobile offset: nudge the top nav down slightly on narrow viewports so
   it visually sits lower (helps avoid overlap with browser UI and matches mock). */
@media (max-width: 640px) {
    nav#topNav {
        margin-top: 0.3rem; /* slightly larger nudge (~4.8px) to move nav down a bit */
    }
}

/* Style the hamburger (sidebar toggle) to match the provided mock: remove border,
   darker rounded background, white stacked-lines icon, and subtle shadow. */
button#sidebarToggle {
    border: none !important; /* remove existing utility border */
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.28)) !important;
    padding: 6px !important;
    width: 40px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.18) !important;
    color: #fff !important;
    transition: background 140ms ease, box-shadow 140ms ease, transform 120ms ease !important;
}

button#sidebarToggle .fi-rr-menu-burger,
button#sidebarToggle i.fi-rr-menu-burger {
    font-size: 18px !important;
    color: #ffffff !important; /* ensure the 3 lines are visible */
    line-height: 1 !important;
}

button#sidebarToggle:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 26px rgba(2,6,23,0.22) !important; }
button#sidebarToggle:focus { outline: 2px solid rgba(99,102,241,0.12) !important; }

/* Dark-mode tweak: keep look similar but slightly lighter background for contrast */
html.dark button#sidebarToggle, body.dark button#sidebarToggle {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
    color: #fff !important;
}

/* Theme icon swap: wrapper and enter/exit animations used by public/assets/js/theme.js */
.theme-icon-wrap {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    line-height: 0;
    vertical-align: middle;
}
.theme-icon-wrap > * {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.theme-icon-exit {
    animation: themeIconExit 160ms cubic-bezier(.2,.8,.2,1) forwards;
    transform-origin: center center;
}
.theme-icon-enter {
    animation: themeIconEnter 180ms cubic-bezier(.2,.8,.2,1) forwards;
    transform-origin: center center;
}
@keyframes themeIconExit {
    from { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
    to   { transform: translateY(-6px) scale(0.78) rotate(-8deg); opacity: 0; }
}
@keyframes themeIconEnter {
    from { transform: translateY(6px) scale(0.78) rotate(8deg); opacity: 0; }
    to   { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .theme-icon-exit, .theme-icon-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Desktop-specific: make top nav transparent and add a subtle border to match the mock */
@media (min-width: 641px) {
    nav#topNav {
        background: transparent !important;
        border-bottom: 1px solid rgba(2,6,23,0.06) !important;
    }
    /* Slightly stronger border in dark mode for contrast */
    html.dark nav#topNav, body.dark nav#topNav {
        border-bottom-color: rgba(255,255,255,0.06) !important;
    }
}

    /* Desktop: make the user pill in the top nav transparent (remove gradient) */
    @media (min-width: 641px) {
        /* target the user link in the top nav: transparent background but clearer border & subtle lift */
        nav#topNav a[href="/user"] {
            background: transparent !important;
            background-image: none !important;
            color: inherit !important;
            box-shadow: 0 6px 18px rgba(2,6,23,0.04) !important; /* gentle lift */
            border: 1px solid rgba(99,102,241,0.12) !important; /* subtle indigo tint in light mode */
            padding-left: 12px !important;
            padding-right: 12px !important;
            border-radius: 12px !important;
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
        }
        nav#topNav a[href="/user"]:hover {
            box-shadow: 0 12px 28px rgba(2,6,23,0.08) !important;
            transform: translateY(-2px);
        }
        nav#topNav a[href="/user"] i, nav#topNav a[href="/user"] span {
            color: inherit !important;
        }
        /* dark mode variant: slightly lighter border and text */
        html.dark nav#topNav a[href="/user"], body.dark nav#topNav a[href="/user"] {
            border-color: rgba(99,102,241,0.2) !important; /* more visible on dark */
            color: rgba(230,238,248,0.95) !important;
            box-shadow: 0 6px 18px rgba(2,6,23,0.12) !important;
        }
    }

/* ================= Redesigned Product Cards (match reference screenshot) ================= */
.product-card-redesign {
    position: relative;
    transition: all 320ms cubic-bezier(.2,.8,.2,1);
    border-width: 2px;
    border-style: solid;
    /* make sure borders are crisp on high-DPI screens */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.product-card-redesign:hover {
    border-color: rgba(148,163,184,0.5) !important;
}

/* Product name: bold, larger, clean */
.product-name {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
    /* Clamp product title to two lines with ellipsis when too long */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Make single-line and two-line titles occupy the same vertical space so cards align */
    /* Mobile (text-base ~1rem * line-height 1.3 * 2 lines = ~2.6rem) */
    min-height: 2.6rem;
}

/* On medium and larger screens the font increases (md:text-lg), so raise the min-height
   so two lines still fit and single-line titles match visually. md:text-lg is ~1.125rem
   so min-height ~= 1.125 * 1.3 * 2 = ~2.925rem -> use 3rem for safe spacing. */
@media (min-width: 768px) {
    .product-name { min-height: 3rem; }
}

/* Product price: large gradient text */
.product-price {
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
    /* Gradient text was used previously; when gradient isn't present this
       made the text transparent. Provide a solid color fallback so price
       remains visible when the gradient is not applied. */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
}

/* CTA button: prominent gradient with strong shadow and lift */
.product-cta-btn {
    position: relative;
    overflow: hidden;
    transition: all 240ms cubic-bezier(.2,.8,.2,1);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.product-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 240ms ease;
}
.product-cta-btn:hover::before {
    opacity: 1;
}
.product-cta-btn:active {
    transform: scale(0.98) !important;
}

/* Dark mode adjustments for product cards */
html.dark .product-card-redesign, body.dark .product-card-redesign {
    /* Make background fully transparent in dark mode as well; keep a visible border */
    background: transparent !important;
    /* stronger white-ish border so cards read on darker backgrounds */
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.14) !important;
}
html.dark .product-card-redesign:hover, body.dark .product-card-redesign:hover {
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow: 0 10px 30px rgba(2,6,23,0.18) !important;
}

/* Light mode: make card background transparent and use a clearer border so the site background shows through */
html:not(.dark) .product-card-redesign {
    background: transparent !important;
    /* stronger, slightly warm border to remain visible on top of backgrounds */
    border-color: rgba(15,23,42,0.12) !important;
    /* subtle shadow to lift the card slightly above the background */
    box-shadow: 0 6px 18px rgba(2,6,23,0.08) !important;
    backdrop-filter: blur(6px) saturate(120%);
}
html:not(.dark) .product-card-redesign:hover {
    border-color: rgba(15,23,42,0.22) !important;
    box-shadow: 0 10px 30px rgba(2,6,23,0.10) !important;
}

/* Price pill: small, left-aligned — now border-only so text remains visible
   Also override .product-price when used together to cancel gradient text rules. */
.price-pill {
    display: inline-block;
    background: transparent !important;
    color: inherit !important;
    /* slightly larger horizontal padding so the pill looks roomy */
    padding: 0.28rem 0.8rem;
    /* make the price pill fully rounded (capsule) to match the design) */
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: none;
    border: 1px solid rgba(16,185,129,0.18); /* soft green border */
}

/* Image frame: always transparent but keep a soft border so thumbnails stand out */
.img-frame {
    background: transparent !important;
    border-radius: 12px;
}

html:not(.dark) .img-frame {
    border: 2px solid rgba(15,23,42,0.12);
}

html.dark .img-frame {
    border: 2px solid rgba(255,255,255,0.12);
}
.price-pill:active { transform: translateY(1px); }
html.dark .price-pill { border-color: rgba(16,185,129,0.28) !important; }

/* When product-price and price-pill are both present, remove gradient/text-clip so the pill text is visible */
.product-price.price-pill {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    /* keep the pill's border and padding so it displays as a capsule */
}

/* Container that groups price + stat pills and shows a subtle rounded border.
   Layout updated so the price sits on the first row and the stats (likes/views)
   sit on a separate centered row beneath it (matches the provided mock). */
.price-and-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keep price left-aligned */
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.08);
    background: transparent;
}
.price-and-stats .price-pill { margin: 0; }

/* Product stats row: full width, centered below the price */
.price-and-stats .product-stats {
    width: 100%;
    display: flex;
    justify-content: center; /* center the small pills (heart/eye) */
    gap: 0.75rem;
    margin-left: 0; /* override tailwind ml-3 on the element */
    margin-top: 0; 
}
html.dark .price-and-stats { border-color: rgba(255,255,255,0.04); }

/* small stat pill (likes/views) — match price pill visual language */
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,0.08);
    background: transparent;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    font-size: 0.85rem;
}
.stat-pill i { font-size: 0.95rem; }
.stat-pill .fi-rr-heart { color: #ef4444; }
html.dark .stat-pill { border-color: rgba(255,255,255,0.04); }

/* spacing for the stats row so pills don't sit flush to card bottom */
.product-stats { gap: 0.5rem; }

/* Stats rendered outside the bordered price area (left-aligned, below the price) */
.product-stats-outside {
    margin-top: 0.45rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-start; /* left-align the row */
    color: inherit;
}

/* small safety: if .product-stats used elsewhere, ensure outside variant overrides the inline ml-3 */
.product-stats-outside { margin-left: 0 !important; }
.mobile-menus {
    background: var(--muted-border-color);
    border-radius: var(--main-radius);
    padding: 8px;
}
.mobile-menus li a {
    display: block;
    padding: 6px 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mobile-menus > li > a::before {
    margin: 0;
    margin-right: 12px;
}
.mobile-menus .sub-menu {
    padding: 0 10px;
    word-wrap: break-word;
    white-space: normal;
}
.mobile-menus .sub-menu li {
    width: calc(50% - 0);
    text-align: center;
    display: inline-block;
}
.mobile-navbar.top .mobile-menus .sub-menu li {
    width: calc(33.3% - 4px);
}
.mobile-menus .sub-menu li > a {
    background: var(--main-border-color);
    padding: 5px;
    margin: 2px;
    border-radius: 4px;
    font-size: 0.9em;
    position: relative;
}
.mobile-menus .sub-menu li > a > badge:not(.top) {
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0.85);
}
.mobile-user-menus a {
    width: calc(50% - 12px);
    float: left;
    margin: 6px;
}
.mobile-nav-widget {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: normal;
}
.mobile-nav-widget .box-body.notop {
    padding-left: 0;
    padding-right: 0;
}

.footer-text p,.text-muted {
    color: var(--gray-600)
}

/* Quick action items for home page */
.quick-action-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgb(226 232 240 / .8);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.quick-action-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: rgb(99 102 241 / .5);
}

html.dark .quick-action-item, body.dark .quick-action-item {
    background: transparent;
    border-color: rgba(148,163,184,0.2);
}

html.dark .quick-action-item:hover, body.dark .quick-action-item:hover {
    border-color: rgba(99,102,241,0.5);
}

.quick-action-icon {
    border-radius: 12px;
    background: linear-gradient(135deg,#000000 0,#8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgb(99 102 241 / .3);
    z-index: 1;
    color: #fff;
    position: relative;
}

.quick-action-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,rgb(255 255 255 / .3),transparent);
    border-radius: 14px;
    z-index: -1;
}

.quick-action-content h3 {
    font-size: .9rem;
    margin-bottom: .25rem;
    font-weight: 600;
}

.quick-action-content p {
    font-size: .75rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

html.dark .quick-action-content p, body.dark .quick-action-content p {
    color: #94a3b8;
}

.quick-action-item .btn-outline {
    padding: .5rem 1rem;
    font-size: .75rem;
    flex-shrink: 0;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.quick-action-item .btn-outline i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0!important;
}