@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* Reset and Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
--border: rgba(255,255,255,0.08);
--border-glow: rgba(245,158,11,0.35);
--input: rgba(255,255,255,0.08);
--primary: #ccff00;
--primary-glow: rgba(245,158,11,0.25);
--primary-hover: #d97706;
--primary-foreground: #0a0a0a;
--secondary: #0d0d1a;
--secondary-foreground: #f0f0f8;
--accent: rgba(245,158,11,0.1);
--accent-foreground: #ccff00;
--destructive: #ff4545;
--destructive-foreground: #ffffff;
--cyan: #0891b2;
--radius: 10px;
--radius-lg: 20px;
--font-sans: 'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html[data-theme="light"] {
  --background: #fdfaf3;
  --foreground: #111827;
  --muted: rgba(0,0,0,0.05);
  --muted-foreground: rgba(17,24,39,0.6);
  --border: rgba(0,0,0,0.1);
  --border-glow: rgba(217,119,6,0.45);
  --input: rgba(0,0,0,0.05);
  --primary: #b45309;
  --primary-glow: rgba(180,83,9,0.13);
  --primary-hover: #92400e;
  --primary-foreground: #ffffff;
  --secondary: #f3efdf;
  --secondary-foreground: #111827;
  --accent: rgba(180,83,9,0.1);
  --accent-foreground: #b45309;
  --cyan: #0891b2;
}

html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

html[data-theme="light"] .sidebar {
  background-color: #dce3d8;
  color: #111827;
}

html[data-theme="light"] .sidebar-logo,
html[data-theme="light"] .sidebar-section,
html[data-theme="light"] .sidebar-profile {
  border-color: rgba(0,0,0,0.1);
}

html[data-theme="light"] .sidebar-nav-item:hover,
html[data-theme="light"] .sidebar-item:hover {
  background-color: rgba(0,0,0,0.05);
}

html[data-theme="light"] .sidebar-profile {
  background-color: rgba(0,0,0,0.03);
}


body {
font-family: var(--font-sans);
background-color: var(--background);
color: var(--foreground);
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}

a {
color: inherit;
text-decoration: none;
}

img {
max-width: 100%;
height: auto;
display: block;
}

/* Layout */
.app-container {
display: flex;
min-height: 100vh;
}

.sidebar {
width: 300px;
background-color: #121212;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 40;
transition: transform 0.3s ease;
color: #ffffff;
height: 100vh; /* Ensure full height */
overflow: hidden; /* Hide overflow */
}

.sidebar-collapsed {
transform: translateX(-100%);
}

.main-content {
flex: 1;
margin-left: 300px;
transition: margin-left 0.3s ease;
}

.main-content-expanded {
margin-left: 0;
}

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

.flex {
display: flex;
}

.flex-col {
flex-direction: column;
}

.items-center {
align-items: center;
}

.justify-between {
justify-content: space-between;
}

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

.gap-2 {
gap: 0.5rem;
}

.gap-4 {
gap: 1rem;
}

.gap-6 {
gap: 1.5rem;
}

.grid {
display: grid;
}

.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.w-full {
width: 100%;
}

.h-full {
height: 100%;
}

.min-h-screen {
min-height: 100vh;
}

.flex-1 {
flex: 1;
}

.relative {
position: relative;
}

.absolute {
position: absolute;
}

.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.top-0 {
top: 0;
}

.left-0 {
left: 0;
}

.top-2 {
top: 0.5rem;
}

.left-2 {
left: 0.5rem;
}

.right-2 {
right: 0.5rem;
}

.bottom-2 {
bottom: 0.5rem;
}

.z-50 {
z-index: 50;
}

.overflow-hidden {
overflow: hidden;
}

.sticky {
position: sticky;
}

/* Typography */
.text-xs {
font-size: 0.75rem;
}

.text-sm {
font-size: 0.875rem;
}

.text-base {
font-size: 1rem;
}

.text-lg {
font-size: 1.125rem;
}

.text-xl {
font-size: 1.25rem;
}

.text-2xl {
font-size: 1.5rem;
}

.text-3xl {
font-size: 1.875rem;
}

.font-medium {
font-weight: 500;
}

.font-bold {
font-weight: 700;
}

.text-center {
text-align: center;
}

.text-white {
color: white;
}

.text-muted-foreground {
color: var(--muted-foreground);
}

.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Components */
.header {
height: 4rem;
border-bottom: 1px solid var(--border);
background-color: var(--background);
position: sticky;
top: 0;
z-index: 30;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}

.nav-link {
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s;
}

.nav-link:hover {
color: var(--primary);
}

.nav-link.active {
color: var(--primary);
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-weight: 500;
font-size: 0.875rem;
height: 2.5rem;
padding-left: 1rem;
padding-right: 1rem;
transition: all 0.2s;
cursor: pointer;
}

.btn-sm {
height: 2.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
}

.btn-primary {
background: linear-gradient(135deg, var(--primary), #d97706);
color: #0a0a0a;
border: none;
box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-primary:hover {
background: linear-gradient(135deg, var(--primary), #d97706);
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--primary-glow);
}

.btn-outline {
background-color: transparent;
border: 1px solid var(--border);
color: var(--text);
}

.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-glow);
}

.btn-ghost {
background-color: transparent;
border: none;
}

.btn-ghost:hover {
background-color: var(--accent);
}

.btn-icon {
width: 2.5rem;
padding: 0;
font-size: 1.25rem;
}

.search-input {
display: flex;
position: relative;
}

.search-input input {
height: 2.5rem;
width: 300px;
border-radius: var(--radius);
border: 1px solid var(--input);
background-color: var(--background);
color: var(--foreground);
padding-left: 2.5rem;
font-size: 0.875rem;
}

.search-input i {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
font-size: 1.25rem;
}
/* Search Container */
.search-container {
display: flex;
position: relative;
align-items: center;
}

.search-container .search-input {
height: 2.5rem;
width: 300px;
border-radius: var(--radius);
border: 1px solid var(--input);
background-color: var(--background);
color: var(--foreground);
padding-left: 2.5rem;
font-size: 0.875rem;
}

.search-container .search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
font-size: 1.25rem;
pointer-events: none;
}

.search-container .search-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 300px;
overflow-y: auto;
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 10;
display: none; /* Hidden by default */
}

.search-container .search-results.active {
display: block;
}

.card {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background-color: var(--secondary);
overflow: hidden;
transition: all 0.4s;
position: relative;
transform-style: preserve-3d;
}

.card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--primary-glow), transparent);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 1;
}

.card:hover {
border-color: var(--border-glow);
box-shadow: 0 20px 60px rgba(204, 255, 0,0.15);
transform: translateY(-8px) translateZ(10px);
}

.card:hover::before {
opacity: 1;
}

.card-content {
padding: 1rem;
position: relative;
}

.card-footer {
padding: 1rem;
padding-top: 0;
display: flex;
justify-content: space-between;
}

.card-content .title-container {
max-width: calc(100% - 4.5rem); /* Reserves space for avatar (3rem) + plus button (1.25rem) + gap (0.5rem) + buffer */
}

.card-content .avatar-container {
position: absolute;
right: 1rem; /* Hugs right corner, matching card-content padding */
top: 50%;
transform: translateY(-50%); /* Vertically centers the stack */
display: flex;
flex-direction: column;
align-items: center;
gap: -0.5rem; /* Space between avatar and plus button */
}

.card-content .avatar {
width: 3rem; /* Increased size for prominence */
height: 3rem;
border-radius: 50%;
border: 3px solid var(--primary); /* Thicker outline */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.card-content .avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}

.card-content .plus-button {
background-color: var(--primary);
border-radius: 50%;
width: 1.25rem; /* Slightly larger badge */
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: -0.8rem; /* Moves plus up to touch or overlap avatar */
}

.card-content .plus-button .fa-plus {
font-size: 0.7rem; /* Adjusted for 1.25rem badge */
color: var(--background); /* Contrasts with primary background */
}

.aspect-video {
position: relative;
aspect-ratio: 16 / 9;
}

.aspect-square {
position: relative;
aspect-ratio: 1 / 1;
}

.aspect-portrait {
position: relative;
aspect-ratio: 3 / 4;
}

.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--muted);
color: var(--foreground);
}

.badge-outline {
background-color: transparent;
border: 1px solid var(--border);
}

.badge-premium {
background-color: var(--primary);
color: var(--primary-foreground);
}

.badge-duration {
background-color: rgba(62, 62, 62, 0.499);
color: white;
z-index: 10; /* For audio badges in media-player */
}
/* Specific styling for video duration badges in bottom-right corner */
.absolute.bottom-2.right-2 .video-duration {
background-color: rgba(62, 62, 62, 0.7);
color: #ffffff; /* White text for visibility */
padding: 0.25rem 0.5rem; /* Slightly larger for readability */
z-index: 20; /* Above media-player and card-video */
border-radius: 5px; /* Adjusted for better fit */
}

