html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

:root {
    --status-bar-bg: #000;
    --bg-color: #000;
    --text-color: #fff;
}


.status-bar-fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top);
    background-color: var(--status-bar-bg);
    z-index: 9999;
    pointer-events: none;
}





/* অফলাইন ইন্ডিকেটর */
.offline-indicator {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4444;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 14px;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

body.offline .offline-indicator {
  display: block;
}





/* আপনার কাস্টম নাম সেট করা */
@font-face {
  font-family: 'RelaydiaFont';
  src: local('Albert Sans');
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'RelaydiaFont';
  src: local('Noto Serif Bengali');
  unicode-range: U+0980-09FF;
}







:root {
  /* আপনার কাস্টম ফন্ট ফ্যামিলি সেট করা */
  --RelaydiaFont: 'Albert Sans', 'Noto Serif Bengali', sans-serif;
}








/* ================= DARK THEME - APP-LIKE COMPLETE CSS ================= */

/* রুট এলিমেন্ট ফিক্স */
html {
    height: -webkit-fill-available;
    background-color: #000;
    overflow-x: hidden;
}

/* বডি - ডার্ক থিম */
body {
    /* ফন্ট */
    font-family: 'RelaydiaFont', 'Albert Sans', 'Noto Serif Bengali', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    
    background-color: var(--bg-color);
    color: var(--text-color);
    
    /* লেআউট */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0 auto;
    padding: 5rem 1rem 6rem 1rem;
    
    /* পজিশন */
    position: relative;
    
    /* স্ক্রোল */
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    
    /* স্ক্রোলবার হাইড (অপশনাল - চাইলে কমেন্ট আউট করুন) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* টেক্সট রেন্ডারিং */
    text-rendering: optimizeLegibility;

    /* ভিজিবিলিটি */
    visibility: hidden;
}

/* স্ক্রোলবার হাইড - Chrome/Safari */
body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}



/* সিউডো এলিমেন্ট সরান */
body::before,
body::after,
html::before,
html::after {
    display: none !important;
    content: none !important;
}

/* সব এলিমেন্ট */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
    box-sizing: border-box;
}

/* মেইন কন্টেইনার - ডার্ক */
#app, .app-container, main {
    min-height: calc(100vh - 5rem);
    background-color: #000;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* iOS specific fix */
@supports (-webkit-touch-callout: none) {
    body, html, #app, main {
        background-color: #000;
    }
}

/* ব্রাউজার লোডিং বার লুকানোর জন্য */
.loading-bar-hide {
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    height: 0;
    z-index: -1;
}

/* মোবাইল স্পেসিফিক - ডার্ক */
@media screen and (max-width: 768px) {
    body {
        cursor: default;
        -webkit-tap-highlight-color: transparent;
        padding: 0 0 6rem 0;
        margin-top: 4rem;
        padding-top: 2rem;
    }
    
    #app, main {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ফন্ট লোড হওয়ার পর ভিজিবল */
body.fonts-loaded {
    visibility: visible;
}

.h1 {
    
font-size: 1.5rem;
margin-top: .5rem;
}


header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: flex-end;
}

button {
  background-color: #ffffff;
  color: #000000;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}


button:hover {
  background-color: #444;
}

main {
  margin: auto;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  margin-top: -1rem;
}




@media (min-width: 1024px) {

main {
  max-width: 600px;
  margin: auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-right: 1px solid #1e1e1e;
  border-left: 1px solid #1e1e1e;
  
}

}




/* Disable pointer cursor on mobile */
@media (max-width: 768px) {
  button {
    cursor: default; /* no pointer on mobile */
  }
}





/* ---- Tweakables ---- */
  :root {
    --logo-size: 100px;          /* change to fit your layout */
  }

  /* Container */
  .logo {
    width: var(--logo-size);
    max-width: 100%;
    color: #fff;
    display: inline-block;
    margin-top: 5px;
  }
  .logo svg {
    display: block;
    width: 100%;
    height: auto;
    color: #fff;
  }





/* ---------------------------------------------------------- */
/* 🌐 GLOBAL LINK RESET — Fully Enforced & Polished */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* 🌐 SAFE GLOBAL RESET — Links + Unstyled Buttons Only */
/* ---------------------------------------------------------- */

/* === LINKS === */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
  background: none;
  outline: none;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* === BASE BUTTON RESET (light, safe) === */
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Keep hover/focus clean */
button:hover,
button:focus,
button:active {
  outline: none;
  box-shadow: none;
}

/* === Protect Styled Buttons === */
button.energy-btn,
button.black-btn,
button.primary-btn,
button.custom-btn,
button.edit-btn {
  all: unset; /* optional reset */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keep their custom styles working */
button.energy-btn *,
button.black-btn *,
button.primary-btn *,
button.edit-btn *,
button.custom-btn * {
  pointer-events: none;
}







/* // top-bar */



/* --- Left / Center / Right --- */
.left, .center, .right {
  display: flex;
  align-items: center;
}



/* --- Buttons --- */
.left a.icon-hover,
.right a.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 24px;
  height: 24px;
}




/* Logo Center - Perfect Centering Solution */
#logoCenter {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}



/* Left section - fixed width container */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 100px; /* বাম পাশের এলিমেন্টের জন্য জায়গা */
}

/* Right section - fixed width container */
.right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 100px; /* ডান পাশের এলিমেন্টের জন্য জায়গা */
  justify-content: flex-end;
}









#logoCenter img {
  height: 30px;
  width: auto;
  display: block;
}


.header-wrapper {
  top: 0;
  left: 0;    
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
  background: #000;
  position: fixed;
}

.header {
  width: 100%;
  max-width: 600px;
  height: 60px;
  background-color: #000;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  position: relative;
  margin-top: 1rem;
  justify-content: space-between;
  border-left: 1px solid #1e1e1e;
  border-top: 1px solid #1e1e1e;
  border-right: 1px solid #1e1e1e;
  border-radius: 1.5rem 1.5rem 0 0;
}

.left, .center, .right {
  display: flex;
  align-items: center;
}

.left {
  flex: 0 0 auto;
}

.center {
  flex: 1;
  justify-content: center;
}



.right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.search-btn {
  font-size: 1rem;
  color: #ccc;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.search-btn:hover,
.icon-hover:hover svg {
  transform: scale(1.2) rotate(5deg);
  color: #fff;
  background-color: unset;
}

.login-button {
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 1rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #333;
}

@media screen and (max-width: 768px) {
  .header {
    width: 100%;
    border-radius: unset;
    border: none;
    margin: unset;
    background: #000;
  }


main {

  padding-top: unset !important;
}



.profile-pic-wrapper {

  margin-top: -2rem !important;
}

  .center.logo-moved {
    margin-left: 0.5rem;
  }
}

@media (max-width: 768px) {
  body {
    color: #fff;
  }

  header {
    justify-content: center;
  }

  button {
    font-size: 1.1rem;
  }


}



/* Hover effect */
.icon-btn:hover {
  background-color: unset; /* light hover effect */
}

/* Hover effect */
.feed-back-button:hover {
  background-color: unset; /* light hover effect */
}






/* // left-bar */


.left-sidebar {
  position: fixed;
  left: 12% !important;
  right: auto !important;
  width: 400px;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1rem;
  margin-top: 1.5rem;
  border: 1px solid #1e1e1e;
  box-shadow: none;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 1.5rem;
}

/* ============================================================
   🙈 ULTRA-CLEAN HIDDEN SCROLLBAR (Chrome, Safari, Opera, Brave)
   ============================================================ */
.left-sidebar::-webkit-scrollbar {
  display: none; /* ক্রোম এবং সাফারি ব্রাউজারে স্ক্রোলবার পুরোপুরি ভ্যানিশ */
  width: 0 !important;
  height: 0 !important;
}


.left-sidebar .menu-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.left-sidebar .menu-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}


.left-sidebar .icon-btn {
  color: #999; /* lighter text for dark background */
  font-size: 20px;
  border: none;
  border-radius: 1rem;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: unset;
}

.left-sidebar .icon-btn:hover {
  background-color: #333; /* subtle hover */
  color: #fff; /* white on hover */
}

.left-sidebar .avatar {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  object-fit: cover;
  border: 1px solid #444; /* dark border for avatar */
}

@media screen and (min-width: 1024px) {
  .left-sidebar {
    display: flex;
  }
}














