body {
  @apply bg-black text-white;
}

.light body {
  @apply bg-[#fdfcfb] text-black;
}

:root {
  --bg-color: #000000;
  --sidebar-color: #050505;
  --border-color: #fff;
  --text-color: #000;
  --text-dim-color: #a8a8a8;
  --sm-gold:          #bfa16f;
  --sm-gold-light:    #e8c97e;
  --sm-gold-dark:     #8a724a;

  --sm-dialog-bg:     #ffffff;
  --sm-dialog-border: rgba(191,161,111,.18);
  --sm-dialog-shadow: 0 40px 100px rgba(0,0,0,.12);

  --sm-glow-bg:       radial-gradient(ellipse 50% 50% at 65% 35%, rgba(191,161,111,.07) 0%, transparent 70%);

  --sm-title-color:   #111111;
  --sm-subtitle:      rgba(80,70,60,.55);

  --sm-close-bg:      rgba(0,0,0,.05);
  --sm-close-border:  rgba(0,0,0,.09);
  --sm-close-color:   #999;
  --sm-close-hover:   rgba(0,0,0,.1);

  --sm-track-bg:      rgba(0,0,0,.07);
  --sm-track-fill:    rgba(191,161,111,.3);

  --sm-body-bg:       transparent;

  --sm-label-color:   rgba(191,161,111,.75);
  --sm-input-border:  rgba(191,161,111,.22);
  --sm-input-focus:   rgba(191,161,111,.65);
  --sm-input-color:   #111111;
  --sm-input-ph:      rgba(100,90,80,.35);

  --sm-dot-inactive:  rgba(191,161,111,.2);

  --sm-chip-bg:       rgba(191,161,111,.09);
  --sm-chip-border:   rgba(191,161,111,.22);
  --sm-chip-color:    #222222;
  --sm-chip-btn-bg:   rgba(0,0,0,.07);
  --sm-chip-btn-color:#777;

  --sm-dropdown-bg:   #ffffff;
  --sm-dropdown-border:rgba(0,0,0,.09);
  --sm-dropdown-shadow:0 20px 60px rgba(0,0,0,.12);
  --sm-row-divider:   rgba(0,0,0,.05);
  --sm-row-hover:     rgba(191,161,111,.06);
  --sm-row-name:      #111111;
  --sm-row-meta:      rgba(100,90,80,.5);

  --sm-card-bg:       rgba(191,161,111,.05);
  --sm-card-border:   rgba(191,161,111,.12);
  --sm-summary-divider:rgba(191,161,111,.1);
  --sm-summary-label: rgba(100,90,80,.5);

  --sm-btn-ghost-border: rgba(191,161,111,.18);
  --sm-btn-ghost-color:  #8a724a;
  --sm-btn-ghost-hover:  rgba(191,161,111,.07);

  --sm-success-h3:    #111111;
  --sm-success-sub:   rgba(80,70,60,.55);
  --sm-success-note:  rgba(100,90,80,.4);
  --sm-success-track: rgba(0,0,0,.07);

  --sm-error-h3:      #111111;
}

html.dark {
  --bg-color: #000;
  --sidebar-color: #f5f4f0;
  --border-color: #000;
  --text-color: #f5f5f5;
  --text-dim-color: #65676b;
  --sm-dialog-bg:     #0d0c0b;
  --sm-dialog-border: rgba(191,161,111,.12);
  --sm-dialog-shadow: 0 40px 100px rgba(0,0,0,.7);

  --sm-glow-bg:       radial-gradient(ellipse 50% 50% at 65% 35%, rgba(191,161,111,.12) 0%, transparent 70%);

  --sm-title-color:   #ffffff;
  --sm-subtitle:      rgba(150,140,130,.6);

  --sm-close-bg:      rgba(255,255,255,.05);
  --sm-close-border:  rgba(255,255,255,.08);
  --sm-close-color:   #666;
  --sm-close-hover:   rgba(255,255,255,.1);

  --sm-track-bg:      rgba(255,255,255,.04);
  --sm-track-fill:    rgba(191,161,111,.25);

  --sm-label-color:   rgba(191,161,111,.6);
  --sm-input-border:  rgba(191,161,111,.2);
  --sm-input-focus:   rgba(191,161,111,.7);
  --sm-input-color:   #ffffff;
  --sm-input-ph:      rgba(150,140,130,.5);

  --sm-dot-inactive:  rgba(191,161,111,.25);

  --sm-chip-bg:       rgba(191,161,111,.08);
  --sm-chip-border:   rgba(191,161,111,.2);
  --sm-chip-color:    #ffffff;
  --sm-chip-btn-bg:   rgba(255,255,255,.08);
  --sm-chip-btn-color:#666;

  --sm-dropdown-bg:   #111111;
  --sm-dropdown-border:rgba(255,255,255,.08);
  --sm-dropdown-shadow:0 20px 60px rgba(0,0,0,.5);
  --sm-row-divider:   rgba(255,255,255,.04);
  --sm-row-hover:     rgba(191,161,111,.06);
  --sm-row-name:      #ffffff;
  --sm-row-meta:      rgba(150,140,130,.5);

  --sm-card-bg:       rgba(191,161,111,.04);
  --sm-card-border:   rgba(191,161,111,.1);
  --sm-summary-divider:rgba(191,161,111,.08);
  --sm-summary-label: rgba(150,140,130,.5);

  --sm-btn-ghost-border: rgba(191,161,111,.15);
  --sm-btn-ghost-color:  #8a724a;
  --sm-btn-ghost-hover:  rgba(191,161,111,.06);

  --sm-success-h3:    #ffffff;
  --sm-success-sub:   rgba(150,140,130,.6);
  --sm-success-note:  rgba(150,140,130,.4);
  --sm-success-track: rgba(255,255,255,.06);

  --sm-error-h3:      #ffffff;
}

html.light .glass-card, 
html.light .post-header-glass,
html.light .glass-widget {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

html.light .text-theme-gold {
  color: #bfa16f !important;
}

html.light .uk-drop {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html.light .drop-item {
  color: #1a1a1a !important;
}

html.light .drop-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #bfa16f !important;
}
html.light .uk-drop .h-\[1px\] {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html.light .drop-item svg, 
html.light .drop-item i {
  color: #1a1a1a;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1e1b1b;
}
::-webkit-scrollbar-thumb {
  background: #383030;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #bfa16f;
}

.story-ring {
  position: relative;
  background: conic-gradient(
      from 180deg at 50% 50%, 
      #383030 0deg, 
      #bfa16f 45deg, 
      #f5f5f5 90deg, 
      #8c754b 150deg, 
      #383030 210deg, 
      #bfa16f 270deg, 
      #f5f5f5 315deg, 
      #383030 360deg
  );
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  pointer-events: none;
}

.story-ring.viewed {
  background: #383030;
  padding: 1px;
  box-shadow: none;
}

.story-ring.viewed::after {
  display: none;
}

.post-header-glass {
  background: rgb(0 0 0 / 3%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(0 0 0 / 5%) !important;
}

.dark .post-header-glass { 
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


.ring-premium {
  background: conic-gradient(from 180deg at 50% 50%, #383030 0deg, #bfa16f 45deg, #f5f5f5 90deg, #8c754b 150deg, #383030 210deg, #bfa16f 270deg, #f5f5f5 315deg, #383030 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ring-metal-hollow {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
      from 180deg at 50% 50%, 
      #383030 0deg, 
      #bfa16f 45deg, 
      #f5f5f5 90deg, 
      #8c754b 150deg, 
      #383030 210deg, 
      #bfa16f 270deg, 
      #f5f5f5 315deg, 
      #383030 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 65%, black 66%);
  mask: radial-gradient(circle, transparent 65%, black 66%);
}

.sidebar-minimized {
  width: 73px !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.sidebar-minimized .nav-text {
  opacity: 0;
  width: 0;
  pointer-events: none;
  display: none; 
}

.sidebar-minimized .logo-full {
  display: none;
  opacity: 0;
}

.sidebar-minimized .logo-favicon {
  display: block !important;
  opacity: 1 !important;
  margin: 0 auto; 
}


.sidebar-minimized nav a:not(.drop-item) {
  justify-content: center;
  gap: 0;
}

.search-panel-active, .notification-panel-active {
  left: 73px !important; 
  box-shadow: 20px 0 50px rgba(0,0,0,0.5);
}

.glass-widget {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
}

.drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
}

.drop-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #bfa16f; 
  text-decoration: none;
}

#main-sidebar {
  overflow: visible !important;
}

.sidebar-minimized .nav-text {
  display: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;  
  scrollbar-width: none !important;  
}

#thumbnailContainer {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; 
  overscroll-behavior-x: contain; 
}

.thumbnail-item img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.dark .dark\:empire-sepia, 
.dark .max-md\:dark\:empire-sepia {
  filter: invert(68%) sepia(14%) saturate(1324%) hue-rotate(349deg) brightness(91%) contrast(84%) !important;
}

.snap-y-mandatory {
  scroll-snap-type: y mandatory;
}
.snap-always {
  scroll-snap-stop: always;
}
.snap-center {
  scroll-snap-align: center;
}

.audio-wave span {
  animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 3px; }
  50% { height: 15px; }
}
.audio-wave span:nth-child(2) { animation-delay: 0.2s; }
.audio-wave span:nth-child(3) { animation-delay: 0.4s; }

.category-card:hover img { transform: scale(1.1); }

.mobile-glow-item {
  background: radial-gradient(circle at 50% 50%, rgba(191, 161, 111, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  border-top: 1px solid rgba(191, 161, 111, 0.1);
  border-bottom: 1px solid rgba(191, 161, 111, 0.1);
}

.turbo-progress-bar {
  height: 2px;
  background-color: #bfa16f !important;
  box-shadow: 0 0 10px rgba(191, 161, 111, 0.5);
}

@media (min-width: 768px) {
  .dark .max-md\:dark\:empire-sepia {
      filter: none !important;
  }
}


#content-area {
  animation: fadeIn 0.3s ease-in-out;
}

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


.uk-modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.4); 
}


article .post-file img{max-height:500px;max-width:100%;width:100%;object-fit:cover;}
article .post-image .image{width:100%;height:auto;}

.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: none !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    box-shadow: none !important;
    border-radius: 12px;
}
.mapboxgl-ctrl-geocoder--input {
    color: inherit !important;
    padding-left: 35px !important;
}
.mapboxgl-ctrl-geocoder--icon {
    fill: #bfa16f !important;
}
.mapboxgl-ctrl-geocoder--button {
    background: transparent !important;
}
.mapboxgl-ctrl-geocoder .suggestions {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mapboxgl-ctrl-geocoder .suggestions > li > a {
    color: white !important;
}
.mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
    background-color: rgba(191, 161, 111, 0.2) !important;
}


.custom-overlap-icons .how_many_reacts {
    display: none !important;
}


.custom-overlap-icons .how_reacted img, 
.custom-overlap-icons .inline_post_count_emoji img {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}

.dark .custom-overlap-icons .how_reacted img {
    border-color: #1a1a1a !important; 
}

.custom-overlap-icons .how_reacted {
    display: flex !important;
    margin: 0 !important;
}


.reaction-no-text .rea {
    font-size: 0 !important; 
    display: flex !important;
    align-items: center;
}


.reaction-no-text .rea img, 
.reaction-no-text .rea .inline_post_count_emoji {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}


.reaction-no-text .rea {
    gap: 0 !important;
}




.reactions-box .reaction-item {
    font-size: 0 !important;
    color: transparent !important;
    overflow: visible !important;
}


.reaction-icon-container {
    font-size: 24px !important; 
    color: initial !important;
}


.reaction-icon-container img {
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
}


.reactions-box .reaction-item * {
    margin: 0 !important;
    padding: 0 !important;
}

@keyframes save-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-save svg {
  animation: save-pulse 0.3s ease-in-out;
  color: currentColor;
}