/* Ensure audio duration badge retains original styling */
.media-player[data-type="audio"] .badge-duration {
background-color: rgba(62, 62, 62, 0.7);
padding: 0.25rem 0.5rem;
z-index: 10;
color: #ffffff;
border-radius: 5px; /* Adjusted for better fit */
}

.badge-type {
position: absolute;
top: 0.5rem;
left: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: var(--secondary-foreground);
z-index: 10;
}

.badge-type.video,
.badge-type.article,
.badge-type.image,
.badge-type.audio,
.badge-type.gallery {
background-color: rgba(18, 18, 18, 0.9);
}

.avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
overflow: hidden;
background-color: var(--muted);
}

.avatar-lg {
width: 3rem;
height: 3rem;
}

.tab-list {
display: flex;
overflow-x: auto;
border-bottom: 1px solid var(--border);
scrollbar-width: none;
padding-top: 10px;
}

.tab {
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
}

.tab.active {
border-bottom-color: var(--primary);
color: var(--foreground);
}

.footer {
border-top: 1px solid var(--border);
padding: 1.5rem 0;
background-color: var(--secondary);
color: var(--secondary-foreground);
}

/* Sidebar Styles */
.sidebar-logo {
padding: 1rem;
border-bottom: 1px solid #2d2d2d;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Prevent logo from shrinking */
}

.sidebar-nav {
padding: 1rem 0.75rem;
flex-shrink: 0; /* Prevent navigation from shrinking */
overflow-y: visible; /* Make navigation visible */
}

.sidebar-nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
border-radius: var(--radius);
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}

.sidebar-nav-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-nav-item.active {
background-color: rgba(204, 255, 0, 0.2);
}

.sidebar-nav-item.active i,
.sidebar-nav-item.active span {
color: var(--primary);
}

.sidebar-nav-item i {
font-size: 1.25rem;
width: 1.25rem;
text-align: center;
}

/* Sidebar Sections Container */
.sidebar-sections-container {
flex: 1;
overflow-y: auto; /* Allow scrolling for sections */
display: flex;
flex-direction: column;
}

.sidebar-section {
padding: 1rem 0.75rem;
border-top: 1px solid #2d2d2d;
flex-shrink: 0; /* Prevent sections from shrinking */
}

.sidebar-section-title {
font-size: 0.75rem;
font-weight: 500;
color: #a1a1aa;
margin-bottom: 0.75rem;
padding-left: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.sidebar-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}

.sidebar-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-item-content {
flex: 1;
min-width: 0;
}

.sidebar-item-title {
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sidebar-item-subtitle {
font-size: 0.75rem;
color: #a1a1aa;
}

.sidebar-profile {
padding: 1rem;
border-top: 1px solid #2d2d2d;
display: flex;
align-items: center;
gap: 0.75rem;
background-color: rgba(255, 255, 255, 0.05);
flex-shrink: 0; /* Prevent profile from shrinking */
}

.sidebar-profile-info {
flex: 1;
min-width: 0;
}

.sidebar-profile-name {
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sidebar-profile-role {
font-size: 0.75rem;
color: var(--primary);
font-weight: 500;
}

.sidebar-toggle {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--primary-foreground);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 50;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: none;
transition: all 0.2s;
font-size: 1.5rem;
}

.sidebar-toggle:hover {
background-color: var(--primary-hover);
transform: scale(1.05);
}

.sidebar-toggle.hidden {
display: none;
}
/* Add this to your existing styles */
#explore-section {
overflow-x: hidden; /* Prevent horizontal overflow */
width: 100%;
}

/* Update the content-type-filters and tab-list styles */
.content-type-filters {
display: flex;
overflow-x: auto;
padding-bottom: 0.5rem;
scrollbar-width: none;
scrollbar-color: var(--muted-foreground) var(--muted);
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

.content-type-filter {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}

.content-type-filter:hover {
background-color: var(--accent);
}

.content-type-filter.active {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: transparent;
}

.content-type-filter i {
font-size: 1.25rem;
}

/* Content Card Hover Effects */
.content-preview {
position: absolute;
inset: 0;
background-color: rgba(18, 18, 18, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}

.card:hover .content-preview {
opacity: 1;
}

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

.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}

/* Content Type Specific Styles */
.content-type-indicator {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: rgba(18, 18, 18, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: white;
z-index: 10;
font-size: 1.25rem;
}

.article-preview {
padding: 1rem;
background-color: rgba(18, 18, 18, 0.8);
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
max-height: 50%;
overflow: hidden;
}

.gallery-indicator {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
background-color: rgba(18, 18, 18, 0.7);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--radius);
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.25rem;
}

.audio-player {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(18, 18, 18, 0.8), transparent);
padding: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.audio-play-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-foreground);
flex-shrink: 0;
}

.audio-progress {
flex: 1;
height: 4px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 2px;
overflow: hidden;
}

.audio-progress-bar {
height: 100%;
width: 30%;
background-color: var(--primary);
}

.audio-time {
color: white;
font-size: 0.75rem;
}

/* App Sections */
.app-section {
display: none;
}

.app-section.active {
display: block;
}

/* Responsive */
@media (max-width: 1024px) {
.sidebar {
  transform: translateX(-100%);
  width: 250px;
}

.sidebar.open {
  transform: translateX(0);
}

.main-content {
  margin-left: 0;
}

.sidebar-toggle {
  display: flex;
}

.container {
  padding: 0 0.75rem;
}

.search-input input {
  width: 100%;
  max-width: 250px;
}
}

@media (max-width: 768px) {
.header {
  height: 3.5rem;
}

.search-input input {
  max-width: 200px;
}

.content-type-filters {
  gap: 0.5rem;
}
#explore-section .container {
  padding: 0 0.75rem;
}

.content-type-filters,
.tab-list {
  width: calc(100vw - 1.5rem); /* Account for container padding */
  margin-left: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.content-type-filter {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}

.content-type-filter i {
  font-size: 1rem;
}

.tab {
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
}

.card-content {
  padding: 0.75rem;
}

.card-footer {
  padding: 0.75rem;
  padding-top: 0;
}
.card-footer .flex-col {
  flex-grow: 1;
}

.btn {
  height: 2.25rem;
  font-size: 0.8rem;
}

.btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}
}

@media (max-width: 640px) {
.sidebar {
  width: 270px;
}

.search-input input {
  max-width: 150px;
}

.avatar {
  width: 2rem;
  height: 2rem;
}

.avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.text-3xl {
  font-size: 1.5rem;
}

.text-2xl {
  font-size: 1.25rem;
}

.text-xl {
  font-size: 1.125rem;
}

#explore-section .grid {
  grid-template-columns: 1fr;
}

.content-type-filters,
.tab-list {
  width: calc(100vw - 1rem);
  margin-left: -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.content-type-filter {
  white-space: nowrap;
}

.card-footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}
}

@media (min-width: 640px) {
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm\:flex {
  display: flex;
}

.sm\:hidden {
  display: none;
}
}

@media (min-width: 768px) {
.md\:flex {
  display: flex;
}

.md\:hidden {
  display: none;
}

.md\:flex-row {
  flex-direction: row;
}

.md\:items-center {
  align-items: center;
}

.md\:justify-between {
  justify-content: space-between;
}

.md\:text-left {
  text-align: left;
}
}

@media (min-width: 1024px) {
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg\:col-span-2 {
  grid-column: span 2 / span 2;
}
}

@media (min-width: 1280px) {
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

/* Modal Overlay */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
overflow-y: auto;
}
.modal-overlay.active {
display: flex; /* Visible when active */
}
/* Modal Container */
.create-post-modal .modal {
background-color: var(--background);
border-radius: 0.75rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
width: 100%;
max-width: 64rem;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

/* Modal Sections */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--border);
}

.modal-body {
flex: 1;
overflow-y: auto;
}
/* Add this to your style section */
.modal-body .grid {
display: grid;
width: 100%;
}

.modal-body .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.modal-body .grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#schedule-options {
  display: none !important;
}

#schedule-options.active {
  display: grid !important;
}

.modal-body .gap-6 {
gap: 1.5rem;
}

/* Ensure the preview column has proper sizing */
.modal-body .preview-column {
position: sticky;
top: 1rem;
height: fit-content;
}

/* Avatar */
.avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
overflow: hidden;
background-color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--foreground);
border: 1px solid var(--border);
}

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

/* Typography */
.font-semibold {
font-weight: 600;
}

.font-medium {
font-weight: 500;
}

.text-sm {
font-size: 0.875rem;
}

.text-xs {
font-size: 0.75rem;
}

.text-muted {
color: var(--muted-foreground);
}

/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-weight: 500;
font-size: 0.875rem;
padding: 0.5rem 1rem;
transition: all 0.2s;
cursor: pointer;
border: none;
background-color: transparent;
}