.right-sidebar {
  position: fixed;
  right: 12% !important; /* জোরপূর্বক ডানে পজিশন দেওয়া */
  left: auto !important;  /* বামের সব পজিশন বাতিল করা */
  width: 400px;
  
  /* 🛠️ টেস্ট করার জন্য সাময়িকভাবে display: flex দেওয়া হলো। 
     যদি জাভাস্ক্রিপ্ট দিয়ে কন্ট্রোল করেন, তবে !important বাদ দিয়ে display: none রাখতে পারেন */
  display: flex !important; 
  
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1rem;
  margin-top: 1.5rem;

  border: 1px solid #1e1e1e;
  box-shadow: none; 

  /* 🎯 স্মার্ট স্ক্রোলিং মেকানিজম */
  max-height: calc(100vh - 4rem);
  overflow-y: auto; 
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; 
  
  /* 🙈 স্ক্রোলবার পুরোপুরি হাইড */
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  
  border-radius: 1.5rem;
}






/* ============================================================
   📱 MOBILE & TABLET HIDDEN FIX (768px এর নিচে সব হাইড)
   ============================================================ */
@media (max-width: 768px) {
  .left-sidebar,
  .right-sidebar {
    display: none !important; /* মোবাইলে জোরপূর্বক হাইড করা */
  }
}









/* Dark Profile Card */

.profile-card {
  max-width: 500px;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}


.profile-card .avatar {
  width: 70px;
  height: 70px;
  border-radius: 40%;
  object-fit: cover;
}





.badge-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.badge-icon {
    width: 14px;
    cursor: pointer;
    color: #fff;
}



.badge-icon svg {

    color: #fff;
}



.badge-tooltip {
    visibility: hidden;
    width: max-content;
    max-width: 200px;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    bottom: 90%; /* show above the icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 1.3;
}

.badge-wrapper:hover .badge-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Optional: small arrow below tooltip */
.badge-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* arrow points down */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
}





.name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: .2rem;
  display: inline-flex;
  gap: 8px;
}

.username {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 0.2rem;
}

.meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: .7rem;
  line-height: 1.2;
}

.bio {
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: #ccc;
}

.profile-buttons {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
  height: 2.5rem;
}

.profile-buttons button {
  padding: 0.3rem 1rem;
  border: 1px solid #444;
  border-radius: 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  text-align: center;
}


.stats {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: 0.9rem;
}

.stat {
  flex: 1;
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 1rem;
  color: #fff;
}

.desktop-layout {
  display: block;
}

.desktop-top-layout {
  display: block;
  text-align: center;
}

/* Responsive: Mobile */
@media (max-width: 600px) {
  .buttons button {
    flex: 1 1 48%;
  }

.profile-card {
  margin-top: 0;
  padding-top: 0;
}

  .stats {
    align-items: center;
    gap: 0.6rem;
  }
}








/* General popup container style - DARK */
.popup-menu,
.more_popup {
  display: none;
  position: absolute;
  background: #1f1f1f; /* Dark background */
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  z-index: 1000;
  min-width: 180px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  color: #fff; /* Light text color */
}

/* List inside the popup */
.popup-menu ul,
.more_popup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* List items */
.popup-menu ul li,
.more_popup ul li {
  margin-bottom: 8px;
}

/* Last list item spacing fix */
.popup-menu ul li:last-child,
.more_popup ul li:last-child {
  margin-bottom: 0;
}

/* Anchor links inside popup */
.popup-menu ul li a,
.more_popup ul li a {
  color: #fff; /* Light text color */
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 5px 0;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.popup-menu ul li a:hover,
.more_popup ul li a:hover {
  background-color: #333; /* Darker hover */
  border-radius: 8px;
  color: #fff;
}











/* Dark Theme: Mutual Following Modal */
#mutualFollowersModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* darker backdrop */
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

#mutualFollowersModal .modal-content {
  background: #1a1a1a !important;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

.modal-title {
  margin-top: 0;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #fff; /* white title */
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.4rem;
  border: none;
  color: #aaa;
  cursor: pointer;
  background: unset;
}

.close-btn:hover {
  color: #fff;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mutual Avatars */
.mutual-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #333; /* darker border */
}

/* Remove default link styling */
#mutualFollowersModal a,
#mutualFollowersModal a:hover,
#mutualFollowersModal a:visited {
  color: unset;
  text-decoration: none;
}










.settings-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  gap: 2rem;
  padding: 1rem;
  box-sizing: border-box;
  max-width: 700px;
}

/* Sidebar styles */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 150px;
  padding-top: 2rem;
  transition: all 0.3s ease;
  margin-left: auto;
  border-radius: 1rem;
}

.tab-slider-container {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  overflow-x: auto;
  white-space: nowrap;
  z-index: 999;
  padding-top: 16px;
  padding-bottom: 9px;
  width: 580px;
  margin-top: 10px;
}


.tab-slider {
  display: inline-flex;   /* horizontal items */
  gap: 5px;
  justify-content: center; /* center the buttons inside */
}


/* Topic button */
.tab-button {
  position: relative;
  display: inline-block;
  min-width: fit-content;
  border-radius: 1rem;
  border: 1px solid #444 !important;
  cursor: pointer;
  overflow: hidden;
  padding: 0 10px 0 8px;
  font-size: small;
  font-weight: 500;
  height: 36px;
}

.tab-button:hover {
  
  background-color: #333 !important;
  color: white !important;
  border: 1px solid transparent !important;
}




.tab-button.active {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid transparent !important;
}
/* Tab content styles */
.tab-content {
  flex: 1;
  width: 100%;
  animation: fade 0.4s ease-in-out;
  margin-right: auto;
  box-sizing: border-box;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

/* Fade animation */
@keyframes fade {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Responsive for Tablets and Mobile --- */
@media (max-width: 1024px) {
  .settings-body {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0;
    overflow-x: auto;
    gap: 0.5rem;
    justify-content: space-around;
  }

  .tab-button {
    flex: 1;
    margin-bottom: 0;
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
  }

  .tab-content {
    max-width: 100%;
    padding: 1rem 0;
  }
}


  .ep-box {
  width: 100%;
  padding-bottom: 1rem;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}  
   
   
   
   
.profile-pic-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: unset;
  display: block;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}



.profile-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40%;
  border: 1px solid #ddd;
  background-color: #f3f3f3;
}
   
   
   
.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000;
  color: #fff;
  border-radius: .6rem;
  padding: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
   
   
   
   input[type="file"] {
  display: none;
}
   
   
   
  .flex-fields {
      
      display: flex;
      gap: 1rem;
  } 
    
    
    /* Wrapper Section */
.ep-section {
  border-radius: 12px;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

/* Form Group */
.ep-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

/* Label */
.ep-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: .5rem;
  width: max-content;
  display: block;
}






.avatar-label {
  font-weight: 500;
  color: #fff;
  padding-bottom: 2rem;
  width: max-content;
  display: block;
}


/* Input */
.ep-input {
  padding: 0.75rem 1rem;
  border: unset;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Ubuntu', Arial, sans-serif;
  transition: border-color 0.2s;
  background: #1a1a1a;
  color: #fff;
}

.ep-input:focus {
  border-color: #000;
  outline: none;
}

/* Textarea */
.ep-textarea {
  min-height: 100px;
  font-family: 'Ubuntu', Arial, sans-serif;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: unset;
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.2s;
  background: #1a1a1a;
  color: #fff;
}

.ep-textarea:focus {
  border-color: #000;
  outline: none;
}

/* Select */
.ep-select {
  padding: 0.7rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: unset;
  background: #1a1a1a;
  font-family: 'Ubuntu', Arial, sans-serif;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  color: #fff;
}

.ep-select:focus {
  border-color: #000;
  outline: none;
}

.ep-button {
  width: 100%;
  background-color: #fff;
  color: #000;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1rem;
  font-weight: normal;
  font-family: 'Ubuntu', Arial, sans-serif;
}





.select2-container--default .select2-selection--single {
  height: 100%;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  position: relative;
  width: fit-content;
}


.ep-button:hover {
  background: #ddd;
}

