html {
  font-size: 14px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.no-min-width {
min-width:auto !important;
}

html {
  position: relative;
  min-height: 100%;
  /* Always reserve scrollbar space so it never shifts the layout left/right */
  overflow-y: scroll;
  /* Prevent any overflow from causing horizontal wiggle */
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Clamp body so nothing overflows horizontally */
  overflow-x: hidden;
  max-width: 100vw;
}

h1, h2, h3, h4, h5, h6, .btn, .navbar, .badge {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.chat-chat {
min-height:500px;

}

.chat-other-header-name {
    margin-left: 2em;
}

.Card-Header {
    margin-bottom: -15px;
}

input {
/*background : transparent !important;*/
}



.paper {
    position: relative;
    width: 100%;
    min-width: 400px;
    height: 480px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
}

/*
    Add side of page effect 
    
    .paper:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60px;
        background: radial-gradient(#575450 6px, transparent 7px) repeat-y;
        background-size: 30px 30px;
        border-right: 3px solid #D44147;
        box-sizing: border-box;

    }*/

.paper-content {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 30px;
    left: 60px;
    background: linear-gradient(transparent, transparent 28px, #91D1D3 28px);
    background-size: 30px 30px;
}

    .paper-content textarea {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        line-height: 30px;
        padding: 0 10px;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: 'Handlee', cursive;
        font-weight: bold;
        font-size: 18px;
        box-sizing: border-box;
        z-index: 1;
    }

/* ==========================================================================
   Auto-Hiding Scrollbars Across Entire Site (Hidden When Not Focused/Hovered)
   ========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

*:hover,
*:focus,
*:focus-within {
    scrollbar-color: rgba(150, 150, 150, 0.45) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}

*:hover::-webkit-scrollbar-thumb,
*:focus::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
html:hover::-webkit-scrollbar-thumb {
    background-color: rgba(140, 140, 140, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.7) !important;
}

.send-button-comment:hover {
    background-image: none !important;
background-color:skyblue !important;
}




.star-rating {
    border: solid 1px #ccc;
    display: flex;
    flex-direction: row-reverse;
    font-size: 1.5em;
    justify-content: space-around;
    padding: 0 .2em;
    text-align: center;
    width: 5em;
}

.star-rating-check {
    display: flex;
    flex-direction: row-reverse;
    font-size: 1.5em;
    justify-content: space-around;
    padding: 0 .2em;
    text-align: center;
    width: 5em;
}

    .star-rating input {
        display: none;
    }

.star-rating-check input {
    display: none;
}

.star-rating-check label {
    color: #ccc;
    cursor: pointer;
}

    .star-rating label {
        color: #ccc;
        cursor: pointer;
    }

    .star-rating :checked ~ label {
        color: #f90;
    }

    .star-rating-checked {
        color: #f90;
    }

    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: #fc0;
    }

.text-button {
    background: none;
    background-color: transparent !important;
    border: none;
}

.main-add-button {
    width: -webkit-fill-available;
    margin-bottom:1em !important;
}

.accordion-body ul {
    list-style: none;
    padding-left: 0em !important;
}

.accordion-body ul li{
    list-style: none;
    padding-left: 0em !important;
}

.accordion-item {
border:none !important;
}

.side-nav-bar {
    margin-top: -1em !important;
    background-color: inherit !important;
}

.side-nav-bar div{
    background-color: inherit !important;
}

.underline-input {
border-right:none;
border-left:none;
border-top:none;
}

/* Post & card base styles */
article.card {
    max-width: 100%;
}

#Side-Nav-Bar > * {
    position: relative;
    z-index: 1;

    background: inherit !important;
}

.DisplayOff > * {
    display:none !important;
}
.DisplayOn > * {
    display: block !important;
}

.upload-button {
border:none;
color:inherit;
display:none

}


@media (max-width: 991.98px) {
    .side-advert-display > * {
        display: none !important;
        width: 100%;
    }

    .mobile > * {
        display: block !important;
    }

    .web-display > * {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    #right-side-advert > * {
        display: none !important;
    }
}

.container-div {
    position: relative;
    height: 200px;
}

#toggleDiv {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    padding: 20px;
    z-index: 10;
}

/* Responsive Side Navigation Overlay for Mobile */
@media (max-width: 991.98px) {
    .side-nav-bar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #Side-Nav-Bar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }
}

/* ==========================================================================
   Profile Avatar Border Cosmetics
   ========================================================================== */
.border-default {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.border-gold-glow {
    box-shadow: 0 0 10px #f59e0b;
    border: 3px solid #f59e0b !important;
}

.border-neon-cyan {
    box-shadow: 0 0 12px #06b6d4;
    border: 3px solid #06b6d4 !important;
}

.border-flame {
    border: 3px solid transparent !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(135deg, #ef4444, #f97316, #eab308);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.7);
    animation: flamePulse 2s infinite alternate;
}

@keyframes flamePulse {
    0% {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }
    100% {
        box-shadow: 0 0 18px rgba(249, 115, 22, 0.9), 0 0 25px rgba(234, 179, 8, 0.4);
    }
}

/* ==========================================================================
   Post Card Custom & Animated Borders
   ========================================================================== */
.post-border-default {
    border: 1px solid oklch(var(--b3, 0.86 0 0));
}

.post-border-glow {
    border: 2px solid var(--post-border-color, #00ffd5) !important;
    box-shadow: 0 0 16px -2px var(--post-border-color, #00ffd5), inset 0 0 8px -4px var(--post-border-color, #00ffd5) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-border-glow:hover {
    box-shadow: 0 0 24px 0px var(--post-border-color, #00ffd5), inset 0 0 12px -2px var(--post-border-color, #00ffd5) !important;
}

.post-border-pulse {
    border: 2px solid var(--post-border-color, #00ffd5) !important;
    animation: postPulse 2.4s ease-in-out infinite !important;
}

@keyframes postPulse {
    0%, 100% {
        box-shadow: 0 0 10px -2px var(--post-border-color, #00ffd5), 0 0 2px var(--post-border-color, #00ffd5);
    }
    50% {
        box-shadow: 0 0 25px 4px var(--post-border-color, #00ffd5), 0 0 8px 1px var(--post-border-color, #00ffd5);
    }
}

.post-border-rainbow {
    position: relative;
    border: 3px solid transparent !important;
    background-image: linear-gradient(var(--fallback-b1, oklch(var(--b1)/1)), var(--fallback-b1, oklch(var(--b1)/1))), 
                      linear-gradient(135deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 300% 300% !important;
    animation: rainbowBorderMove 4s linear infinite, rainbowGlowPulse 2.5s ease-in-out infinite alternate !important;
}

@keyframes rainbowBorderMove {
    0% { background-position: 0% 0%, 0% 50%; }
    50% { background-position: 0% 0%, 100% 50%; }
    100% { background-position: 0% 0%, 0% 50%; }
}

@keyframes rainbowGlowPulse {
    0% {
        box-shadow: 0 0 12px rgba(0, 255, 213, 0.45);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 0, 200, 0.65);
    }
    100% {
        box-shadow: 0 0 16px rgba(255, 115, 0, 0.55);
    }
}

.post-border-flame {
    position: relative;
    border: 3px solid transparent !important;
    background-image: linear-gradient(var(--fallback-b1, oklch(var(--b1)/1)), var(--fallback-b1, oklch(var(--b1)/1))), 
                      linear-gradient(135deg, #ef4444, #f97316, #eab308, #ff2200) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.7) !important;
    animation: postFlameAura 2s ease-in-out infinite alternate !important;
}

@keyframes postFlameAura {
    0% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.6), 0 0 3px rgba(249, 115, 22, 0.5);
    }
    100% {
        box-shadow: 0 0 25px rgba(249, 115, 22, 0.9), 0 0 12px rgba(234, 179, 8, 0.7);
    }
}

.post-border-cyber {
    position: relative;
    border: 2px solid var(--post-border-color, #06b6d4) !important;
    box-shadow: 0 0 15px var(--post-border-color, #06b6d4), inset 0 0 10px rgba(6, 182, 212, 0.15) !important;
    animation: postCyberScan 3s ease-in-out infinite alternate !important;
}

@keyframes postCyberScan {
    0% {
        box-shadow: 0 0 10px var(--post-border-color, #06b6d4), inset 0 0 5px rgba(6, 182, 212, 0.2);
    }
    50% {
        box-shadow: 0 0 25px var(--post-border-color, #06b6d4), 0 0 40px rgba(122, 0, 255, 0.35), inset 0 0 12px rgba(6, 182, 212, 0.3);
    }
    100% {
        box-shadow: 0 0 12px var(--post-border-color, #06b6d4), inset 0 0 6px rgba(6, 182, 212, 0.2);
    }
}

/* ==========================================================================
   Side Adverts Layout
   ========================================================================== */
.side-advert-display {
    max-width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   Quests & Daily Limit Floating Widget
   ========================================================================== */
.quest-floating-widget {
    position: fixed;
    top: 72px;
    right: 16px;
    width: 280px;
    max-width: calc(100vw - 32px);
    z-index: 30;
    pointer-events: none; /* Allows clicks to pass through to underlying content outside card */
    transition: transform 0.25s ease, box-shadow 0.25s ease, width 0.25s ease;
}

.quest-floating-widget > .card {
    pointer-events: auto; /* Re-enable clicks inside the card */
}

.quest-floating-widget.qw-collapsed {
    width: auto;
}

.quest-floating-widget.qw-collapsed .card {
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.quest-floating-widget.qw-collapsed #qw-header {
    border-bottom: none !important;
    padding: 6px 14px;
    border-radius: 9999px;
}

@media (max-width: 768px) {
    .quest-floating-widget {
        top: 68px;
        right: 10px;
        width: 260px;
    }
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
#wsm-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

#wsm-toast-container .toast-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#wsm-toast-container .toast-success {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #10b981;
}

#wsm-toast-container .toast-error {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #ef4444;
}

/* Animated Profile Borders */
.profile-border-animated-1 {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 3s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 12px rgba(0, 255, 213, 0.6) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.profile-border-animated-1 img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

@keyframes glowing-border {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        filter: hue-rotate(180deg);
    }
    100% {
        background-position: 0% 50%;
        filter: hue-rotate(360deg);
    }
}

/* ==========================================================================
   Auth Flow – Cannabis Floating Leaves
   ========================================================================== */
.leaf-float {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.18;
    animation: leaf-drift var(--dur, 7s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    pointer-events: none;
    user-select: none;
}

@keyframes leaf-drift {
    0%   { transform: translateY(0px)   rotate(0deg)   scale(1);    opacity: 0.18; }
    33%  { transform: translateY(-18px) rotate(12deg)  scale(1.05); opacity: 0.26; }
    66%  { transform: translateY(8px)   rotate(-8deg)  scale(0.97); opacity: 0.20; }
    100% { transform: translateY(0px)   rotate(0deg)   scale(1);    opacity: 0.18; }
}

/* ==========================================================================
   Auth Flow – Fake Avatar Loader Overlay
   ========================================================================== */
#avatar-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    backdrop-filter: blur(8px) saturate(1.5);
    background: rgba(0,0,0,0.55);
}

#avatar-loader-overlay.active { display: flex; }

.fake-avatar-ring {
    width: 100px; height: 100px; border-radius: 50%;
    background: linear-gradient(135deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 300% 300%;
    animation: glowing-border 2s linear infinite;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 32px rgba(0,255,213,0.5);
}

.fake-avatar-inner {
    width: 88px; height: 88px; border-radius: 50%;
    background: #1a1a2e;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    animation: avatar-morph 3s ease-in-out infinite;
}

@keyframes avatar-morph {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50%       { filter: hue-rotate(180deg) brightness(1.2); }
}

.loader-caption {
    color: #fff; font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.03em; text-align: center;
    animation: caption-fade 0.5s ease-in-out;
}

@keyframes caption-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Auth Flow – Multi-Step Wizard
   ========================================================================== */
.step-panel { display: none; }
.step-panel.active { display: block !important; animation: step-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

@keyframes step-in {
    from { opacity: 0; transform: translateX(30px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

.step-indicator { transition: all 0.3s ease; }
.step-indicator.done    { background: oklch(var(--p)) !important; color: oklch(var(--pc)) !important; border-color: oklch(var(--p)) !important; }
.step-indicator.current { box-shadow: 0 0 0 4px oklch(var(--p) / 0.25); }

/* ==========================================================================
   Auth Flow – Skill Tree
   ========================================================================== */
.skill-node { transition: transform 0.25s ease, filter 0.25s ease; }
.skill-node.unlocked { animation: node-pulse 2.5s ease-in-out infinite; filter: drop-shadow(0 0 8px oklch(var(--p) / 0.7)); }

@keyframes node-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

/* ==========================================================================
   Auth Flow – Drag & Drop Inventory
   ========================================================================== */
.drag-item { cursor: grab; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; }
.drag-item:active { cursor: grabbing; transform: scale(1.12) rotate(6deg); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

.drop-zone { transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; border: 2px dashed oklch(var(--bc) / 0.3); border-radius: 1rem; }
.drop-zone.drag-over { border-color: oklch(var(--p)); background: oklch(var(--p) / 0.08); transform: scale(1.03); }
.drop-zone.filled { border-style: solid; border-color: oklch(var(--p)); background: oklch(var(--p) / 0.12); animation: drop-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1); }

@keyframes drop-bounce {
    from { transform: scale(0.85); }
    to   { transform: scale(1); }
}

/* ==========================================================================
   Login – Feature Slideshow
   ========================================================================== */
[data-theme="emerald"] .bg-emerald-login {
    background-color: #66cc99 !important;
    background-image: linear-gradient(145deg, #78c2ad 0%, #56cc9d 60%, #40b584 100%) !important;
    color: #ffffff !important;
}

.auth-slide { display: none; animation: slide-fade 0.5s ease both; }
.auth-slide.active { display: flex; }

@keyframes slide-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.slide-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(var(--pc) / 0.4); transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; }
.slide-dot.active { background: oklch(var(--pc)); transform: scale(1.35); }

/* ==========================================================================
   Colored Profile Borders (Green / Red / Blue)
   ========================================================================== */
.profile-border-green {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #00ff44, #44ff00, #00cc22, #88ff44, #00ff88, #00ff44) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 3s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 14px rgba(0, 255, 68, 0.65) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.profile-border-red {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #ff0000, #ff5500, #ff0044, #ff3300, #ff0000) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 3s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.65) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.profile-border-blue {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #0044ff, #0088ff, #00ccff, #0066ff, #0044ff) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 3s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 14px rgba(0, 136, 255, 0.65) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.profile-border-green img,
.profile-border-red img,
.profile-border-blue img,
.border-gold-glow img,
.border-neon-cyan img,
.border-flame img,
.border-diamond-shimmer img,
.border-goat-aura img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

.border-gold-glow {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #ffd700, #ffb700, #fff275, #d4af37, #ffd700) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 3s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.75) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.border-neon-cyan {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #00f0ff, #00ffff, #00b4d8, #90e0ef, #00f0ff) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 2.5s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.7) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

.border-flame {
    padding: 3.5px !important;
    background: linear-gradient(135deg, #ff4500, #ff8c00, #ffd700, #ff0000, #ff4500) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 2s linear infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 18px rgba(255, 69, 0, 0.8) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

/* Diamond Rank Reward Border */
.border-diamond-shimmer {
    padding: 4px !important;
    background: linear-gradient(135deg, #b9f2ff, #00f5d4, #00bbf9, #e0fbfc, #70e000, #00f5d4, #b9f2ff) !important;
    background-size: 300% 300% !important;
    animation: glowing-border 2s ease-in-out infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 18px rgba(0, 245, 212, 0.85), inset 0 0 10px rgba(185, 242, 255, 0.6) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

/* GOAT Pinnacle Rank Reward Border */
.border-goat-aura {
    padding: 4.5px !important;
    background: linear-gradient(135deg, #ffbe0b, #fb5607, #ff006e, #8338ec, #3a86ff, #ffbe0b) !important;
    background-size: 400% 400% !important;
    animation: goat-pulsing-aura 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 24px rgba(255, 190, 11, 0.9), 0 0 36px rgba(251, 86, 7, 0.5) !important;
    --tw-ring-color: transparent !important;
    border: none !important;
}

@keyframes goat-pulsing-aura {
    0%, 100% {
        background-position: 0% 50%;
        transform: scale(1);
        filter: brightness(1.1) drop-shadow(0 0 10px rgba(255, 190, 11, 0.8));
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.03);
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(251, 86, 7, 1));
    }
}


/* ==========================================================================
   Header & Top Navbar Theme Resilience
   Ensure the top navbar always respects the active DaisyUI theme color
   and is immune to rogue legacy bootstrap-theme background color overrides
   ========================================================================== */
header.bg-primary,
header.bg-primary .navbar,
.navbar.bg-primary {
    background-color: oklch(var(--p)) !important;
    color: oklch(var(--pc)) !important;
    border-color: oklch(var(--p) / 0.8) !important;
    background-image: none !important;
}

/* Default / fallback green navbar matching Mint / Emerald */
[data-theme="emerald"] header.bg-primary,
[data-theme="emerald"] .navbar.bg-primary {
    background-color: #56cc9d !important;
    background-image: linear-gradient(135deg, #78c2ad 0%, #56cc9d 100%) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Desktop Collapsible Sidebar & Intersecting Navigation (Cloudflare Style)
   ========================================================================== */
@media (min-width: 1024px) {
    .drawer.lg\:drawer-open {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
    }
    .drawer.sidebar-collapsed {
        grid-template-columns: 0px 1fr !important;
        grid-auto-columns: 0px auto !important;
    }
    .drawer.sidebar-collapsed .drawer-side {
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        border-right: none !important;
        visibility: hidden !important;
    }
    .drawer.sidebar-collapsed .drawer-side > aside {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-right: none !important;
        visibility: hidden !important;
    }
    .drawer.sidebar-collapsed .drawer-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 1023px) {
    .drawer-side {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 50 !important;
    }
}

.drawer-side > aside {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   Auto-Hiding Scrollbars Across the Entire Site
   Scrollbars disappear completely when not hovered or in focus
   ========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

*:hover,
*:focus,
*:focus-within {
    scrollbar-color: color-mix(in oklch, currentColor 30%, transparent) transparent;
}

/* WebKit Scrollbars (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}

*:hover::-webkit-scrollbar-thumb,
*:focus::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklch, currentColor 25%, transparent);
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklch, currentColor 50%, transparent);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ==========================================================================
   External Social Login Buttons (Google, Facebook, Apple, Microsoft)
   Strict sizing and layout to prevent inline collapse or overlapping
   ========================================================================== */
.external-login-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 4px 0 !important;
}

.external-login-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

[data-theme="dark"] .external-login-btn,
[data-theme="night"] .external-login-btn,
[data-theme="synthwave"] .external-login-btn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f3f4f6 !important;
}

.external-login-btn:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .external-login-btn:hover,
[data-theme="night"] .external-login-btn:hover,
[data-theme="synthwave"] .external-login-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.external-login-btn svg,
.external-login-btn img,
.external-login-btn i {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Mobile Bottom Navigation (btm-nav) style resets to prevent Bootstrap anchor interference */
.btm-nav a {
    text-decoration: none !important;
}

.btm-nav a:hover,
.btm-nav a:focus {
    text-decoration: none !important;
}

/* ==========================================================================
   Mobile Fixed Navigation Guarantee
   Ensure top header and bottom nav stay firmly fixed on all viewports
   ========================================================================== */
header.bg-primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

.btm-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Grid layout only on mobile/tablet — never override lg:hidden on desktop */
@media (max-width: 1023px) {
    .btm-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ==========================================================================
   Auth Flow – Mobile Bottom Navigation and Safe Padding Overrides
   Hides bottom navigation on auth pages and provides breathing room for submit buttons
   ========================================================================== */
.auth-page-body .btm-nav {
    display: none !important;
}

.auth-page-body .drawer-content {
    padding-bottom: 0 !important;
}

.pb-btm-nav {
    padding-bottom: 5rem !important;
}

/* Ensure DaisyUI <dialog class="modal"> hides correctly when closed */
dialog.modal:not([open]) {
    display: none !important;
}

/* Post-Bootstrap utility compatibility */
.d-none {
    display: none !important;
}

@media (min-width: 1024px) {
    body:has(#feed-content) {
        overflow: hidden !important;
        height: 100vh !important;
    }
}

@media (max-width: 1023px) {
    #feed-content {
        max-height: none !important;
    }
}
.text-rainbow {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowTextMove 5s ease infinite;
    font-weight: bold;
}

@keyframes rainbowTextMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}