.btn-ghost {
background-color: transparent;
}

.btn-ghost:hover {
background-color: var(--muted);
}

.btn-icon {
padding: 0.5rem;
border-radius: 9999px;
}

.btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
}

.btn-primary:hover {
background-color: var(--primary-hover);
}

.btn-outline {
border: 1px solid var(--border);
background-color: transparent;
}

.btn-outline:hover {
background-color: var(--muted);
}

/* Layout Utilities */
.flex {
display: flex;
}

.items-center {
align-items: center;
}

.justify-between {
justify-content: space-between;
}

.gap-2 {
gap: 0.5rem;
}

.gap-3 {
gap: 0.75rem;
}

.gap-6 {
gap: 1.5rem;
}

.space-y-2 > * + * {
margin-top: 0.5rem;
}

.space-y-3 > * + * {
margin-top: 0.75rem;
}

.space-y-4 > * + * {
margin-top: 1rem;
}

.create-post-modal .grid {
display: grid;
}

.create-post-modal .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.create-post-modal .grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-4 {
padding: 1rem;
}

.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}

.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}

.pt-2 {
padding-top: 0.5rem;
}

.mt-1 {
margin-top: 0.25rem;
}

.mt-2 {
margin-top: 0.5rem;
}

.mt-4 {
margin-top: 1rem;
}

.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}

.mr-2 {
margin-right: 0.5rem;
}

/* Tabs */
.tabs {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}

.tabs-list {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
background-color: var(--muted);
border-radius: var(--radius);
padding: 0.25rem;
gap: 0.25rem;
}

.tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.5rem;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}

.tab.active {
background-color: var(--primary);
color: #000 !important;
}

.popular-tag {
  background: rgba(204, 255, 0, 0.1) !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-family: var(--font-header) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 4px 4px 0 !important;
  cursor: pointer !important;
}

.popular-tag:hover {
  background: var(--primary) !important;
  color: #000 !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3) !important;
}

.tab-content {
display: none;
padding: 1rem 0;
}

.tab-content.active {
display: block;
}

/* Form Elements */
.label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}

.input {
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 0.875rem;
background-color: var(--background);
color: var(--foreground);
outline: none;
transition: border-color 0.2s;
}

.input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.2);
}

.textarea {
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 0.875rem;
background-color: var(--background);
color: var(--foreground);
outline: none;
transition: border-color 0.2s;
resize: vertical;
min-height: 100px;
}

.textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.2);
}

/* Upload Area */
.upload-area {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}

.upload-area:hover {
background-color: var(--muted);
}

.hidden {
display: none;
}

/* File Previews */
.file-preview {
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}

.file-preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.file-preview-remove {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background-color: var(--destructive);
color: var(--destructive-foreground);
border-radius: 9999px;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}

.file-preview:hover .file-preview-remove {
opacity: 1;
}

.file-preview-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Tag Input */
.tag-container {
position: relative;
}

.tag-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 5rem;
}

.tag-input {
flex: 1;
min-width: 8rem;
border: none;
outline: none;
font-size: 0.875rem;
background: transparent;
}

.tag-suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--background);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
z-index: 10;
margin-top: 0.25rem;
max-height: 15rem;
overflow-y: auto;
display: none;
}

.tag-suggestions.open {
display: block;
}

.tag-suggestion {
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
align-items: center;
}

.tag-suggestion:hover {
background-color: var(--muted);
}

.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--muted);
color: var(--foreground);
}

.badge-outline {
background-color: transparent;
border: 1px solid var(--border);
}

/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 2.5rem;
height: 1.25rem;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--muted);
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 4px;
border: 1px solid var(--border);
}

.switch-slider:before {
position: absolute;
content: "";
height: calc(1.25rem - 6px);
width: calc(1.25rem - 6px);
left: 2px;
bottom: 2px;
background-color: var(--muted-foreground);
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}

.switch input:checked + .switch-slider {
background-color: rgba(204, 255, 0, 0.1);
border-color: var(--primary);
}

.switch input:checked + .switch-slider:before {
transform: translateX(1.25rem);
background-color: var(--primary);
box-shadow: 0 0 8px rgba(204, 255, 0, 0.5);
}

/* Select Dropdown */
.select {
position: relative;
display: inline-block;
width: 100%;
}

.select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
background-color: var(--background);
cursor: pointer;
font-size: 0.875rem;
}

.select-content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--background);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
z-index: 10;
margin-top: 0.25rem;
max-height: 15rem;
overflow-y: auto;
display: none;
}

.select-content.open {
display: block;
}

.select-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background-color 0.2s;
}

.select-item:hover {
background-color: var(--muted);
}

/* Cursor */
.cursor-pointer {
cursor: pointer;
}

/* Background */
.bg-muted {
background-color: var(--muted);
}

/* Text Colors */
.text-primary {
color: var(--primary);
}

/* Hover */
.hover\:underline:hover {
text-decoration: underline;
}

/* Overflow */
.overflow-y-auto {
overflow-y: auto;
}

/* Responsive */
@media (min-width: 768px) {
.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 640px) {
.sm\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 767px) {
.modal {
  max-height: 100vh;
  border-radius: 0;
}
#filter-btn {
  display: none;
}
#slidesfilter {
  display: none;
}
.tabs-list {
  grid-template-columns: repeat(3, 1fr);
}

.tab {
  padding: 0.4rem;
}
}
/* Post Card Styles */
.post-card {
border: 1px solid var(--border);
border-radius: var(--radius);
background-color: var(--background);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: box-shadow 0.2s;
}

.post-card:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

.post-card-title {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}

.post-card-status {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-weight: 500;
}

.post-card-status.approved {
background-color: var(--primary);
color: var(--primary-foreground);
}

.post-card-status.pending {
background-color: var(--muted);
color: var(--muted-foreground);
}

.post-card-status.flagged {
background-color: var(--destructive);
color: var(--destructive-foreground);
}

.post-card-metrics {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: var(--muted-foreground);
}

.post-card-metrics span {
display: flex;
align-items: center;
gap: 0.25rem;
}

.post-card-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}

.post-card-actions .btn {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
height: auto;
}

.post-card-actions .btn-icon {
width: 1.75rem;
height: 1.75rem;
padding: 0;
font-size: 0.875rem;
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: var(--primary);
transition: width 0.2s ease;
}

/* Adjust grid spacing */
#posts-list {
gap: 1rem; /* Reduced from 1.5rem (gap-6) to 1rem (gap-4) for compactness */
}
.preview-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
width: 100%;
height: 100%;
}

.preview-grid-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
}

.preview-grid-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
.card-video,
.card-audio-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-audio {
display: none; /* Audio element is hidden, controlled via media-player */
}
.card-audio-thumbnail {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.card-audio-thumbnail i {
font-size: 4rem;
color: var(--foreground);
opacity: 0.8;
}
.media-player {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(18, 18, 18, 0.8), transparent);
padding: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 10;
}
.media-play-btn {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.media-progress {
flex: 1;
height: 0.25rem;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.media-progress-bar {
width: 0;
height: 100%;
background-color: var(--primary);
transition: width 0.1s;
}
.media-time {
font-size: 0.75rem;
color: var(--foreground);
}

/* Components */
.edit-profile-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-weight: 500;
font-size: 0.9375rem;
height: 2.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
transition: all 0.2s;
cursor: pointer;
letter-spacing: 0.01em;
white-space: nowrap;
touch-action: manipulation;
}

.edit-profile-btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.edit-profile-btn-primary:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.edit-profile-btn-outline {
background-color: transparent;
border: 1px solid var(--primary-foreground);
color: var(--primary-foreground);
}

.edit-profile-btn-outline:hover {
background-color: var(--primary-hover);
color: var(--accent-foreground);
}

/* Modal Overlay */
.edit-profile-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}

/* Modal Content */
.edit-profile-modal-content {
background: var(--background, #fff);
padding: 2rem;
border-radius: var(--radius, 0.75rem);
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease-in-out;
}

/* Hide modal */
.edit-profile-modal.hidden {
display: none;
}
/* Close button inside modal */
.modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
font-size: 1.5rem;
color: #555;
cursor: pointer;
padding: 0.25rem;
line-height: 1;
z-index: 10;
transition: color 0.2s ease;
}

.modal-close-btn:hover {
color: #222;
}
.category-input-wrapper {
position: relative;
margin-bottom: 1.5rem;
}

.selected-categories {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}

.selected-categories .tag {
background-color: #eef1f4;
color: #333;
padding: 0.4rem 0.6rem;
border-radius: 999px;
display: flex;
align-items: center;
font-size: 0.875rem;
}

.selected-categories .tag .remove-tag {
margin-left: 0.5rem;
cursor: pointer;
font-weight: bold;
color: #777;
}

.category-input {
width: 100%;
padding: 0.65rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
font-size: 1rem;
}