/* Error & Success */
.ep-error {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.ep-success {
  color: #34a853;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* Avatar Upload Wrapper */
.ep-avatar-wrapper {
  width: 140px;
  height: 140px;
  margin: 1.5rem auto;
  position: relative;
}



    .ep-char-count {
      font-size: 0.75rem;
      color: #666;
      margin-top: 0.25rem;
      text-align: right;
    }


.ep-avatar {
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  object-fit: cover;
  border: 3px solid #ddd;
  background-color: #f3f3f3;
}

.ep-avatar-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000;
  color: #fff;
  border-radius: .6rem;
  padding: 6px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 2px #fff;
}

/* File Input */
.ep-file {
  display: none;
}

/* Chips (e.g., Suggestions) */
.ep-chip {
  display: inline-block;
  padding: 3px 10px;
  background: #eee;
  border-radius: 12px;
  font-size: 0.85rem;
  margin: 0.3rem;
  cursor: pointer;
  user-select: none;
}

.ep-chip:hover {
  background: #ccc;
}

/* Typing Text Animation */
.ep-typing-text::after {
  content: '|';
  animation: blink 0.7s infinite;
  display: inline-block;
}

@keyframes blink {
  0%, 100% { opacity: 1 }
  50% { opacity: 0 }
}

/* Responsive */
@media (max-width: 500px) {


  .ep-input,
  .ep-textarea,
  .ep-select {
    font-size: 0.95rem;
  }

  .ep-button {
    font-size: 0.95rem;
  }
}


.ep-agreement-text {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-top: 1rem;
}

  .ep-agreement-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 4px;
  }

.ep-agreement-links a {
  color: #555;
  text-decoration: underline;
  margin-top: .2rem;
}




 
  /* Username input right corner indicator */
  #username {
    padding-right: 25px;
  }
  #username.available {
    border-color: green;
    background-image: url('data:image/svg+xml;utf8,<svg fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px 16px;
  }
  #username.unavailable {
    border-color: red;
    background-image: url('data:image/svg+xml;utf8,<svg fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px 16px;
  }
  #username.loading {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="gray" stroke-width="10" fill="none" stroke-dasharray="188.4" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px 16px;
  }

  /* Suggestion chips */
  #username-suggestions span.suggestion-item {
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    padding: 3px 8px;
    background: #eee;
    border-radius: 12px;
    font-size: 0.9em;
    user-select: none;
    transition: background-color 0.2s ease;
  }
  #username-suggestions span.suggestion-item:hover {
    background-color: #ccc;
  }

  #username-status {
    font-size: 0.85em;
    margin-top: 4px;
  }



.ep-group.smart-social-group {
  max-width: 600px;
  position: relative;
}




    /* Cards styling */
.smart-social-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: unset;
  padding: 1rem 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  cursor: text;
  position: relative;
  z-index: 2;
  background: #1a1a1a;
  color: #fff;
}

    /* Input */
.smart-social-card input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  outline: none;
  color: #fff;
  caret-color: #333;
}


    /* Icon container */
    .smart-social-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #fff;
      padding: 4px;
      box-shadow: 0 0 0 1px #e2e2e2;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .smart-social-icon svg {
      width: 20px;
      height: 20px;
      fill: #555;
    }
    
    
    
    
    .splide__arrow svg {
  fill: #000;
  height: 1em;
  width: 1rem;
}
    

    /* Splide arrows moved outside container */
    .splide__arrows {
      position: absolute;
      top: 50%;
      width: auto;
      height: 36px;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: auto;
      z-index: 10;
      left: 0;
      right: 0;
      padding: 0 0;
    }

    /* Place left arrow to the far left */
    .splide__arrows .splide__arrow:first-child {
      position: absolute;
      left: -48px; /* outside the container */
      top: 50%;
      transform: translateY(-50%);
    }

    /* Place right arrow to the far right */
    .splide__arrows .splide__arrow:last-child {
      position: absolute;
      right: -48px; /* outside the container */
      top: 50%;
      transform: translateY(-50%);
    }
    
    
    
    .splide__pagination {
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}
    
    

.splide__arrow {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  user-select: none;
}


.splide__arrow:hover {
  background: #fff !important;
  color: #111;
}

    /* Hide arrows on mobile */
    @media (max-width: 768px) {

      .splide__arrows {
        display: none;
      }
    }

    /* Dot indicators with top and bottom margin */
.splide__pagination {
  display: none;
}






.splide__slide {
  height: 72px;
  display: flex !important;
  align-items: center;
  padding: 0 !important;
  flex: 1;
}







.splide__pagination__page {
  background: #ccc;
  opacity: 1;
  margin: 0 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}
    .splide__pagination__page.is-active {
      background: #111;
    }
    
    
    
    
    
  .splide__arrows {
  pointer-events: none;
}

.splide__arrow {
  pointer-events: auto;
}  





.nav__expand-link:hover{background:none;}







/* Modal hidden by default */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.67);
  display: none;                /* keep hidden */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;                   /* start invisible */
  transition: opacity 0.3s ease;
  overflow-y: auto;             /* allow scrolling if content is tall */

  /* Hide scrollbar */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

.modal::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}


/* Inner content */
.modal-content {
  background: #000;
  border-radius: 22px;
  padding: 22px;
  max-width: 600px;
  width: 92%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: solid 1px #333;
  color: #f0f0f0;

  transform: scale(0.8);         /* shrink on start */
  opacity: 0;
  transition: all 0.3s ease;
  max-height: 90vh;              /* limit height */
  overflow-y: auto;              /* make content scrollable if needed */
  
  /* Hide scrollbar inside modal-content */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

.modal-content::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}








/* When active */
.modal.show {
  display: flex;                 /* now visible */
  opacity: 1;                    /* fade in */
}
.modal.show .modal-content {
  transform: scale(1);           /* zoom in */
  opacity: 1;
}



/* Close Button */
.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
}
.close-btn:hover { color: #fff; }

/* Title */
.modal-title {
  display: flex;
  font-size: medium;
  font-weight: bold;
  color: #fff;
  align-items: center;
}

/* Textarea */
.textarea-container { position: relative; }
#byteText {
  width: 100%;
  min-height: 2rem;
  max-height: 400px;
  font-size: 18px;
  line-height: 1.2;
  resize: none;
  border: none;
  color: #fff;
  padding: 0px 12px 8px 12px;
  border-radius: 16px;
  font-weight: 600;
  outline: none;
  text-align: center;
  overflow: hidden;
  scrollbar-width: none;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}


#byteText::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}





.placeholder-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #444;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.3s;
  font-weight: bold;
  width: 100%;
}
#byteText:not(:empty)+.placeholder-text { opacity: 0; }

/* Controls */
.byte-controls { padding-top: 1.2rem; }
.byte-row { display: flex; align-items: center; gap: .8rem;}
.right-controls { display: flex; align-items: center; gap: 8px; }
#charCounter { font-size: .9rem; color: #aaa; min-width: 50px; text-align: right; }
.drop-zone-small {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: unset;
  border-radius: 8px;
}

/* Post Button */
.btn-post-inline {
  padding: 6px 30px;
  border: none;
  border-radius: 1rem;
  background: #fff;
  color: #1e1e1e;
  font-size: 14px;
  cursor: pointer;
}
.btn-post-inline:hover { background: #bbb; }


/* ============================================================
   1. MAIN FEED CAROUSEL (DARK THEME)
   ============================================================ */
#byteCarousel {
  width: 100%;
  padding: 0 !important;
  margin: auto;
}

.owl-stage {
    padding-left: 0 !important;
}

#byteCarousel .item {
    border-radius: 18px;
    overflow: hidden;
    background: #1a1a1a; /* DARK BACKGROUND */
    position: relative;
    border: 1px solid #333;
    transition: transform 0.2s ease;
}

#byteCarousel img,
#byteCarousel video {
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    filter: brightness(0.95);
}

/* REMOVE BUTTON */
.remove-img-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.remove-img-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ============================================================
   2. LIGHTBOX (DARK MODE)
   ============================================================ */
#byteLightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: transparent;
    transition: opacity 0.3s ease;
}

#byteLightbox.show {
    display: flex;
    opacity: 1;
}

.lb-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
}

.lb-content {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxCarousel .item {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

#lightboxCarousel img,
#lightboxCarousel video {
    max-height: 85vh;
    max-width: 95vw;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
}

#lb-counter {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    z-index: 101;
    opacity: 0.7;
}

.close-lightbox:hover {
    opacity: 1;
}

/* ============================================================
   3. NAVIGATION (ARROWS)
   ============================================================ */
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    transition: all 0.3s ease;
}

.owl-nav .owl-prev { left: 20px; }
.owl-nav .owl-next { right: 20px; }

.owl-nav button:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-50%) scale(1.05);
}