.lightbox-backgrond, 
.lightbox-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}

.lightbox-backgrond {
    background-color: #000;
    z-index: 1000;
}

.lightbox-content {
  transition: all 0.4s;
}


.wo_imagecombo_lbox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: auto;
    background: #000; 
}


.wo_imagecombo_lbox .story-img {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-right: 400px; 
    width: calc(100% - 400px);
    overflow: hidden;
    transition: all 0.3s ease;
}


.wg_lbox_blur_img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    overflow: hidden;
    z-index: 0;
}

.wg_lbox_blur_img_innr {
    -moz-filter: blur(150px);
    -webkit-filter: blur(150px);
    filter: blur(150px);
    width: 100%;
    height: 100%;
}

.wg_lbox_blur_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.wg_lbox_img_innr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 1;
  padding: 0 50px; 
}

.wo_imagecombo_lbox .story-img video {
  max-width: 100%;
  max-height: 100vh;
  display: block;
  margin: auto;
  user-select: none;
  object-fit: contain;
  transition: transform 0.2s linear;
}


.wo_imagecombo_lbox .story-img img.double_zoom {
  transform: scale(2);
  cursor: grab;
}


.wg_lbox_toolbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 68px;
    background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    z-index: 1035;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    align-items: center;
}

.lbox-toolbar-mobile {
    position: relative !important;
    height: auto !important;
    min-height: 56px;
    background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%) !important;
    padding: 0 8px !important;
    flex-shrink: 0;
    z-index: 1035;
}

.wg_lbox_toolbar .btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    border: none;
    flex-shrink: 0;
}

.lbox-toolbar-mobile .btn {
    margin-left: 0;
    background: rgba(255,255,255,0.12);
    width: 36px;
    height: 36px;
}

.wg_lbox_toolbar .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}


.hide_lbox_info .wg_lbox_toolbar {
    width: 100%; 
}


.changer {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: white;
    z-index: 1034;
    transition: all 0.2s;
}

.changer:hover {
    background: rgba(255,255,255,0.3);
}

.previous-btn { left: 15px; }
.next-btn { right: 15px; }


.wo_imagecombo_lbox .comment-section {
    width: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
}