.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
border-top: none;
max-height: 150px;
overflow-y: auto;
z-index: 10;
list-style: none;
padding: 0;
margin: 0;
}

.autocomplete-list li {
padding: 0.5rem;
cursor: pointer;
}

.autocomplete-list li:hover {
background: #f0f0f0;
}
.social-input {
position: relative;
margin-bottom: 1rem;
}

.social-input input {
width: 100%;
padding: 0.65rem 0.75rem 0.65rem 2.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
}

.social-icon {
position: absolute;
top: 49%;
right: 0.75rem;
transform: translateY(-50%);
color: #555;
font-size: 1.1rem;
}

/* Inputs */
input[type="file"],
input[type="url"],
input[type="text"],
select,
textarea {
border: 1px solid var(--input, #ccc);
border-radius: var(--radius, 0.5rem);
padding: 0.75rem;
font-size: 0.95rem;
width: 100%;
margin-bottom: 1rem;
background: #fff;
}

textarea {
resize: vertical;
min-height: 120px;
}

/* Button Row */
.edit-profile-modal-content .flex {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}

/* Responsive: Fullscreen on small devices */
@media (max-width: 768px) {
.edit-profile-modal-content {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  border-radius: 0;
  padding: 1.5rem 1rem;
  overflow-y: auto;
}

.edit-profile-modal-content h2 {
  font-size: 1.25rem;
}
}

/* Analytics Overview Component */
.analytics-container {
background-color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
}

.analytics-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}

.analytics-stat {
text-align: center;
min-width: 80px;
}

.analytics-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--foreground);
}

.analytics-stat-label {
font-size: 0.75rem;
color: var(--muted-foreground);
}

.analytics-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-weight: 500;
font-size: 0.9375rem;
height: 2.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
transition: all 0.2s;
cursor: pointer;
letter-spacing: 0.01em;
white-space: nowrap;
touch-action: manipulation;
}

.analytics-btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.analytics-btn-primary:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Responsive Breakpoints */
@media (max-width: 480px) {
.analytics-container {
  padding: 1rem;
}
.analytics-stats {
  gap: 0.75rem;
}
.analytics-stat {
  min-width: 60px;
}
.analytics-stat-value {
  font-size: 1rem;
}
.analytics-stat-label {
  font-size: 0.6875rem;
}
.analytics-btn {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.8125rem;
}
}

@media (min-width: 481px) and (max-width: 639px) {
.analytics-stats {
  gap: 0.75rem;
}
.analytics-stat {
  min-width: 70px;
}
}

@media (min-width: 640px) and (max-width: 767px) {
.analytics-stats {
  gap: 1rem;
}
.analytics-stat {
  min-width: 80px;
}
}

@media (min-width: 768px) {
.analytics-container {
  padding: 1.5rem;
}
}

/* Creator Profile Specific */
.profile-avatar {
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid white;
overflow: hidden;
position: relative;
z-index: 10;
background-color: var(--muted);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

.social-links {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}

.social-link {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--accent);
color: var(--accent-foreground);
transition: all 0.2s;
font-size: 1rem;
touch-action: manipulation;
}

.social-link:hover {
background-color: var(--primary);
color: var(--primary-foreground);
transform: translateY(-2px);
}

.stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}

.stat {
text-align: center;
}
.stat-value {
font-size: 1.25rem;
font-weight: 700;
}
.stat-label {
font-size: 0.75rem;
color: var(--muted-foreground);
}

.filter-tabs {
display: flex;
overflow-x: auto;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}

.filter-tabs::-webkit-scrollbar {
display: none;
}

.filter-tab {
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
scroll-snap-align: start;
min-width: max-content;
touch-action: manipulation;
}

.filter-tab:hover {
background-color: var(--muted);
}
.filter-tab.active {
background-color: var(--primary);
color: var(--primary-foreground);
}

.content-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}

.content-card {
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: hidden;
transition: all 0.2s;
}

.content-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}

.share-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background-color: var(--muted);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.share-link-input {
flex: 1;
border: none;
background: transparent;
font-size: 0.875rem;
color: var(--foreground);
outline: none;
padding: 0.5rem 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}

.share-link-button {
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
border-radius: var(--radius);
padding: 0.5rem 1rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
white-space: nowrap;
}

.share-link-button:hover {
background-color: var(--primary-hover);
}

.subscription-cta {
background-color: rgba(204, 255, 0, 0.1);
border-radius: var(--radius);
padding: 1.5rem;
margin-top: 2rem;
text-align: center;
border: 1px solid rgba(204, 255, 0, 0.3);
}

.subscription-price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin: 1rem 0 0.25rem;
}

.subscription-period {
font-size: 1rem;
color: var(--muted-foreground);
margin-bottom: 1rem;
}

.subscription-features {
text-align: left;
margin: 1.5rem 0;
}

.subscription-feature {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.9375rem;
}

.subscription-feature-icon {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-foreground);
font-size: 0.75rem;
flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-width: 480px) {
.profile-avatar {
  width: 140px;
  height: 140px;
  border-width: 3px;
}
.stat-value {
  font-size: 1rem;
}
.stat-label {
  font-size: 0.6875rem;
}
.subscription-price {
  font-size: 1.75rem;
}
.subscription-period {
  font-size: 0.875rem;
}
.share-link {
  padding: 0.625rem;
  flex-direction: column;
  align-items: stretch;
}
.share-link-input {
  font-size: 0.8125rem;
  width: 100%;
  margin-bottom: 0.5rem;
}
.share-link-button {
  width: 100%;
  text-align: center;
}
.btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.8125rem;
}
.btn-lg {
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
}
.subscription-feature {
  font-size: 0.8125rem;
}
.social-link {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}
.social-links {
  gap: 0.5rem;
}
.text-2xl {
  font-size: 1.25rem;
}
.text-xl {
  font-size: 1rem;
}
}

@media (min-width: 481px) and (max-width: 639px) {
.profile-avatar {
  width: 140px;
  height: 140px;
}
.content-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.stats {
  gap: 0.75rem;
}
.btn-lg {
  height: 2.75rem;
}
.social-link {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
}
.social-links {
  gap: 0.75rem;
}
}

@media (min-width: 640px) and (max-width: 767px) {
.profile-avatar {
  width: 100px;
  height: 100px;
}
.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.stats {
  gap: 1rem;
}
.subscription-price {
  font-size: 2rem;
}
.social-link {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
}
.social-links {
  gap: 0.75rem;
}
}

@media (min-width: 768px) {
.md\:flex {
  display: flex;
}
.md\:items-center {
  align-items: center;
}
.md\:items-start {
  align-items: flex-start;
}
.md\:justify-between {
  justify-content: space-between;
}
.md\:flex-row {
  flex-direction: row;
}
.md\:text-left {
  text-align: left;
}
.profile-avatar {
  width: 120px;
  height: 120px;
}
.container {
  padding: 0 1.5rem;
}
.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
.content-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-avatar {
  width: 130px;
  height: 130px;
}
}

@media (min-width: 1280px) {
.content-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile-avatar {
  width: 140px;
  height: 140px;
}
.container {
  padding: 0 2rem;
}
}
.tab-content:not(.active) {
display: none;
}
.tab.active {
background-color: var(--primary);
color: white;
}

.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
border-radius: 4px;
color: white;
z-index: 1000;
}
.notification.success {
background-color: #28a745;
}
.notification.error {
background-color: #dc3545;
}
.btn-ghost btn-icon {
background-color: var(--primary);
}
.card-content a {
text-decoration: none;
color: inherit;
transition: background-color 0.2s;
}

.card-content a:hover {
background-color: rgba(var(--muted), 0.1);
border-radius: var(--radius);
padding: 0.25rem;
}

.card-content a:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Interaction Button Styles */
.like-btn,
.comment-btn,
.share-btn,
.bookmark-btn {
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.2s, background-color 0.2s;
}

.like-btn.liked,
.like-btn.liked i,
.bookmark-btn.bookmarked,
.bookmark-btn.bookmarked i {
color: var(--primary);
}

.like-btn:hover,
.comment-btn:hover,
.share-btn:hover,
.bookmark-btn:hover {
background-color: var(--muted);
border-radius: var(--radius);
}

.like-btn:focus,
.comment-btn:focus,
.share-btn:focus,
.bookmark-btn:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}

/* Share Modal */
.share-modal {
background-color: var(--background);
padding: 1.5rem; /* Consistent padding */
border-radius: var(--radius-md); /* Rounded corners matching image */
box-shadow: var(--shadow); /* Shadow matching image */
max-width: 420px; /* Adjusted width to match image proportions */
width: 90%;
z-index: 1000;
transform: translateY(20px); /* Initial position for animation */
opacity: 0; /* Initial opacity for animation */
transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay.active .share-modal {
transform: translateY(0);
opacity: 1;
}

.share-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem; /* Space below header */
}