/* DOTS STYLING */
.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: #555 !important;
    margin: 5px 6px;
    transition: all 0.3s;
}

.owl-theme .owl-dots .owl-dot.active span {
    width: 20px !important;
    background: #fff !important;
    border-radius: 10px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .owl-nav { display: none; }
    #lb-counter { bottom: 30px; top: auto; }
}







/* Tablet view (768px and below) */
@media (max-width: 768px) {
  .modal-content {
      margin-bottom: auto;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 0;
      padding-right: 0;
      border-radius: 0; /* corrected */
      border: none;
      font-size: medium;
  }
  
    .modal-title {

      font-size: medium;
  }
  
    
.placeholder-text {
  font-size: 1.5rem;

}

  
  .modal {
      background: #000 !important; /* corrected selector */
  }
  
}








input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}






.byte-user {
    
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  font-size: small;
  color: #111111;
}





.byte-name {
    
    font-weight:600; 
    color: #fff;

}





.source-link-flex {

  display: flex;             /* enable flex */
  justify-content: center;   /* vertical centering */
  height: 100%;              /* make it take full height of modal */
  gap: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;


}



.source-link {
    
  font-family:'Ubuntu';
  color: #666;
  width: 100%;
  border: unset;
  border-radius: 6px;
  text-align: center;
  font-size: 1rem;
  background: none;

}









.privacy-select {
  position: relative;
  width: fit-content;
  font-size: small;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  text-align: center;
  color: #666;
}

.privacy-select .select-selected {
  background: unset;
  border: 1px solid #222;
  border-radius: 18px;
  padding: 6px 10px;
}

.privacy-select .select-items {
  position: absolute;
  background: #000;
  border: 1px solid #222;
  border-radius: 15px;
  top: 120%;
  left: 0;
  right: 0;
  z-index: 99;
  display: none;
  width: fit-content;
}

.privacy-select .select-items div {
  padding: 6px 12px;
}

.privacy-select .select-items div:hover {
  background-color: #666;
  color: white;
  border-radius: 15px;
}

.privacy-select .select-items.select-show {
  display: block;
}








.feed-back-button {
    
    background: none;
    color: #bbbbbb;
}




.feed-back-button:hover {
    
    background: none;
    color: #fff;
}













.creator-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem auto 1rem;
}

.creator-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-name {
  font-size: 1rem;
  font-weight: bold;
  word-wrap: break-word;
  color: #fff;

}

.creator-divider {
  width: 3px;
  height: 36px;
  background: #ddd;
  border-radius: 20px;
  transform: rotate(10deg);
}

.creator-profession {
  font-size: small;
  color: #ddd;
  white-space: nowrap;
  font-weight: 500;

}

.follow-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 6px 18px;
  font-size: 14px;
  border-radius: 25px;
  cursor: pointer;
}















/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip box - dark style */
.tooltip-text {
  position: absolute;
  bottom: 120%; 
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(20, 20, 20, 0.95);
  color: #eaeaea;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tooltip arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(20, 20, 20, 0.95) transparent transparent transparent;
}

/* Hover effect */
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* --- Layout styling --- */
.layer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 500px;
  margin: auto;
}

.layer-column {
  gap: .5rem;
}

@media screen and (max-width: 768px) {
  .layer-columns {
    max-width: 400px;
  }
}


/* --- Dark mode base styles --- */
.layer,
.fetch-layer {
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1rem;
  width: fit-content;
  cursor: pointer;
  color: #888;
  text-decoration: underline;
}
/* Optional subtle border */


/* Inline elements */
.layer-text {
  display: inline;
}


.layer-meta {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  vertical-align: middle;
  color: #ccc;
}

/* Profile pics */
.left-layer-profile-pic,
.right-layer-profile-pic {
  width: 20px;
  height: 20px;
  border-radius: 40%;
  object-fit: cover;
  background-color: #222;
}

.left-layer-profile-pic {
  margin-left: 8px;
}



/* Username */
.user-name {
  font-size: small;
  color: #f0f0f0;
  margin-right: 3px;
}

/* Separator line */
.separator-line {
  width: 1px;
  height: 20px;
  min-height: 24px;
  background-color: #555;
  margin: auto;
  flex-shrink: 0;
}









/* ------------------------------------------------------------------ */
/* COLORS - REAL ENERGY (Electric Yellow → Fiery Orange) */
/* ------------------------------------------------------------------ */
:root {
    --active-gradient: linear-gradient(135deg, #FFD600, #FF7300);  /* energy glow */
    --active-color: #FFB300;  /* fallback solid energy tone */
    --ring-color: #FF7300;    /* burst ring */
}

/* ------------------------------------------------------------------ */
/* KEYFRAMES */
/* ------------------------------------------------------------------ */

/* Icon Zoom Effect (The main pop) */
@keyframes congratulation-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Ring Burst Effect (The celebratory halo) */
@keyframes celebratory-ring {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.1);
        border-width: 5px;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
        border-width: 0;
    }
}

/* ------------------------------------------------------------------ */
/* BASE STYLES & INTERACTION */
/* ------------------------------------------------------------------ */
/* The celebratory ring */ 





button.energy-btn {
 font-size: 15px;
  font-weight: 500;
  padding: .3rem .5rem !important;
  border-radius: 8px;
  border: 1px solid #333 !important;
    position: relative; 
    z-index: 1; 
    border: none;
    padding: 0; 
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    gap: 4px; 
    transition: color 0.1s ease-out;
    text-decoration: none; 
    font-size: smaller !important;

}
 
 
 
 
 
 
 

/* The celebratory ring */ 
.energy-btn::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 20px; 
    height: 20px; 
    border: 3px solid var(--ring-color); 
    border-radius: 50%; 
    pointer-events: none; 
    opacity: 0; 
    z-index: -1; 
} 

/* Active state animation + color */ 
/* Active state color, no animation on load */
.energy-btn.active {
    color: var(--active-color);
    background: black;
    transition: none;
        padding: .3rem .5rem;
  border-radius: 8px;
  border: 1px solid #000;
}

/* Only animate when .animate class added */
.energy-btn.animate {
}






/* Hover/focus cleanup */ 
.energy-btn:hover,
.energy-btn:focus {
background: #222;
  color: inherit;
  outline: none;
  box-shadow: none;
  transform: none;
}
.energy-btn.active:hover,
.energy-btn.active:focus {
    color: var(--active-color);
}

/* ------------------------------------------------------------------ */
/* INNER STROKE / ENERGY GLOW EFFECT */
/* ------------------------------------------------------------------ */
.energy-btn svg {
}

/* Default icon (gray) */
.energy-btn:not(.active) svg {
    fill: #bbbbbb;
}


/* Icon container fixed size to prevent jump */
.energy-btn .icon-default,
.energy-btn .icon-active {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    left: 0;
}


.energy-btn .icon-active {
  display: none;
}

.energy-btn.active .icon-default {
  display: none;
}

.energy-btn.active .icon-active {
  display: inline-flex;
  align-items: center;
}






.energy-btn.active {
  color: #0a7a2f;
}



.energy-btn[data-type="effective"].active {
  color: #000;
  background: white;
  border: 1px solid #000 !important;
}

.energy-btn[data-type="ineffective"].active {
  color: #000;
  background: white;
  border: 1px solid #fff !important;
}

























/* Mobile Responsive */
@media (max-width: 768px) {

}