.wow_lightbox_right {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.comment-section .section-lbox {
    border-bottom: 1px solid #f1f1f1;
}


.lightbox-content .comment-section .comments-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.lightbox-post-footer textarea {
    resize: none;
    max-height: 80px;
    padding-right: 40px; 
}


.hide_lbox_info.wo_imagecombo_lbox .story-img {
    margin-right: 0;
    width: 100%;
}

.hide_lbox_info.wo_imagecombo_lbox .comment-section {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.wg_mobi_lbox_foot{display:none;position:absolute;left:0;right:0;bottom:0;width:100%;background:linear-gradient(transparent,rgb(0 0 0 / 0.5));z-index:9;padding:60px 15px 15px;color:rgb(255 255 255 / 90%);}
.wg_mobi_lbox_foot .wg_lbox_hdr h4 a{color:white;}
.wg_mobi_lbox_foot_com_count{margin:20px 15px 0;}


@media (max-width: 800px) {
  .wo_imagecombo_lbox {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
  }

  .wo_imagecombo_lbox .story-img {
    width: 100%;
    margin-right: 0;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    background: #000;
    overflow: visible;
  }

  .wg_lbox_img_innr {
    padding: 0;
    min-height: 0;
  }

  .wo_imagecombo_lbox .story-img video {
    max-height: 55dvh;
    width: 100%;
    object-fit: contain;
  }

  .wo_imagecombo_lbox .comment-section {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    position: static;
    top: auto;
    bottom: auto;
    border-left: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .wo_imagecombo_lbox .comment-section .wow_lightbox_right,
  .wo_imagecombo_lbox .comment-section .comment-inner-footer,
  .wo_imagecombo_lbox .comment-section .comment-inner-footer > .comment-section {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wo_imagecombo_lbox .comment-section .w-full.bg-white.h-full,
  .wo_imagecombo_lbox .comment-section .w-full.h-full {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .wo_imagecombo_lbox .comment-section .h-full.overflow-y-auto.flex-1 {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .changer {
    width: 35px;
    height: 35px;
  }

  .wg_mobi_lbox_foot {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px;
    background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
    color: #fff;
    z-index: 10;
  }
}


.dark .wo_imagecombo_lbox .comment-section {
    background-color: #0a0a0a;
    border-left-color: #1a1a1a;
}

.dark .lightbox-post-footer {
    background-color: #0a0a0a;
    border-top-color: #1a1a1a;
}

.dark .comment-section .p-5 {
    border-bottom-color: #1a1a1a;
}


.wo_imagecombo_lbox .comment-section > .active {
    
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    min-height: 72px;
}


.wo_imagecombo_lbox .comment-section .user-avatar, 
.wo_imagecombo_lbox .comment-section img.avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05); 
}


.wo_imagecombo_lbox .comment-section .user-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.wo_imagecombo_lbox .comment-section .user-name a {
    font-weight: 600;
    font-size: 14px;
    color: #262626; 
    text-decoration: none;
}

.wo_imagecombo_lbox .comment-section .user-name span,
.wo_imagecombo_lbox .comment-section .time-ago {
    font-size: 12px;
    color: #8e8e8e;
}


.wo_imagecombo_lbox .comment-section .post-opts {
    margin-left: auto; 
    display: flex;
    align-items: center;
}

.wo_imagecombo_lbox .comment-section .post-opts .btn {
    padding: 8px;
    color: #262626;
    background: transparent;
    border: none;
    cursor: pointer;
}


.dark .wo_imagecombo_lbox .comment-section > .active {
    background: #1e1e1e;
    border-bottom-color: #333;
}

.dark .wo_imagecombo_lbox .comment-section .user-name a,
.dark .wo_imagecombo_lbox .comment-section .post-opts .btn {
    color: #f5f5f5;
}

.emoji {width: 120px;height: 120px;background: #FFDA6A;border-radius: 50%;position: relative;transform: scale(0.325);top: -76%;right: 76%;}

.emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb {position: absolute;}
.emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after {position: absolute;content: '';}

.emoji__face {width: inherit;height: inherit;}

.emoji--like {background: #548DFF;}
.emoji--like .emoji__hand {left: 25px;bottom: 30px;width: 20px;height: 40px;background: #FFFFFF;border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;z-index: 0;-webkit-animation: hands-up 2s linear infinite;animation: hands-up 2s linear infinite;}
.emoji--like .emoji__hand:before {left: 25px;bottom: 5px;width: 40px;background: inherit;height: 10px;border-radius: 2px 10px 10px 2px;box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;}
.emoji--like .emoji__thumb {border-bottom: 20px solid #FFFFFF;border-left: 20px solid transparent;top: -25px;right: -25px;z-index: 2;-webkit-transform: rotate(5deg);transform: rotate(5deg);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;-webkit-animation: thumbs-up 2s linear infinite;animation: thumbs-up 2s linear infinite;}
.emoji--like .emoji__thumb:before {border-radius: 50% 50% 0 0;background: #FFFFFF;width: 10px;height: 12px;left: -10px;top: -8px;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%;box-shadow: -1px 4px 0 -1px #FFFFFF;}

.emoji--love {background: #F55064;}
.emoji--love .emoji__heart {left: calc(50% - 40px);top: calc(50% - 40px);width: 80px;height: 80px;-webkit-animation: heart-beat 1s linear infinite alternate;animation: heart-beat 1s linear infinite alternate;}
.emoji--love .emoji__heart:before, .emoji--love .emoji__heart:after {left: calc(50% - 20px);top: calc(50% - 32px);width: 40px;height: 64px;background: #FFFFFF;border-radius: 20px 20px 0 0;}
.emoji--love .emoji__heart:before {-webkit-transform: translate(20px) rotate(-45deg);transform: translate(20px) rotate(-45deg);-webkit-transform-origin: 0 100%;transform-origin: 0 100%;}
.emoji--love .emoji__heart:after {-webkit-transform: translate(-20px) rotate(45deg);transform: translate(-20px) rotate(45deg);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%;}

.emoji--haha .emoji__face {-webkit-animation: haha-face 2s linear infinite;animation: haha-face 2s linear infinite;}
.emoji--haha .emoji__eyes {width: 26px;height: 6px;border-radius: 2px;left: calc(50% - 13px);top: 35px;-webkit-transform: rotate(20deg);transform: rotate(20deg);background: transparent;box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000;}
.emoji--haha .emoji__eyes:after {left: 0;top: 0;width: 26px;height: 6px;border-radius: 2px;-webkit-transform: rotate(-40deg);transform: rotate(-40deg);background: transparent;box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000;}
.emoji--haha .emoji__mouth {width: 80px;height: 40px;left: calc(50% - 40px);top: 50%;background: #000000;border-radius: 0 0 40px 40px;overflow: hidden;z-index: 1;-webkit-animation: haha-mouth 2s linear infinite;animation: haha-mouth 2s linear infinite;}
.emoji--haha .emoji__tongue {width: 70px;height: 30px;background: #F55064;left: calc(50% - 35px);bottom: -10px;border-radius: 50%;}

.emoji--wow .emoji__face {-webkit-animation: wow-face 3s linear infinite;animation: wow-face 3s linear infinite;}
.emoji--wow .emoji__eyebrows {left: calc(50% - 3px);height: 6px;width: 6px;border-radius: 50%;background: transparent;box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000;-webkit-animation: wow-brow 3s linear infinite;animation: wow-brow 3s linear infinite;}
.emoji--wow .emoji__eyebrows:before, .emoji--wow .emoji__eyebrows:after {width: 24px;height: 20px;border: 6px solid #000000;box-sizing: border-box;border-radius: 50%;border-bottom-color: transparent;border-left-color: transparent;border-right-color: transparent;top: -3px;left: calc(50% - 12px);}
.emoji--wow .emoji__eyebrows:before {margin-left: -25px;}
.emoji--wow .emoji__eyebrows:after { margin-left: 25px;}
.emoji--wow .emoji__eyes { width: 16px;height: 24px;left: calc(50% - 8px);top: 35px;border-radius: 50%;background: transparent;box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;}
.emoji--wow .emoji__mouth {width: 30px;height: 45px;left: calc(50% - 15px);top: 50%;border-radius: 50%;background: #000000;-webkit-animation: wow-mouth 3s linear infinite;animation: wow-mouth 3s linear infinite;}

.emoji--sad .emoji__face {-webkit-animation: sad-face 2s ease-in infinite;animation: sad-face 2s ease-in infinite;}
.emoji--sad .emoji__eyebrows {left: calc(50% - 3px);top: 35px;height: 6px;width: 6px;border-radius: 50%;background: transparent;box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000, 40px 9px 0 0 #000000;}
.emoji--sad .emoji__eyebrows:before, .emoji--sad .emoji__eyebrows:after {width: 30px;height: 20px;border: 6px solid #000000;box-sizing: border-box;border-radius: 50%;border-bottom-color: transparent;border-left-color: transparent;border-right-color: transparent;top: 2px;left: calc(50% - 15px);}
.emoji--sad .emoji__eyebrows:before {margin-left: -30px;-webkit-transform: rotate(-30deg);transform: rotate(-30deg);}
.emoji--sad .emoji__eyebrows:after {margin-left: 30px;-webkit-transform: rotate(30deg);transform: rotate(30deg);}
.emoji--sad .emoji__eyes {width: 14px;height: 16px;left: calc(50% - 7px);top: 50px;border-radius: 50%;background: transparent;box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;}
.emoji--sad .emoji__eyes:after {background: #548DFF;width: 12px;height: 12px;margin-left: 6px;border-radius: 0 100% 40% 50% / 0 50% 40% 100%;-webkit-transform-origin: 0% 0%;transform-origin: 0% 0%;-webkit-animation: tear-drop 2s ease-in infinite;animation: tear-drop 2s ease-in infinite;}
.emoji--sad .emoji__mouth {width: 60px;height: 80px;left: calc(50% - 30px);top: 80px;box-sizing: border-box;border: 6px solid #000000;border-radius: 50%;border-bottom-color: transparent;border-left-color: transparent;border-right-color: transparent;background: transparent;-webkit-animation: sad-mouth 2s ease-in infinite;animation: sad-mouth 2s ease-in infinite;}
.emoji--sad .emoji__mouth:after {width: 6px;height: 6px;background: transparent;border-radius: 50%;top: 4px;left: calc(50% - 3px);box-shadow: -18px 0 0 0 #000000, 18px 0 0 0 #000000;}

.emoji--angry {background: linear-gradient(#D5234C -10%, #FFDA6A);background-size: 100%;-webkit-animation: angry-color 2s ease-in infinite;animation: angry-color 2s ease-in infinite;}
.emoji--angry .emoji__face {-webkit-animation: angry-face 2s ease-in infinite;animation: angry-face 2s ease-in infinite;}
.emoji--angry .emoji__eyebrows {left: calc(50% - 3px);top: 55px;height: 6px;width: 6px;border-radius: 50%;background: transparent;box-shadow: -44px 5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0 #000000;}
.emoji--angry .emoji__eyebrows:before, .emoji--angry .emoji__eyebrows:after {width: 50px;height: 20px;border: 6px solid #000000;box-sizing: border-box;border-radius: 50%;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;top: 0;left: calc(50% - 25px);}
.emoji--angry .emoji__eyebrows:before {margin-left: -25px;-webkit-transform: rotate(15deg);transform: rotate(15deg);}
.emoji--angry .emoji__eyebrows:after {margin-left: 25px;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
.emoji--angry .emoji__eyes {width: 12px;height: 12px;left: calc(50% - 6px);top: 70px;border-radius: 50%;background: transparent;box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;}
.emoji--angry .emoji__mouth {width: 36px;height: 18px;left: calc(50% - 18px);bottom: 15px;background: #000000;border-radius: 50%;-webkit-animation: angry-mouth 2s ease-in infinite;animation: angry-mouth 2s ease-in infinite;}

.uk-notification{position:fixed;top:10px;left:15px;z-index:1040;box-sizing:border-box;width:350px;}
.uk-notification-top-right,.uk-notification-bottom-right{left:auto;right:15px;}
.uk-notification-top-center,.uk-notification-bottom-center{left:50%;margin-left:-175px;}
.uk-notification-bottom-left,.uk-notification-bottom-right,.uk-notification-bottom-center{top:auto;bottom:15px;}
@media (max-width:639px){.uk-notification{left:15px;right:15px;width:auto;margin:0;}
}
.uk-notification-message { position: relative;padding: 15px;padding-right: 40px;background-color: #fff;color: #3a3939;font-size: 0.95rem;border-radius: 8px;line-height: 1.5;cursor: pointer;box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
* + .uk-notification-message{margin-top:10px;}
.uk-notification-close{display:none;position:absolute;top:20px;right:15px;}
.uk-notification-message:hover .uk-notification-close{display:block;}

.dark .uk-notification-message { background-color: #1f1f1f;color: #e5e5e5;box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); }

@-webkit-keyframes slideUp {
0%{opacity: 0;transform: translateY(30px);}
100%{opacity: 1;transform: translateY(0px);}
}
@keyframes slideUp {
0%{opacity: 0;transform: translateY(30px);}
100%{opacity: 1;transform: translateY(0px);}
}

@-webkit-keyframes heart-beat {
25% {-webkit-transform: scale(1.1);transform: scale(1.1);}
75% {-webkit-transform: scale(0.6);transform: scale(0.6);}
}
@keyframes heart-beat {
25% {-webkit-transform: scale(1.1);transform: scale(1.1);}
75% {-webkit-transform: scale(0.6);transform: scale(0.6);}
}

@-webkit-keyframes haha-face {
10%, 30%, 50% {-webkit-transform: translateY(25px);transform: translateY(25px);}
20%, 40% {-webkit-transform: translateY(15px);transform: translateY(15px);}
60%, 80% {-webkit-transform: translateY(0);transform: translateY(0);}
70%, 90% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
}
@keyframes haha-face {
10%, 30%, 50% {-webkit-transform: translateY(25px);transform: translateY(25px);}
20%, 40% {-webkit-transform: translateY(15px);transform: translateY(15px);}
60%, 80% {-webkit-transform: translateY(0);transform: translateY(0);}
70%, 90% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
}
@-webkit-keyframes haha-mouth {
10%, 30%, 50% {-webkit-transform: scale(0.6);transform: scale(0.6);top: 45%;}
20%, 40% {-webkit-transform: scale(0.8);transform: scale(0.8);top: 45%;}
60%, 80% {-webkit-transform: scale(1);transform: scale(1);top: 50%;}
70% {-webkit-transform: scale(1.2);transform: scale(1.2);top: 50%;}
90% {-webkit-transform: scale(1.1);transform: scale(1.1);top: 50%;}
}
@keyframes haha-mouth {
10%, 30%, 50% {-webkit-transform: scale(0.6);transform: scale(0.6);top: 45%;}
20%, 40% {-webkit-transform: scale(0.8);transform: scale(0.8);top: 45%;}
60%, 80% {-webkit-transform: scale(1);transform: scale(1);top: 50%;}
70% {-webkit-transform: scale(1.2);transform: scale(1.2);top: 50%;}
90% {-webkit-transform: scale(1.1);transform: scale(1.1);top: 50%;}
}

@-webkit-keyframes wow-face {
15%, 25% {-webkit-transform: rotate(20deg) translateX(-25px);transform: rotate(20deg) translateX(-25px);}
45%, 65% {-webkit-transform: rotate(-20deg) translateX(25px);transform: rotate(-20deg) translateX(25px);}
75%, 100% {-webkit-transform: rotate(0deg) translateX(0);transform: rotate(0deg) translateX(0);}
}
@keyframes wow-face {
15%, 25% {-webkit-transform: rotate(20deg) translateX(-25px);transform: rotate(20deg) translateX(-25px);}
45%, 65% {-webkit-transform: rotate(-20deg) translateX(25px);transform: rotate(-20deg) translateX(25px);}
75%, 100% {-webkit-transform: rotate(0deg) translateX(0);transform: rotate(0deg) translateX(0);}
}
@-webkit-keyframes wow-brow {
15%, 65% {top: 25px;}
75%, 100%, 0% {top: 15px;}
}
@keyframes wow-brow {
15%, 65% {top: 25px;}
75%, 100%, 0% {top: 15px;}
}
@-webkit-keyframes wow-mouth {
10%, 30% {width: 20px;height: 20px;left: calc(50% - 10px);}
50%, 70% {width: 30px;height: 40px;left: calc(50% - 15px);}
75%, 100% {height: 50px;}
}
@keyframes wow-mouth {
10%, 30% {width: 20px;height: 20px;left: calc(50% - 10px);}
50%, 70% {width: 30px;height: 40px;left: calc(50% - 15px);}
75%, 100% {height: 50px;}
}

@-webkit-keyframes sad-face {
25%, 35% {top: -15px;}
55%, 95% {top: 10px;}
100%, 0% {top: 0;}
}
@keyframes sad-face {
25%, 35% {top: -15px;}
55%, 95% {top: 10px;}
100%, 0% {top: 0;}
}
@-webkit-keyframes sad-mouth {
25%, 35% {-webkit-transform: scale(0.85);transform: scale(0.85);top: 70px;}
55%, 100%, 0% {-webkit-transform: scale(1);transform: scale(1);top: 80px;}
}
@keyframes sad-mouth {
25%, 35% {-webkit-transform: scale(0.85);transform: scale(0.85);top: 70px;}
55%, 100%, 0% {-webkit-transform: scale(1);transform: scale(1);top: 80px;}
}
@-webkit-keyframes tear-drop {
0%, 100% {display: block;left: 35px;top: 15px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
25% {display: block;left: 35px;-webkit-transform: rotate(45deg) scale(2);transform: rotate(45deg) scale(2);}
49.9% {display: block;left: 35px;top: 65px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
50% {display: block;left: -35px;top: 15px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
75% {display: block;left: -35px;-webkit-transform: rotate(45deg) scale(2);transform: rotate(45deg) scale(2);}
99.9% {display: block;left: -35px;top: 65px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
}
@keyframes tear-drop {
0%, 100% {display: block;left: 35px;top: 15px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
25% {display: block;left: 35px;-webkit-transform: rotate(45deg) scale(2);transform: rotate(45deg) scale(2);}
49.9% {display: block;left: 35px;top: 65px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
50% {display: block;left: -35px;top: 15px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
75% {display: block;left: -35px;-webkit-transform: rotate(45deg) scale(2);transform: rotate(45deg) scale(2);}
99.9% {display: block;left: -35px;top: 65px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);}
}

@-webkit-keyframes hands-up {
25% {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% {-webkit-transform: rotate(-15deg) translateY(-10px);transform: rotate(-15deg) translateY(-10px);}
75%, 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes hands-up {
25% {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% {-webkit-transform: rotate(-15deg) translateY(-10px);transform: rotate(-15deg) translateY(-10px);}
75%, 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@-webkit-keyframes thumbs-up {
25% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
50%, 100% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
}
@keyframes thumbs-up {
25% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
50%, 100% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
}

@-webkit-keyframes angry-color {
45%, 60% {background-size: 250%;}
85%, 100%, 0% {background-size: 100%;}
}
@keyframes angry-color {
45%, 60% {background-size: 250%;}
85%, 100%, 0% {background-size: 100%;}
}
@-webkit-keyframes angry-face {
35%, 60% {-webkit-transform: translateX(0) translateY(10px) scale(0.9);transform: translateX(0) translateY(10px) scale(0.9);}
40%, 50% {-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);transform: translateX(-5px) translateY(10px) scale(0.9);}
45%, 55% {-webkit-transform: translateX(5px) translateY(10px) scale(0.9);transform: translateX(5px) translateY(10px) scale(0.9);}
}
@keyframes angry-face {
35%, 60% {-webkit-transform: translateX(0) translateY(10px) scale(0.9);transform: translateX(0) translateY(10px) scale(0.9);}
40%, 50% {-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);transform: translateX(-5px) translateY(10px) scale(0.9);}
45%, 55% {-webkit-transform: translateX(5px) translateY(10px) scale(0.9);transform: translateX(5px) translateY(10px) scale(0.9);}
}
@-webkit-keyframes angry-mouth {
25%, 50% {height: 6px;bottom: 25px;}
}
@keyframes angry-mouth {
25%, 50% {height: 6px;bottom: 25px;}
}

em-emoji-picker {
    width: 100%;
}

@keyframes tutorial-in {
  0% { opacity: 0; transform: translateX(-50px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.animate-tutorial-in {
  animation: tutorial-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.cc-window {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(223, 223, 223, 0.05);
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 20px 50px rgba(165, 165, 165, 0.5);
  font-family: 'Inter', sans-serif;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dark .cc-window {
  background: rgba(10, 10, 10, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cc-message {
  color: #93939b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.6 !important;
}

.dark .cc-message {
  color: #a1a1aa !important;
}

.cc-link {
  color: #bfa16f !important;
  text-decoration: none !important;
  font-weight: 900;
  margin-left: 4px;
  transition: all 0.3s ease;
}

.cc-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(191, 161, 111, 0.4);
}

.cc-compliance {
  display: flex;
  width: 100%;
}

.cc-btn.cc-dismiss {
  background: #bfa16f !important;
  color: #000000 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 12px 0 !important;
  border-radius: 12px !important;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

.cc-btn.cc-dismiss:hover {
  background: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(191, 161, 111, 0.2);
}

@media (max-width: 768px) {
  .cc-window {
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    border-radius: 24px 24px 0 0 !important;
    margin: 0;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(161, 161, 170, 0.3);
  border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(161, 161, 170, 0.5);
}
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(161, 161, 170, 0.3) transparent;
}

.wg_mobi_lbox_foot{display:none;position:absolute;left:0;right:0;bottom:0;width:100%;background:linear-gradient(transparent,rgb(0 0 0 / 0.5));z-index:9;padding:60px 15px 15px;color:rgb(255 255 255 / 90%);}
.wg_mobi_lbox_foot .wg_lbox_hdr h4 a{color:white;}

.reactions-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
}

.reactions-box .reaction {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  list-style-type: none; 
}

.reactions-box .reaction img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

.reactions-box .reaction:hover {
  transform: scale(1.1) translateY(-10px);
  z-index: 50;
}

.uk-scrollspy-inview > .reaction {
  visibility: visible;
}

.story-reaction-wrapper > .story-footer-btn > .like-btn {
  width: 24px;
  height: 24px;
}

.message-media-container img, 
.message-media-container video {
  @apply w-full h-full object-cover aspect-auto;
  max-height: 380px;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

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

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: #94a3b8;
  border-radius: 50%;
  display: inline-block;
  animation: typingAnimation 1.4s infinite ease-in-out;
}

.dark .typing-dot {
  background-color: #71717a;
}

.post-media-container {
  width: 100%;
  max-height: 75vh;
  background-color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.post-media-container img, 
.post-media-container video,
.post-media-container .mejs-container {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

.comment-textarea {
  /* Garante que o padding seja calculado dentro da largura total */
  box-sizing: border-box !important;
  /* Esconde a scrollbar para não empurrar os ícones */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.comment-textarea::-webkit-scrollbar {
  display: none;
}

.comment-textarea {
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.dark .glass-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(15, 15, 15, 0.9) !important;
  }
}

.is-safari .backdrop-blur-2xl, 
.is-safari .backdrop-blur-xl, 
.is-safari .backdrop-blur-lg, 
.is-safari .backdrop-blur-md,
.is-safari .backdrop-blur {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(0, 0, 0, 0.15) !important; 
}

@keyframes typingAnimation {
  0%, 80%, 100% { 
    transform: scale(1);
    opacity: 0.4;
  } 
  40% { 
    transform: scale(1.2) translateY(-2px);
    opacity: 1;
    background-color: #bfa16f;
  }
}

body.is-loading { 
  overflow: hidden !important; 
  height: 100vh !important;
}

/* ============================================================
   Empire — Premium Setup Modal
   Add to your main stylesheet
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes empire-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes empire-gold-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.08); }
}
@keyframes empire-float {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%       { transform: translateY(-7px) rotate(6deg); }
}

/* ── Mobile sheet ───────────────────────────────────────────── */
.empire-psu-sheet {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  animation: empire-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.empire-psu-dark  { background: #0a0a0a; }
.empire-psu-light { background: #ffffff; }

/* top bar */
.empire-psu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.empire-psu-light .empire-psu-topbar { border-color: #f0ece4; }

.empire-psu-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.empire-psu-topbar-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.empire-psu-dark  .empire-psu-topbar-title { color: #fff; }
.empire-psu-light .empire-psu-topbar-title { color: #111; }

.empire-psu-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* body scroll area */
.empire-psu-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* icon ring */
.empire-psu-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2.5px solid #bfa16f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  background: rgba(191, 161, 111, .08);
  box-shadow: 0 0 40px rgba(191, 161, 111, .2);
}
.empire-psu-ring-pulse { animation: empire-gold-pulse 2.4s ease-in-out infinite; }

/* text */
.empire-psu-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.2;
}
.empire-psu-dark  .empire-psu-title { color: #fff; }
.empire-psu-light .empire-psu-title { color: #111; }

.empire-psu-desc {
  font-size: 14px;
  line-height: 1.7;
  max-width: 300px;
  margin: 0 0 10px;
}
.empire-psu-dark  .empire-psu-desc { color: #aaa; }
.empire-psu-light .empire-psu-desc { color: #666; }

.empire-psu-hint {
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
  margin: 0 0 36px;
  font-weight: 600;
}
.empire-psu-dark  .empire-psu-hint { color: rgba(191,161,111,.9); }
.empire-psu-light .empire-psu-hint { color: #8a724a; }

/* steps — mobile */
.empire-psu-steps {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  text-align: left;
}
.empire-psu-step {
  display: flex;
  align-items: center;
  gap: 14px;
}
.empire-psu-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #bfa16f, #8a724a);
  color: #000;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empire-psu-step-label {
  font-size: 13px;
  font-weight: 600;
}
.empire-psu-dark  .empire-psu-step-label { color: #ccc; }
.empire-psu-light .empire-psu-step-label { color: #444; }

/* footer CTA */
.empire-psu-footer {
  padding: 20px 24px 32px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.empire-psu-light .empire-psu-footer { border-color: #f0ece4; }

/* ── Shared CTA button ─────────────────────────────────────── */
.empire-psu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #bfa16f, #8a724a);
  color: #000;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(191, 161, 111, .35);
  transition: box-shadow .25s, opacity .2s;
  border: none;
  cursor: pointer;
}
.empire-psu-cta:hover { box-shadow: 0 12px 44px rgba(191, 161, 111, .5); opacity: .92; }

.empire-psu-later {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #888;
  background: rgba(255, 255, 255, .05);
  transition: background .2s;
}
.empire-psu-later:hover { background: rgba(255,255,255,.1); }
.empire-psu-light .empire-psu-later { background: #f5f1eb; }
.empire-psu-light .empire-psu-later:hover { background: #ede8e0; }

.empire-psu-dialog {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(191, 161, 111, .18);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(191, 161, 111, .08);
  padding: 0;
}

.empire-psu-arc {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    ellipse 55% 55% at 72% 28%,
    rgba(255, 220, 140, .28) 0%,
    rgba(191, 161, 111, .18) 22%,
    rgba(191, 161, 111, .06) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.empire-psu-content {
  position: relative;
  z-index: 1;
  padding: 48px 44px 40px;
}

/* desktop header */
.empire-psu-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.empire-psu-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #bfa16f;
  margin: 0 0 6px;
}
.empire-psu-headline {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* icon sizes */
.empire-psu-icon-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bfa16f, #8a724a);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(191, 161, 111, .45);
  flex-shrink: 0;
}
.empire-psu-icon-lg {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #bfa16f, #8a724a);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(191, 161, 111, .4), 0 0 0 1px rgba(191, 161, 111, .3);
}
.empire-psu-float { animation: empire-float 3s ease-in-out infinite; }

/* desktop body text */
.empire-psu-body-text {
  font-size: 15px;
  line-height: 1.75;
  color: #aaa;
  margin: 0 0 8px;
}
.empire-psu-body-hint {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(191, 161, 111, .85);
  font-weight: 600;
  margin: 0 0 28px;
}

/* steps — desktop rows */
.empire-psu-steps-desktop {
  max-width: 100%;
  gap: 10px;
  margin-bottom: 32px;
  text-align: left;
}
.empire-psu-step-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}
.empire-psu-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(191,161,111,.13), rgba(191,161,111,.06));
  border: 1px solid rgba(191, 161, 111, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfa16f;
  font-size: 14px;
}
.empire-psu-step-row-label {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  flex: 1;
}
.empire-psu-step-badge {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #bfa16f, #8a724a);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* desktop actions row */
.empire-psu-actions {
  display: flex;
  gap: 12px;
}
.empire-psu-actions .empire-psu-cta {
  flex: 1;
  width: auto;
  padding: 16px 24px;
  border-radius: 14px;
  font-size: 13px;
}
.empire-psu-actions .empire-psu-later {
  width: auto;
  margin-top: 0;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #777;
}
.empire-psu-actions .empire-psu-later:hover {
  background: rgba(255,255,255,.08);
  color: #aaa;
}

.story-share-overlay {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.see-post-modal-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 11;
}

.see-post-modal-container.active {
  opacity: 1;
  pointer-events: auto;
}

.see-post-popup-btn {
  background: #000000c9;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.see-post-modal-container.active .see-post-popup-btn {
  transform: scale(1);
}

.see-post-popup-btn:hover {
  background: #050505e3;
}

/* ── Keyframes ───────────────────────────────── */
@keyframes sm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes sm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sm-pop {
  0%   { transform: scale(.7);   opacity: 0; }
  65%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes sm-burst {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(2.6); opacity: 0;  }
}
@keyframes sm-checkmark {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0;  }
}
@keyframes sm-shake {
  0%,100% { transform: translateX(0);   }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px);  }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px);  }
}
@keyframes sm-progress {
  from { width: 0%;   }
  to   { width: 100%; }
}
@keyframes sm-particle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: var(--tx) var(--ty) scale(0); opacity: 0; }
}


/* ── Animation helpers ───────────────────────── */
.sm-rise  { animation: sm-rise  .38s cubic-bezier(.22,1,.36,1) both; }
.sm-fade  { animation: sm-fade  .3s  ease                      both; }
.sm-pop   { animation: sm-pop   .5s  cubic-bezier(.22,1,.36,1) both; }
.sm-shake { animation: sm-shake .45s ease                      both; }


/* ── Modal shell ─────────────────────────────── */
.sm-dialog {
  background: var(--sm-dialog-bg);
  border: 1px solid var(--sm-dialog-border);
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--sm-dialog-shadow);
  position: relative;
}

.sm-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--sm-glow-bg);
  pointer-events: none;
  z-index: 0;
}

.sm-inner { position: relative; z-index: 1; }


/* ── Header ──────────────────────────────────── */
.sm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
}

.sm-header-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sm-gold);
}

.sm-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--sm-title-color);
  margin: 0;
  line-height: 1;
}

.sm-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sm-steps {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sm-dot-inactive);
  transition: all .35s;
}

.sm-step-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--sm-gold);
}

.sm-close-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sm-close-bg);
  border: 1px solid var(--sm-close-border);
  color: var(--sm-close-color);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

.sm-close-btn:hover { background: var(--sm-close-hover); }


/* ── Progress track ──────────────────────────── */
.sm-track {
  height: 2px;
  background: var(--sm-track-bg);
  margin: 0 28px;
}

.sm-track-fill {
  height: 100%;
  background: var(--sm-track-fill);
  border-radius: 2px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}


/* ── Body ────────────────────────────────────── */
.sm-body {
  padding: 28px 28px 32px;
  min-height: 320px;
}

.sm-subtitle {
  font-size: 13px;
  color: var(--sm-subtitle);
  margin: 0 0 28px;
  line-height: 1.5;
}

.sm-subtitle-sm {
  font-size: 13px;
  color: var(--sm-subtitle);
  margin: 0 0 24px;
  line-height: 1.5;
}


/* ── Field ───────────────────────────────────── */
.sm-field       { margin-bottom: 24px; }
.sm-field-lg    { margin-bottom: 32px; }
.sm-field-inner { position: relative; }

.sm-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-label-color);
  display: block;
  margin-bottom: 10px;
}

.sm-prefix-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
}

.sm-prefix-at       { color: var(--sm-gold); }
.sm-prefix-currency { color: var(--sm-input-ph); }

.sm-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--sm-input-border);
  padding: 12px 0 12px 28px;
  color: var(--sm-input-color);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color .25s;
  font-family: inherit;
}

.sm-input:focus            { border-color: var(--sm-input-focus); }
.sm-input::placeholder     { color: var(--sm-input-ph); }
.sm-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

.sm-input-amount {
  font-size: 28px;
  font-weight: 900;
  padding-bottom: 8px;
}


/* ── User chip ───────────────────────────────── */
.sm-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sm-chip-bg);
  border: 1px solid var(--sm-chip-border);
  border-radius: 50px;
  padding: 6px 14px 6px 6px;
}

.sm-chip-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sm-chip-color);
}

.sm-chip-clear {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sm-chip-btn-bg);
  border: none;
  color: var(--sm-chip-btn-color);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ── Search dropdown ─────────────────────────── */
.sm-results-dropdown {
  position: absolute;
  z-index: 50;
  width: 100%;
  top: calc(100% + 8px);
  left: 0;
  background: var(--sm-dropdown-bg);
  border: 1px solid var(--sm-dropdown-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sm-dropdown-shadow);
  max-height: 220px;
  overflow-y: auto;
}

.sm-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--sm-row-divider);
  transition: background .15s;
}

.sm-result-row:last-child { border-bottom: none; }
.sm-result-row:hover      { background: var(--sm-row-hover); }

.sm-result-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sm-row-name);
}

.sm-result-meta {
  font-size: 11px;
  color: var(--sm-row-meta);
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* ── Summary card ────────────────────────────── */
.sm-summary-card {
  background: var(--sm-card-bg);
  border: 1px solid var(--sm-card-border);
  border-radius: 18px;
  padding: 20px 20px 8px;
  margin-bottom: 28px;
}

.sm-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--sm-summary-divider);
}

.sm-summary-row:last-child { border-bottom: none; }

.sm-summary-label {
  font-size: 12px;
  color: var(--sm-summary-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.sm-summary-amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--sm-gold);
}

.sm-summary-free {
  font-size: 14px;
  font-weight: 700;
  color: rgba(150,200,130,.8);
}

.sm-summary-chip {
  padding: 4px 12px 4px 4px;
}


/* ── Buttons ─────────────────────────────────── */
.sm-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-btn-gold {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--sm-gold), var(--sm-gold-dark));
  color: #000;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(191,161,111,.3);
  transition: box-shadow .25s, opacity .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sm-btn-gold:hover:not(:disabled) {
  box-shadow: 0 12px 40px rgba(191,161,111,.45);
  transform: translateY(-1px);
}

.sm-btn-gold:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.sm-btn-ghost {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--sm-btn-ghost-border);
  color: var(--sm-btn-ghost-color);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 16px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.sm-btn-ghost:hover {
  background: var(--sm-btn-ghost-hover);
  border-color: rgba(191,161,111,.3);
}


/* ── Success state ───────────────────────────── */
.sm-success-wrap {
  text-align: center;
  padding: 16px 0 8px;
}

.sm-success-icon-wrap {
  position: relative;
  width: 100px; height: 100px;
  margin: 0 auto 28px;
}

.sm-burst-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(191,161,111,.6);
  animation: sm-burst .6s ease-out forwards;
}

.sm-success-circle {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(191,161,111,.15), rgba(191,161,111,.05));
  border: 2px solid rgba(191,161,111,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sm-check path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: sm-checkmark .5s .2s cubic-bezier(.22,1,.36,1) forwards;
}

.sm-success-h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--sm-success-h3);
  margin: 0 0 8px;
}

.sm-success-sub {
  font-size: 14px;
  color: var(--sm-success-sub);
  margin: 0 0 6px;
  line-height: 1.6;
}

.sm-success-note {
  font-size: 12px;
  color: var(--sm-success-note);
  margin: 0 0 32px;
}

.sm-progress-track {
  height: 3px;
  background: var(--sm-success-track);
  border-radius: 2px;
  margin-bottom: 28px;
  overflow: hidden;
}

.sm-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-light), var(--sm-gold));
  background-size: 200% 100%;
  animation: sm-progress 4s linear forwards;
  border-radius: 2px;
}

.sm-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sm-gold);
  animation: sm-particle .8s ease-out forwards;
}

.sm-error-wrap {
  text-align: center;
  padding: 16px 0 8px;
}

.sm-error-circle {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(220,60,60,.12), rgba(220,60,60,.05));
  border: 2px solid rgba(220,60,60,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sm-error-h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--sm-error-h3);
  margin: 0 0 8px;
}

.sm-error-msg {
  font-size: 14px;
  color: rgba(180,100,100,.85);
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 280px;
  display: inline-block;
}

.sl-card { transition: box-shadow .2s; }
.sl-card:focus-within { box-shadow: 0 0 0 2px var(--brand-glow), 0 4px 24px var(--brand-glow); }
.sl-card:focus-within .sl-badge { background: var(--brand) !important; }
.sl-card:focus-within .sl-badge svg { color: #fff !important; fill: #fff !important; }

#al-root, #al-root * { box-sizing: border-box; }

#al-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

#al-left {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: #000;
    padding: 48px 56px;
    position: relative;
}

#al-right {
    flex: 0 0 440px;
    width: 440px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-left: 1px solid rgba(0,0,0,.07);
    position: relative;
    transition: background .3s, border-color .3s;
}
#al-root[data-theme="dark"]  #al-right { background: #0c0b0a; border-left-color: rgba(255,255,255,.06); }
#al-root[data-theme="light"] #al-right { background: #ffffff; border-left-color: rgba(0,0,0,.07); }

#al-right::-webkit-scrollbar { display: none; }
#al-right { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 1023px) {
    #al-root  { flex-direction: column; }
    #al-left  { display: none; }
    #al-right { flex: 1 1 auto; width: 100%; border-left: none; }
}

@keyframes al-fa      { 0%,100%{transform:translateY(0) rotate(-2deg)}  50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes al-fb      { 0%,100%{transform:translateY(0) rotate(3deg)}   50%{transform:translateY(-7px) rotate(-1deg)} }
@keyframes al-fc      { 0%,100%{transform:translateY(0) rotate(-1deg)}  50%{transform:translateY(-11px) rotate(2deg)} }
@keyframes al-pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(191,161,111,0)} 50%{box-shadow:0 0 40px 10px rgba(191,161,111,.14)} }
@keyframes al-orbit   { from{transform:rotate(0deg) translateX(110px) rotate(0deg)} to{transform:rotate(360deg) translateX(110px) rotate(-360deg)} }
@keyframes al-orbit2  { from{transform:rotate(220deg) translateX(85px) rotate(-220deg)} to{transform:rotate(580deg) translateX(85px) rotate(-580deg)} }
@keyframes al-in      { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes al-shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes al-blink   { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes spin       { to{transform:rotate(360deg)} }

.al-fa    { animation: al-fa 5s ease-in-out infinite; }
.al-fb    { animation: al-fb 6.5s ease-in-out infinite; }
.al-fc    { animation: al-fc 4.2s ease-in-out infinite; }
.al-pulse { animation: al-pulse-glow 3s ease-in-out infinite; }
.al-blink { animation: al-blink 1.4s ease-in-out infinite; }

.al-in1 { animation: al-in .45s .00s cubic-bezier(.22,1,.36,1) both; }
.al-in2 { animation: al-in .45s .08s cubic-bezier(.22,1,.36,1) both; }
.al-in3 { animation: al-in .45s .16s cubic-bezier(.22,1,.36,1) both; }
.al-in4 { animation: al-in .45s .24s cubic-bezier(.22,1,.36,1) both; }
.al-in5 { animation: al-in .45s .32s cubic-bezier(.22,1,.36,1) both; }

.al-shimmer {
    background: linear-gradient(90deg,#bfa16f 0%,#e8c97e 40%,#bfa16f 65%,#8a724a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: al-shimmer 4s linear infinite;
}
.al-glass {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.al-orbit-dot  { position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#bfa16f; animation:al-orbit 8s linear infinite; }
.al-orbit-dot2 { position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:rgba(191,161,111,.45); animation:al-orbit2 13s linear infinite; }

#al-root[data-theme="dark"]  .al-t-main { color: #fff; }
#al-root[data-theme="light"] .al-t-main { color: #111; }
#al-root[data-theme="dark"]  .al-t-sub  { color: rgba(255,255,255,.38); }
#al-root[data-theme="light"] .al-t-sub  { color: rgba(0,0,0,.38); }

#al-root[data-theme="dark"]  .al-card { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.07); }
#al-root[data-theme="light"] .al-card { background:rgba(0,0,0,.025);      border-color:rgba(0,0,0,.07); }
.al-card { border:1px solid; border-radius:16px; padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .2s; }
.al-card:hover { border-color:rgba(191,161,111,.45) !important; background:rgba(191,161,111,.04) !important; }

.al-inp {
    width: 100%; padding: 13px 16px; border-radius: 12px; font-size: 13px;
    outline: none; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
#al-root[data-theme="dark"]  .al-inp { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#fff; }
#al-root[data-theme="light"] .al-inp { background:rgba(0,0,0,.03);       border:1px solid rgba(0,0,0,.1);       color:#111; }
#al-root[data-theme="dark"]  .al-inp::placeholder { color:rgba(255,255,255,.28); }
#al-root[data-theme="light"] .al-inp::placeholder { color:rgba(0,0,0,.3); }
.al-inp:focus  { border-color:rgba(191,161,111,.6) !important; box-shadow:0 0 0 3px rgba(191,161,111,.08); }
.al-inp.al-sel { -webkit-appearance:none; appearance:none; }

#al-root[data-theme="dark"]  .al-divider { border-color:rgba(255,255,255,.07); }
#al-root[data-theme="light"] .al-divider { border-color:rgba(0,0,0,.07); }

#al-root[data-theme="dark"]  .al-back { border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.5); }
#al-root[data-theme="light"] .al-back { border-color:rgba(0,0,0,.09);       color:rgba(0,0,0,.45); }
.al-back:hover { border-color:rgba(191,161,111,.3) !important; }

#al-root[data-theme="dark"]  .al-data-box { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.06); }
#al-root[data-theme="light"] .al-data-box { background:rgba(0,0,0,.025);      border-color:rgba(0,0,0,.06); }
#al-root[data-theme="dark"]  .al-data-row { border-color:rgba(255,255,255,.04); }
#al-root[data-theme="light"] .al-data-row { border-color:rgba(0,0,0,.04); }

#al-root[data-theme="dark"]  .al-timer-wrap { background:rgba(191,161,111,.06); border-color:rgba(191,161,111,.2); }
#al-root[data-theme="light"] .al-timer-wrap { background:rgba(191,161,111,.07); border-color:rgba(191,161,111,.2); }

#al-root[data-theme="dark"]  .al-err-box { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
#al-root[data-theme="light"] .al-err-box { background:rgba(0,0,0,.03);       border-color:rgba(0,0,0,.07); }

.al-glow        { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 65% 55% at 28% 52%,rgba(191,161,111,.10) 0%,transparent 68%); }
.al-logo-row    { position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.al-logo-icon   { width:30px; height:30px; object-fit:contain; }
.al-logo-name   { color:#fff; font-weight:900; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.65; }
.al-hero        { position:relative; z-index:2; }
.al-session-tag { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#bfa16f; }
.al-session-row { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.al-blink-dot   { width:6px; height:6px; border-radius:50%; background:#bfa16f; display:inline-block; }
.al-h1          { font-family:'Cinzel',serif; color:#fff; line-height:1.05; letter-spacing:.03em; margin-bottom:18px; font-size:clamp(2.6rem,3.8vw,4.4rem); }
.al-h1-italic   { font-style:italic; }
.al-tagline     { color:rgba(255,255,255,.4); font-size:13px; line-height:1.7; max-width:300px; margin-bottom:32px; }
.al-tags        { display:flex; flex-wrap:wrap; gap:8px; }
.al-tag         { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; font-size:10px; font-weight:700; color:rgba(255,255,255,.75); }
.al-tag svg     { color:#bfa16f; flex-shrink:0; }
.al-tag-7s      { animation-duration:7s; }
.al-tag-8s      { animation-duration:8s; }
.al-tag-9s      { animation-duration:9s; }

.al-orbit-wrap       { position:absolute; bottom:48px; right:56px; width:220px; height:220px; pointer-events:none; }
.al-orbit-ring       { position:absolute; border-radius:50%; border:1px solid; }
.al-orbit-ring-1     { inset:0;    border-color:rgba(191,161,111,.10); }
.al-orbit-ring-2     { inset:28px; border-color:rgba(191,161,111,.14); }
.al-orbit-ring-3     { inset:56px; border-color:rgba(191,161,111,.18); }
.al-orbit-center     { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.al-orbit-node       { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(191,161,111,.22),rgba(191,161,111,.06)); border:1px solid rgba(191,161,111,.32); }
.al-orbit-node img   { width:26px; height:26px; object-fit:contain; }
.al-alias-pill       { position:absolute; padding:3px 8px; border-radius:10px; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.al-alias-pill-a     { top:0; left:50%; transform:translateX(-50%) translateY(-50%); color:#bfa16f; animation-duration:5s; }
.al-alias-pill-b     { bottom:10px; left:-8px; color:rgba(255,255,255,.5); animation-duration:6s; }
.al-alias-pill-c     { bottom:24px; right:-8px; color:rgba(255,255,255,.5); animation-duration:7s; }

.al-uiid-stamp      { position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.al-uiid-logo       { height:18px; object-fit:contain; opacity:.22; filter:brightness(0) invert(1); }
.al-uiid-text       { font-size:9px; color:rgba(255,255,255,.28); text-transform:uppercase; letter-spacing:.22em; font-weight:700; }

.al-theme-btn       { position:absolute; top:20px; right:20px; z-index:10; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(127,127,127,.1); transition:transform .2s; }
.al-theme-btn:hover { transform:scale(1.12); }
.al-theme-icon      { width:16px; height:16px; color:#bfa16f; fill:currentColor; }

.al-right-body      { flex:1; display:flex; flex-direction:column; justify-content:center; padding:56px 44px; }
.al-right-inner     { width:100%; max-width:320px; margin:0 auto; }

.al-mobile-logo     { display:none; align-items:center; gap:8px; margin-bottom:32px; }
.al-mobile-logo img { width:28px; height:28px; object-fit:contain; }
.al-mobile-logo span{ font-weight:900; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
@media (max-width:1023px) { .al-mobile-logo { display:flex; } }

.al-header          { margin-bottom:24px; }
.al-header-eyebrow  { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.2em; color:#bfa16f; font-style:italic; margin-bottom:4px; }
.al-header-h2       { font-size:22px; font-weight:900; line-height:1.2; margin:0 0 4px; }
.al-header-sub      { font-size:12px; margin:0; }

.al-timer-wrap      { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; border:1px solid; margin-bottom:18px; }
.al-timer-ring      { position:relative; width:36px; height:36px; flex-shrink:0; }
.al-timer-svg       { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.al-timer-label     { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:900; color:#bfa16f; font-variant-numeric:tabular-nums; }
.al-timer-active    { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:#bfa16f; margin:0 0 2px; }
.al-timer-sub       { font-size:11px; margin:0; }

.al-list-scroll     { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; margin-bottom:16px; }
.al-card-avatar     { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#bfa16f,#8a724a); color:#000; font-weight:900; font-size:12px; user-select:none; }
.al-card-info       { flex:1; min-width:0; }
.al-card-name       { font-size:13px; font-weight:700; margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-card-id         { font-size:10px; color:#9a8a7a; text-transform:uppercase; letter-spacing:.06em; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-card-arrow      { color:#bfa16f; opacity:.6; flex-shrink:0; }

.al-or-row          { display:flex; align-items:center; margin-bottom:14px; }
.al-or-line         { flex:1; border:none; border-top:1px solid; }
.al-or-text         { margin:0 14px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; }

.al-empty           { text-align:center; padding:32px 0 20px; }
.al-empty-title     { font-size:14px; font-weight:700; margin:0 0 4px; }
.al-empty-sub       { font-size:12px; margin:0; }

.al-btn-create      { width:100%; padding:14px; border-radius:16px; border:1.5px dashed rgba(191,161,111,.35); background:transparent; color:#bfa16f; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.15em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; font-family:inherit; }
.al-btn-create:hover{ background:rgba(191,161,111,.05); border-color:rgba(191,161,111,.6); }

.al-btn-gold        { width:100%; background:#bfa16f; color:#000; font-weight:900; padding:15px; border-radius:16px; border:none; font-size:11px; text-transform:uppercase; letter-spacing:.2em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .18s; box-shadow:0 8px 24px rgba(191,161,111,.2); font-family:inherit; }
.al-btn-gold:hover:not(:disabled) { background:#ceaf7b; }
.al-btn-gold:disabled { opacity:.4; cursor:not-allowed; }
.al-btn-gold span   { display:flex; align-items:center; gap:7px; }

.al-btn-back        { width:100%; padding:13px; border-radius:16px; border:1px solid; background:transparent; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; cursor:pointer; transition:all .2s; font-family:inherit; }

.al-actions         { display:flex; flex-direction:column; gap:9px; }

.al-detail-avatar-wrap   { display:flex; justify-content:center; margin-bottom:14px; }
.al-detail-avatar        { width:56px; height:56px; border-radius:14px; object-fit:cover; border:2px solid rgba(191,161,111,.25); }
.al-detail-header        { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.al-detail-initial       { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#bfa16f,#8a724a); color:#000; font-weight:900; font-size:12px; }
.al-detail-name          { font-size:13px; font-weight:900; margin:0 0 2px; }
.al-detail-id            { font-size:10px; color:#9a8a7a; text-transform:uppercase; letter-spacing:.06em; margin:0; }
.al-detail-scopes        { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.al-scope-badge          { padding:4px 10px; border-radius:20px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.al-data-box             { border-radius:14px; overflow:hidden; border:1px solid; margin-bottom:14px; }
.al-data-row             { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 14px; border-bottom:1px solid; }
.al-data-row:last-child  { border-bottom:none; }
.al-data-key             { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#9a8a7a; flex-shrink:0; padding-top:1px; }
.al-data-val             { font-size:12px; font-weight:500; text-align:right; word-break:break-all; }

.al-form-fields     { display:flex; flex-direction:column; gap:11px; margin-bottom:16px; }
.al-form-grid       { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.al-label           { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:#bfa16f; font-weight:900; font-style:italic; margin-bottom:6px; }
.al-label-req       { color:#f87171; }
.al-err-inline      { margin-bottom:14px; padding:11px 14px; border-radius:12px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#ef4444; font-size:12px; }

.al-loading-view    { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 0; gap:18px; }
.al-spinner-wrap    { width:44px; height:44px; }
.al-spinner-svg     { width:100%; height:100%; animation:spin 1s linear infinite; }
.al-loading-label   { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.2em; color:#9a8a7a; }

.al-error-view      { text-align:center; padding:32px 0; }
.al-error-icon-wrap { width:48px; height:48px; border-radius:14px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.al-error-icon      { color:#ef4444; }
.al-error-title     { font-size:14px; font-weight:900; margin:0 0 4px; }
.al-error-msg       { font-size:12px; margin:0 0 20px; }
.al-btn-back-err    { padding:11px 22px; border-radius:12px; border:1px solid; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; cursor:pointer; transition:all .2s; font-family:inherit; }

.al-footer          { padding:20px 0 28px; display:flex; justify-content:center; gap:24px; flex-shrink:0; }
.al-footer a        { font-size:10px; color:#9a8a7a; text-transform:uppercase; letter-spacing:.16em; text-decoration:none; transition:color .2s; }
.al-footer a:hover  { color:#bfa16f; }

.bsheet-backdrop {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark .bsheet-backdrop {
  background: rgba(0,0,0,0.5);
}

.bsheet-menu {
  background: rgba(248,246,242,0.88);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 1px solid rgba(191,161,111,0.22);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.10), inset 0 1px 0 rgba(191,161,111,0.18);
}
.dark .bsheet-menu {
  background: rgba(10,10,10,0.75);
  border-top-color: rgba(191,161,111,0.18);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(191,161,111,0.12);
}

.bsheet-notif {
  background: rgba(248,246,242,0.92);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 1px solid rgba(191,161,111,0.20);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.08), inset 0 1px 0 rgba(191,161,111,0.14);
}
.dark .bsheet-notif {
  background: rgba(10,10,10,0.82);
  border-top-color: rgba(191,161,111,0.15);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(191,161,111,0.10);
}

.bsheet-handle {
  background: rgba(0,0,0,0.15);
}
.dark .bsheet-handle {
  background: rgba(255,255,255,0.18);
}

.bsheet-border {
  border-color: rgba(0,0,0,0.07);
}
.dark .bsheet-border {
  border-color: rgba(255,255,255,0.05);
}
.bsheet-title {
  color: #111;
}
.dark .bsheet-title {
  color: #fff;
}
.bsheet-close-btn {
  background: rgba(0,0,0,0.06);
  color: #666;
}
.bsheet-close-btn:hover {
  color: #111;
}
.dark .bsheet-close-btn {
  background: rgba(255,255,255,0.06);
  color: #888;
}
.dark .bsheet-close-btn:hover {
  color: #fff;
}

.bsheet-spinner {
  border-color: rgba(0,0,0,0.08);
  border-top-color: #bfa16f;
}
.dark .bsheet-spinner {
  border-color: rgba(255,255,255,0.10);
  border-top-color: #bfa16f;
}

/* ── Lightbox: responsive visibility ──────────────────────────────────── */
.lbox-toolbar-desktop { display: none !important; }
.lbox-creator-desktop { display: none !important; }
@media (min-width: 768px) {
    .lbox-toolbar-desktop { display: flex !important; }
    .lbox-toolbar-mobile  { display: none  !important; }
    .lbox-creator-desktop { display: flex  !important; }
}

/* ── Draggable image container ────────────────────────────────────────── */
.dragable {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

/* ── Comments list in lightbox ────────────────────────────────────────── */
.comments-list-lightbox { font-size: 0.875rem; }

/* ── Action buttons ───────────────────────────────────────────────────── */
.btn-toggle-lbox-info { cursor: pointer; }
.button-post          { cursor: pointer; line-height: 1; }

/* ── Image blur (locked content) ─────────────────────────────────────── */
.image_blur          { filter: blur(20px); transition: filter 0.3s; }

/* ── Empty state animation ────────────────────────────────────────────── */
.empty_state { animation: fadeInUp 0.4s ease both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Emoji mart picker ────────────────────────────────────────────────── */
.emoji-mart-wrapper                 { width: 100%; }
.emoji-mart-wrapper .emoji-mart     { width: 100% !important; border: none !important; }

/* ── Ajax time label ──────────────────────────────────────────────────── */
.ajax-time { font-size: 0.75rem; }

/* ═══════════════════════════════════════════════════════
   Hashtag Page — hashtag.css
   Light / dark mode completo. Sem estilos inline no HTML.
   ═══════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────── */
@keyframes hashShimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
@keyframes hashFloat {
    0%,100% { transform: translateY(0px)  rotate(-2deg); }
    50%     { transform: translateY(-8px) rotate( 2deg); }
}
@keyframes hashOrb {
    0%,100% { transform: scale(1)    translate(0,0); }
    33%     { transform: scale(1.08) translate(12px,-8px); }
    66%     { transform: scale(0.95) translate(-8px,6px); }
}


/* ══════════════════════
   HERO
══════════════════════ */
.hash-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 230px;
}

/* — Cores do hero por modo — */
.hash-hero {
    /* dark (padrão, pois o tema aplica .dark na raiz) */
    background: linear-gradient(135deg, #0a0a0a 0%, #111008 50%, #0a0a0a 100%);
}
:root:not(.dark) .hash-hero {
    background: linear-gradient(135deg, #f5f0e8 0%, #ede4d0 60%, #f0e9d8 100%);
}


/* ── Orbs ── */
.hash-orb-1,
.hash-orb-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #bfa16f 0%, transparent 70%);
}
.hash-orb-1 {
    top: -5rem; left: -5rem;
    width: 18rem; height: 18rem;
    filter: blur(60px);
    animation: hashOrb 20s ease-in-out infinite;
}
.hash-orb-2 {
    bottom: -5rem; right: -5rem;
    width: 24rem; height: 24rem;
    filter: blur(80px);
    animation: hashOrb 28s ease-in-out infinite reverse;
}

/* dark */
.hash-hero .hash-orb-1       { opacity: .20; }
.hash-hero .hash-orb-2       { opacity: .10; }
/* light */
:root:not(.dark) .hash-hero .hash-orb-1 { opacity: .28; }
:root:not(.dark) .hash-hero .hash-orb-2 { opacity: .16; }


/* ── Shimmer sweep ── */
.hash-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 600px 100%;
    animation: hashShimmer 10s infinite linear;
}
.hash-hero .hash-shimmer {
    background-image: linear-gradient(90deg,
        rgba(191,161,111,0)    0%,
        rgba(191,161,111,.10) 50%,
        rgba(191,161,111,0)  100%);
}
:root:not(.dark) .hash-hero .hash-shimmer {
    background-image: linear-gradient(90deg,
        rgba(191,161,111,0)    0%,
        rgba(191,161,111,.22) 50%,
        rgba(191,161,111,0)  100%);
}


/* ── # decorativo ── */
.hash-deco {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    font-size: 9rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Cinzel', serif;
    animation: hashFloat 14s ease-in-out infinite;
}
.hash-hero .hash-deco                   { color: rgba(191,161,111,.06); }
:root:not(.dark) .hash-hero .hash-deco  { color: rgba(191,161,111,.14); }


/* ── Container interno ── */
.hash-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 630px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ══════════════════════
   BADGE TRENDING
══════════════════════ */
.hash-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #bfa16f;
    background: rgba(191,161,111,.12);
    border: 1px solid rgba(191,161,111,.30);
}


/* ══════════════════════
   TÍTULO
══════════════════════ */
.hash-symbol {
    font-weight: 900;
    line-height: 1;
    font-family: 'Cinzel', serif;
}
.hash-hero .hash-symbol                  { color: #ffffff; }
:root:not(.dark) .hash-hero .hash-symbol { color: #5a3e1b; }

.hash-title {
    font-weight: 900;
    line-height: 1;
    font-family: 'Cinzel', serif;
    color: #bfa16f;
}
.hash-hero .hash-title                   { text-shadow: 0 0 40px rgba(191,161,111,.40); }
:root:not(.dark) .hash-hero .hash-title  { text-shadow: 0 0 24px rgba(191,161,111,.28); }


/* ══════════════════════
   STATS
══════════════════════ */
.hash-stat-text {
    font-size: .75rem;
    font-weight: 600;
}
.hash-hero .hash-stat-text                   { color: rgba(255,255,255,.60); }
:root:not(.dark) .hash-hero .hash-stat-text  { color: rgba(80,50,10,.65); }

.hash-stat-strong { font-weight: 700; }
.hash-hero .hash-stat-strong                   { color: #ffffff; }
:root:not(.dark) .hash-hero .hash-stat-strong  { color: #3a2208; }

.hash-stat-sep {
    width: 1px;
    height: .75rem;
}
.hash-hero .hash-stat-sep                   { background: rgba(255,255,255,.10); }
:root:not(.dark) .hash-hero .hash-stat-sep  { background: rgba(80,50,10,.15); }


/* ══════════════════════
   SOCIAL PROOF
══════════════════════ */
.hash-proof-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.hash-proof-text {
    font-size: .75rem;
    line-height: 1.45;
    max-width: 260px;
    margin: 0;
}
.hash-hero .hash-proof-text                   { color: rgba(255,255,255,.50); }
:root:not(.dark) .hash-hero .hash-proof-text  { color: rgba(80,50,10,.65); }

.hash-proof-strong { font-weight: 700; }
.hash-hero .hash-proof-strong                   { color: rgba(255,255,255,.85); }
:root:not(.dark) .hash-hero .hash-proof-strong  { color: #3a2208; }

.hash-hero .hash-proof-muted                   { color: rgba(255,255,255,.40); }
:root:not(.dark) .hash-hero .hash-proof-muted  { color: rgba(80,50,10,.50); }


/* ── Avatares empilhados ── */
.hash-stack {
    display: flex;
    align-items: center;
}
.hash-stack img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: -9px;
    position: relative;
    transition: transform .2s;
}
.hash-stack img:first-child { margin-left: 0; }
.hash-stack img:hover { transform: translateY(-3px) scale(1.12); z-index: 10; }

.hash-hero .hash-stack img {
    border: 2px solid rgba(191,161,111,.45);
    box-shadow: 0 0 0 1px rgba(0,0,0,.50);
}
:root:not(.dark) .hash-hero .hash-stack img {
    border: 2px solid rgba(191,161,111,.70);
    box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}


/* ══════════════════════
   BOTÕES
══════════════════════ */
.hash-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    font-weight: 900;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #000;
    background: #bfa16f;
    box-shadow: 0 4px 20px rgba(191,161,111,.35);
    border: none;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.hash-btn-primary:hover  { opacity: .88; }
.hash-btn-primary:active { transform: scale(.97); }

.hash-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s, transform .1s;
    border: 1px solid;
}
.hash-btn-secondary:active { transform: scale(.97); }

/* dark */
.hash-hero .hash-btn-secondary {
    color: rgba(255,255,255,.70);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}
.hash-hero .hash-btn-secondary:hover { color: #fff; }

/* light */
:root:not(.dark) .hash-hero .hash-btn-secondary {
    color: rgba(80,50,10,.75);
    background: rgba(191,161,111,.12);
    border-color: rgba(191,161,111,.35);
}
:root:not(.dark) .hash-hero .hash-btn-secondary:hover { color: #3a2208; }


/* ══════════════════════
   RELATED HASHTAGS
══════════════════════ */
.hash-related-wrap {
    width: 100%;
    max-width: 630px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid;
}
.dark .hash-related-wrap          { border-color: rgba(255,255,255,.05); }
:root:not(.dark) .hash-related-wrap { border-color: rgba(0,0,0,.06); }

.hash-related-label {
    font-size: .625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    flex-shrink: 0;
}
.dark .hash-related-label          { color: #71717a; }
:root:not(.dark) .hash-related-label { color: #9ca3af; }


/* ── Pills ── */
.hash-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    color: #bfa16f;
    border: 1px solid rgba(191,161,111,.18);
    transition: all .25s;
}

.dark .hash-pill          { background: rgba(191,161,111,.08); }
:root:not(.dark) .hash-pill { background: rgba(191,161,111,.10); }

.hash-pill:hover {
    background: rgba(191,161,111,.20);
    border-color: rgba(191,161,111,.52);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(191,161,111,.15);
}

.hash-pill-hash { opacity: .50; }

.hash-pill-count {
    font-size: .5625rem;
    font-weight: 400;
}
.dark .hash-pill-count          { color: rgba(255,255,255,.28); }
:root:not(.dark) .hash-pill-count { color: rgba(0,0,0,.32); }

.pub-hashtag-ctx {
    margin-bottom: 1rem;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(191, 161, 111, 0.25);
    background: rgba(191, 161, 111, 0.06);
}

.pub-hashtag-ctx-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.pub-hashtag-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(191,161,111,0.25), rgba(191,161,111,0.1));
    border: 1px solid rgba(191,161,111,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bfa16f;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.pub-hashtag-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pub-hashtag-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(191,161,111,0.7);
}

.pub-hashtag-tag {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #bfa16f;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pub-hashtag-clear {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(191,161,111,0.6);
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.dark .pub-hashtag-clear {
    background: rgba(255,255,255,0.06);
}

.pub-hashtag-clear:hover {
    background: rgba(239,68,68,0.12);
    color: rgb(239, 68, 68);
}

.pub-media-required {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(191,161,111,0.15);
    background: rgba(191,161,111,0.05);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(191,161,111,0.85);
    letter-spacing: 0.02em;
}

.pub-media-required i {
    font-size: 0.75rem;
    opacity: 0.8;
}

.chat-messages-wrapper {
    position: relative;
    isolation: isolate;
}
.chat-messages-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 85% 10%,  rgba(191,161,111,.32) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 10% 85%,  rgba(80,100,180,.22)  0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 50% 45%,  rgba(120,70,20,.15)   0%, transparent 60%);
    animation: chatOrbDrift 20s ease-in-out infinite alternate;
}
@keyframes chatOrbDrift {
    0%   { opacity: 1;    transform: scale(1)    translate(0,0); }
    50%  { opacity: 0.85; transform: scale(1.04) translate(8px,-6px); }
    100% { opacity: 1;    transform: scale(0.97) translate(-6px,5px); }
}

.message-contnaier { position: relative; z-index: 1; }

.msg-bubble-owner,
.msg-bubble-other {
  position: relative;
  padding: .65rem 1.15rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 100%;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.msg-bubble-owner:hover,
.msg-bubble-other:hover { transform: translateY(-1px); }

.msg-bubble-owner {
  border-radius: 20px 20px 6px 20px;
  background: rgba(191,161,111,.13);
  color: #f0dda8;
  border: 1px solid rgba(191,161,111,.38);
  box-shadow: 0 8px 32px rgba(0,0,0,.40),
      0 2px  8px rgba(0,0,0,.25),
      inset 0  1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.18);
}

.msg-bubble-other {
  border-radius: 20px 20px 20px 6px;
  background: rgba(255,255,255,.05);
  color: #dcdcdc;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
      0 8px 32px rgba(0,0,0,.35),
      0 2px  8px rgba(0,0,0,.20),
      inset 0  1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(0,0,0,.12);
}

:root:not(.dark) .msg-bubble-owner {
  background: rgba(191,161,111,.15);
  color: #4a2e0a;
  border-color: rgba(191,161,111,.45);
  box-shadow:
      0 6px 24px rgba(191,161,111,.18),
      0 2px  6px rgba(0,0,0,.08),
      inset 0  1px 0 rgba(255,255,255,.65),
      inset 0 -1px 0 rgba(191,161,111,.12);
}
:root:not(.dark) .msg-bubble-other {
  background: rgba(255,255,255,.22);
  color: #1a1a1a;
  border-color: rgba(0,0,0,.09);
  box-shadow:
      0 6px 24px rgba(0,0,0,.09),
      0 2px  6px rgba(0,0,0,.05),
      inset 0  1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(0,0,0,.04);
}
:root:not(.dark) .chat-messages-wrapper::before {
  background:
      radial-gradient(ellipse 60% 50% at 85% 10%,  rgba(191,161,111,.22) 0%, transparent 65%),
      radial-gradient(ellipse 55% 45% at 10% 85%,  rgba(100,130,210,.14) 0%, transparent 65%);
}

.msg-reply-quote {
  margin-bottom: .5rem;
  padding: .35rem .65rem;
  border-radius: 10px;
  border-left: 2px solid #bfa16f;
  font-size: .7rem;
  font-style: italic;
  opacity: .65;
  background: rgba(0,0,0,.15);
}
.dark .msg-reply-quote { background: rgba(255,255,255,.05); }

.gender-placeholder { color: #9ca3af; }
:root:not(.dark) .gender-placeholder { color: #6b7280; }

.gender-drop-anchor {
  position: relative;
  isolation: isolate;
}

:root:not(.dark) .gender-drop-anchor::before {
  background: radial-gradient(circle, rgba(191,161,111,.35) 0%, transparent 70%);
}
:root:not(.dark) .gender-drop-anchor::after {
  background: radial-gradient(circle, rgba(100,130,220,.20) 0%, transparent 70%);
}

.gender-drop-anchor .uk-drop { z-index: 1; }

.gender-drop-panel {
  position: relative;
  border: 1px solid rgba(191,161,111,.30);
  box-shadow:
      0 20px 60px rgba(0,0,0,.55),
      0  4px 16px rgba(0,0,0,.30),
      inset 0  1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.20);
  
  background: rgba(12,10,6,.60);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.gender-drop-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(155deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 35%,
      transparent 65%);
}

.gender-drop-panel > div { position: relative; z-index: 1; }

:root:not(.dark) .gender-drop-panel {
  background: rgba(248,244,236,.55);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-color: rgba(191,161,111,.38);
  box-shadow:
      0 12px 40px rgba(0,0,0,.12),
      0  2px  8px rgba(0,0,0,.06),
      inset 0  1px 0 rgba(255,255,255,.90),
      inset 0 -1px 0 rgba(191,161,111,.08);
}
:root:not(.dark) .gender-drop-panel::before {
  background: linear-gradient(155deg,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.25) 40%,
      transparent 70%);
}

.gender-drop-item {
  color: rgba(255,255,255,.68);
  position: relative;
  z-index: 1;
  transition: color .18s, background .18s;
}
.gender-drop-item:hover {
  color: #bfa16f;
  background: rgba(191,161,111,.10);
}
:root:not(.dark) .gender-drop-item       { color: rgba(40,25,5,.72); }
:root:not(.dark) .gender-drop-item:hover { color: #7a5820; background: rgba(191,161,111,.14); }

.gender-dot { background: rgba(191,161,111,.30); transition: background .18s; }
.gender-drop-item:hover .gender-dot { background: #bfa16f; }
:root:not(.dark) .gender-dot { background: rgba(191,161,111,.40); }

/* ─────────────────────────────────────────────────────────────────────
   Glass — create-event & edit-event
   ───────────────────────────────────────────────────────────────────── */

/* Cards / sections */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Tips / info sidebar card */
.glass-tips {
    background: rgba(191, 161, 111, 0.06) !important;
    border-color: rgba(191, 161, 111, 0.14) !important;
}

/* Inputs & textareas */
.glass-input {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    outline: none;
    color: inherit;
}
.glass-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(191, 161, 111, 0.55);
    box-shadow: 0 0 0 3px rgba(191, 161, 111, 0.12);
}

/* Location suggestions dropdown */
.glass-suggestions {
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Image upload area — create (dashed border) */
.glass-upload {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px dashed rgba(255, 255, 255, 0.12);
}

/* Image upload area — edit (solid border) */
.glass-upload-edit {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Small icon buttons (+ image button) */
.glass-btn-icon {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Cancel / secondary header buttons */
.glass-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────
   Flatpickr dark theme
   ───────────────────────────────────────────────────────────────────── */

.flatpickr-calendar {
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #bfa16f !important;
    border-color: #bfa16f !important;
    color: #000 !important;
    font-weight: 700 !important;
}
.flatpickr-day:hover {
    background: rgba(191, 161, 111, 0.15) !important;
    color: #bfa16f !important;
}
.flatpickr-day.today {
    border-color: #bfa16f !important;
    color: #bfa16f !important;
}
.flatpickr-months .flatpickr-month {
    background: #18181b !important;
    color: #fff !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #bfa16f !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #18181b !important;
    color: #fff !important;
}
.flatpickr-weekday {
    color: rgba(191, 161, 111, 0.7) !important;
    font-weight: 700 !important;
}
.flatpickr-day {
    color: #ccc !important;
}
.flatpickr-day.flatpickr-disabled {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Empire Event Card ───────────────────────────────────────────── */

.empire-event-card {
    overflow: hidden;
    margin: -4px 0 0;
}

/* Cover */
.empire-event-cover {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: #111;
    text-decoration: none;
}

.empire-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.empire-event-cover:hover .empire-event-img {
    transform: scale(1.04);
}

.empire-event-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.88) 100%);
}

/* Cover bottom info */
.empire-event-cover-info {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.empire-event-cover-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 2px;
}

/* Date badge */
.empire-event-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(191, 161, 111, 0.92);
    border-radius: 12px;
    padding: 8px 12px;
    min-width: 52px;
    flex-shrink: 0;
}

.empire-event-month {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    color: rgba(0,0,0,0.65);
    line-height: 1;
    text-transform: uppercase;
}

.empire-event-day {
    font-size: 26px;
    font-weight: 900;
    color: #000;
    line-height: 1.1;
    font-family: 'Georgia', serif;
}

.empire-event-year {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(0,0,0,0.55);
    line-height: 1;
}

.empire-event-weekday {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(191, 161, 111, 0.85);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.empire-event-name {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 10px rgba(0,0,0,0.7);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Georgia', serif;
}

/* Event badge top-right */
.empire-event-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(191,161,111,0.3);
    border-radius: 20px;
    padding: 5px 11px;
}

.empire-event-badge span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #bfa16f;
    text-transform: uppercase;
}

/* Info bar — base light */
.empire-event-bar {
    background: #f5f4f2;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 14px 16px 12px;
}

html.dark .empire-event-bar {
    background: linear-gradient(135deg, #0f0e0a 0%, #0a0a08 100%);
    border-top-color: rgba(191,161,111,0.15);
}

/* No-cover layout */
.empire-event-nocover-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.empire-event-nocover-header .empire-event-date-badge {
    background: rgba(191,161,111,0.1);
    border: 1px solid rgba(191,161,111,0.25);
}

.empire-event-nocover-header .empire-event-month { color: #bfa16f; }
.empire-event-nocover-header .empire-event-day   { color: #111; font-size: 24px; }
html.dark .empire-event-nocover-header .empire-event-day { color: #fff; }

.empire-event-nocover-title {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.empire-event-nocover-title .empire-event-name {
    text-shadow: none;
    max-width: 100%;
    color: #111;
}

html.dark .empire-event-nocover-title .empire-event-name {
    color: #fff;
}

/* Bottom row */
.empire-event-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Location — base light */
.empire-event-location {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    color: rgba(0,0,0,0.45);
}

html.dark .empire-event-location {
    color: rgba(255,255,255,0.5);
}

.empire-event-location svg { flex-shrink: 0; opacity: .6; }

.empire-event-location span {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Going button ───────────────────────────────────────────────── */
.empire-going-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(191,161,111,0.12);
    border: 1px solid rgba(191,161,111,0.35);
    color: #bfa16f;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}

.empire-going-btn:hover {
    background: rgba(191,161,111,0.22);
    border-color: rgba(191,161,111,0.6);
    color: #c9a55a;
}

/* ── Empire Event Page — Glass Cards ──────────────────────────── */

.empire-event-hero-wrapper {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

html.dark .empire-event-hero-wrapper {
  background: rgba(10,10,8,0.72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-color: rgba(191,161,111,0.12);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}

.empire-glass-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    overflow: hidden;
}

html.dark .empire-glass-card {
    background: rgba(10,10,8,0.60);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-color: rgba(191,161,111,0.1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(191,161,111,0.06);
}

.empire-glass-header {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(191,161,111,0.08);
}

.empire-glass-divider {
    border-top: 1px solid rgba(191,161,111,0.08);
}

/* Countdown boxes */
.empire-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: rgba(191,161,111,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(191,161,111,0.18);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(191,161,111,0.1);
}

/* Nav tabs */
.menu-event-nav {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(191,161,111,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Event cover ambient background (wg_cover_bg pattern) ─────────────── */
.wg_cover_bg {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.wg_cover_bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(32px) saturate(1.4) brightness(0.75);
  transform: scale(1.15);
  opacity: 0.7;
}

.wg_cover_bg_gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 30%, rgb(255 255 255 / 55%) 65%, #ffffff 100%);
}

html.dark .wg_cover_bg_gradient {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.7) 65%,
    #000 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   EVENTS — Light mode overrides (html.light)
   ═══════════════════════════════════════════════════════════════════════ */

html.light .empire-glass-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

html.light .empire-glass-divider {
  border-top-color: rgba(0, 0, 0, 0.06);
}

html.light .empire-countdown-box {
  background: rgba(191, 161, 111, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(191, 161, 111, 0.25);
  box-shadow: none;
}

html.light .menu-event-nav {
  background: rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(0, 0, 0, 0.08);
}

html.light .wg_cover_bg img {
  filter: blur(32px) saturate(1.0) brightness(0.85);
  opacity: 0.35;
}

html.light .wg_cover_bg_gradient {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    rgba(253, 252, 251, 0.8) 50%,
    #fdfcfb 100%
  );
}

/* ── Empire Event Going Buttons ────────────────────────────────── */

.empire-going-btn,
.btn-main.empire-going-btn,
.btn-main-rev.empire-going-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid transparent;
}

/* Not going → outlined gold */
.empire-going-btn.btn-main-rev {
    background: rgba(191,161,111,0.08);
    border-color: rgba(191,161,111,0.3);
    color: #bfa16f;
}
.empire-going-btn.btn-main-rev:hover {
    background: rgba(191,161,111,0.18);
    border-color: rgba(191,161,111,0.55);
    color: #d4b87a;
}

/* Going confirmed → gold filled */
.empire-going-btn.btn-main {
    background: #bfa16f;
    border-color: #bfa16f;
    color: #000;
    box-shadow: 0 2px 12px rgba(191,161,111,0.3);
}
.empire-going-btn.btn-main:hover {
    background: #a88b5c;
    border-color: #a88b5c;
    box-shadow: 0 4px 16px rgba(191,161,111,0.4);
}

/* Light mode overrides */
html:not(.dark) .empire-going-btn.btn-main-rev {
    background: rgba(191,161,111,0.1);
    border-color: rgba(191,161,111,0.4);
    color: #8a6d3b;
}
html:not(.dark) .empire-going-btn.btn-main-rev:hover {
    background: rgba(191,161,111,0.2);
}

/* JS-injected buttons (same classes, no empire-going-btn) */
.btn-main:not(.empire-going-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    border: 1px solid #bfa16f;
    background: #bfa16f;
    color: #000;
    box-shadow: 0 2px 12px rgba(191,161,111,0.3);
}
.btn-main:not(.empire-going-btn):hover {
    background: #a88b5c;
    border-color: #a88b5c;
}

.btn-main-rev:not(.empire-going-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    border: 1px solid rgba(191,161,111,0.3);
    background: rgba(191,161,111,0.08);
    color: #bfa16f;
}
.btn-main-rev:not(.empire-going-btn):hover {
    background: rgba(191,161,111,0.18);
    border-color: rgba(191,161,111,0.55);
    color: #d4b87a;
}
html:not(.dark) .btn-main-rev:not(.empire-going-btn) {
    color: #8a6d3b;
    background: rgba(191,161,111,0.1);
}

/* ── Empire Interested Button ───────────────────────────────────── */

.empire-interested-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid transparent;
}

/* Not interested → outline */
.empire-interested-btn.btn-default {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5);
}
.empire-interested-btn.btn-default:hover {
    background: rgba(191,161,111,0.08);
    border-color: rgba(191,161,111,0.3);
    color: #bfa16f;
}

/* Interested → gold filled star */
.empire-interested-btn.btn-main {
    background: #bfa16f;
    border-color: #bfa16f;
    color: #000;
    box-shadow: 0 2px 12px rgba(191,161,111,0.3);
}
.empire-interested-btn.btn-main:hover {
    background: #a88b5c;
    border-color: #a88b5c;
}

/* Light mode */
html:not(.dark) .empire-interested-btn.btn-default {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.4);
}
html:not(.dark) .empire-interested-btn.btn-default:hover {
    background: rgba(191,161,111,0.1);
    border-color: rgba(191,161,111,0.4);
    color: #8a6d3b;
}

/* JS-injected .btn-default without empire class */
.btn-default:not(.empire-interested-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
}
.btn-default:not(.empire-interested-btn):hover {
    background: rgba(191,161,111,0.08);
    border-color: rgba(191,161,111,0.3);
    color: #bfa16f;
}
html:not(.dark) .btn-default:not(.empire-interested-btn) {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.4);
}