.share-modal-header h3 {
margin: 0;
font-size: 1.5rem; /* Larger title as in image */
font-weight: 600; /* Semi-bold */
color: var(--foreground);
}

.close-btn {
background: none;
border: 1px solid var(--border); /* Subtle border for the button */
border-radius: 50%; /* Circular button */
width: 36px; /* Fixed size for circular button */
height: 36px; /* Fixed size for circular button */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem; /* Icon size */
cursor: pointer;
color: var(--muted-foreground);
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.close-btn:hover {
background-color: #f0f0f0; /* Light hover background */
border-color: #d0d0d0; /* Slightly darker border on hover */
color: var(--foreground);
}

.share-modal-body {
display: flex;
flex-direction: column;
gap: 1.5rem; /* Gap between main sections */
}

/* Share Social Section (Top section in image) */
.share-social h4 {
font-size: 1rem;
font-weight: 500;
color: var(--foreground);
margin-bottom: 1rem; /* Space below "Share to" title */
}

.share-social-grid {
display: grid; /* Use grid for better control over wrapping */
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Responsive grid */
gap: 0.75rem; /* Gap between social buttons */
justify-items: center; /* Center items within their grid cells */
}

.btn-social {
display: flex;
flex-direction: column; /* Icon on top, text below */
align-items: center;
justify-content: center;
background-color: transparent; /* No background for the button itself */
border: none;
cursor: pointer;
padding: 0.5rem 0; /* Padding around icon and text */
border-radius: var(--radius-sm);
transition: background-color 0.2s;
width: 100%; /* Take full width of grid cell */
max-width: 90px; /* Max width for each social button */
}

.btn-social:hover {
background-color: #f0f0f0; /* Light hover background for the whole button area */
}

.btn-social i {
font-size: 1.8rem; /* Larger icon size */
margin-bottom: 0.5rem; /* Space between icon and text */
width: 56px; /* Fixed size for the icon container */
height: 56px; /* Fixed size for the icon container */
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%; /* Circular background for icons */
background-color: #f0f0f0; /* Default light background for icons */
color: var(--foreground); /* Default icon color */
transition: background-color 0.2s, color 0.2s;
}

/* Specific social icon colors and backgrounds */
.btn-twitter i {
background-color: #000000; /* Black for X icon */
color: white;
}
.btn-facebook i {
background-color: #1877f2; /* Facebook blue */
color: white;
}
.btn-whatsapp i {
background-color: #25d366; /* WhatsApp green */
color: white;
}
.btn-reddit i {
background-color: #ff4500; /* Reddit orange */
color: white;
}
.btn-email i {
background-color: #f0f0f0; /* Light gray for email icon background */
color: var(--foreground); /* Dark color for email icon */
}
.btn-telegram i {
background-color: #0088cc; /* Telegram blue */
color: white;
}
.btn-whatsapp-status i {
background-color: #25d366; /* WhatsApp green */
color: white;
}

.btn-social span {
/* Text label below icon */
font-size: 0.8rem; /* Smaller text */
color: var(--muted-foreground);
white-space: nowrap; /* Prevent text wrapping */
text-align: center;
}

/* Share Link Section (Bottom section in image) */
.share-link {
margin-top: 1rem; /* Space above this section */
}

.share-link h4 {
font-size: 1rem;
font-weight: 500;
color: var(--foreground);
margin-bottom: 0.75rem;
}

.link-input-group {
display: flex;
gap: 0.5rem; /* Gap between input and button */
align-items: center;
border: 1px solid var(--border); /* Border around the group */
border-radius: var(--radius-sm);
background-color: #f9fafb; /* Light background for the group */
padding-right: 0.5rem; /* Padding on the right for the button */
}

.share-link input {
flex: 1;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
border: none; /* No individual border, group has it */
font-size: 0.95rem;
background-color: transparent; /* Transparent background */
color: var(--foreground);
outline: none;
}

.share-link .btn-copy-link {
background-color: transparent; /* Transparent background for copy button */
color: var(--muted-foreground); /* Icon color */
border: none; /* No border */
padding: 0.5rem; /* Padding for the copy button */
border-radius: var(--radius-sm);
font-size: 1.25rem; /* Icon size */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}

.share-link .btn-copy-link:hover {
background-color: #e0e0e0; /* Light hover background */
color: var(--foreground);
}

/* Share Actions (Message Creator, Report Post) - improved UI */
.share-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem; /* Space above this section */
}

.btn-action {
background-color: var(--background); /* White background */
color: var(--foreground);
border: 1px solid var(--border); /* Subtle border */
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75rem; /* Increased gap between icon and text */
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
width: 100%; /* Full width */
justify-content: flex-start; /* Align content to start */
}

.btn-action:hover {
background-color: #f0f0f0; /* Light hover background */
border-color: #d0d0d0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow on hover */
}

.btn-action.btn-report:hover {
background-color: #fee2e2; /* Red-100 */
color: #ef4444; /* Red-500 */
border-color: #fca5a5; /* Red-300 */
}

/* Notification Styles (from previous turn, kept for completeness) */
#notification-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 10px;
}

.notification {
padding: 12px 20px;
border-radius: var(--radius-sm);
color: white;
font-weight: 500;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification.active {
opacity: 1;
transform: translateY(0);
}

.notification.success {
background-color: #10b981; /* Green-500 */
}

.notification.error {
background-color: #ef4444; /* Red-500 */
}

.notification.info {
background-color: #3b82f6; /* Blue-500 */
}

/* Responsive adjustments */
@media (max-width: 600px) {
.share-modal {
  padding: 1rem; /* Reduced padding on mobile */
  max-width: 95%; /* Take more width on smaller screens */
}
.share-modal-header {
  margin-bottom: 1rem;
}
.share-modal-header h3 {
  font-size: 1.25rem;
}
.share-social-grid {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* More flexible grid for mobile */
  gap: 0.5rem; /* Smaller gap */
}
.btn-social i {
  width: 48px; /* Slightly smaller icons on mobile */
  height: 48px;
  font-size: 1.6rem;
}
.btn-social span {
  font-size: 0.75rem; /* Smaller text labels */
}
.share-link input,
.btn-action {
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}
.share-link .btn-copy-link {
  font-size: 1.125rem;
  padding: 0.4rem;
}
}

@media (max-width: 400px) {
.share-social-grid {
  grid-template-columns: repeat(3, 1fr); /* Force 3 items per row on very small screens */
}
}

/* 👇 Compact Enhancements (preserve class names) */

.share-modal {
padding: 1.25rem;
max-width: 380px;
}

.share-modal-header h3 {
font-size: 1.25rem;
}

.close-btn {
width: 32px;
height: 32px;
font-size: 1rem;
}

.share-modal-body {
gap: 1.25rem;
}

/* Social section tweaks */
.share-social h4 {
margin-bottom: 0.5rem;
font-size: 0.95rem;
}

.share-social-grid {
gap: 0.5rem;
}

.btn-social {
max-width: 70px;
padding: 0.4rem 0;
}

.btn-social i {
width: 42px;
height: 42px;
font-size: 1.4rem;
margin-bottom: 0.3rem;
}

.btn-social span {
font-size: 0.72rem;
}

/* Link input tweaks */
.share-link {
margin-top: 0.5rem;
}

.share-link h4 {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}

.link-input-group {
padding-right: 0.4rem;
}

.share-link input {
padding: 0.6rem 0.9rem;
font-size: 0.85rem;
}

.share-link .btn-copy-link {
font-size: 1rem;
padding: 0.4rem;
}

/* Actions */
.share-actions {
gap: 0.6rem;
margin-top: 0.75rem;
}

.btn-action {
font-size: 0.875rem;
padding: 0.6rem 1rem;
gap: 0.5rem;
}

/* Responsive fine-tune */
@media (max-width: 600px) {
.share-modal {
  max-width: 95%;
  padding: 1rem;
}

.btn-social {
  max-width: 64px;
}

.btn-social i {
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}

.btn-social span {
  font-size: 0.68rem;
}

.share-link input,
.btn-action {
  font-size: 0.82rem;
  padding: 0.55rem 0.9rem;
}

.share-link .btn-copy-link {
  font-size: 1rem;
  padding: 0.35rem;
}
}
/* Section Dividers */
.section-divider {
border: none;
border-top: 1px solid var(--border);
margin: 1.25rem 0;
}

/* Circle icons for action buttons */
.btn-action .icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f0f0f0;
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}

/* Smaller icon circle for copy button */
.icon-circle.small {
width: 34px;
height: 34px;
font-size: 0.95rem;
}

/* Optional: enhance hover for icon buttons */
.btn-copy-link:hover .icon-circle,
.btn-action:hover .icon-circle {
background-color: #e0e0e0;
}

/* Hide span label for copy button for cleaner UI */
.btn-copy-link span:not(.icon-circle) {
display: none;
}