.single-card {
  max-width: 600px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: auto;
  border-radius: 2rem;
  
}






  .post-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
        }

        /* Styles for the carousel container */
        .owl-carousel {
            display: flex; /* Used for single images */
            justify-content: center; /* Used for single images */
            gap: .5rem;

        }

        /* Individual image item styling */
        .item {
            position: relative;
            text-align: center;
        }




  .timeline {
    position: relative;
    margin: .5rem 0;
    display: flex;
  }

  /* Center vertical line */
  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: .1em;
    height: 100%;
    background: #ddd;

  }

  .event {
    position: relative;
    width: 50%;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Alternate left & right */
  .event.left { left: 0; text-align: right; }
  .event.right { left: 0; }

  /* Event content box */
  .event .content {
    position: relative;
  }

  /* Dot in center */
  .event::before {
    content: '';
    position: absolute;
    top: 1.6rem;
    width: 10px;
    height: 10px;
    border-radius: 25%;
    background: #ddd;
    left: 100%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .event.right::before {
    left: 0%;
    transform: translateX(-50%);
  }

  /* Text styles */
  .title {
    font-weight: 600;
    font-family: Hind Siliguri;
    font-size: smaller;

  }
  .desc {
  font-size: 14px;
  color: #757575;
  font-family: Hind Siliguri;
  font-weight: 500;
  }
  .time {
    margin-top: .4rem;
    font-size: .8rem;
    color: #9ca3af;
  }
  
  
  
  .left{
      display: block;
  }
  
  
  

  
.more-raise {
  font-size: 14px;
  text-align: center;
  font-weight: bold;

}












@media (min-width: 1024px) {
  .feed-card {
    height: auto;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 1rem;
    box-sizing: border-box;
    padding: 1rem 3rem 1rem 3rem;
    position: relative;
    border-radius: 2rem;
  }
}






.feed-card {
  height: auto;
  width: 100%;
  margin: 0 auto 1rem;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;
  border-radius: 2rem;
}


.feed-card-inner {
  position: absolute;
  top: 50%;               /* 👈 push slightly below middle */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}











.main-avatar {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 40%;
  margin-bottom: -.4rem;
}





/* Mobile-specific avatar */
@media screen and (max-width: 768px) {
  .main-avatar {

    margin-right: 0.17rem;
  }
}








.name-profession {
    
 font-size: 14px;
  gap: 5px;
  display: flex;
  align-items: center;
  font-weight: bold;
  margin: auto;
    margin-bottom: auto;

}




.top-more {
    
  margin-left: auto;
  color: #bbb;


}


.name-profession-wrap {
  display: grid;
  gap: 2px;
  align-items: center;
}


.raise-avatar-name-right {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: left;
  margin-bottom: 10px;
}



.raise-avatar-name-right img{
    
    width: 2rem;
    height: 2rem;
    border-radius: 40%;
    object-fit: cover;
}


.raise-avatar-name {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: right;
  margin-bottom: 10px;
}



.raise-avatar-name img{
    
    width: 2rem;
    height: 2rem;
    border-radius: 40%;
    object-fit: cover;
}


.feed-title {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
}

.feed-title span {
    display: inline;
    overflow: visible;
    white-space: normal;
    border-right: none; /* remove per-character cursor */
}

/* Add cursor only to parent container */
/* cursor styling */
.cursor {
  display: inline;
  animation: blink 2s steps(1, start) infinite;
  color: #bbb;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}




.context-btn {
  background-color: unset;
  color: #bbb;
  border: none;
  padding: unset;
  border-radius: unset;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-flex;
  font-family: Ubuntu;
}


.context-btn:hover {
      background-color: unset;
}









.minimal-link {
  display: inline-block;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #bbb;
  text-decoration: none;
  font-weight: normal;
}
.minimal-link:hover {
    text-decoration: underline;
}





.minimal-link .icon {
    flex-shrink: 0;             /* keep SVG size */
    margin-bottom: -5px;
}





.card-bottom {



}



.avatar-group {
    
    display: none;
    gap: 5px;
    justify-content: right;
    margin-top: 2rem;
    margin-bottom: 2rem;

    
}




.avatar-group img {
    
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 10px;

}




.card-stats {
  display: flex;
  gap: .6rem;
  color: #bbb;
  font-size: smaller;
  justify-content: left;
  margin-top: .5rem;
  align-content: center;
  align-items: center;
}







.card-feedback {
    
    display: flex;
    gap: .5rem;
    color: #bbb;
    margin-left: auto;
    align-items: center;
    margin-top: 1rem;


}




.avatar-time-privacy {
    
    display: grid;
    gap: .5rem;

    
    
}


.pub-time {
  color: #999;
  font-size: 13px;
  margin-right: auto;
  padding-bottom: .3rem;
}



.card-privacy {
    
    color: #bbb;
    width: 18px;
    margin: auto;
    margin-top: -5px;


}
























/* ----------------------------
   layer Modal Base Theme
----------------------------- */
:root {
  --layer-bg: #fff;
  --layer-text: #111;
  --layer-border: #e3e3e3;
  --layer-shadow: rgba(0,0,0,0.15);
  --layer-btn-bg: #111;
  --layer-btn-text: #fff;
  --layer-placeholder: #aaa;
}

/* ----------------------------
   Floating “+” Button
----------------------------- */
.layer-open-btn {
  border: none;
  background: none;
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  font-family: Ubuntu, sans-serif;
}

.layer-open-btn:hover {
  background: none;
  color: #fff;
}

/* ----------------------------
   Modal Overlay
----------------------------- */
.layer-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.67);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: Ubuntu;
}
.layer-modal.show {
  display: flex;
  opacity: 1;
}

/* ----------------------------
   Modal Content Box
----------------------------- */
.layer-box {
  background: #000000;
  width: 95%;
  max-width: 600px;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #333;
  transform: scale(0.95);
  transition: transform 0.25s ease;
  position: relative;
  font-family: Ubuntu;
  top: -14%;
}

.layer-modal.show .layer-box {
  transform: scale(1);
}

/* ----------------------------
   Header & Close Button
----------------------------- */
.layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.layer-title {
  font-size: medium;    
  font-weight: 600;
  display: flex;
  align-content: center;
  gap: .4rem;
  align-items: center;

}
.layer-close-btn {
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  background: none;
  border: none;
}
.layer-close-btn:hover {
  opacity: 1;
  background: none;
}

/* ----------------------------
   User Info
----------------------------- */
.layer-user {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-size: small;
}
.layer-user img {
  width: 38px;
  height: 38px;
  border-radius: 40%;
  object-fit: cover;
}
.layer-user span {
  font-weight: 600;
  color: #fff;
}

/* ----------------------------
   Textarea / Input
----------------------------- */
.layer-textarea {
  width: 100%;
  border: unset;
  border-radius: 8px;
  resize: none;
  background: unset;
  color: #fff;
  outline: none;
  font-weight: 500;
  min-height: 100px;
  padding: 8px 10px;
  font-family: Hind Siliguri;
  font-size: 1.25rem;
  text-align: center;
  height: 150px;
}
.layer-textarea::placeholder {
  color: #333;
  font-size: 1.25rem;
  font-family: Ubuntu;
  text-align: center;
  font-weight: 500;
}

/* ----------------------------
   Character Counter
----------------------------- */
.layer-counter {
  font-size: .9rem;
  color: #888;
  margin-top: 4px;
  transition: color 0.2s ease;
}

/* ----------------------------
   Action Button
----------------------------- */
.layer-post-btn {
  background: #fff;
  color: #1e1e1e;
  border: none;
  padding: 8px 14px;
  border-radius: 1rem;
  cursor: pointer;
  float: right;
  transition: 0.2s ease;
  font-size: 14px;
  font-family: Ubuntu;
}
.layer-post-btn:hover {
  background: #bbb;
}
















/* ----------------------------
   layer Modal Base Theme
----------------------------- */
:root {
  --layer-bg: #fff;
  --layer-text: #111;
  --layer-border: #e3e3e3;
  --layer-shadow: rgba(0,0,0,0.15);
  --layer-btn-bg: #111;
  --layer-btn-text: #fff;
  --layer-placeholder: #aaa;
}

/* ----------------------------
   Floating “+” Button
----------------------------- */
.layer-open-btn {
  border: none;
  background: none;
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  font-family: Ubuntu, sans-serif;
}

.layer-open-btn:hover {
  background: none;
  color: #fff;
}

/* ----------------------------
   Modal Overlay
----------------------------- */
.layer-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.67);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: Ubuntu;
}
.layer-modal.show {
  display: flex;
  opacity: 1;
}

/* ----------------------------
   Modal Content Box
----------------------------- */
.layer-box {
  background: #000000;
  width: 95%;
  max-width: 600px;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #333;
  transform: scale(0.95);
  transition: transform 0.25s ease;
  position: relative;
  font-family: Ubuntu;
  top: -14%;
}

.layer-modal.show .layer-box {
  transform: scale(1);
}

/* ----------------------------
   Header & Close Button
----------------------------- */
.layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.layer-title {
  font-size: medium;    
  font-weight: 600;
  display: flex;
  align-content: center;
  gap: .4rem;
  align-items: center;

}
.layer-close-btn {
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  background: none;
  border: none;
  color: #fff;
}
.layer-close-btn:hover {
  opacity: 1;
  background: none;
}

/* ----------------------------
   User Info
----------------------------- */
.layer-user {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: small;
}
.layer-user img {
  width: 38px;
  height: 38px;
  border-radius: 40%;
  object-fit: cover;
}
.layer-user span {
  font-weight: 600;
  color: #fff;
}

/* ----------------------------
   Textarea / Input
----------------------------- */
.layer-textarea {
  width: 100%;
  border: unset;
  border-radius: 8px;
  resize: none;
  background: unset;
  color: #fff;
  outline: none;
  font-weight: bold;
  min-height: 100px;
  padding: 8px 10px;
  font-family: Hind Siliguri;
  font-size: 1.3rem;
  text-align: center;
  height: 200px;
}
.layer-textarea::placeholder {
  color: #333;
  font-size: 1.3rem;
  font-family: Ubuntu;
  text-align: center;
}

/* ----------------------------
   Character Counter
----------------------------- */
.layer-counter {
  font-size: .9rem;
  color: #888;
  margin-top: 4px;
  transition: color 0.2s ease;
}

/* ----------------------------
   Action Button
----------------------------- */
.layer-post-btn {
  background: #fff;
  color: #1e1e1e;
  border: none;
  padding: 8px 14px;
  border-radius: 1rem;
  cursor: pointer;
  float: right;
  transition: 0.2s ease;
  font-size: 14px;
  font-family: Ubuntu;
}
.layer-post-btn:hover {
  background: #bbb;
}

















/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  --first-color: hsl(225, 95%, 56%);
  --black-color: hsl(0, 0%, 100%); /* changed for dark theme */
  --white-color: hsl(0, 0%, 0%); /* changed for dark theme */
  --text-color: hsl(0, 0%, 80%);

  /*========== Font and typography ==========*/
  --biggest-font-size: 2.5rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--body-color);
  color: var(--text-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.section {
  min-height: 100vh;
  padding-block: 2.5rem;
}

.section h1 {
  font-size: var(--biggest-font-size);
  color: var(--white-color);
  text-align: center;
}

/*=============== NAVBAR ===============*/
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-inline: auto;
  z-index: var(--z-fixed);
  background-color: #000;

}

.nav__list {
display: flex;
  justify-content: space-evenly;;
  align-items: center;
  padding: .3rem 1rem;
  width: 100%;
}






.nav__link {
  color: #ccc;
  font-size: 30px;
  transition: color .4s;
}

.nav__link:hover {
  color: #fff;
}

/*=============== EXPAND LIST ===============*/
.nav__expand {
  border: none;
  outline: none;
  width: 42px;
  height: 42px;
  background-color: #333;
  border-radius: 30%;
  cursor: pointer;
}

.nav__expand-icon {
  display: inline-block;
  color: hsl(0, 0%, 100%);
  font-size: 1.5rem;
  transition: transform .4s;
}

.nav__expand-list {
  position: absolute;
  top: -4.5rem;
  left: 0;
  right: 0;
  background-color: #1a1a1a;
  box-shadow: 0 2px 16px hsla(0, 0%, 0%, .7);
  width: max-content;
  margin-inline: auto;
  padding: .5rem 1.5rem;
  border-radius: 4rem;
  display: flex;
  column-gap: 2rem;
  z-index: -1;
  overflow: hidden;
  transform: translateY(5rem) scale(.1);
  transition: transform .5s cubic-bezier(.5, 1.8, .4, .8);
}

.nav__expand-list li {
  transform: translateY(-3rem);
  transition: transform .4s;
}

.nav__expand-link {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color .4s;
}

.nav__expand-link i {
  font-size: 1.5rem;
}

.nav__expand-link span {
  font-size: var(--tiny-font-size);
  font-weight: var(--font-semi-bold);
}

.nav__expand-link:hover {
  color: var(--first-color);
}

.show-list,
.show-list li {
  transform: translateY(0);
}

.rotate-icon {
  transform: rotate(135deg);
}

.active-link {
  color: white;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 40%;
  object-fit: cover;
  margin-top: .2rem;
}

/*=============== BREAKPOINTS ===============*/
@media screen and (min-width: 450px) {
  .nav {
    width: 100%;
    background-color: #000;

  }
  
  
  .nav__list {
      
     padding: .9rem;
  }
}

@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
  
  
  .nav__list {
      padding: .3rem;
  }

  .nav {
    position: fixed;
    bottom: 1%;
    left: 3%;
    right: auto;
    background-color: #1e1e1e;
    border-radius: 1.2rem;
    max-width: fit-content;
    margin-inline: auto;
    z-index: var(--z-fixed);
    font-family: 'Ubuntu';
    border-radius: 1.4rem;
    padding: 10px;
    top: 25%;
    bottom: auto;
    border: 1px solid #1e1e1e;
    
  }



.nav__list {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  gap: 2rem;
  place-items: center;
}



}
































.modal-deep-knowledge-buttons {
  margin-left: auto;
}
    
    
    
    
.insight {
  background-color: #f7d61f;
  padding: 4px 8px 5px 7px;
  border-radius: 1rem;
  color: #111;
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: small;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.insight:hover {   
  color: #fff;   
}



.insight-close {
  background-color: #888;
  color: #fff;
}





.insight-field textarea{
    width:100%;
    height:150px;
    border-radius:8px;
    border:1px solid #ddd;
    padding:8px;
    resize:none;
}

.charCount {
  text-align: right;
  font-size: small;
  color: #aaa;
  margin-top: 4px;
}

.ql-toolbar.ql-snow {
  border-radius: 1rem;
  box-sizing: border-box;
  font-family: Hind Siliguri;
  padding: 8px;
  border: unset !important;
}



.ql-container.ql-snow {
  border: unset !important;
  color: #fff;
  font-size: 1.1rem;
  font-family: 'Hind Siliguri';
}







.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 26px;
  padding: 3px 5px;
  width: 35px;
}



.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #fff;
  font-family: 'Hind Siliguri';

  
}



.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #fff !important;
}






.ql-editor.ql-blank::before {
  color: #444 !important;
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}









.byte-follow-btn {
  color: #aaa;
  border: none;
  padding: 2px;
  font-size: small;
  border-radius: 10px;
  cursor: pointer;
}



.byte-follow-btn:hover {
    background: none;
    color: #fff;
}



.owl-carousel .owl-item img {
  width: 100%;
  object-fit: cover;
}


        .item img {
            object-fit: cover;
            border-radius: 1.5rem;
            transition: all 0.3s ease;
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
/* DARK MODE */

.insight-card {
  margin: .2rem 0 .8rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #e6e6e6;

}


/* mobile */
@media screen and (max-width: 768px) {
  .insight-card {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent;
  }
}

.insight-text {
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 16px;
  font-weight: 400;
  word-wrap: break-word;
}



/* preview clamp */
.preview-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

/* fade last line (dark background) */
.preview-clamped::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200%;
  height: 1.4em;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #000);
}


/* hidden words */
.word-hidden {
  display: none;
}


/* typing reveal animation */
.smooth-word {
  display: inline !important;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(2px);
  animation: wordReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes wordReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}