/* Comment Modal Styles */
.comment-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--background);
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
z-index: 1000;
display: none;
}

.comment-modal.active {
display: block;
}

.comment-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}

.comment-modal-header h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 500;
}

.comment-modal .close-btn {
background: none;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: var(--muted-foreground);
padding: 0.5rem;
border-radius: 9999px;
transition: background-color 0.2s;
}

.comment-modal .close-btn:hover {
background-color: var(--muted);
}

.comment-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1rem;
padding-right: 0.5rem;
}

.comment {
display: flex;
margin-bottom: 0.75rem;
}

.comment img {
width: 2rem;
height: 2rem;
border-radius: 50%;
margin-right: 0.75rem;
object-fit: cover;
}

.comment-content {
flex: 1;
}

.comment-content p {
margin: 0;
font-size: 0.875rem;
}

.comment-content .user-name {
font-weight: 500;
color: var(--foreground);
}

.comment-content .timestamp {
font-size: 0.75rem;
color: var(--muted-foreground);
}

.comment-input {
display: flex;
gap: 0.5rem;
}

.comment-input textarea {
flex: 1;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 0.875rem;
background-color: var(--background);
color: var(--foreground);
outline: none;
transition: border-color 0.2s;
resize: none;
min-height: 60px;
}

.comment-input textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.2);
}

.comment-input button {
padding: 0.5rem 1rem;
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}

.comment-input button:hover {
background-color: var(--primary-hover);
}

.comment-input button:disabled {
background-color: var(--muted);
color: var(--muted-foreground);
cursor: not-allowed;
}

/* Modal Overlay (Already exists, included for completeness) */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
padding: 1rem;
overflow-y: auto;
}

.modal-overlay.active {
display: flex;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
.share-modal {
  padding: 1rem;
  max-width: 95%;
  border-radius: 0;
}

.share-modal-header h3 {
  font-size: 1rem;
}

.share-link input,
.share-link button,
.share-social .btn-social {
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}
}
/* Responsive Adjustments */
@media (max-width: 640px) {
.comment-modal {
  padding: 1rem;
  max-width: 95%;
  border-radius: 0;
}

.comment-modal-header h3 {
  font-size: 1rem;
}

.comment img {
  width: 1.5rem;
  height: 1.5rem;
}

.comment-content p {
  font-size: 0.8rem;
}

.comment-content .timestamp {
  font-size: 0.7rem;
}

.comment-input textarea {
  min-height: 50px;
  font-size: 0.8rem;
}

.comment-input button {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}
}
.card.playing {
box-shadow: 0 0 0 2px var(--primary);
}

/* Full Modal */
.search-modal {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: var(--background);
z-index: 100;
transform: translateY(100%);
transition: transform 0.4s ease-in-out;
display: flex;
flex-direction: column;
overflow-y: auto;
}

.search-modal.active {
transform: translateY(0);
}

/* Header */
.search-modal-header {
display: flex;
align-items: center;
padding: 1rem;
gap: 1rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 101;
}

.search-modal-back {
background: none;
border: none;
font-size: 1.5rem;
color: var(--primary);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--radius);
transition: all 0.2s;
}

.search-modal-back:hover {
background-color: var(--muted);
transform: translateX(-4px);
}

.search-modal-input-wrapper {
position: relative;
flex: 1;
}

.search-modal-input-wrapper input {
width: 100%;
padding: 0.75rem 1rem;
padding-right: 2.5rem;
font-size: 1rem;
border-radius: var(--radius);
border: 1px solid var(--border);
background-color: var(--muted);
transition: border-color 0.2s, box-shadow 0.2s;
}

.search-modal-input-wrapper input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.search-icon {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
color: var(--muted-foreground);
pointer-events: none;
}

/* Body Content */
.search-modal-body {
flex: 1;
width: 100%;
max-width: 700px;
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
}

/* Section Blocks */
.search-section {
background: white;
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.search-section-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 1rem;
}

.search-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.search-history-item,
.suggestion-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
font-size: 1rem;
border-radius: var(--radius);
background: var(--muted);
cursor: pointer;
transition: background-color 0.2s;
}

.search-history-item:hover,
.suggestion-item:hover {
background-color: var(--border);
}

.search-history-item .text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.delete-button {
background: none;
border: none;
color: var(--muted-foreground);
font-size: 1rem;
padding: 0.25rem;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
}

.delete-button:hover {
background-color: var(--muted);
color: var(--destructive);
}

/* Button */
.see-more-btn {
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border: 1px solid var(--border);
background: transparent;
border-radius: var(--radius);
color: var(--primary);
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
align-self: center;
}

.see-more-btn:hover {
background-color: var(--muted);
border-color: var(--primary);
}

/* === Base Modal Behavior === */
.article-modal,
#article-modal-overlay {
display: none;
}

.article-modal.active,
#article-modal-overlay.active {
display: flex;
}

/* === Overlay === */
#article-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
justify-content: center;
align-items: center;
padding: 1rem;
}

/* === Modal Content === */
.article-modal {
background: #fff;
max-height: 100%;
overflow-y: auto;
z-index: 1001;
display: flex;
flex-direction: column;
padding: 2rem;
border-radius: 12px;
width: 100%;
max-width: 800px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* === Modal Header === */
.article-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #eee;
margin-bottom: 1rem;
}

.creator-info {
display: flex;
gap: 0.75rem;
align-items: center;
}

.creator-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
object-fit: cover;
}

.creator-name {
font-weight: 600;
}

/* === Article Title and Body === */
.article-title {
color: #111;
font-size: 1.75rem;
margin: 0 0 1rem;
}

.article-modal-body {
font-size: 1rem;
line-height: 1.6;
color: #333;
}

.article-modal-body img {
max-width: 100%;
border-radius: 8px;
margin: 1rem 0;
}

/* === Close Button === */
.close-btn {
background: #eee;
border: none;
font-size: 1.25rem;
color: #333;
border-radius: 999px;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
background: #ccc;
color: #000;
}

/* === Responsive Layout === */
@media (max-width: 768px) {
.article-modal {
  width: 100%;
  height: 100%;
  border-radius: 0;
  max-width: none;
  padding: 1.25rem 1rem;
}

.article-title {
  font-size: 1.25rem;
}

.close-btn {
  font-size: 1.5rem;
  padding: 0.3rem 0.6rem;
}

#article-modal-overlay {
  align-items: flex-start;
}
}

body.modal-open #app-wrapper {
filter: blur(5px) brightness(0.85);
transition: filter 0.3s ease;
}

body.modal-open {
overflow: hidden;
}

/* Base Display */
.video-modal,
#video-modal-overlay {
display: none !important; /* Ensure hidden by default */
}

.video-modal.active,
#video-modal-overlay.active {
display: flex !important; /* Ensure visible when active */
}

/* Overlay */
#video-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}

/* Modal Container */
.video-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
background: #fff;
width: 90%; /* Use percentage for responsiveness */
max-width: 960px;
max-height: 90vh;
z-index: 110000001;
flex-direction: column;
border-radius: 8px;
overflow-y: auto; /* Allow scrolling if content overflows */
}

/* Modal Header */
.video-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}

.video-title {
font-size: 1.25rem;
font-weight: 600;
}

.video-meta-info {
font-size: 0.875rem;
color: #666;
}

/* Modal Body */
.video-modal-body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}

#video-modal-player {
width: 100%;
height: auto; /* Maintain aspect ratio */
max-height: 70vh; /* Reduce to prevent overflow */
}

/* Close Button */
.close-btn {
background: #eee;
border: none;
font-size: 1.5rem;
color: #333;
border-radius: 999px;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background 0.2s ease;
}

.close-btn:hover {
background: #ccc;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.video-modal {
  width: 95%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#video-modal-player {
  max-height: 60vh; /* Adjust for smaller screens */
}
}

/* Base Display */
.image-modal,
#image-modal-overlay,
.gallery-modal,
#gallery-modal-overlay {
display: none !important;
}

.image-modal.active,
#image-modal-overlay.active,
.gallery-modal.active,
#gallery-modal-overlay.active {
display: flex !important;
}

/* Overlay */
#image-modal-overlay,
#gallery-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}

/* Modal Containers */
.image-modal,
.gallery-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 90%;
max-width: 800px;
max-height: 90vh;
z-index: 110000001;
flex-direction: column;
border-radius: 8px;
overflow-y: auto;
}

/* Modal Headers */
.image-modal-header,
.gallery-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}

.image-title,
.gallery-title {
font-size: 1.25rem;
font-weight: 600;
}

.image-meta-info,
.gallery-meta-info {
font-size: 0.875rem;
color: #666;
}

/* Modal Bodies */
.image-modal-body,
.gallery-modal-body {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background: #000;
}

.image-modal-body img,
.gallery-modal-body img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
border-radius: 8px;
}

/* Gallery Carousel */
.gallery-carousel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 0.5rem;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s ease;
}