/* Hide button dark */
.hide-insight-btn {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  color: #9ca3af;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  margin-top: 15px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.hide-insight-btn:hover {
  background-color: #262626;
  color: #e5e7eb;
  border-color: #3a3a3a;
}
        
        
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* --- Opinion Panel --- */
.opinion-panel {
  border-radius: 1.5rem;
  border: 1px solid #222;
  margin: 16px 0;
  overflow: hidden;
  animation: slideDown .25s ease;
}
@keyframes slideDown { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.panel-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:#111; }
.panel-header h4{ margin:0; font-size:13px; font-weight:500; color:#fff; }
.opinion-count-badge { background:#2b2b2b; padding:2px 8px; border-radius:999px; font-size:11px; margin-left:6px; }
.close-panel { background:none; border:none; color:#aaa; font-size:22px; cursor:pointer; }

.close-panel:hover {
  background: unset;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}


.opinion-data {
    
  font-size: 15px;
  color: #fff;
  line-height: 1.5;
  font-weight: 550;
  margin-bottom: 10px;

}

.panel-body { max-height:420px; overflow-y:auto; position:relative; }
.opinion-item { padding: 15px;
  border-bottom: 1px solid #222;}
.opinion-author { color: white; display:flex; gap:12px; margin-bottom:10px; }
.opinion-avatar { width:30px; height:30px; border-radius:40%; object-fit:cover; }
.opinion-author-name { font-size:13px; font-weight:600; color:#111; display:flex; align-items:center; gap:6px; font-family:'Hind Siliguri', sans-serif; }
.opinion-profession { font-size:12px; color:#777; margin-top:2px; }
.opinion-content { font-size:14px; line-height:1.55; color:#222; margin-bottom:6px; font-family:'Hind Siliguri', sans-serif; }
.opinion-meta { font-size:12px; color:#999; }

.opinion-actions { display:flex; margin-top:4px; }

.opinion-actions button {
  font-size: 12px;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: unset;
  transition: .2s;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #696969;
}
.opinion-actions button:hover { background:unset; }

.reply-box { display:none; margin-top:6px; }
.reply-box textarea { width:100%; font-size:13px; padding:6px; border:1px solid #ccc; border-radius:6px; resize:none; }
.reply-box button { margin-top:4px; padding:4px 10px; font-size:12px; border:none; border-radius:4px; cursor:pointer; background:#111; color:#fff; }
.reply-item { margin-left:36px; margin-top:6px; padding:6px 10px; background:#f9f9f9; border-radius:8px; font-size:13px; line-height:1.4; }








/* লোডার কন্টেইনার */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 200px; /* কন্টেন্ট আসার আগে একটি নির্দিষ্ট জায়গা দখল করে রাখবে */
    padding: 40px 0;
}

/* স্পিনার ডিজাইন */
.spinner {
    width: 30px;
    height: 30px;
    border: unset; /* হালকা চারপাশের বর্ডার */
    border-top: 3px solid #fff; /* মেইন ঘোরার কালার */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}












.panel-body::-webkit-scrollbar { width:6px; }
.panel-body::-webkit-scrollbar-thumb { background:#ccc; border-radius:6px; }




/* Reaction Buttons */
.opinion-btn {
    cursor: pointer;
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: unset;
    color: #696969;
    font-weight: 400;
    transition: 0.2s;
}


/* Active State for Noted/Thanks */
.opinion-btn.active {
  border-radius: 1rem;
  background: unset;
  color: #444;
  font-weight: normal;
}


/* Reaction Badge (Noted/Thanked) */
.reaction-badge {
  background: unset;
  color: #0057ff;
  padding: 2px 6px;
  font-size: 11px;
  margin-right: 6px;
  display: inline-flex;
  border-radius: 1rem;
  align-items: center;
}

/* Author Reply Item */
.reply-item {
    background: #f7f7f7;
    padding: 10px;
    border-radius: 6px;
    margin-top: 6px;
    font-size: 13px;
    border-left: 3px solid #111;
}



.responses-wrapper {
    margin-top: 8px;
}
 
























/* WRAPPER */
.content-hub-wrapper{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:640px;
  margin:auto;
  padding:.2rem 0 1.5rem 0
}

/* TRACK */
.contenthub-track{
  display:flex;
  gap:16px;
  user-select:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  touch-action:pan-y;
  will-change:transform;
  position:relative;
  z-index:1;
}

/* CARD */
.content-hub-card {
  flex: 0 0 200px;
  width: 200px;
  border-radius: 2rem;
  padding: 1rem 0 0 1rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #1e1e1e;
  transition: .25s;
  position: relative;
  z-index: 1;
}

.content-hub-card:hover{
  background:#888;
  transform:translateY(-3px);
  color: #fff;
  border: 1px solid #888;
}

/* ACTIVE CARD */
.content-hub-card.active{
  background: #fff; !important;
  color: #1e1e1e;
  border: none;
}

/* ICON */
.contenthub-icon{
  height:100px;
  width:100px;
  margin-left:auto;
  padding-top:1rem;
  padding-right:.5rem;
  text-align:right;
  overflow:hidden;
}

.contenthub-icon svg{
  transform:rotate(-15deg);
}






/* ARROWS */
.contenthub-arrow{
  position:absolute;
  top: 47%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:40%;
  background:rgba(75, 75, 75, 0.65);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
}

.contenthub-arrow:hover{
  background:#444;
}

.contenthub-arrow.disabled{
  opacity:.35;
  pointer-events:none;
  cursor:default;
  display: none;
}


.contenthub-arrow.next{ right:8px; }

/* FADE ANIMATION */
#contentHub.animate{
  animation:fade .35s cubic-bezier(.22,.61,.36,1);
}

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

/* MOBILE */
@media(max-width:768px){

  .contenthub-arrow{
    display:none;
  }

  .content-hub-wrapper{
    padding-left:1rem;
  }

  .contenthub-section{
    margin-left:-1rem;
    margin-right:-1rem;
    width:calc(100% + 2rem);
  }

}














/* Mutual Following Box */
#mutual-following-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 6px 0px;
  border-radius: 1.5rem;
  font-size: small;
  max-width: fit-content;
  text-align: left;
  margin: auto;
}

#mutualFollowersModal a,
#mutualFollowersModal a:hover,
#mutualFollowersModal a:visited {
  color: unset;
  text-decoration: none;
}


.mutual-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
}

/* Modal Backdrop */
#mutualFollowersModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

/* Modal Content */
#mutualFollowersModal .modal-content {
  background: #fff;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}




/* Close Button */
.close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.4rem;
  border: none;
  color: #444;
  cursor: pointer;
  background: unset;
}

/* Modal Body Content */
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}






.mutual-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mutual-user-row img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ccc;
}

.mutual-user-row .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #222;
}
        
        
        
        
        
        
        


.profile-buttons button:hover {
  background: #fff;
  border: 1px solid #fff;
  color: #1e1e1e;
}     













/* কন্টেন্ট লোড হওয়ার স্মুথ অ্যানিমেশন */
.animate {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}








.avatar.active {
    outline: 3px solid #fff;
    outline-offset: 3px;
    transition: 0.2s;
}









/* কন্টেইনারের জন্য স্মুথ ট্রানজিশন */
#mainContent {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
















/* ==================== THREADS STYLE LIGHTBOX ==================== */
#byteLightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85); /* Slightly transparent */
    backdrop-filter: blur(20px);    /* Strong blur like Threads */
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

#byteLightbox.show {
    display: flex;
    opacity: 1;
}

/* Close Button - Top Right (Minimal) */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 35px;
    font-weight: 200;
    cursor: pointer;
    z-index: 10002;
    padding: 10px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.close-lightbox:hover {
    transform: scale(1.1);
}

/* Counter - Top Center (Threads Style) */
#lb-counter {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 10001;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Image Container */
#lightboxCarousel .item {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxCarousel img {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 12px; /* Rounded corners like Threads */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Hide Nav Buttons on Mobile, show on hover on Desktop */
#lightboxCarousel .owl-nav button {
    background: rgba(255, 255, 255, 0.1) !important;
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    color: white !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease !important;
}

#lightboxCarousel .owl-prev { left: 20px; }
#lightboxCarousel .owl-next { right: 20px; }

@media (max-width: 768px) {
    #lightboxCarousel .owl-nav { display: none; } /* Mobile এ শুধু সোয়াইপ হবে */
    #lb-counter { top: auto; bottom: 40px; } /* Mobile এ কাউন্টার নিচে থাকলে দেখতে সুবিধা */
}











/* ৬. নেভিগেশন বাটন (আপনার আগের স্টাইলটি আরও উন্নত করা হয়েছে) */
[id^="byteCarousel-"] .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    font-size: 24px !important;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s ease;
display: none !important;

}

[id^="byteCarousel-"]:hover .owl-nav button {
    opacity: 1;
}

.owl-prev { left: 15px; }
.owl-next { right: 15px; }

/* ৭. রেসপন্সিভ ফিক্স */
@media (max-width: 768px) {
    [id^="byteCarousel-"] .owl-stage-outer {
        padding-right: 20%; /* মোবাইলে আরও একটু বেশি পরের স্লাইড দেখাবে */
    }
    
    [id^="byteCarousel-"] .owl-nav button {
        width: 32px;
        height: 32px;
        display: none; /* মোবাইলে নেভ বাটন হাইড রাখা ভালো, টাচ ড্র্যাগই যথেষ্ট */
    }
}























.logout-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* icon */
.logout-icon {
    display: flex;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.logout-icon svg {
    width: 32px;
}

/* loader */
.logout-loader {
    position: absolute;
    display: flex;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.25s ease;
}

/* spinner */
.spinner {
    width: 26px;
    height: 26px;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* active state */
.logout-btn.loading .logout-icon {
    opacity: 0;
    transform: scale(0.6);
}

.logout-btn.loading .logout-loader {
    opacity: 1;
    transform: scale(1);
}

/* spin */
@keyframes spin {
    to { transform: rotate(360deg); }
}












.owl-carousel {
    margin-top: .5rem;
     margin-bottom: .5rem;
}
















:root {
  --dock-bg: #ffffff;
  --active-bg: #111111;
  --icon-dark: #fff;
  --icon-light: #333;
  --border: #e6e6e6;

  --item-size: 54px;
  --radius: 18px;
}

/* Wrapper */
.nav-wrapper {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 9999;

  /* Dark theme effect */
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}

/* Container */
.nav-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dock */
.nav-dock {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 18px;
  background: #1e1e1e;
  border: 1px solid #1e1e1e;
}

/* Indicator */
.nav-indicator {
  position: absolute;
  width: var(--item-size);
  height: var(--item-size);
  background: #333;
  border-radius: 18px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
  z-index: 0;
}

/* Items */
.nav-item {
  width: var(--item-size);
  height: var(--item-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  text-decoration: none;
  position: relative;
  z-index: 1;
  color: var(--icon-dark);
  transition: 0.2s;
}

/* Icons */
.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}




.nav-item.active svg {
  stroke: none;
  fill: #fff;
}


/* Click effect */
.nav-item:active {
  transform: scale(0.92);
}

/* FAB */
.create-fab {
  width: var(--item-size);
  height: var(--item-size);
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #1e1e1e;
  border: 1px solid #1e1e1e;
  color: var(--icon-dark);
  text-decoration: none;
  transition: 0.25s;
}



.create-fab svg {
    
  width: 28px;
  height: 28px;
    
}

.create-fab:hover {
  transform: rotate(90deg);
  color: #1e1e1e;
  background: #fff;
}

.create-fab:active {
  transform: scale(0.9);
  
}

























@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Three Dot Menu */
.three-dot-menu {
    position: relative;
    display: inline-block;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}




.menu-btn:hover {
    
    background: unset;
    color: #fff;
}

.menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;   /* 👈 key change */
  margin-bottom: 5px; /* 👈 spacing above button */

  background: #fff;
  border-radius: 8px;
  min-width: 140px;
  z-index: 1000;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #ddd;
}


.menu-dropdown button {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #111;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.menu-dropdown button:hover {
  background: #eee;
}

.menu-dropdown button:first-child {
    border-radius: 8px 8px 0 0;
}

.menu-dropdown button:last-child {
    border-radius: 0 0 8px 8px;
}

/* Creator Delete Button */
.menu-dropdown .creator-delete-btn {
    color: #ff4444 !important;
}

/* Modal Styles */
.mod-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.89);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.mod-box {
    width: 360px;
    background: #1e1e1e;
    border-radius: 16px;
    padding: 18px;
}

.mod-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mod-header h3 {
    margin: 0;
    font-size: 18px;
}

.mod-header p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #666;
}

.mod-header button {
    border: none;
    border-radius: 10px;
    padding: 4px 8px;
    cursor: pointer;
}

.mod-section {
    margin-top: 16px;
}

.mod-label {
    font-size: 11px;
    color: #777;
    margin-bottom: 8px;
    display: block;
}

.mod-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #1e1e1e;
  cursor: pointer;
}