.carousel-btn:hover {
background: rgba(0, 0, 0, 0.7);
}

.carousel-btn.disabled {
background: rgba(0, 0, 0, 0.3);
cursor: not-allowed;
}

.prev-btn {
left: 1rem;
}

.next-btn {
right: 1rem;
}

.gallery-thumbnails {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem;
background: #f5f5f5;
}

.gallery-thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease;
}

.gallery-thumbnails img.active {
opacity: 1;
border: 2px solid #007bff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.image-modal,
.gallery-modal {
  width: 95%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image-modal-body img,
.gallery-modal-body img {
  max-height: 60vh;
}

.gallery-thumbnails img {
  width: 40px;
  height: 40px;
}
}
/* New Modal Specific Styles */

/* Ensure hidden class always takes precedence */
.hidden {
display: none !important;
}

/* Overrides for modal-overlay to ensure it's full-screen and uses your z-index */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5); /* Matches your existing rgba(0,0,0,0.5) */
display: none; /* Hidden by default, controlled by JS */
align-items: center;
justify-content: center;
z-index: 1000; /* Matches your existing modal-overlay z-index */
padding: 1rem; /* p-4 */
overflow-y: auto; /* Allow scrolling if content overflows */
}

/* Active state for modal-overlay, controlled by JS */
.modal-overlay.flex {
display: flex;
}

/* Main Modal Content Container */
.modal-content {
position: relative;
width: 100%;
height: 100%;
background-color: var(--background); /* bg-white */
display: flex;
flex-direction: column;
overflow: hidden;
/* Default for mobile: full screen, no rounded corners or shadow */
}

/* Modal Body Padding */
.modal-body {
padding: 1rem; /* p-4 */
}

/* Section Titles within Modals */
.section-title {
font-size: 1.125rem; /* text-lg */
font-weight: 500; /* font-medium */
margin-bottom: 0.5rem; /* mb-2 */
color: var(--foreground); /* text-gray-700, mapped to foreground */
}

/* Specific Avatar Sizes for Modal Content */
.avatar-sm {
width: 2rem; /* 32px */
height: 2rem; /* 32px */
border-radius: 9999px; /* rounded-full */
object-fit: cover;
}

.avatar-md {
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
border-radius: 9999px; /* rounded-full */
object-fit: cover;
}

/* Hover states for list items in modals */
.hover-bg-muted:hover {
background-color: var(--muted); /* hover:bg-gray-50 or hover:bg-gray-100 */
}

/* Chat View Specific Styles */
.chat-view {
display: flex; /* Controlled by JS, but default to flex for structure */
flex-direction: column;
height: 100%;
}

.chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--border);
background-color: var(--background);
}

.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem; /* space-y-4 */
}

.message {
max-width: 80%;
padding: 0.75rem 1rem;
border-radius: 0.75rem; /* 12px */
line-height: 1.4;
}

.message p {
margin-bottom: 0.25rem; /* Small gap between text and timestamp */
}

.message .timestamp {
display: block;
text-align: right;
font-size: 0.75rem; /* text-xs */
color: var(--muted-foreground);
}

.message.sent {
align-self: flex-end;
background-color: var(--primary); /* Example: a primary color for sent messages */
color: var(--primary-foreground);
border-bottom-right-radius: 0.25rem; /* Slightly less rounded on one corner */
}

.message.received {
align-self: flex-start;
background-color: var(--muted); /* Example: a muted background for received messages */
color: var(--foreground);
border-bottom-left-radius: 0.25rem; /* Slightly less rounded on one corner */
}

.chat-input-area {
display: flex;
gap: 0.5rem; /* gap-2 */
padding: 1rem; /* p-4 */
border-top: 1px solid var(--border);
background-color: var(--background);
}

.chat-input-area .input {
flex: 1;
padding: 0.75rem 1rem; /* Adjust padding for better fit */
border-radius: var(--radius);
border: 1px solid var(--border);
background-color: var(--background);
color: var(--foreground);
outline: none;
}

.chat-input-area .input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.2);
}

/* Responsive Styles for Larger Screens (md: breakpoint - 768px) */
@media (min-width: 768px) {
.modal-content {
  max-width: 42rem; /* md:max-w-2xl (672px) */
  max-height: 80vh; /* md:max-h-[80vh] */
  border-radius: var(--radius); /* md:rounded-lg, using your radius variable */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* md:shadow-lg */
}
}

/* Earnings Section Specific Styles */
#earnings-section table {
width: 100%;
border-collapse: collapse;
}

#earnings-section th,
#earnings-section td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
}

#earnings-section th {
background-color: var(--muted);
font-weight: 600;
color: var(--muted-foreground);
text-transform: uppercase;
font-size: 0.75rem;
}

#earnings-section tbody tr:last-child td {
border-bottom: none;
}

#earnings-section tbody tr:hover {
background-color: var(--muted);
}

#earnings-section .transaction-amount.positive {
color: #10b981; /* Green-500 */
font-weight: 500;
}

#earnings-section .transaction-amount.negative {
color: #ef4444; /* Red-500 */
font-weight: 500;
}

#earnings-section .transaction-status.completed {
color: #10b981; /* Green-500 */
font-weight: 500;
}

#earnings-section .transaction-status.pending {
color: #ccff00; /* Amber-500 */
font-weight: 500;
}

#earnings-section .transaction-status.failed {
color: #ef4444; /* Red-500 */
font-weight: 500;
}

/* Responsive adjustments for table */
@media (max-width: 768px) {
#earnings-section table,
#earnings-section thead,
#earnings-section tbody,
#earnings-section th,
#earnings-section td,
#earnings-section tr {
  display: block;
}

#earnings-section thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#earnings-section tr {
  border: 1px solid var(--border);
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
}

#earnings-section td {
  border: none;
  position: relative;
  padding-left: 50%;
  text-align: right;
}

#earnings-section td::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  width: 45%;
  padding-left: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--muted-foreground);
}

#earnings-section td:last-child {
  border-bottom: none;
}
}

/* Subscription Tiers Card */
/* 1. Add the following styles for `.tier-card`: */
.tier-card {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
background-color: var(--background);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow 0.2s, transform 0.2s;
}

.tier-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}

.tier-card .tier-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.tier-card .tier-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--foreground);
}

.tier-card .tier-price {
font-size: 2.25rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}

.tier-card .tier-price span {
font-size: 1rem;
font-weight: 500;
color: var(--muted-foreground);
}

.tier-card .tier-description {
font-size: 0.875rem;
color: var(--muted-foreground);
margin-bottom: 1rem;
flex-grow: 1;
}

.tier-card .tier-features {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
}

.tier-card .tier-feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--foreground);
margin-bottom: 0.5rem;
}

.tier-card .tier-feature-item i {
color: var(--primary);
}

.tier-card .tier-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}

.tier-card .tier-actions .btn {
flex: 1;
}

/* Responsive adjustments for tier cards */
@media (max-width: 640px) {
.tier-card {
  padding: 1rem;
}
.tier-card .tier-title {
  font-size: 1.25rem;
}
.tier-card .tier-price {
  font-size: 1.75rem;
}
.tier-card .tier-description,
.tier-card .tier-feature-item {
  font-size: 0.8125rem;
}
}

@media (max-width: 480px) {
.tier-card .tier-actions {
  flex-direction: column;
}
}

/* Styles for trending tags and content type badges */
/* 3. Add the following styles for `.trending-tag` and `.content-type-badge`: */
.trending-tag,
.content-type-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
}

.trending-tag:hover,
.content-type-badge:hover {
background-color: var(--accent);
cursor: pointer;
}

.trending-tag.active,
.content-type-badge.active {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: transparent;
}

/* Loader Styles (from login page) */
.loader-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 10;
}

.loader-container.active {
  display: block;
}

.lds-ripple,
.lds-ripple div {
  box-sizing: border-box;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 60px;
  color: var(--primary);
}

.lds-ripple div {
  position: absolute;
  border: 3px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
      top: 27px;
      left: 27px;
      width: 6px;
      height: 6px;
      opacity: 0;
  }
  4.9% {
      top: 27px;
      left: 27px;
      width: 6px;
      height: 6px;
      opacity: 0;
  }
  5% {
      top: 27px;
      left: 27px;
      width: 6px;
      height: 6px;
      opacity: 1;
  }
  100% {
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      opacity: 0;
  }
}

/* Add to modal content for dimming effect */
.modal-content.loading,
.edit-profile-modal-content.loading {
  opacity: 0.5;
  pointer-events: none; /* Disable interactions */
}

/* Avatar Dropdown Menu Styles */
.avatar-dropdown-menu {
position: absolute;
top: calc(100% + 0.5rem); /* Position below the avatar button */
right: 0;
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
z-index: 50; /* Ensure it's above other header elements */
min-width: 180px;
padding: 0.5rem;
display: none; /* Hidden by default */
flex-direction: column;
}

.avatar-dropdown-menu.active {
display: flex; /* Show when active */
}

.dropdown-user-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
margin-bottom: 0.5rem;
}

.dropdown-user-info .avatar-md {
width: 2.5rem;
height: 2.5rem;
}

.dropdown-user-info .font-semibold {
font-weight: 600;
color: var(--foreground);
}

.dropdown-user-info .text-xs {
font-size: 0.75rem;
color: var(--muted-foreground);
}

.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
color: var(--foreground);
}

.dropdown-item:hover {
background-color: var(--muted);
}

.dropdown-item i {
font-size: 1.125rem;
width: 1.125rem;
text-align: center;
color: var(--muted-foreground); /* Default icon color */
}

/* Specific icon colors for dropdown items */
.dropdown-item[data-section="subscribers"] i {
color: #3b82f6; /* Blue */
}
.dropdown-item[data-section="earnings"] i {
color: #10b981; /* Green */
}
.dropdown-item[data-section="creator"] i {
color: var(--primary); /* Primary color */
}
.dropdown-item[href="explore.html"] i {
color: #ccff00; /* Amber */
}

.section-divider {
border: none;
border-top: 1px solid var(--border);
margin: 0.5rem 0;
}


/* Tier Modal Specific Styling - Using Original Class Names */
#tier-modal-overlay.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    padding: 1rem;
}

#tier-modal-overlay.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

#tier-modal-overlay .modal-content.edit-tier-modal-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 
                0 0 0 1px rgba(224, 224, 224, 0.1);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid #e0e0e0;
    animation: tierModalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tierModalSlideIn {
    from {
        transform: translateY(-40px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Tier Modal Close Button */
#tier-modal-overlay #close-tier-modal.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6e6e6e;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

#tier-modal-overlay #close-tier-modal.modal-close:hover {
    background-color: #f5f5f5;
    color: #121212;
    transform: scale(1.1);
}

/* Tier Modal Title */
#tier-modal-overlay #tier-modal-title.modal-title {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #121212;
    line-height: 1.3;
    padding-right: 3rem;
}

/* Tier Form Styling */
#tier-modal-overlay #tier-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#tier-modal-overlay #tier-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#tier-modal-overlay #tier-form .form-group label {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #121212;
    margin: 0;
}

/* Tier Form Inputs */
#tier-modal-overlay #tier-name-input,
#tier-modal-overlay #tier-price-input,
#tier-modal-overlay #tier-interval-select,
#tier-modal-overlay #tier-description-input,
#tier-modal-overlay #tier-features-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #121212;
    background-color: #ffffff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#tier-modal-overlay #tier-name-input:focus,
#tier-modal-overlay #tier-price-input:focus,
#tier-modal-overlay #tier-interval-select:focus,
#tier-modal-overlay #tier-description-input:focus,
#tier-modal-overlay #tier-features-input:focus {
    outline: none;
    border-color: #ccff00;
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.1);
    transform: translateY(-1px);
}

#tier-modal-overlay #tier-description-input {
    resize: vertical;
    min-height: 5rem;
    line-height: 1.5;
}

#tier-modal-overlay #tier-interval-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: 2.5rem;
    appearance: none;
}

/* Tier Modal Button Container */
#tier-modal-overlay .flex.gap-4 {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

/* Tier Modal Buttons */
#tier-modal-overlay #cancel-tier-btn.btn,
#tier-modal-overlay #tier-save-btn.btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 6rem;
    text-align: center;
}

#tier-modal-overlay #cancel-tier-btn.btn.btn-outline {
    background-color: transparent;
    color: #121212;
    border: 2px solid #e0e0e0;
}

#tier-modal-overlay #cancel-tier-btn.btn.btn-outline:hover {
    background-color: #f5f5f5;
    border-color: #6e6e6e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#tier-modal-overlay #tier-save-btn.btn.btn-primary {
    background-color: #ccff00;
    color: #121212;
    border: 2px solid #ccff00;
    box-shadow: 0 2px 8px rgba(204, 255, 0, 0.2);
}

#tier-modal-overlay #tier-save-btn.btn.btn-primary:hover {
    background-color: #d97706;
    border-color: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(204, 255, 0, 0.3);
}

#tier-modal-overlay #tier-save-btn.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(204, 255, 0, 0.2);
}

/* Responsive Design for Tier Modal */
@media (max-width: 640px) {
    #tier-modal-overlay .modal-content.edit-tier-modal-content {
        margin: 0;
        padding: 1.5rem;
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
    
    #tier-modal-overlay #tier-modal-title.modal-title {
        font-size: 1.25rem;
        padding-right: 2.5rem;
    }
    
    #tier-modal-overlay #close-tier-modal.modal-close {
        top: 1rem;
        right: 1rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.25rem;
    }
    
    #tier-modal-overlay .flex.gap-4 {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    #tier-modal-overlay #cancel-tier-btn.btn,
    #tier-modal-overlay #tier-save-btn.btn {
        width: 100%;
        padding: 1rem;
    }
}

/* Focus and Accessibility for Tier Modal */
#tier-modal-overlay .modal-content.edit-tier-modal-content:focus-within {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 
                0 0 0 1px rgba(224, 224, 224, 0.1),
                0 0 0 4px rgba(204, 255, 0, 0.1);
}

/* Smooth scrollbar for tier modal content */
#tier-modal-overlay .modal-content.edit-tier-modal-content::-webkit-scrollbar {
    width: 6px;
}

#tier-modal-overlay .modal-content.edit-tier-modal-content::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

#tier-modal-overlay .modal-content.edit-tier-modal-content::-webkit-scrollbar-thumb {
    background: #6e6e6e;
    border-radius: 3px;
}

#tier-modal-overlay .modal-content.edit-tier-modal-content::-webkit-scrollbar-thumb:hover {
    background: #121212;
}


  /* Notification styles */
#notification {
  transition: opacity 0.3s ease-in-out;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#notification.bg-green-500 {
  background-color: #22c55e; /* Tailwind's green-500 */
}

#notification.bg-red-500 {
  background-color: #ef4444; /* Tailwind's red-500 */
}

#notification.hidden {
  opacity: 0;
  height: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* Loading indicator styles */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #1f2937; /* Tailwind's gray-800 */
}

#loading svg {
  width: 1.25rem;
  height: 1.25rem;
}

#loading.hidden {
  display: none;
}

/* Ensure form elements are disabled properly during loading */
#payout-settings-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #notification {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
  
  #loading {
    font-size: 0.75rem;
  }
  
  #loading svg {
    width: 1rem;
    height: 1rem;
  }
}

/* === Performance Modal (Custom Isolated Styles) === */
#performanceModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.8); /* darker overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1rem;
  overflow-y: auto;
}
#performanceModalOverlay.active {
  display: flex;
}

/* Modal Container */
#performanceModal {
  background: var(--background);
  color: var(--foreground);
  border-radius: 1rem;
  width: 100%;
  max-width: 56rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s ease-out;
  font-family: var(--font-sans);
}

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

/* Close Button */
#performanceModal .modal-close {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
#performanceModal .modal-close:hover {
  color: var(--foreground);
}

/* Title */
#performanceModal h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: -0.5px;
  color: var(--foreground);
}

/* Metrics Grid */
#performanceModal .performance-metrics {
  display: grid;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 640px) {
  #performanceModal .performance-metrics {
    gap: 1.5rem;
  }
}

/* Metric Card */
#performanceModal .metric-card {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border);
}
#performanceModal .metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* Metric Icon */
#performanceModal .metric-card i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--primary);
}

/* Metric Value */
#performanceModal .metric-card p:first-of-type {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--secondary);
}

/* Metric Label */
#performanceModal .metric-card .text-sm {
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
/* === Subscribers Modal (Card / Collapsible Layout) === */
#subscribersModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1rem;
  overflow-y: auto;
}
#subscribersModalOverlay.active {
  display: flex;
}

#subscribersModal {
  background: var(--background);
  color: var(--foreground);
  border-radius: 1rem;
  width: 100%;
  max-width: 40rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: fadeInUp 0.3s ease-out;
}

#subscribersModal h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Subscriber Card */
#subscribersModal .subscriber-card {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

#subscribersModal .subscriber-summary {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

#subscribersModal .subscriber-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  margin-right: 0.75rem;
}

#subscribersModal .subscriber-info {
  flex: 1;
}
#subscribersModal .subscriber-name {
  font-weight: 600;
}
#subscribersModal .days-left {
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

#subscribersModal .toggle-details {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
#subscribersModal .toggle-details.open {
  transform: rotate(180deg);
}

#subscribersModal .subscriber-details {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--background);
}

#subscribersModal .subscriber-details p {
  margin: 0.25rem 0;
}

#subscribersModal .actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
#subscribersModal .action-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
#subscribersModal .action-btn:hover {
  background: var(--primary-hover);
}