.action-btn:hover {
  border: 1px solid #000;
  background: #000;
}




.action-btn.active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.action-btn.danger {
    color: #f22;
}

.mod-reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mod-reasons button {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #1e1e1e;
  cursor: pointer;
  text-align: left;
}

.mod-reasons button.active {
  background: #fff;
  color: #111;
  border: 1px solid #fff;
}

.mod-section textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #333;
  padding: 10px;
  font-family: inherit;
  resize: vertical;
  background: #1e1e1e;
  color: #fff;
}

.mod-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.mod-footer button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.cancel {
}

.submit {
    background: #111;
    color: #fff;
}

/* Share Wrapper */
.share-wrapper {
    position: relative;
    display: inline-block;
}

.share-dropdown {
    display: flex;
    gap: 0.5rem;
    position: absolute;
    bottom: 100%;
    left: -700%;
    margin-bottom: 8px;
    transform: scale(0);
    transform-origin: bottom left;
    background: #222;
    border-radius: 50px;
    padding: 0.4rem 0.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    z-index: 100;
}

.share-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.share-button:hover {
    background: unset;
    color: #777;
}

.share-wrapper.open .share-dropdown {
    transform: scale(1);
    opacity: 1;
}

.share-dropdown a,
.share-dropdown button {
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.share-dropdown a:hover,
.share-dropdown button:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive */
@media screen and (max-width: 600px) {
    .share-dropdown {
        bottom: 110%;
        left: -300%;
        transform: translateX(-50%) scale(0);
        transform-origin: bottom center;
    }

    .share-wrapper.open .share-dropdown {
        transform: translateX(-50%) scale(1);
    }
    
    .mod-box {
        width: 90%;
        margin: 20px;
    }
    
    .mod-reasons {
        grid-template-columns: 1fr;
    }
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: 0 auto;
}

#loadingSpinner {
    text-align: center;
    padding: 20px;
    display: none;
}

#noMorePosts {
    text-align: center;
    padding: 20px;
    color: #999;
    display: none;
}










/* Byte Action Confirmation Modal */
.byte-action-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.byte-action-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.byte-action-confirm-modal {
    background: #fff;
    border-radius: 24px;
    width: 420px;
    max-width: 90%;
    padding: 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

.byte-action-confirm-overlay.active .byte-action-confirm-modal {
    transform: scale(1);
}

.byte-action-confirm-header {
    padding: 24px 24px 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.byte-action-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.byte-action-confirm-icon.warning {
    background: #fff8e1;
    color: #ff9800;
}

.byte-action-confirm-icon.danger {
    background: #ffebee;
    color: #f44336;
}

.byte-action-confirm-icon.info {
    background: #e3f2fd;
    color: #2196f3;
}

.byte-action-confirm-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

.byte-action-confirm-subtitle {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

.byte-action-confirm-body {
    padding: 20px 24px 24px 24px;
}

.byte-action-confirm-message {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16px;
    background: #f8f9fa;
    padding: 16px;
}

.byte-action-confirm-message.danger {
    border-left-color: #f44336;
    background: #fff5f5;
}

.byte-action-confirm-message.info {
    border-left-color: #2196f3;
    background: #f0f7ff;
}

.byte-action-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.byte-action-confirm-btn {
  padding: 10px 24px;
  border-radius: .6rem;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.byte-action-confirm-btn.cancel {
    background: #f0f0f0;
    color: #666;
}

.byte-action-confirm-btn.cancel:hover {
    background: #e4e4e4;
}

.byte-action-confirm-btn.confirm {
  background: #000;
  color: white;
}

.byte-action-confirm-btn.confirm:hover {
    background: #444;
}

.byte-action-confirm-btn.confirm.danger {
    background: #000;
}

.byte-action-confirm-btn.confirm.danger:hover {
    background: #444;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .byte-action-confirm-modal {
        background: #1e1e2e;
    }
    
    .byte-action-confirm-title {
        color: #fff;
    }
    
    .byte-action-confirm-subtitle {
        color: #aaa;
    }
    
    .byte-action-confirm-message {
        color: #ddd;
        background: #2a2a3a;
    }
    
    .byte-action-confirm-message.danger {
        background: #2a1a1a;
    }
    
    .byte-action-confirm-message.info {
        background: #1a2a3a;
    }
    
    .byte-action-confirm-btn.cancel {
        background: #333;
        color: #ccc;
    }
    
    .byte-action-confirm-btn.cancel:hover {
        background: #444;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .byte-action-confirm-modal {
        width: 90%;
    }
    
    .byte-action-confirm-header {
        padding: 20px 20px 0 20px;
        gap: 12px;
    }
    
    .byte-action-confirm-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .byte-action-confirm-title {
        font-size: 18px;
    }
    
    .byte-action-confirm-body {
        padding: 0 20px 20px 20px;
    }
    
    .byte-action-confirm-buttons {
        flex-direction: column;
    }
    
    .byte-action-confirm-btn {
        width: 100%;
        text-align: center;
        padding: 12px 24px;
    }
}














[id^="byteCarousel-"] .item img {
    width: 100%;
    aspect-ratio: 1/1;   /* portrait, Threads style */
    object-fit: cover;
    border-radius: 1.5rem;
    display: block;
}

[id^="byteCarousel-"] .owl-stage-outer {
    border-radius: 1.5rem;
}