* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  border-radius: 0 !important;
}

/* Keep rounded corners for calendar day cards */
.day-card,
.calendar-day {
  border-radius: 16px !important;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

:root {
  --today-text: 'TODAY';
}

/* ===== DEFAULT DESKTOP STYLES (1200px+) ===== */
/* These are the base styles optimized for desktop */
body {
  font-size: 16px;
  line-height: 1.6;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 20px 20px;
  min-height: 100vh;
  background: transparent;
}

/* ===== BASE STYLES ===== */
* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
}

main {
  overflow-y: auto;
  min-height: 100vh;
}

/* ===== CALENDAR SECTION CONSOLIDATED ===== */
.calendar-container {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  background: transparent;
}

.calendar-section {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #4a1f3b;
  padding: 20px;
  flex: 1;
  margin: 0;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  overflow-x: visible;
  z-index: 1;
  transition: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 800px;
}

/* ===== EVENT SIDEBAR ===== */
.event-sidebar {
  width: 320px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  height: 800px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.sidebar-header h3 {
  font-size: 18px;
  font-weight: 300;
  color: #4a1f3b;
  margin: 0;
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #4a1f3b;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 5px;
}

.sidebar-toggle:hover {
  opacity: 1;
}

.event-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  padding-right: 5px;
}

/* Custom scrollbar for event list */
.event-list::-webkit-scrollbar {
  width: 6px;
}

.event-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.event-list::-webkit-scrollbar-thumb {
  background: rgba(255, 130, 170, 0.3);
  border-radius: 3px;
}

.event-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 130, 170, 0.5);
}

/* Event date groups */
.event-date-group {
  margin-bottom: 16px;
}

.event-date-header {
  font-size: 12px;
  font-weight: 300;
  color: #b17696;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(255, 130, 170, 0.1);
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-item {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 130, 170, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.event-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(255, 130, 170, 0.2);
}

.event-item-title {
  font-size: 14px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item-loved {
  font-size: 12px;
  color: #e11d48;
  margin-top: 4px;
}

.event-item.anniversary {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(255, 130, 170, 0.1));
  border-color: rgba(255, 130, 170, 0.3);
}

.event-item.mensiversary {
  background: linear-gradient(135deg, rgba(255, 218, 185, 0.2), rgba(255, 182, 193, 0.1));
  border-color: rgba(255, 182, 193, 0.3);
}

.event-item.birthday {
  background: linear-gradient(135deg, rgba(255, 223, 186, 0.2), rgba(255, 193, 7, 0.1));
  border-color: rgba(255, 193, 7, 0.3);
}

.event-item.newyear {
  background: linear-gradient(135deg, rgba(186, 255, 201, 0.2), rgba(76, 175, 80, 0.1));
  border-color: rgba(76, 175, 80, 0.3);
}

.event-item.post {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 240, 245, 0.2));
  border-color: rgba(255, 182, 193, 0.3);
}

.event-item-date {
  font-size: 14px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 4px;
}

.event-item-title {
  font-size: 16px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item-days {
  font-size: 12px;
  color: #666;
}

.event-item.urgent .event-item-days {
  color: #e74c3c;
  font-weight: 300;
}

/* Event highlight animation */
.day-card.highlighted {
  animation: eventHighlight 2s ease-in-out;
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(255, 107, 157, 0.8);
  z-index: 10;
}

@keyframes eventHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 107, 157, 0.8);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(255, 107, 157, 1);
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 107, 157, 0.8);
  }
}

/* ===== HEADER NAVIGATION RESPONSIVE ===== */

/* ===== OPTIMIZED DESKTOP DEFAULT (1200px - 1440px) ===== */
/* Standard Desktop (1200px - 1440px) - Most Common Resolution */
@media (min-width: 1200px) and (max-width: 1440px) {
  /* Main Container Optimization */
  body {
    font-size: 16px;
  }
  
  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px 20px;
  }
  
  .calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
    padding: 0;
  }
  
  .calendar-section {
    padding: 20px;
    height: 800px;
  }
  
  .event-sidebar {
    width: 320px;
    height: 800px;
    padding: 20px;
  }
  
  /* Calendar Grid Optimization */
  .calendar-grid {
    width: 900px;
    height: 750px;
    max-width: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    gap: 12px;
  }
  
  .day-card {
    padding: 10px;
    border-radius: 10px;
  }
  
  .day-number {
    font-size: 32px;
  }
  
  .day-name {
    font-size: 13px;
  }
  
  /* Header Optimization */
  .calendar-header {
    padding: 0 24px;
    margin-bottom: 24px;
  }
  
  .calendar-title h2 {
    font-size: 32px;
  }
  
  .weekday-row {
    padding: 0 24px;
    gap: 14px;
  }
  
  .weekday {
    font-size: 15px;
    padding: 6px 8px;
  }
  
  /* Navigation */
  .nav-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .month-display {
    font-size: 16px;
  }
  
  /* Event List Optimization */
  .event-item {
    padding: 12px;
    margin-bottom: 8px;
  }
  
  .event-item-title {
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem); /* 14px to 15px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .event-item-date {
    font-size: clamp(0.75rem, 2vw, 0.8125rem); /* 12px to 13px */
  }
  
  .event-item-days {
    font-size: clamp(0.625rem, 1.5vw, 0.75rem); /* 10px to 12px */
  }
}

/* Extra Large Screens (1600px and above) */
@media (min-width: 1600px) {
  .main-header {
    height: 90px;
    padding: 15px 40px;
  }
  
  .nav-brand {
    flex: 0 0 auto;
    margin-right: 40px;
  }
  
  .brand-title {
    font-size: 28px;
  }
  
  .brand-subtitle {
    font-size: 16px;
  }
  
  .nav-menu {
    gap: 15px;
  }
  
  .nav-item {
    padding: 12px 20px;
    min-width: 120px;
  }
  
  .nav-icon {
    font-size: 22px;
  }
  
  .nav-text {
    font-size: 15px;
  }
}

/* Large Desktop (1200px - 1599px) */
@media (max-width: 1599px) {
  .main-header {
    height: 85px;
    padding: 12px 30px;
  }
  
  .brand-title {
    font-size: 24px;
  }
  
  .brand-subtitle {
    font-size: 14px;
  }
  
  .nav-menu {
    gap: 12px;
  }
  
  .nav-item {
    min-width: 100px;
  }
}

/* Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
  .main-header {
    height: 80px;
    padding: 10px 25px;
  }
  
  .nav-brand {
    margin-right: 30px;
  }
  
  .brand-title {
    font-size: 22px;
  }
  
  .brand-subtitle {
    font-size: 13px;
  }
  
  .nav-menu {
    gap: 10px;
  }
  
  .nav-item {
    padding: 10px 15px;
    min-width: 90px;
  }
  
  .nav-icon {
    font-size: 20px;
  }
  
  .nav-text {
    font-size: 14px;
  }
}

/* Tablet Landscape (768px - 1023px) */
@media (max-width: 1023px) {
  .main-header {
    height: 75px;
    padding: 10px 20px;
  }
  
  .header-nav {
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
  }
  
  .nav-brand {
    flex: 0 0 auto;
    margin-right: 20px;
  }
  
  .brand-title {
    font-size: 20px;
  }
  
  .brand-subtitle {
    font-size: 12px;
  }
  
  .nav-menu {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .nav-menu::-webkit-scrollbar {
    display: none;
  }
  
  .nav-item {
    padding: 8px 12px;
    min-width: 80px;
    flex-shrink: 0;
  }
  
  .nav-icon {
    font-size: 18px;
  }
  
  .nav-text {
    font-size: 13px;
  }
  
  .nav-item.nav-action {
    margin-left: 5px;
  }
}

/* Tablet Portrait (600px - 767px) */
@media (max-width: 767px) {
  .main-header {
    height: 70px;
    padding: 8px 15px;
  }
  
  .header-nav {
    flex-direction: column;
    gap: 5px;
    height: 100%;
    width: 100%;
  }
  
  .nav-brand {
    margin-right: 0;
    text-align: center;
  }
  
  .brand-title {
    font-size: 18px;
  }
  
  .brand-subtitle {
    font-size: 11px;
    margin-bottom: 2px;
  }
  
  .nav-menu {
    justify-content: center;
    gap: 6px;
    width: 100%;
  }
  
  .nav-item {
    padding: 8px 10px;
    min-width: 70px;
  }
  
  .nav-icon {
    font-size: 16px;
  }
  
  .nav-text {
    font-size: 11px;
  }
  
  .nav-item.nav-action {
    margin-left: 3px;
    background: rgba(255, 255, 255, 0.15);
  }
  
  .nav-item.nav-action .nav-text {
    display: none;
  }
  
  .notification-badge {
    top: -4px;
    right: -4px;
    font-size: 9px;
    min-width: 16px;
  }
}

/* Mobile Large (480px - 599px) */
@media (max-width: 599px) {
  .main-header {
    height: 65px;
    padding: 8px 12px;
  }
  
  .brand-title {
    font-size: 16px;
  }
  
  .brand-subtitle {
    font-size: 10px;
  }
  
  .nav-menu {
    gap: 4px;
  }
  
  .nav-item {
    padding: 6px 8px;
    min-width: 60px;
  }
  
  .nav-icon {
    font-size: 15px;
  }
  
  .nav-text {
    font-size: 10px;
  }
  
  .nav-item:not(.nav-action) .nav-text {
    display: none;
  }
  
  .nav-item.nav-action {
    margin-left: 2px;
    padding: 6px;
    border-radius: 15px;
  }
  
  .nav-item.nav-action .nav-icon {
    font-size: 14px;
  }
  
  .notification-badge {
    top: -3px;
    right: -3px;
    font-size: 8px;
    padding: 1px 3px;
    min-width: 14px;
  }
}

/* Mobile Medium (400px - 479px) */
@media (max-width: 479px) {
  .main-header {
    height: 60px;
    padding: 6px 10px;
  }
  
  .brand-title {
    font-size: 15px;
  }
  
  .brand-subtitle {
    display: none;
  }
  
  .nav-menu {
    gap: 3px;
  }
  
  .nav-item {
    padding: 5px 6px;
    min-width: 50px;
  }
  
  .nav-icon {
    font-size: 14px;
  }
  
  .nav-item.nav-action {
    padding: 5px;
    border-radius: 12px;
  }
  
  .nav-item.nav-action .nav-icon {
    font-size: 13px;
  }
}

/* Mobile Small (360px - 399px) */
@media (max-width: 399px) {
  .main-header {
    height: 55px;
    padding: 5px 8px;
  }
  
  .brand-title {
    font-size: 14px;
  }
  
  .nav-menu {
    gap: 2px;
  }
  
  .nav-item {
    padding: 4px 5px;
    min-width: 45px;
  }
  
  .nav-icon {
    font-size: 13px;
  }
  
  .nav-item.nav-action {
    padding: 4px;
  }
  
  .nav-item.nav-action .nav-icon {
    font-size: 12px;
  }
  
  .notification-badge {
    top: -2px;
    right: -2px;
    font-size: 7px;
    min-width: 12px;
  }
}

/* Ultra Small (below 360px) */
@media (max-width: 359px) {
  .main-header {
    height: 50px;
    padding: 4px 6px;
  }
  
  .brand-title {
    font-size: 13px;
  }
  
  .nav-menu {
    gap: 1px;
  }
  
  .nav-item {
    padding: 3px 4px;
    min-width: 40px;
  }
  
  .nav-icon {
    font-size: 12px;
  }
  
  .nav-item.nav-action {
    padding: 3px;
  }
  
  .nav-item.nav-action .nav-icon {
    font-size: 11px;
  }
  
  .notification-badge {
    top: -2px;
    right: -2px;
    font-size: 6px;
    min-width: 10px;
    padding: 0 2px;
  }
}

/* Landscape orientations */
@media (max-height: 500px) and (orientation: landscape) {
  .main-header {
    height: 50px;
    padding: 5px 10px;
  }
  
  .brand-subtitle {
    display: none;
  }
  
  .nav-item {
    padding: 6px 10px;
  }
  
  .nav-text {
    font-size: 11px;
  }
}

/* 2K / QHD Resolution (2560x1440) Optimization */
@media (min-width: 2560px) {
  /* Main Container */
  .main-content {
    max-width: 1800px;
  }
  
  .calendar-container {
    max-width: 1600px;
    gap: 40px;
  }
  
  .calendar-section {
    padding: 30px;
    height: 1100px;
  }
  
  .event-sidebar {
    width: 400px;
    height: 1100px;
    padding: 30px;
  }
  
  /* Calendar Grid */
  .calendar-grid {
    width: 1200px;
    height: 1000px;
    max-width: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    gap: 20px;
    padding: 0 40px;
  }
  
  /* Typography */
  .calendar-title h2 {
    font-size: 42px;
  }
  
  .calendar-title span {
    font-size: 18px;
  }
  
  .weekday {
    font-size: 18px;
    padding: 8px 12px;
  }
  
  .day-number {
    font-size: 42px;
  }
  
  .day-name {
    font-size: 16px;
  }
  
  /* Day Cards */
  .day-card {
    padding: 15px;
    border-radius: 15px;
  }
  
  /* Navigation */
  .nav-btn {
    padding: 12px 20px;
    font-size: 16px;
  }
  
  .month-display {
    font-size: 20px;
  }
  
  /* Event List */
  .event-item {
    padding: 15px;
    margin-bottom: 10px;
  }
  
  .event-item-title {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .event-item-date {
    font-size: 15px;
  }
  
  .event-item-days {
    font-size: 14px;
  }
  
  .sidebar-header h3 {
    font-size: 22px;
  }
  
  /* Floating Navigation */
  .floating-nav {
    top: 20px;
    padding: 10px;
    border-radius: 28px;
  }
  
  .floating-nav .nav-menu {
    gap: 8px;
  }
  
  .floating-nav .nav-item {
    padding: 10px 16px;
    min-width: 70px;
    border-radius: 16px;
  }
  
  .floating-nav .nav-icon {
    font-size: 22px;
    margin-bottom: 4px;
  }
  
  .floating-nav .nav-text {
    font-size: 12px;
  }
  
  .floating-nav .nav-item.nav-action {
    border-radius: 20px;
  }
  
  .floating-nav .notification-badge {
    top: -8px;
    right: -8px;
    font-size: 12px;
    padding: 4px 8px;
    min-width: 24px;
  }
}

/* Print styles */
@media print {
  .main-header {
    display: none;
  }
}

/* ===== MOBILE-FIRST IMPROVEMENTS ===== */
/* Mobile Menu Styles */
@media (max-width: 767px) {
  /* Ensure full viewport height */
  html, body {
    height: 100vh;
    overflow-x: hidden;
  }
  
  /* Main content adjustments */
  .main-content {
    width: 100vw !important;
    min-height: 100vh !important;
    padding: 4rem 0.5rem 1rem !important;
    margin: 0 !important;
  }
  
  /* Calendar container full width */
  .calendar-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    gap: 1rem !important;
  }
  
  /* Calendar section adjustments */
  .calendar-section {
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    height: auto !important;
    min-height: 60vh !important;
  }
  
  /* Calendar grid responsive */
  .calendar-grid {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 7/6 !important;
    max-height: 60vh !important;
    padding: 0 !important;
    gap: 0.25rem !important;
  }
  
  /* Event sidebar full width */
  .event-sidebar {
    width: 100% !important;
    margin: 1rem 0 0 !important;
    padding: 1rem 0.5rem !important;
    order: 1 !important;
    max-height: calc(35vh + 100px) !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure calendar container and sidebar have same padding */
  .calendar-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Calendar header adjustments */
  .calendar-header {
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  .weekday-row {
    padding: 0 !important;
    gap: 0.25rem !important;
  }
  
  /* Responsive Navigation Breakpoint */
@media (max-width: 768px) {
  /* Hide floating nav by default on mobile */
  .floating-nav {
    display: none !important;
  }
  
  /* Show hamburger toggle */
  .mobile-menu-toggle {
    display: flex !important;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: 4px;
  }
  
  .mobile-menu-toggle:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
  }
  
  .mobile-menu-toggle:active {
    transform: scale(0.95);
  }
  
  /* Bento menu dots */
  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after {
    content: '';
    display: flex;
    gap: 4px;
  }
  
  .mobile-menu-toggle::before {
    content: '• • •';
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 2px;
    line-height: 1;
  }
  
  .mobile-menu-toggle::after {
    content: '• • •';
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 2px;
    line-height: 1;
  }
  
  .mobile-menu-toggle.active {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.3);
  }
  
  .mobile-menu-toggle.active::before {
    content: '×';
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: 0;
  }
  
  .mobile-menu-toggle.active::after {
    content: '';
  }
  
  /* Mobile Navigation Bar */
  .mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 360px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }
  
  .mobile-nav .nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
  }
  
  .mobile-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #666;
    font-size: 10px;
    font-weight: 300;
    white-space: nowrap;
  }
  
  .mobile-nav .nav-item i {
    font-size: 18px;
    margin-bottom: 2px;
    color: #999;
    transition: all 0.3s ease;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-nav .nav-item.active {
    background: rgba(255, 95, 159, 0.15);
    color: #ff5f9f;
  }
  
  .mobile-nav .nav-item.active i {
    color: #ff5f9f;
  }
  
  .mobile-nav .nav-item:hover {
    background: rgba(255, 95, 159, 0.1);
    color: #ff5f9f;
  }
  
  .mobile-nav .nav-item:hover i {
    color: #ff5f9f;
    transform: translateY(-1px);
  }
  
  .mobile-nav .nav-item:active {
    transform: scale(0.95);
  }
  
  .mobile-nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .mobile-nav-menu .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .mobile-nav-menu .nav-row {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }
  
  .mobile-nav-menu .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.875rem;
    background: rgba(255, 130, 170, 0.08);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: #4a1f3b !important;
    font-weight: 300;
    font-size: 0.75rem;
    min-height: 3.5rem;
    position: relative;
    flex: 1;
  }
  
  .mobile-nav-menu .nav-item:hover {
    background: rgba(255, 130, 170, 0.15);
    border-color: rgba(255, 130, 170, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 130, 170, 0.1);
  }
  
  .mobile-nav-menu .nav-item.active {
    background: linear-gradient(135deg, #ff7fa8 0%, #ff6b9d 100%);
    color: white !important;
    border-color: rgba(255, 107, 157, 0.5);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.25);
  }
  
  .mobile-nav-menu .nav-item .nav-icon {
    font-size: 1.5rem;
    width: auto;
    height: 1.5rem;
    text-align: center;
    flex-shrink: 0;
  }
  
  .mobile-nav-menu .nav-item .nav-text {
    font-weight: 300;
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  
  .mobile-nav-menu .nav-item.nav-action {
    background: transparent;
    border-color: transparent;
  }
  
  .mobile-nav-menu .nav-item.nav-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
  }
  
  /* Notification badge */
  .mobile-nav-menu .notification-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background: #e74c3c;
    color: white;
    font-size: 0.625rem;
    font-weight: 300;
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    min-width: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .mobile-nav-menu .notification-badge.hidden {
    display: none;
  }
  
  /* Overlay */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Calendar adjustments for mobile */
  .calendar-container {
    margin-top: 2rem;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Hide only login dropdown menu on mobile, not the button itself */
  .floating-nav .nav-dropdown {
    display: none !important;
  }
}
  
  .mobile-nav-menu .notification-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background: #e74c3c;
    color: white;
    font-size: 0.625rem;
    font-weight: 300;
    padding: 0.125rem 0.25rem;
    border-radius: 0.625rem;
    min-width: 1rem;
    text-align: center;
  }
  
  /* Mobile Navigation Overlay */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Darker overlay */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Event sidebar below calendar on mobile */
  .calendar-container {
    flex-direction: column !important;
  }
  
  .day-card.today .day-number {
    font-size: clamp(1.125rem, 4vw, 2rem) !important;
  }
}

/* Hide mobile menu elements on desktop */
@media (min-width: 768px) {
  .mobile-menu-toggle,
  .mobile-nav-menu,
  .mobile-nav-overlay {
    display: none !important;
  }
  
  .mobile-nav {
    display: none !important;
  }
  
  .floating-nav {
    display: flex !important;
  }
}

/* Show mobile navigation on mobile */
@media (max-width: 767px) {
  .mobile-nav {
    display: flex !important;
  }
  
  .floating-nav {
    display: none !important;
  }
}

/* ===== CALENDAR RESPONSIVE ===== */

/* Extra Large Screens (1600px and above) */
@media (min-width: 1600px) {
  .calendar-container {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .event-sidebar {
    width: 350px;
  }
  
  .event-list {
    max-height: calc(100vh - 250px);
  }
}

/* Large Desktop (1200px - 1599px) */
@media (max-width: 1599px) {
  .calendar-container {
    max-width: 100%;
    padding: 0 10px;
  }
  
  .event-sidebar {
    width: 280px;
  }
  
  .event-list {
    max-height: calc(100vh - 250px);
  }
}

/* Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
  .calendar-container {
    max-width: 100%;
    padding: 0 10px;
  }
  
  .event-sidebar {
    width: 280px;
  }
  
  .event-list {
    max-height: calc(100vh - 250px);
  }
}

/* Tablet Landscape (768px - 1023px) */
@media (max-width: 1023px) {
  .calendar-container {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
    min-height: auto;
  }
  
  .event-sidebar {
    width: 100%;
    max-height: 400px;
    order: 2;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  
  .calendar-section {
    padding: 15px;
    height: auto;
    min-height: 60vh;
    order: 1;
  }
  
  /* Ensure body can scroll */
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  main {
    overflow-y: auto;
    min-height: 100vh;
  }
}

/* Tablet Portrait (600px - 767px) */
@media (max-width: 767px) {
  .calendar-container {
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
    min-height: auto;
  }
  
  .calendar-section {
    padding: 10px;
    height: auto;
    min-height: 50vh;
    order: 1;
  }
  
  .event-sidebar {
    width: 100%;
    max-height: 380px;
    padding: 15px 10px;
    order: 2;
    box-sizing: border-box;
  }
  
  /* Ensure scrolling works */
  body {
    overflow-x: hidden;
    overflow-y: auto !important;
  }
  
  main {
    overflow-y: auto;
    min-height: 100vh;
    padding-bottom: 100px;
  }
  
  .sidebar-header h3 {
    font-size: 16px;
  }
  
  .event-item {
    padding: 8px;
  }
  
  .event-item-date {
    font-size: 12px;
  }
  
  .event-item-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .event-item-days {
    font-size: 11px;
  }
  
  .calendar-header {
    flex-direction: column;
    gap: 15px;
    padding: 0 10px;
  }
  
  .calendar-title h2 {
    font-size: 20px;
  }
  
  .calendar-title span {
    font-size: 12px;
  }
  
  .month-nav {
    width: 100%;
    justify-content: space-between;
  }
  
  .nav-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .month-display {
    font-size: 14px;
  }
  
  .weekday {
    font-size: 10px;
    padding: 5px 0;
  }
  
  .calendar-grid {
    gap: 2px;
  }
  
  .day-card {
    padding: 4px 2px;
    border-radius: 6px;
  }
  
  .day-number {
    font-size: 13px;
  }
  
  .day-name {
    font-size: 9px;
  }
}

/* Mobile Large (480px - 599px) */
@media (max-width: 599px) {
  .calendar-container {
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    min-height: auto;
  }
  
  /* Move post-actions below post-content on mobile */
  .post-card .post-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Post actions popup */
  .post-actions-popup {
    position: fixed;
    z-index: 1000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes popIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .calendar-section {
    padding: 8px;
    height: auto;
    min-height: 40vh;
    order: 1;
  }
  
  .event-sidebar {
    width: 100%;
    max-height: 350px;
    padding: 10px;
    order: 2;
  }
  
  /* Make day-card flex to center content */
  .day-card {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }
  
  .day-number {
    margin-bottom: 0 !important;
  }
  
  .day-name {
    display: none;
  }
  
  /* Ensure today card uses same flex as others */
  .day-card.today {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* Fix scrolling */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }
  
  main {
    overflow-y: auto;
    min-height: 100vh;
    padding-bottom: 80px;
  }
  
  .calendar-title h2 {
    font-size: 18px;
  }
  
  .nav-btn span {
    display: none;
  }
  
  .nav-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .month-display {
    font-size: 13px;
  }
  
  .weekday {
    font-size: 9px;
    padding: 3px 0;
  }
  
  .day-card {
    padding: 3px 1px;
    border-radius: 4px;
  }
  
  .day-number {
    font-size: 12px;
    margin-bottom: 2px;
  }
  
  .day-name {
    display: none;
  }
  
  .post-pin-icon {
    font-size: 10px;
    top: 2px;
    right: 2px;
  }
  
  .event-sidebar {
    max-height: 320px;
    padding: 8px;
  }
  
  .sidebar-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  
  .sidebar-header h3 {
    font-size: 14px;
  }
  
  .event-item {
    padding: 6px;
    margin-bottom: 5px;
  }
  
  .event-item-date {
    font-size: 11px;
  }
  
  .event-item-title {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .event-item-days {
    font-size: 10px;
  }
}

/* Mobile Medium (400px - 479px) */
@media (max-width: 479px) {
  .main-content {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .calendar-container {
    gap: 6px;
    padding: 0 5px;
  }
  
  .calendar-title h2 {
    font-size: 16px;
  }
  
  .calendar-title span {
    font-size: 10px;
  }
  
  .month-nav {
    gap: 5px;
  }
  
  .nav-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
  
  .month-display {
    font-size: 12px;
  }
  
  .weekday {
    font-size: 8px;
  }
  
  .day-number {
    font-size: 11px;
  }
  
  .event-sidebar {
    max-height: 300px;
    padding: 5px;
  }
  
  .sidebar-header h3 {
    font-size: 12px;
  }
  
  .event-item {
    padding: 4px;
  }
  
  .event-item-date {
    font-size: 10px;
  }
  
  .event-item-title {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .event-item-days {
    font-size: 9px;
  }
}

/* Mobile Small (360px - 399px) */
@media (max-width: 399px) {
  .calendar-title h2 {
    font-size: 15px;
  }
  
  .month-display {
    font-size: 11px;
  }
  
  .weekday {
    font-size: 7px;
  }
  
  .day-number {
    font-size: 10px;
  }
  
  .today .day-number {
    margin-top: 10px;
  }
  
  .event-sidebar {
    max-height: 100px;
    padding: 4px;
  }
}

/* Ultra Small (below 360px) */
@media (max-width: 359px) {
  .calendar-title h2 {
    font-size: 14px;
  }
  
  .weekday {
    font-size: 6px;
  }
  
  .day-card {
    padding: 2px 1px;
  }
  
  .day-number {
    font-size: 9px;
  }
}

/* Landscape orientations */
@media (max-height: 500px) and (orientation: landscape) {
  .calendar-section {
    padding: 10px;
  }
  
  .day-name {
    display: none;
  }
  
  .event-sidebar {
    max-height: 150px;
  }
}

/* Calendar header with navigation and title */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.calendar-title {
  display: flex;
  flex-direction: column;
}

.calendar-title h2 {
  font-size: 32px;
  margin: 0 0 4px 0;
  color: #e11d48;
}

.calendar-title span {
  font-size: 14px;
  color: #9b587f;
}

.journey-sidebar {
  width: 250px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 10px 30px rgba(191, 64, 128, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 180, 210, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.journey-sidebar h3 {
  font-size: 18px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0.5px;
}

.journey-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-item {
  background: rgba(255, 240, 246, 0.8);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: #6a264a;
  text-align: center;
  border: 1px solid rgba(255, 200, 220, 0.4);
  transition: all 0.2s ease;
}

.journey-item:hover {
  background: rgba(255, 220, 240, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 150, 180, 0.3);
}

/* Heart glow di sudut */
.wrapper::before,
.wrapper::after {
  content: "♥";
  position: absolute;
  font-size: 80px;
  color: rgba(255, 192, 218, 0.35);
  pointer-events: none;
}

.wrapper::before {
  top: -24px;
  right: 40px;
}

.wrapper::after {
  bottom: -10px;
  left: 30px;
  transform: rotate(-10deg);
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.our-journey-btn {
  margin-left: auto;
}

.title-group h2 {
  font-size: 24px;
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.title-group span {
  font-size: 12px;
  color: #9b587f;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}

.month-display {
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Visibility selector in editor toolbar */
.visibility-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 130, 170, 0.2);
  border-radius: 8px;
}

.vis-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  color: #7b345b;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vis-btn:hover {
  background: rgba(255, 130, 170, 0.1);
}

.vis-btn.active {
  background: rgba(255, 107, 157, 0.2);
  color: #e11d48;
}

.vis-label {
  font-size: 11px;
}

body.dark-mode .visibility-selector {
  background: rgba(60, 40, 60, 0.6);
  border-color: rgba(255, 180, 210, 0.2);
}

body.dark-mode .vis-btn {
  color: #d8a7c3;
}

body.dark-mode .vis-btn:hover {
  background: rgba(255, 130, 170, 0.15);
}

body.dark-mode .vis-btn.active {
  background: rgba(255, 107, 157, 0.25);
  color: #ff82aa;
}

button.nav-btn {
  border: none;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7fa8, #ffb3c8);
  color: #4a1f3b;
  font-size: 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 0 rgba(212, 96, 142, 0.5);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

button.nav-btn span {
  font-size: 13px;
}

button.nav-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
  transform: skewX(-20deg);
  opacity: 0;
}

button.nav-btn:hover::after {
  animation: buttonShine 0.8s ease-out;
}

button.nav-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(212, 96, 142, 0.5);
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  row-gap: 12px;
  position: relative;
  z-index: 1;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.weekday-row {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #b17696;
}

.weekday {
  text-align: left;
  padding: 4px 6px;
  font-size: clamp(0.6875rem, 2.5vw, 0.9375rem); /* Optimized: 11px to 15px */
}

.weekday.weekend {
  color: #c2185b;
  font-weight: 300;
}

.calendar-grid {
  overflow-x: visible;
  container-type: inline-size;
  padding: 0 24px;
  width: 900px;
  height: 750px;
  max-width: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Day cards - default styling */
.day-card {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
    linear-gradient(145deg, #ffe9f3 0%, #ffb5cf 100%);
  color: #4a1f3b;
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(255, 130, 170, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  container-type: inline-size;
}

/* Special date cards need overflow hidden to keep icons inside */
.day-card.special-date {
  overflow: hidden !important;
}

.day-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 
    -14px -28px rgba(205, 76, 134, 0.3),
    -8px -16px rgba(255, 130, 170, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%),
    linear-gradient(145deg, #ffeef8 0%, #ffc5dc 100%);
}

/* Today indicator with modern animation */
.day-card.today {
  background: 
    linear-gradient(135deg, #ff6b9d 0%, #e11d48 50%, #c44569 100%);
  color: white;
  box-shadow: 
    0 0 0 3px rgba(255, 107, 157, 0.3),
    0 10px 25px rgba(255, 79, 124, 0.5),
    0 20px 40px rgba(255, 107, 157, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: todayGlow 3s ease-in-out infinite;
}

.day-card.today::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: todayShine 3s ease-in-out infinite;
}

.day-card.today::after {
  content: '';
}


@keyframes loveGlow {
  0%, 100% { }
  50% { }
}


.day-card.today .day-number {
  font-size: clamp(1.125rem, 4vw, 2rem);
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.day-card.today .day-number::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  margin: 6px auto 0;
  background: currentColor;
  opacity: 0.85;
  border-radius: 3px;
}


.day-card.today .day-name {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  position: relative;
  z-index: 1;
}

.day-card.today:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 0 4px rgba(255, 79, 124, 0.4),
    0 15px 30px rgba(255, 79, 124, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

@keyframes todayGlow {
  0%, 100% {
    box-shadow: 
      0 0 0 3px rgba(255, 107, 157, 0.3),
      0 10px 25px rgba(255, 79, 124, 0.5),
      0 20px 40px rgba(255, 107, 157, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 0 0 3px rgba(255, 107, 157, 0.5),
      0 10px 25px rgba(255, 79, 124, 0.7),
      0 20px 40px rgba(255, 107, 157, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

@keyframes todayShine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
}

@keyframes todayPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Dark mode today indicator */
body.dark-mode .day-card.today {
  background: linear-gradient(135deg, #ff6b9d, #c44569);
  box-shadow: 
    0 0 0 3px rgba(255, 107, 157, 0.3),
    0 10px 25px rgba(255, 107, 157, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.dark-mode .day-card.today::after {
  background: rgba(40, 25, 40, 0.9);
  color: #ff6b9d;
}

/* Day numbers and names */
.day-number {
  font-size: clamp(1.125rem, 4vw, 2rem); /* Optimized: 18px to 32px */
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
}

.day-name {
  font-size: clamp(0.5625rem, 1.8vw, 0.75rem); /* Optimized: 9px to 12px */
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.day-tag {
  margin-top: 2px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
}

/* weekend card (Minggu + Sabtu) - Soft & Minimalist */
.day-card.weekend {
  background: rgba(255, 120, 170, 0.12);
  color: #4a1f3b;
  border: 1px solid rgba(255, 120, 170, 0.22);
  border-radius: 12px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.day-card.weekend::before {
  content: '';
  display: none;
}

.day-card.weekend .day-number {
  position: relative;
  z-index: 1;
  font-weight: 300;
  color: #c2185b;
  text-shadow: none;
}

.day-card.weekend .day-name {
  position: relative;
  z-index: 1;
  color: rgba(194, 24, 91, 0.72);
  font-weight: 300;
  opacity: 1;
}

.day-card.weekend:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 
    0 8px 20px rgba(255, 105, 180, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: rgba(255, 120, 170, 0.18);
}

/* sel kosong */
.day-card.empty {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
}

/* ===== POST PIN ICON ===== */
.post-pin-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  z-index: 2;
}

.post-pin-icon.hidden {
  display: none;
}

/* Mobile: keep pin in top-right corner */
@media (max-width: 480px) {
  .post-pin-icon {
    top: 2px;
    right: 2px;
    bottom: auto;
    font-size: 10px;
  }
}

/* ===== HOLIDAY STYLES ===== */
.day-card.national-holiday .day-number {
  color: #ff1744 !important;
  font-weight: 300;
  text-shadow: none;
}

.day-card.national-holiday .day-name {
  color: #ff1744 !important;
  font-weight: 300;
}

/* Event list holiday items */
.event-item.holiday {
  background: linear-gradient(135deg, #fff5f5, #ffe0e0);
  border-left: 3px solid #ff5252;
}

.event-item.national-holiday {
  background: linear-gradient(135deg, #fff5f5, #ffe0e0);
  color: #ff1744;
  border-left: 3px solid #d50000;
}

.event-item.national-holiday .event-item-title {
  color: #ff1744;
  font-weight: 300;
}

.event-item.special-day {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border-left: 3px solid #ffc107;
}

.event-item.special-day .event-item-title {
  color: #e65100;
  font-weight: 300;
}

/* ===== ANNIVERSARY CARD STYLES (Pink/Red) ===== */
.day-card.anniversary {
  background: 
    radial-gradient(circle at 30% 30%, #ffe4f2 0%, #ffb8d9 20%, #ff6fae 50%, #e91e63 80%, #c2185b 100%),
    linear-gradient(135deg, rgba(233, 30, 99, 0.4) 0%, rgba(194, 24, 91, 0.4) 50%, rgba(156, 39, 176, 0.4) 100%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.1) 10px,
      rgba(255, 255, 255, 0.1) 20px
    );
  border: 4px solid transparent;
  background-image: 
    linear-gradient(white, white),
    linear-gradient(135deg, #e91e63, #c2185b, #9c27b0);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 
    0 0 30px rgba(233, 30, 99, 0.6),
    0 0 60px rgba(255, 111, 174, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.6),
    inset 0 0 60px rgba(233, 30, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.day-card.anniversary::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(233, 30, 99, 0.3) 30deg,
    rgba(194, 24, 91, 0.5) 60deg,
    rgba(233, 30, 99, 0.3) 90deg,
    transparent 120deg,
    transparent 240deg,
    rgba(233, 30, 99, 0.3) 270deg,
    rgba(194, 24, 91, 0.5) 300deg,
    rgba(233, 30, 99, 0.3) 330deg,
    transparent 360deg
  );
  animation: anniversaryGlow 3s linear infinite;
  z-index: -1;
}

.day-card.anniversary .day-number {
  font-size: clamp(1.125rem, 4vw, 2rem);
  font-weight: 300;
  background: linear-gradient(135deg, #e91e63 0%, #c2185b 25%, #9c27b0 50%, #e91e63 75%, #ff6fae 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  animation: pinkShimmer 3s linear infinite;
  position: relative;
  z-index: 2;
}

.day-card.anniversary .day-name {
  color: #c2185b;
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.day-card.anniversary:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 
    0 0 40px rgba(233, 30, 99, 0.8),
    0 0 80px rgba(255, 111, 174, 0.5),
    0 15px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 40px rgba(255, 255, 255, 0.8),
    inset 0 0 80px rgba(233, 30, 99, 0.3);
}

/* Additional anniversary decorations */
.day-card.anniversary .corner-decoration {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #e91e63;
  opacity: 0.6;
  z-index: 1;
}

.day-card.anniversary .corner-decoration::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: #e91e63;
}

.day-card.anniversary .corner-decoration.top-left {
  top: 5px;
  left: 5px;
  border-right: none;
  border-bottom: none;
}

.day-card.anniversary .corner-decoration.top-left::before {
  top: -3px;
  left: -3px;
}

.day-card.anniversary .corner-decoration.top-right {
  top: 5px;
  right: 5px;
  border-left: none;
  border-bottom: none;
}

.day-card.anniversary .corner-decoration.top-right::before {
  top: -3px;
  right: -3px;
}

.day-card.anniversary .corner-decoration.bottom-left {
  bottom: 5px;
  left: 5px;
  border-right: none;
  border-top: none;
}

.day-card.anniversary .corner-decoration.bottom-left::before {
  bottom: -3px;
  left: -3px;
}

.day-card.anniversary .corner-decoration.bottom-right {
  bottom: 5px;
  right: 5px;
  border-left: none;
  border-top: none;
}

.day-card.anniversary .corner-decoration.bottom-right::before {
  bottom: -3px;
  right: -3px;
}

@keyframes anniversaryGlow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

/* Yellow/Gold glowing date number */
.day-number.anniversary-glow {
  color: #d4ac0d !important;
  font-weight: 300;
  text-shadow: 0 0 4px rgba(212, 172, 13, 0.4);
}

/* Anniversary animations */
@keyframes heartBadgePulse {
  0%, 100% {
    transform: translate(-50%, -40%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -40%) scale(1.15);
    opacity: 1;
  }
}

/* ===== MENSIVERSARY CARD STYLES (Pink) ===== */
.day-card.mensiversary {
  background: 
    radial-gradient(circle at 40% 40%, #ffe4f2 0%, #ffb8d9 40%, #ff9fd4 70%, #ff69b4 100%),
    linear-gradient(135deg, rgba(255, 105, 180, 0.3) 0%, rgba(255, 20, 147, 0.3) 100%);
  border: 3px solid #ff69b4;
  box-shadow: 
    0 0 20px rgba(255, 105, 180, 0.5),
    0 0 40px rgba(255, 182, 193, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.day-card.mensiversary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 45deg,
    transparent 0deg,
    rgba(255, 105, 180, 0.4) 90deg,
    rgba(255, 20, 147, 0.4) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  animation: mensiversaryGlow 3s linear infinite;
  z-index: -1;
}

.day-card.mensiversary::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 18px;
  animation: pulse 2s ease-in-out infinite;
}

.day-card.mensiversary .day-number {
  font-size: clamp(1.125rem, 4vw, 2rem);
  font-weight: 300;
  background: linear-gradient(45deg, #ff69b4, #ff1493);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.day-card.mensiversary:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 105, 180, 0.7),
    0 0 60px rgba(255, 182, 193, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.7);
}

@keyframes mensiversaryGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Pink glowing date number */
.day-number.mensiversary-glow {
  color: #ff5fa2 !important;
  font-weight: 300;
  text-shadow: 0 0 4px rgba(255, 95, 162, 0.4);
}

/* Centered heart badge for mensiversary - larger on desktop */
.mensiversary-heart-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 32px;
  color: #ff6fae;
  text-shadow: 0 0 4px rgba(255, 111, 174, 0.4);
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

/* Ensure special dates are visible */
.day-card.anniversary,
.day-card.mensiversary,
.day-card.special-date {
  border-width: 3px !important;
  transform: scale(1.02);
  z-index: 10;
}

/* Make sure corner decorations are visible */
.day-card.anniversary .corner-decoration {
  display: block !important;
}

/* Make sure mensiversary heart is visible */
.day-card.mensiversary::after {
  display: none !important;
  content: '' !important;
}

/* Add glow effect to special dates */
.day-card.anniversary,
.day-card.mensiversary,
.day-card.special-date {
  box-shadow: 
    0 0 20px rgba(255, 107, 157, 0.5),
    0 0 40px rgba(255, 107, 157, 0.3) !important;
}

/* ===== SPECIAL DATE CARD STYLES (Birthdays) ===== */
/* Birthday icon styling */
.birthday-icon {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 14px !important;
  animation: pulse 2s ease-in-out infinite !important;
  z-index: 3 !important;
  display: block !important;
  visibility: visible !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Adjust birthday icon for mobile */
@media (max-width: 599px) {
  .birthday-icon {
    font-size: 10px !important;
    top: 2px !important;
    right: 2px !important;
  }
}

@media (max-width: 480px) {
  .birthday-icon {
    font-size: 8px !important;
    top: 1px !important;
    right: 1px !important;
  }
}

/* Keisya Birthday - December 5 */
.day-card.special-date.keisya-birthday {
  background: 
    radial-gradient(circle at 35% 35%, #fff3e0 0%, #ffcc80 40%, #ffb347 70%, #ff9800 100%),
    linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, rgba(255, 87, 34, 0.3) 100%);
  border: 3px solid #ff9800;
  box-shadow: 
    0 0 20px rgba(255, 152, 0, 0.5),
    0 0 40px rgba(255, 183, 77, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.day-card.special-date.keisya-birthday::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 90deg,
    transparent 0deg,
    rgba(255, 152, 0, 0.4) 90deg,
    rgba(255, 87, 34, 0.4) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  animation: keisyaGlow 3.5s linear infinite;
  z-index: -1;
}

.day-card.special-date.keisya-birthday .day-number {
  font-size: clamp(1.125rem, 4vw, 2rem);
  font-weight: 300;
  background: linear-gradient(45deg, #ff9800, #ff5722);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Budi Birthday - January 1 */
.day-card.special-date.budi-birthday {
  background: 
    radial-gradient(circle at 35% 35%, #fff3e0 0%, #ffcc80 40%, #ffb347 70%, #ff9800 100%),
    linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, rgba(255, 87, 34, 0.3) 100%);
  border: 3px solid #ff9800;
  box-shadow: 
    0 0 20px rgba(255, 152, 0, 0.5),
    0 0 40px rgba(255, 183, 77, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.day-card.special-date.budi-birthday::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 90deg,
    transparent 0deg,
    rgba(255, 152, 0, 0.4) 90deg,
    rgba(255, 87, 34, 0.4) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  animation: keisyaGlow 3.5s linear infinite;
  z-index: -1;
}
/* Common special date hover effects */
.day-card.special-date:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 152, 0, 0.7),
    0 0 60px rgba(255, 183, 77, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.7);
}

.day-card.special-date.budi-birthday:hover {
  box-shadow: 
    0 0 30px rgba(255, 152, 0, 0.7),
    0 0 60px rgba(255, 183, 77, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.7);
}

.day-card.special-date.budi-birthday .day-number {
  font-size: clamp(1.125rem, 4vw, 2rem);
  font-weight: 300;
  background: linear-gradient(45deg, #ff9800, #ff5722);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes keisyaGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
}

@keyframes birthdayBounce {
  0% { 
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% { 
    transform: translateY(-2px) scale(1.1) rotate(-5deg);
  }
  50% { 
    transform: translateY(-4px) scale(1.05) rotate(0deg);
  }
  75% { 
    transform: translateY(-2px) scale(1.1) rotate(5deg);
  }
  100% { 
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes celebrate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}

/* Orange glowing date number */
.day-number.special-date-glow {
  color: #e65100 !important;
  font-weight: 300;
  text-shadow: 0 0 4px rgba(230, 81, 0, 0.4);
}

/* ===== SPECIAL DAY INDICATORS ===== */
.special-day-indicators {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  z-index: 2;
}

.special-day-indicator {
  font-size: 12px;
  line-height: 1;
  opacity: 0.8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.special-date {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.3);
  box-shadow: 
    0 2px 8px rgba(255, 193, 7, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.special-date .day-number {
  color: #e65100;
  font-weight: 300;
  text-shadow: 0 0 4px rgba(230, 81, 0, 0.3);
}

.special-date .day-name {
  color: rgba(230, 81, 0, 0.8);
  font-weight: 300;
}

.special-date:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 6px 16px rgba(255, 193, 7, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.15));
}

/* ===== LOVE SNOW ANIMATION ===== */
#loveSnowContainer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.love-snow-heart {
  position: absolute;
  user-select: none;
  line-height: 1;
}

@keyframes loveSnowFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes heartLandBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-15px) scale(1.1);
  }
  70% {
    transform: translateY(5px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* ANIMATIONS */
@keyframes wrapperGlow {
  0% {
    box-shadow:
      0 24px 50px rgba(191, 64, 128, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow:
      0 28px 60px rgba(191, 64, 128, 0.55),
      0 0 25px rgba(255, 175, 215, 0.7);
  }
  100% {
    box-shadow:
      0 24px 50px rgba(191, 64, 128, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.8);
  }
}

@keyframes buttonShine {
  0% {
    left: -40%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* ===== MINI MODAL TITLE VIEW (Opsi A) ===== */
.mini-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.mini-modal.hidden {
  display: none;
}

.mini-card {
  background: radial-gradient(circle at top, rgba(255,234,244,0.98), rgba(255,208,234,0.96));
  border-radius: 20px;
  padding: 14px 16px 12px;
  width: 90%;
  max-width: 420px;
  box-shadow:
    0 14px 34px rgba(255, 110, 160, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.mini-card::before,
.mini-card::after {
  content: "♥";
  position: absolute;
  font-size: 52px;
  color: rgba(255, 192, 218, 0.35);
  pointer-events: none;
}

.mini-card::before {
  top: -16px;
  right: 8px;
}

.mini-card::after {
  bottom: -18px;
  left: 10px;
}

.mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.mini-header h4 {
  font-size: 15px;
  font-weight: 300;
  color: #6a264a;
}

.mini-close {
  font-size: 16px;
}

.mini-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #b17093;
  position: relative;
  z-index: 1;
}

.mini-content {
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13px;
  color: #5a2341;
  position: relative;
  z-index: 1;
}

.mini-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 6px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mini-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.mini-action {
  font-size: 12px;
  padding-inline: 12px;
}

/* Toolbar selects */
.toolbar-select {
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid #d8a7c3;
  background: rgba(255, 234, 247, 0.95);
  font-size: 11px;
  color: #7b345b;
  outline: none;
}
.toolbar-select:focus {
  box-shadow: 0 0 0 1px rgba(255, 140, 180, 0.8);
  border-color: #ff8ab7;
}

/* ===== MAP PAGE STYLES ===== */
.map-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #ffeef8 0%, #fff5fa 100%);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 10000;
  overflow: visible;
}

.map-page.active {
  transform: translateX(0);
}

.map-page-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(255, 105, 180, 0.1);
  position: relative;
  z-index: 1001;
  flex-wrap: wrap;
  border-bottom: 2px solid rgba(255, 182, 193, 0.2);
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s;
  color: #7b345b;
  flex-shrink: 0;
}

.back-btn:hover {
  background: rgba(255, 182, 193, 0.2);
  transform: translateX(-3px);
}

.map-page-header h1 {
  margin: 0;
  color: #7b345b;
  font-size: 24px;
  flex-shrink: 0;
}

/* My Location Button */
.my-location-btn {
  background: rgba(255, 182, 193, 0.2);
  border: 1px solid rgba(255, 182, 193, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  color: #7b345b;
  flex-shrink: 0;
}

.my-location-btn:hover {
  background: rgba(255, 140, 180, 0.3);
  border-color: #ff8cb4;
  transform: scale(1.1);
}

.my-location-btn:active {
  transform: scale(0.95);
}

.my-location-btn.locating {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 140, 180, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 140, 180, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 140, 180, 0);
  }
}

/* Search Bar Styles */
.map-search-container {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 400px;
  margin-left: auto;
  z-index: 1002;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #d8a7c3;
  pointer-events: none;
  z-index: 2;
}

.location-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid rgba(255, 182, 193, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #7b345b;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
}

.location-search-input:focus {
  border-color: #ff8cb4;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 140, 180, 0.1);
}

.location-search-input::placeholder {
  color: #d8a7c3;
}

/* Search Results Dropdown */
.search-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255, 105, 180, 0.15);
  border: 1px solid rgba(255, 182, 193, 0.2);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1003;
  backdrop-filter: blur(10px);
}

.search-results.hidden {
  display: none;
}

.search-result-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid rgba(255, 182, 193, 0.1);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(255, 248, 252, 0.8);
}

.search-result-item.selected {
  background: rgba(255, 182, 193, 0.2);
}

.search-result-name {
  font-weight: 300;
  color: #7b345b;
  margin-bottom: 2px;
}

.search-result-details {
  font-size: 12px;
  color: #a06080;
}

.search-loading {
  padding: 15px;
  text-align: center;
  color: #d8a7c3;
  font-size: 14px;
}

.search-no-results {
  padding: 15px;
  text-align: center;
  color: #d8a7c3;
  font-size: 14px;
}

.map-page-content {
  display: flex;
  height: calc(100vh - 70px);
  position: relative;
}

.memory-map-page {
  flex: 1;
  position: relative;
  background: #f0f0f0;
  min-height: calc(100vh - 360px); /* Ensure minimum height on mobile */
}

#memoryMapPage {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 360px);
  background: #e0e0e0; /* Temporary background for debugging */
}

/* Map Loading Spinner */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1000;
}

.map-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 182, 193, 0.3);
  border-top: 4px solid #ff8cb4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.map-loading p {
  color: #7b345b;
  font-size: 14px;
  margin: 0;
}

.map-pins-list-page {
  width: 300px;
  background: rgba(255, 255, 255, 0.5);
  overflow-y: auto;
  border-left: 1px solid rgba(255, 182, 193, 0.2);
}

.map-pins-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 182, 193, 0.3);
  background: rgba(255, 255, 255, 0.8);
  position: sticky;
  top: 0;
  z-index: 5;
}

.map-pins-header h4 {
  color: #7b345b;
  font-size: 16px;
  margin: 0;
}

.clear-map-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.clear-map-btn:hover {
  background: #ff5252;
}

.map-pins-container {
  padding: 10px;
}

.map-pin-item {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
  margin-bottom: 10px;
}

.map-pin-item:hover {
  background: rgba(255, 248, 252, 0.9);
  border-color: rgba(255, 182, 193, 0.5);
  transform: translateX(5px);
}

.map-pin-item h5 {
  margin: 0 0 5px 0;
  color: #7b345b;
  font-size: 14px;
}

.map-pin-item p {
  margin: 0 0 5px 0;
  color: #a06080;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-pin-item .pin-date {
  font-size: 11px;
  color: #d8a7c3;
}

.pin-rating {
  color: #ffd700;
  font-size: 16px;
  margin: 5px 0;
}

.pin-rating-small {
  color: #ffd700;
  font-size: 12px;
  margin: 3px 0;
}

.pin-review {
  font-style: italic;
  color: #666;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}

/* Responsive Map Page */
@media (max-width: 768px) {
  .map-page-header {
    padding: 10px 15px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    overflow: visible;
  }
  
  .map-page-header > *:not(.map-search-container) {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .map-page-header h1 {
    font-size: 18px;
    flex: 1;
  }
  
  .my-location-btn {
    width: 36px;
    height: 36px;
    order: 2;
  }
  
  .my-location-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .map-search-container {
    min-width: 100%;
    max-width: 100%;
    order: 3;
    margin: 5px 0 0 0;
    position: relative;
    z-index: 1001; /* Higher than search results */
  }
  
  .location-search-input {
    padding: 8px 12px 8px 35px;
    font-size: 13px;
  }
  
  .search-icon {
    left: 10px;
    width: 16px;
    height: 16px;
  }
  
  .search-results {
    position: absolute;
    top: calc(100% + 5px);
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 180px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.15);
    border: 1px solid rgba(255, 182, 193, 0.2);
    overflow-y: auto;
    z-index: 1003;
    backdrop-filter: blur(10px);
  }
  
  .map-page-content {
    height: calc(100vh - 160px); /* Further increased for better spacing */
    display: flex;
    flex-direction: column;
  }
  
  .map-pins-list-page {
    width: 100%;
    height: 300px; /* Increased from 180px to 300px */
    border-left: none;
    border-top: 1px solid rgba(255, 182, 193, 0.2);
    position: relative;
    z-index: 4;
    flex-shrink: 0; /* Prevent shrinking */
  }
  
  .memory-map-page {
    flex: 1;
    position: relative;
    background: #f0f0f0;
    min-height: calc(100vh - 460px); /* Adjusted for taller pins list (300px) */
    flex-shrink: 1; /* Allow to grow */
    overflow: hidden; /* Prevent overflow */
  }
  
  #memoryMapPage {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 460px); /* Adjusted for taller pins list */
    background: #e0e0e0; /* Temporary background for debugging */
  }
  
  /* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix viewport height on iOS */
  .map-page {
    height: -webkit-fill-available;
    height: 100vh;
  }
  
  .map-page-content {
    height: -webkit-fill-available;
    height: calc(100vh - 160px);
  }
  
  /* Prevent rubber band effect */
  .memory-map-page {
    position: fixed;
    top: 160px;
    left: 0;
    right: 0;
    bottom: 300px; /* Updated to match new height */
    width: 100%;
    background: #f0f0f0;
  }
  
  .map-pins-list-page {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px; /* Updated height */
    z-index: 5;
  }
  
  #memoryMapPage {
    width: 100%;
    height: 100%;
  }
}
}

/* Hide main content when map page is active */
.main-content {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-content.slide-out {
  transform: translateX(-100%);
}

/* Hide floating nav when map page is active */
.floating-nav {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s;
}

.floating-nav.slide-out {
  transform: translateX(-120%);
  opacity: 0;
}

/* ===== MAP MODAL STYLES (deprecated) ===== */
.map-modal-content {
  width: 95%;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  padding: 20px;
}

.map-container-inner {
  display: flex;
  height: 100%;
  gap: 20px;
}

.memory-map {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 193, 0.3);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.1);
}

.map-pins-list {
  width: 300px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 15px;
  overflow-y: auto;
  border: 1px solid rgba(255, 182, 193, 0.2);
}

.map-pins-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 182, 193, 0.3);
}

.map-pins-header h4 {
  color: #7b345b;
  font-size: 16px;
  margin: 0;
}

.clear-map-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.clear-map-btn:hover {
  background: #ff5252;
}

.map-pins-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-pin-item {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.map-pin-item:hover {
  background: rgba(255, 248, 252, 0.9);
  border-color: rgba(255, 182, 193, 0.5);
  transform: translateX(5px);
}

.map-pin-item h5 {
  margin: 0 0 5px 0;
  color: #7b345b;
  font-size: 14px;
}

.map-pin-item p {
  margin: 0 0 5px 0;
  color: #a06080;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-pin-item .pin-date {
  font-size: 11px;
  color: #d8a7c3;
}

.pin-rating {
  color: #ffd700;
  font-size: 16px;
  margin: 5px 0;
}

.pin-rating-small {
  color: #ffd700;
  font-size: 12px;
  margin: 3px 0;
}

.pin-review {
  font-style: italic;
  color: #666;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}

/* Rating Stars */
.rating-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rating-stars {
  display: flex;
  gap: 5px;
}

.star {
  font-size: 28px;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.star:hover {
  color: #ffd700;
  transform: scale(1.1);
}

.star.active {
  color: #ffd700;
  animation: starPop 0.3s ease;
}

@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.rating-text {
  font-size: 14px;
  color: #a06080;
  min-width: 100px;
}

/* Pin Modal Styles */
.pin-modal-content {
  width: 90%;
  max-width: 500px;
}

.pin-modal-content .form-group {
  margin-bottom: 20px;
}

.pin-modal-content label {
  display: block;
  margin-bottom: 8px;
  color: #7b345b;
  font-weight: 300;
}

.pin-modal-content input,
.pin-modal-content textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 182, 193, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #7b345b;
  font-size: 14px;
  transition: all 0.3s;
}

.pin-modal-content input:focus,
.pin-modal-content textarea:focus {
  outline: none;
  border-color: #ff8cb4;
  box-shadow: 0 0 0 3px rgba(255, 140, 180, 0.1);
}

.pin-modal-content .form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 25px;
}

.image-preview {
  margin-top: 10px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 8px;
  display: none;
}

.image-preview img {
  width: 100%;
  height: auto;
  display: block;
}

/* Map Popup Styles */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: white;
  padding: 0;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0;
  min-width: 200px;
  max-width: 250px;
  line-height: 1.4;
}

.leaflet-popup-tip {
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Pin Popup Content */
.pin-popup {
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pin-popup h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 300;
  color: #333;
  line-height: 1.3;
}

.pin-popup p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.pin-popup img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pin-popup .pin-rating {
  color: #ffd700;
  font-size: 14px;
  margin: 4px 0;
}

.pin-popup .pin-review {
  font-style: italic;
  color: #666;
  font-size: 12px;
  margin: 8px 0;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 6px;
}

.pin-popup .pin-date {
  font-size: 11px;
  color: #999;
  margin: 8px 0 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pin-popup .delete-pin-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  margin-top: 12px;
  width: 100%;
  transition: all 0.2s;
}

.pin-popup .delete-pin-btn:hover {
  background: #ff3838;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

/* Popup Gallery */
.popup-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 8px 0;
}

.popup-gallery img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

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

/* Image Preview Styles */
.image-preview-item {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.image-preview-item img {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.image-preview-item .remove-image {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.image-preview-item .remove-image:hover {
  background: #ff3838;
  transform: scale(1.1);
}

/* Popup animation */
.leaflet-popup {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.2s ease;
}

.leaflet-popup.leaflet-popup-open {
  opacity: 1;
  transform: scale(1);
}

.map-popup-content h5 {
  margin: 0 0 8px 0;
  color: #7b345b;
  font-size: 14px;
}

.map-popup-content p {
  margin: 0 0 8px 0;
  color: #a06080;
  font-size: 12px;
}

.map-popup-content img {
  width: 100%;
  border-radius: 6px;
  margin-top: 8px;
}

.map-popup-content .delete-pin-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  margin-top: 8px;
  transition: background-color 0.3s;
}

.map-popup-content .delete-pin-btn:hover {
  background: #ff5252;
}

/* Responsive Map Modal */
@media (max-width: 768px) {
  .map-modal-content {
    width: 95%;
    height: 90vh;
    padding: 15px;
  }
  
  .map-container-inner {
    flex-direction: column;
    height: 100%;
  }
  
  .map-pins-list {
    width: 100%;
    max-height: 200px;
  }
  
  .pin-modal-content {
    width: 95%;
    padding: 20px;
  }
}

/* ===== MODAL & FEED ===== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 1;
  transition: 0.3s ease;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 252, 0.95) 100%),
    linear-gradient(145deg, #fff5fa 0%, #ffeef8 100%);
  padding: 15px;
  border-radius: 20px;
  border: 2px solid rgba(255, 182, 193, 0.3);
  box-shadow:
    0 25px 50px -12px rgba(255, 105, 180, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 80px rgba(255, 182, 193, 0.1);
  overflow-y: auto;
  max-height: 90vh;
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Desktop: Modal width 40% */
@media (min-width: 768px) {
  .modal-content {
    width: 40%;
  }
}

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

@keyframes popIn {
  from {
    transform: scale(0.9) translateY(15px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 182, 193, 0.2);
  white-space: normal;
}

.modal-header h3 {
  font-size: 24px;
  font-weight: 300;
  color: #c2185b;
  background: linear-gradient(135deg, #c2185b 0%, #e91e63 50%, #ff6090 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1a1a1a;
  letter-spacing: -0.025em;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
  padding-right: 20px;
  line-height: 1.3;
  text-align: center;
}

#modalDateTitle {
  text-align: center;
}

#postDetailModal .modal-header h3#detailModalTitle {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #c2185b !important;
  color: #c2185b !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  text-overflow: clip !important;
  overflow: visible !important;
  float: none !important;
  clear: both !important;
    font-family: inherit !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

.close-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  border-radius: 50%;
}

.close-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  color: #ff6b9d;
}

.close-btn:hover::before {
  width: 100%;
  height: 100%;
}

.close-btn:active {
  transform: scale(0.95);
}

.modal-body {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Posts container styling */
.posts-container {
  margin-bottom: 20px;
  min-height: 100px;
}

/* Empty state for posts */
.posts-container:empty::before {
  content: 'Belum ada momen. Tambah momen pertama kamu! 🌸';
  display: block;
  text-align: center;
  color: #c2185b;
  opacity: 0.6;
  font-style: italic;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.1) 0%, rgba(255, 130, 170, 0.05) 100%);
  border-radius: 12px;
  border: 2px dashed rgba(255, 105, 180, 0.3);
}

/* Detail modal - constrain height */
#postDetailModal .modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 252, 0.98) 100%),
    linear-gradient(145deg, #fff5fa 0%, #ffeef8 100%);
  border: 2px solid rgba(255, 182, 193, 0.4);
  box-shadow:
    0 25px 50px -12px rgba(255, 105, 180, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 100px rgba(255, 182, 193, 0.15);
}

/* Detail modal body - enhanced styling */
#detailModalBody {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 252, 0.9) 100%);
  border-radius: 16px;
  padding: 24px;
  margin-top: 16px;
  overflow-y: auto;
  flex: 1;
  border: 1px solid rgba(255, 182, 193, 0.2);
  box-shadow: 
    inset 0 2px 4px rgba(255, 182, 193, 0.1),
    0 4px 12px rgba(255, 182, 193, 0.08);
  position: relative;
}

#detailModalBody::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 182, 193, 0.5) 50%, 
    transparent 100%);
}

/* Custom scrollbar for detail modal */
#detailModalBody::-webkit-scrollbar {
  width: 8px;
}

#detailModalBody::-webkit-scrollbar-track {
  background: linear-gradient(135deg, 
    rgba(255, 240, 246, 0.3) 0%, 
    rgba(255, 248, 252, 0.5) 100%);
  border-radius: 10px;
  border: 1px solid rgba(255, 182, 193, 0.1);
}

#detailModalBody::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff9a9e 0%, #ffb3c8 50%, #ffc0d5 100%);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    inset 0 2px 4px rgba(255, 105, 180, 0.3),
    0 2px 4px rgba(255, 182, 193, 0.2);
}

#detailModalBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff7fa8 0%, #ff9a9e 50%, #ffb3c8 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    inset 0 2px 6px rgba(255, 105, 180, 0.4),
    0 2px 8px rgba(255, 182, 193, 0.3);
}

/* Firefox */
#detailModalBody {
  scrollbar-width: thin;
  scrollbar-color: 
    linear-gradient(135deg, #ff9a9e, #ffb3c8) 
    rgba(255, 240, 246, 0.5);
}

/* Feed container */
.posts-container {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 4px;
  margin-bottom: 16px;
  display: block;
}

.posts-container.hidden {
  display: none;
}

.posts-container::-webkit-scrollbar {
  width: 6px;
}

.posts-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
  margin: 8px 0;
}

.posts-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff6b9d, #e11d48);
  border-radius: 3px;
}

.posts-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #e11d48, #be123c);
}

.no-posts {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 32px 16px;
  background: #fafafa;
  border-radius: 16px;
  border: 2px dashed #e5e5e5;
  margin: 8px 4px;
}

/* Fancy romantic post cards */
.post-card {
  background: white;
  padding: 16px 20px;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  margin: 0 0 16px 0;
  flex-shrink: 0;
  text-align: left;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px -4px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 107, 157, 0.2);
}

.post-card.pinned {
  background: linear-gradient(135deg, #fff9f5 0%, #fff5eb 100%);
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.post-card.pinned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc107, #ff9800);
}

.image-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: #4a1f3b;
  font-size: 11px;
  font-weight: 300;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
  box-shadow: 0 2px 6px rgba(255, 154, 158, 0.3);
  vertical-align: middle;
}

.post-card-wrapper {
  position: relative;
  width: 100%;
  text-align: left;
}

.post-title {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 12px;
  line-height: 1.4;
  padding-right: 100px; /* Space for action buttons */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

.post-meta {
  font-size: 12px;
  color: #666;
  opacity: 0.7;
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.post-sync-indicator {
  font-size: 11px;
  color: #999;
  opacity: 0.8;
}

.post-edited {
  font-size: 11px;
  color: #ff7fa8;
  opacity: 0.7;
  font-style: italic;
  display: block;
  margin-top: 6px;
  text-align: left;
  margin-left: 0;
  align-self: flex-start;
}

.post-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Desktop: Post actions in header */
@media (min-width: 600px) {
  .post-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.post-delete,
.post-edit,
.post-pin {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #666;
  position: relative;
  overflow: hidden;
  z-index: 10;
  pointer-events: auto;
}

.post-delete:hover,
.post-edit:hover,
.post-pin:hover {
  background: rgba(255, 107, 107, 0.1);
  transform: scale(1.1);
  color: #ff6b9d;
}

.post-delete:active,
.post-edit:active,
.post-pin:active {
  transform: scale(0.95);
  background: rgba(255, 107, 107, 0.2);
}

.post-pin.pinned {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b9d;
}

.post-content-wrapper {
  margin-top: 12px;
}

.post-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* collapse */
.post-content.collapsed {
  max-height: 150px;
  overflow: hidden;
  position: relative;
}

.post-content.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 245, 250, 0.95)
  );
}

.toggle-post {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: #b44678;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.toggle-post.hidden {
  display: none;
}

/* Add moment button (feed) */
.add-moment-btn {
  width: 100%;
  margin: 16px 0;
  padding: 14px 20px;
  border: 2px dashed #e5e5e5;
  background: #fafafa;
  cursor: pointer;
  font-size: 15px;
  font-weight: 300;
  color: #666;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-moment-btn::before {
  content: '';
  font-size: 20px;
  font-weight: 300;
  color: #999;
}

.add-moment-btn:hover {
  background: white;
  border-color: #ff6b9d;
  color: #ff6b9d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(255, 107, 157, 0.2);
}

.add-moment-btn:hover::before {
  color: #ff6b9d;
}

.add-moment-btn:active {
  transform: translateY(0);
}

.add-moment-btn.hidden {
  display: none;
}

/* Create panel (form post) */
.create-panel {
  margin-top: 10px;
}

.create-panel.hidden {
  display: none;
}

.title-input {
  width: 100%;
  border: 2px solid #e5e5e5;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 0;
  background: #fafafa;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1a1a1a;
}

.title-input:focus {
  outline: none;
  border-color: #ff6b9d;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.1);
}

.title-input::placeholder {
  color: #999;
  font-weight: 300;
}

/* Specific styling for postLovedBy */
#postLovedBy {
  margin-top: 16px !important;
}

#postLovedBy::placeholder {
  color: #ff6b9d;
  font-weight: 300;
}

/* Add icon to postLovedBy */
#postLovedBy {
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ff6b9d'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}

.editor-toolbar {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-toolbar button {
  border: none;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 181, 207, 0.9);
  cursor: pointer;
  font-size: 14px;
}

/* Emoji toggle button in toolbar */
.editor-toolbar button[onclick*="toggleEmojiPicker"] {
  font-size: 16px;
  padding: 4px 8px;
}

.editor-toolbar input[type="color"] {
  width: 32px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.emoji-picker {
  margin-top: 4px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px solid #ffb6d3;
  max-width: 100%;
}

.emoji-picker.hidden {
  display: none;
}

.emoji-picker button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: transform 0.1s ease;
}

.emoji-picker button:hover {
  transform: scale(1.2);
  background: rgba(255, 182, 211, 0.3);
}


.editor {
  margin-top: 16px;
  min-height: 200px;
  max-height: 300px;
  background: #fafafa;
  border-radius: 16px;
  padding: 16px;
  border: 2px solid #e5e5e5;
  overflow-y: auto;
  font-size: 15px;
  color: #1a1a1a;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.6;
}

.editor:focus {
  outline: none;
  border-color: #ff6b9d;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.1);
}

.editor.empty {
  color: #999;
}

.editor img {
  max-width: 100%;
  display: inline-block;
  height: auto;
  margin: 8px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* footer tombol post */
.create-footer {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.save-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff6b9d, #e11d48);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  min-width: 100px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px -4px rgba(255, 107, 157, 0.4);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(255, 107, 157, 0.5);
}

.save-btn:active {
  transform: translateY(0);
}

.ghost-btn {
  padding: 12px 24px;
  background: transparent;
  color: #666;
  border: 2px solid #e5e5e5;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ghost-btn:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
  color: #1a1a1a;
}

/* Form group styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 300;
  color: #1a1a1a;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e5e5;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fafafa;
}

.form-control:focus {
  outline: none;
  border-color: #ff6b9d;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.1);
}

/* PIN ICON BEAUTY - These styles are now handled above in post-actions */

/* Palette warna preset di toolbar */
.color-palette {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color-btn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(184, 70, 120, 0.5);
  padding: 0;
  cursor: pointer;
  background: transparent;
}

.color-btn[data-color="#4a1f3b"] { background: #4a1f3b; }
.color-btn[data-color="#ff4f7c"] { background: #ff4f7c; }
.color-btn[data-color="#e11d48"] { background: #e11d48; }
.color-btn[data-color="#8b5cf6"] { background: #8b5cf6; }
.color-btn[data-color="#1d4ed8"] { background: #1d4ed8; }
.color-btn[data-color="#000000"] { background: #000000; }

.color-btn:focus-visible {
  outline: 2px solid #ff8ab7;
  outline-offset: 1px;
}

/* ===== EVENT NOTIFICATIONS PANEL ===== */
.event-notifications {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-width: 300px;
  max-width: 350px;
  max-height: 450px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 1px solid rgba(255, 200, 220, 0.4);
  z-index: 1001;
}

.event-notifications.hidden {
  display: none;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 15px;
  font-weight: 300;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
}

.notification-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #4a1f3b;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.notification-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 8px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255, 240, 246, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 220, 0.4);
  transition: all 0.2s ease;
  animation: slideInRight 0.3s ease;
}

.notification-item:hover {
  background: rgba(255, 230, 240, 0.9);
  transform: translateX(4px);
}

.notification-item.urgent {
  background: linear-gradient(135deg, #fff5f5, #ffe0e0);
  border-color: rgba(255, 100, 100, 0.5);
  animation: pulseUrgent 2s infinite;
}

.notification-item.the-day {
  background: linear-gradient(135deg, #fff9e6, #ffeaa7);
  border-color: rgba(241, 196, 15, 0.6);
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

/* Read/Unread notification styles */
.notification-item.unread {
  background: rgba(255, 240, 246, 0.95);
  border-left: 3px solid #ff69b4;
}

.notification-item.read {
  background: rgba(245, 245, 245, 0.7);
  opacity: 0.85;
}

.notification-item.read .notification-title,
.notification-item.read .notification-date {
  color: #888;
}

.notification-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.notification-status-indicator.unread {
  background: #ff69b4;
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.6);
  animation: unreadPulse 2s infinite;
}

.notification-status-indicator.read {
  background: #ccc;
}

.notification-unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff1493;
  box-shadow: 0 0 8px rgba(255, 20, 147, 0.6);
  flex-shrink: 0;
  animation: unreadPulse 1.5s infinite;
}

/* Individual close button for notifications */
.notification-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
  margin-left: 4px;
  backdrop-filter: blur(10px);
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

.notification-close-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b9d;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* Read checkmark for read notifications */
.notification-read-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.3);
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  margin-left: 4px;
}

@keyframes unreadPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.notification-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

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

.notification-title {
  font-size: 13px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-countdown {
  font-size: 11px;
  color: #9b587f;
  font-weight: 300;
}

.notification-countdown.urgent {
  color: #e53e3e;
  font-weight: 300;
}

.notification-countdown.the-day {
  color: #d69e2e;
  font-weight: 300;
}

.notification-date {
  font-size: 10px;
  color: #b17093;
  margin-top: 2px;
}

/* Notification toggle button */
.notification-toggle-btn {
  position: relative;
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: #4a1f3b;
  border: none;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  animation: pulseNotification 2s infinite;
}

.notification-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 154, 158, 0.5);
}

.notification-toggle-btn.has-events {
  animation: pulseNotification 1.5s infinite;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e53e3e;
  color: white;
  font-size: 10px;
  font-weight: 300;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@keyframes pulseNotification {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
  }
  50% {
    box-shadow: 0 4px 25px rgba(255, 154, 158, 0.7);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseUrgent {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 100, 100, 0.1);
  }
}

/* Empty notification state */
.notification-empty {
  text-align: center;
  padding: 30px 20px;
  color: #9b587f;
  font-size: 13px;
}

.notification-empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.nav-item.nav-action {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  margin-left: 5px;
  position: relative;
}

.nav-item.nav-action:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.nav-item.nav-action .nav-icon {
  font-size: 18px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e74c3c;
  color: white;
  font-size: 10px;
  font-weight: 300;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ===== FLOATING NAVIGATION (DEPRECATED - MOVED TO HEADER) ===== */
/*
.floating-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30px;
  box-shadow: 
    0 8px 32px rgba(255, 130, 170, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 180, 210, 0.3);
  animation: navFloat 6s ease-in-out infinite;
}
*/

/* ===== FLOATING NOTIFICATION BUTTON (DEPRECATED) ===== */
/*
.floating-notification-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 
    0 4px 15px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  font-size: 10px;
  font-weight: 300;
  padding: 3px 6px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(245, 87, 108, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

/* ===== FLOATING JOURNEY BUTTON ===== */
.floating-journey-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 
    0 4px 15px rgba(250, 112, 154, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== FLOATING LOGIN BUTTON ===== */
.floating-login-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 
    0 4px 15px rgba(79, 172, 254, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== FLOATING BUTTON STYLES (DEPRECATED - MOVED TO HEADER) ===== */
/*
.floating-notification-btn:hover,
.floating-journey-btn:hover,
.floating-login-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 
    0 8px 25px rgba(102, 126, 234, 0.5),
    0 0 20px rgba(102, 126, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.floating-journey-btn:hover {
  box-shadow: 
    0 8px 25px rgba(250, 112, 154, 0.5),
    0 0 20px rgba(250, 112, 154, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.floating-login-btn:hover {
  box-shadow: 
    0 8px 25px rgba(79, 172, 254, 0.5),
    0 0 20px rgba(79, 172, 254, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Disable hover effects on touch devices to prevent double-click issue */
@media (hover: none) and (pointer: coarse) {
  .floating-notification-btn:hover,
  .floating-journey-btn:hover,
  .floating-login-btn:hover {
    transform: none;
  }
  
  .floating-notification-btn:active,
  .floating-journey-btn:active,
  .floating-login-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 96, 142, 0.3);
  }
}

.floating-login-btn.admin-mode {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  color: white;
  max-width: 150px;
}

.floating-login-btn.admin-mode:hover {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}
*/

/* ===== ADMIN DROPDOWN MENU - MODERN DESIGN (REMOVED) ===== */
/* 
.admin-dropdown {
  position: fixed !important;
  z-index: 10050 !important;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 130, 170, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  width: 200px;
  animation: dropdownFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: none !important;
  position: relative;
}

.admin-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 130, 170, 0.08) 0%, 
    rgba(255, 182, 193, 0.04) 50%,
    rgba(255, 218, 185, 0.08) 100%);
  pointer-events: none;
  z-index: 0;
}

.admin-dropdown.hidden {
  display: none !important;
}

/* Ensure dropdown is above everything */
.admin-dropdown:not(.hidden) {
  isolation: isolate;
}

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

.dropdown-item {
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: #4a1f3b;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(135deg, #ff7fa8, #ff6b9d);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
}

.dropdown-item:hover {
  background: rgba(255, 130, 170, 0.15);
  color: #e11d48;
  padding-left: 2rem;
  transform: translateX(4px);
}

.dropdown-item:hover::before {
  transform: translateX(0);
}

.dropdown-item:active {
  transform: translateX(2px) scale(0.98);
}

.dropdown-item:first-child {
  border-radius: 20px 20px 0 0;
  margin-top: 0.5rem;
}

.dropdown-item:last-child {
  border-radius: 0 0 20px 20px;
  margin-bottom: 0.5rem;
  border-top: 1px solid rgba(255, 130, 170, 0.1);
}

.dropdown-item .dropdown-icon {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.dropdown-item:hover .dropdown-icon {
  transform: scale(1.2);
}

/* Special styling for logout button */
.dropdown-item#logoutBtn {
  color: #e53e3e;
  font-weight: 300;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 130, 170, 0.15);
  padding-top: 1.25rem;
}

.dropdown-item#logoutBtn:hover {
  background: rgba(229, 62, 62, 0.12);
  color: #c53030;
}

.dropdown-item#logoutBtn::before {
  background: linear-gradient(135deg, #e53e3e, #c53030);
}

.dropdown-item#logoutBtn:hover .dropdown-icon {
  transform: scale(1.2) rotate(10deg);
}

/* Add divider between settings and logout */
.dropdown-item#historyBtn {
  border-bottom: 1px solid rgba(255, 130, 170, 0.1);
  padding-bottom: 1.25rem;
}

/* Mobile optimization */
@media (max-width: 767px) {
  .admin-dropdown {
    min-width: 220px;
    border-radius: 24px;
    box-shadow: 
      0 12px 40px rgba(31, 38, 135, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 0 1px rgba(255, 130, 170, 0.15);
  }
  
  .dropdown-item {
    padding: 1.25rem 1.75rem;
    font-size: 1rem;
    gap: 1.25rem;
  }
  
  .dropdown-item:hover {
    padding-left: 2.25rem;
  }
  
  .dropdown-item .dropdown-icon {
    font-size: 1.2rem;
    width: 1.75rem;
  }
}
*/

/* ===== NAVIGATION DROPDOWN MENU ===== */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Hide dropdown menu by default and only show when logged in */
.nav-dropdown:not(.logged-in) .dropdown-menu {
  display: none !important;
}

.nav-dropdown.logged-in .dropdown-menu.hidden {
  display: none !important;
}

.nav-dropdown.logged-in .dropdown-menu:not(.hidden) {
  display: block !important;
}

.dropdown-trigger {
  position: relative;
  padding-right: 2.5rem !important;
}

.dropdown-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.dropdown-trigger:hover .dropdown-arrow {
  opacity: 1;
}

.dropdown-trigger.active .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 130, 170, 0.2);
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  min-width: 180px;
  z-index: 1000;
  animation: dropdownSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.5rem;
}

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

.dropdown-menu .dropdown-item {
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #4a1f3b;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  position: relative;
}

.dropdown-menu .dropdown-item:hover {
  background: rgba(255, 130, 170, 0.1);
  color: #e11d48;
  padding-left: 1.5rem;
}

.dropdown-menu .dropdown-item:first-child {
  border-radius: 16px 16px 0 0;
}

.dropdown-menu .dropdown-item:last-child {
  border-radius: 0 0 16px 16px;
}

.dropdown-menu .dropdown-item.logout-item {
  color: #e53e3e;
  border-top: 1px solid rgba(255, 130, 170, 0.1);
  margin-top: 0.25rem;
  padding-top: 1rem;
}

.dropdown-menu .dropdown-item.logout-item:hover {
  background: rgba(229, 62, 62, 0.1);
  color: #c53030;
}

.dropdown-menu .dropdown-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.dropdown-menu .dropdown-item:hover .dropdown-icon {
  transform: scale(1.1);
}

/* Mobile optimization */
@media (max-width: 767px) {
  .dropdown-menu {
    right: -1rem;
    min-width: 160px;
  }
  
  .dropdown-menu .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  .dropdown-menu .dropdown-item:hover {
    padding-left: 1.25rem;
  }
}

/* ===== SETTINGS MODAL ===== */
.settings-modal-content {
  max-width: 500px;
  background: #ffffff;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.settings-modal-content .modal-header {
  padding: 0;
  margin: 0 0 24px 0;
  color: #1a1a1a;
  text-align: left;
  background: transparent;
}

.settings-modal-content .modal-header h3 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  text-shadow: none;
}

.settings-form {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.setting-item:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 107, 157, 0.2);
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5f8 0%, #ffe0ee 100%);
  color: #ff6b9d;
}

.setting-text {
  font-weight: 300;
  color: #1a1a1a;
  font-size: 15px;
}

.setting-description {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  gap: 0.5rem;
}

.theme-btn {
  padding: 8px 16px;
  border: 2px solid #e5e5e5;
  background: white;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #666;
}

.theme-btn:hover {
  background: #fafafa;
  border-color: #d0d0d0;
}

.theme-btn.active {
  background: linear-gradient(135deg, #ff6b9d, #e11d48);
  color: white;
  border-color: transparent;
}

.theme-btn.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(255, 107, 157, 0.4);
}

/* Setting action buttons */
.setting-action-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff6b9d, #e11d48);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 300;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.setting-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(255, 107, 157, 0.4);
}

.setting-action-btn:active {
  transform: translateY(0);
}

/* Mobile optimization for settings modal */
@media (max-width: 480px) {
  .settings-modal-content {
    max-width: 95vw;
    margin: 1rem;
  }
  
  .settings-form {
    padding: 0 16px 16px;
    gap: 16px;
  }
  
  .settings-modal-content .modal-header {
    margin-bottom: 16px;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }
  
  .theme-toggle {
    width: 100%;
    justify-content: center;
  }
  
  .setting-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .setting-text {
    font-size: 14px;
  }
  
  .setting-description {
    font-size: 12px;
  }
}

/* Dark mode settings styles */
body.dark-mode .settings-modal-content {
  background: #1a1a1a;
}

body.dark-mode .setting-item {
  background: rgba(60, 40, 60, 0.8);
  border-color: rgba(255, 180, 210, 0.2);
}

body.dark-mode .setting-item:hover {
  background: rgba(80, 50, 80, 0.9);
  border-color: rgba(255, 130, 170, 0.4);
}

body.dark-mode .setting-icon {
  background: rgba(255, 130, 170, 0.2);
  color: #ff6b9d;
}

body.dark-mode .setting-text {
  color: #f0b4e0;
}

body.dark-mode .setting-description {
  color: #999;
}

body.dark-mode .theme-btn {
  background: rgba(60, 40, 60, 0.8);
  border-color: rgba(255, 130, 170, 0.3);
  color: #f0b4e0;
}

body.dark-mode .theme-btn:hover {
  background: rgba(80, 50, 80, 0.9);
  border-color: rgba(255, 130, 170, 0.5);
}

/* ===== CHANGE PASSWORD MODAL ===== */
.change-password-modal-content {
  max-width: 450px;
  background: #ffffff;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.change-password-modal-content .modal-header {
  padding: 0;
  margin: 0 0 24px 0;
  color: #1a1a1a;
  text-align: left;
  background: transparent;
}

.change-password-modal-content .modal-header h3 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  text-shadow: none;
}

/* ===== TRASH ITEMS ===== */
.trash-item {
  border-bottom: 1px solid rgba(255, 200, 220, 0.4);
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  animation: slideIn 0.3s ease;
  border-left: 4px solid;
}

.toast.success {
  border-left-color: #28a745;
  color: #155724;
}

.toast.error {
  border-left-color: #dc3545;
  color: #721c24;
}

.toast.info {
  border-left-color: #17a2b8;
  color: #0c5460;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===== UPLOAD PROGRESS PANEL ===== */
.upload-progress-panel {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 1002;
  width: 320px;
  max-height: 400px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 180, 210, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideInLeft 0.3s ease;
  border: 1px solid rgba(255, 200, 220, 0.6);
}

.upload-progress-panel.hidden {
  display: none;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.upload-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff7fa8, #ffb3c8);
  color: #4a1f3b;
  border-bottom: 1px solid rgba(255, 180, 210, 0.5);
}

.upload-panel-title {
  font-size: 14px;
  font-weight: 300;
}

.upload-panel-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #4a1f3b;
}

.upload-progress-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
}

.upload-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255, 240, 246, 0.8);
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 220, 0.4);
}

.upload-item-icon {
  font-size: 20px;
}

.upload-item-info {
  flex: 1;
  min-width: 0;
}

.upload-item-name {
  font-size: 12px;
  font-weight: 300;
  color: #4a1f3b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(200, 150, 170, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff7fa8, #ffb3c8);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}

/* ===== OUR JOURNEY MODAL ===== */
.our-journey-content {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.journey-full-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.journey-item-full {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    0 10px 22px rgba(210, 95, 145, 0.35),
    0 0 0 1px rgba(255, 220, 240, 0.9);
}

.journey-item-full h4 {
  font-size: 16px;
  font-weight: 300;
  color: #6a264a;
  margin-bottom: 8px;
}

.journey-item-full p {
  font-size: 14px;
  color: #5a2341;
  line-height: 1.5;
}

/* ===== LOGIN MODAL - MODERN DESIGN ===== */
.login-modal-content {
  max-width: 420px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 130, 170, 0.1);
  overflow: hidden;
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.login-modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 130, 170, 0.1) 0%, 
    rgba(255, 182, 193, 0.05) 50%,
    rgba(255, 218, 185, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
}

.login-modal-content .modal-header {
  background: linear-gradient(135deg, 
    rgba(255, 107, 157, 0.9) 0%, 
    rgba(255, 130, 170, 0.8) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2rem;
  margin: -2rem -2rem 2rem -2rem;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.login-modal-content .modal-header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(255, 255, 255, 0.15), 
    transparent);
  animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(0%) translateY(0%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.login-modal-content .modal-header h3 {
  font-size: 1.75rem;
  font-weight: 300;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  letter-spacing: 0.5px;
}

.login-modal-content .close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 2;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

.login-modal-content .close-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  color: #ff6b9d;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 2rem 2rem;
  position: relative;
  z-index: 1;
}

.login-form .input-group {
  position: relative;
}

.login-form .input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: rgba(255, 107, 157, 0.7);
  transition: all 0.3s ease;
  z-index: 2;
}

.login-form input {
  width: 100%;
  padding: 1.125rem 1.5rem 1.125rem 3.5rem;
  font-size: 1rem;
  font-weight: 300;
  border: 2px solid rgba(255, 130, 170, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  color: #4a1f3b;
}

.login-form input::placeholder {
  color: rgba(74, 31, 59, 0.5);
  font-weight: 300;
  transition: opacity 0.3s ease;
}

.login-form input:focus {
  outline: none;
  border-color: rgba(255, 107, 157, 0.6);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 0 0 4px rgba(255, 107, 157, 0.1),
    0 8px 25px rgba(255, 107, 157, 0.15);
  transform: translateY(-2px);
}

.login-form input:focus + .input-icon {
  color: #ff6b9d;
  transform: translateY(-50%) scale(1.1);
}

.login-form input:focus::placeholder {
  opacity: 0.3;
}

.login-form input.error {
  border-color: rgba(231, 76, 60, 0.6);
  background: rgba(231, 76, 60, 0.05);
  animation: shake 0.6s ease-in-out;
}

.login-form input.error + .input-icon {
  color: #e74c3c;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.login-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.login-buttons button {
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px;
  position: relative;
  overflow: hidden;
}

.login-buttons .ghost-btn {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: #4a1f3b;
  border: 1px solid rgba(255, 130, 170, 0.3);
}

.login-buttons .ghost-btn:hover {
  background: rgba(255, 130, 170, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 130, 170, 0.2);
}

.login-buttons .save-btn {
  background: linear-gradient(135deg, #ff7fa8 0%, #ff6b9d 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}

.login-buttons .save-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

.login-buttons .save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-buttons .save-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.login-buttons .save-btn:hover:not(:disabled)::before {
  left: 100%;
}

/* Mobile optimization for login modal */
@media (max-width: 480px) {
  .login-modal-content {
    max-width: 95vw;
    margin: 1rem;
  }
  
  .login-modal-content .modal-header {
    padding: 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  }
  
  .login-form {
    padding: 0 1.5rem 1.5rem;
    gap: 1rem;
  }
  
  .login-form input {
    padding: 1rem 1.25rem 1rem 3rem;
    font-size: 0.9375rem;
  }
  
  .login-buttons {
    gap: 0.75rem;
  }
  
  .login-buttons button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    min-width: 80px;
  }
}

.login-buttons .ghost-btn:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
}

.login-buttons .save-btn {
  background: linear-gradient(135deg, #ff7fa8 0%, #ff6b9d 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
}

.login-buttons .save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.5);
}

.login-buttons .save-btn:active {
  transform: translateY(0);
}

.login-error {
  color: #e53e3e;
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(229, 62, 62, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(229, 62, 62, 0.2);
}

/* ===== REGISTER MODAL ===== */
.register-modal-content {
  max-width: 450px;
}

.register-modal-content .modal-header {
  padding: 0;
}

.register-modal-content .modal-header h3 {
  font-size: 24px;
}

.register-modal-content .login-form {
  gap: 0.75rem;
}

/* Register success message */
.register-success {
  color: #38a169;
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(56, 161, 105, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(56, 161, 105, 0.2);
}

/* Register link in login modal */
.register-link {
  text-align: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  color: #666;
}

.register-link .link-btn {
  background: none;
  border: none;
  color: #ff6b8a;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  margin-left: 0.25rem;
  text-decoration: underline;
  font-family: inherit;
}

.register-link .link-btn:hover {
  color: #e5557a;
}

body.dark-mode .register-link {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #aaa;
}

body.dark-mode .register-link .link-btn {
  color: #ff82aa;
}

body.dark-mode .register-link .link-btn:hover {
  color: #ff6b9d;
}

body.dark-mode .register-success {
  color: #68d391;
  background: rgba(104, 211, 145, 0.1);
  border: 1px solid rgba(104, 211, 145, 0.2);
}

/* Mobile optimization for login modal */
@media (max-width: 480px) {
  .login-modal-content {
    max-width: 95vw;
    margin: 1rem;
  }
  
  .login-modal-content .modal-header {
    padding: 1.25rem;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
  }
  
  .login-form {
    padding: 0 1.25rem 1.25rem;
    gap: 1rem;
  }
  
  .login-form input {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
  
  .login-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .login-buttons button {
    width: 100%;
    min-width: auto;
  }
}

/* ===== VIEW MODE ===== */
.view-mode .add-moment-btn,
.view-mode .post-edit,
.view-mode .post-delete,
.view-mode .post-pin,
.view-mode .mini-action,
.view-mode #editorToolbar,
.view-mode .create-footer {
  display: none !important;
}

.view-mode #editor {
  pointer-events: none;
  background: #f8f8f8;
  border-color: #e0e0e0;
}

.view-mode .create-panel {
  display: none !important;
}

/* ===== INVITE MANAGEMENT MODAL ===== */
.invite-modal-content {
  max-width: 650px;
}

.invite-modal-content .modal-header {
  padding: 0;
}

.invite-modal-content .modal-header h3 {
  font-size: 24px;
}

.invite-generate-section {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 180, 210, 0.3);
  border-radius: 12px;
}

.invite-generate-section h4 {
  font-size: 15px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 1rem;
}

.invite-generate-form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.invite-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 150px;
}

.invite-input-group label {
  font-size: 13px;
  font-weight: 300;
  color: #7b345b;
}

.invite-input-group input {
  padding: 10px 14px;
  border: 2px solid rgba(255, 130, 170, 0.2);
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  color: #4a1f3b;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.invite-input-group input:focus {
  outline: none;
  border-color: rgba(255, 107, 157, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

.invite-generate-form .save-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Invite result box */
.invite-result {
  margin-top: 1rem;
}

.invite-code-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(56, 161, 105, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
}

.invite-code-text {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 300;
  color: #2f855a;
  letter-spacing: 1px;
  flex: 1;
  word-break: break-all;
}

.invite-copy-btn {
  background: linear-gradient(135deg, #38a169, #48bb78);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.invite-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);
}

.invite-loading-spinner {
  margin-top: 1rem;
  text-align: center;
  color: #7b345b;
  font-size: 13px;
  font-weight: 300;
}

.invite-loading-spinner span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 130, 170, 0.3);
  border-top-color: #ff6b9d;
  border-radius: 50%;
  animation: inviteSpin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* Invite table */
.invite-table-section {
  margin-top: 1rem;
}

.invite-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.invite-table-header h4 {
  font-size: 15px;
  font-weight: 300;
  color: #4a1f3b;
  margin: 0;
}

.invite-refresh-btn {
  background: none;
  border: 1px solid rgba(255, 130, 170, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: #7b345b;
  font-size: 14px;
  transition: all 0.2s ease;
}

.invite-refresh-btn:hover {
  background: rgba(255, 130, 170, 0.1);
  border-color: #ff6b9d;
}

.invite-table-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 180, 210, 0.3);
  border-radius: 10px;
}

.invite-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.invite-table thead th {
  background: linear-gradient(135deg, #ff7fa8, #ffb3c8);
  color: #4a1f3b;
  font-weight: 300;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.invite-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 180, 210, 0.15);
  color: #4a1f3b;
  font-weight: 300;
}

.invite-table tbody tr:last-child td {
  border-bottom: none;
}

.invite-table tbody tr:hover td {
  background: rgba(255, 240, 246, 0.5);
}

/* Status badges */
.invite-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.invite-status-active {
  background: rgba(56, 161, 105, 0.15);
  color: #2f855a;
  border: 1px solid rgba(56, 161, 105, 0.3);
}

.invite-status-used {
  background: rgba(66, 153, 225, 0.15);
  color: #2b6cb0;
  border: 1px solid rgba(66, 153, 225, 0.3);
}

.invite-status-revoked {
  background: rgba(229, 62, 62, 0.15);
  color: #c53030;
  border: 1px solid rgba(229, 62, 62, 0.3);
}

.invite-status-expired {
  background: rgba(160, 174, 192, 0.15);
  color: #718096;
  border: 1px solid rgba(160, 174, 192, 0.3);
}

/* Revoke button */
.invite-revoke-btn {
  background: linear-gradient(135deg, #fc8181, #e53e3e);
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.invite-revoke-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(229, 62, 62, 0.3);
}

.invite-revoke-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.invite-revoked-btn {
  background: #a0aec0 !important;
}

/* Invite loading/empty states */
.invite-loading,
.invite-empty {
  text-align: center;
  padding: 1.5rem !important;
  color: #9b587f;
  font-size: 13px;
}

/* Admin-only items - hidden by default via .hidden, JS will show them */
.setting-item.admin-only {
  display: none;
}

/* Dark mode */
body.dark-mode .invite-generate-section {
  background: rgba(60, 40, 60, 0.6);
  border-color: rgba(255, 180, 210, 0.2);
}

body.dark-mode .invite-generate-section h4 {
  color: #f0b4e0;
}

body.dark-mode .invite-input-group label {
  color: #d8a7c3;
}

body.dark-mode .invite-input-group input {
  background: rgba(60, 40, 60, 0.8);
  border-color: rgba(255, 180, 210, 0.25);
  color: #f0b4e0;
}

body.dark-mode .invite-input-group input:focus {
  border-color: rgba(255, 107, 157, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.15);
}

body.dark-mode .invite-code-box {
  background: rgba(40, 25, 40, 0.9);
  border-color: rgba(104, 211, 145, 0.3);
}

body.dark-mode .invite-code-text {
  color: #68d391;
}

body.dark-mode .invite-table-wrapper {
  border-color: rgba(255, 180, 210, 0.2);
}

body.dark-mode .invite-table thead th {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.6), rgba(255, 130, 170, 0.4));
  color: #f0b4e0;
}

body.dark-mode .invite-table tbody td {
  color: #d8a7c3;
  border-bottom-color: rgba(255, 180, 210, 0.1);
}

body.dark-mode .invite-table tbody tr:hover td {
  background: rgba(80, 50, 80, 0.5);
}

body.dark-mode .invite-loading-spinner {
  color: #d8a7c3;
}

body.dark-mode .invite-table-header h4 {
  color: #f0b4e0;
}

body.dark-mode .invite-refresh-btn {
  color: #d8a7c3;
  border-color: rgba(255, 130, 170, 0.3);
}

body.dark-mode .invite-refresh-btn:hover {
  background: rgba(255, 130, 170, 0.15);
}

.invite-modal-content .modal-footer {
  margin-top: 1rem;
}

/* ===== HISTORY MODAL ===== */
.history-modal-content {
  max-width: 600px;
  max-height: 80vh;
}

.history-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 180, 210, 0.5);
  padding-bottom: 8px;
}

.history-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #7b345b;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.history-tab:hover {
  background: rgba(255, 200, 220, 0.3);
}

.history-tab.active {
  background: linear-gradient(135deg, #ff7fa8, #ffb3c8);
  color: #4a1f3b;
}

.history-panel {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.history-panel.hidden {
  display: none;
}

/* Custom Scrollbar for History Modal */
.history-panel::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 8px;
}

.history-panel::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track {
  background: rgba(255, 240, 246, 0.5);
  border-radius: 10px;
}

.history-panel::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff9a9e, #ffb3c8);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.history-panel::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff7fa8, #ff9a9e);
}

/* Firefox scrollbar */
.history-panel,
.history-list {
  scrollbar-width: thin;
  scrollbar-color: #ff9a9e rgba(255, 240, 246, 0.5);
}

/* History Filters */
.history-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.title-input,
.editor {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(255, 130, 170, 0.2);
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(255, 130, 170, 0.1);
}

.filter-btn {
  padding: 6px 12px;
  border: 1px solid rgba(255, 180, 210, 0.5);
  background: rgba(255, 255, 255, 0.8);
  color: #7b345b;
  font-size: 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: rgba(255, 200, 220, 0.4);
}

.filter-btn.active {
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: #4a1f3b;
  border-color: transparent;
}

/* History List */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* History Item */
.history-item {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(210, 95, 145, 0.2);
  border: 1px solid rgba(255, 200, 220, 0.4);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.2s ease;
}

.history-item:hover {
  transform: translateX(4px);
}

.history-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 240, 246, 0.8);
}

.history-item-icon.created {
  background: rgba(34, 197, 94, 0.15);
}

.history-item-icon.edited {
  background: rgba(59, 130, 246, 0.15);
}

.history-item-icon.deleted {
  background: rgba(239, 68, 68, 0.15);
}

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

.history-item-title {
  font-size: 14px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-meta {
  font-size: 11px;
  color: #9b587f;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.history-item-date {
  color: #b44678;
}

.history-item-user {
  font-weight: 300;
}

/* History Item Actions */
.history-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.history-view-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
}

.history-view-btn:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  transform: scale(1.05);
}

/* Trash Info */
.trash-info {
  background: rgba(255, 243, 205, 0.8);
  border: 1px solid rgba(255, 234, 167, 0.6);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #856404;
}

.trash-icon {
  font-size: 16px;
}

/* Trash Item */
.trash-item {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(210, 95, 145, 0.2);
  border: 1px solid rgba(255, 200, 220, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.trash-item:hover {
  background: rgba(255, 248, 250, 0.98);
}

.trash-item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

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

.trash-item-title {
  font-size: 14px;
  font-weight: 300;
  color: #4a1f3b;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trash-item-meta {
  font-size: 11px;
  color: #9b587f;
}

.trash-item-expires {
  font-size: 10px;
  color: #dc3545;
  margin-top: 2px;
}

.trash-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.trash-view-btn,
.trash-restore-btn,
.trash-delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trash-view-btn {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
}

.trash-view-btn:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  transform: scale(1.05);
}

.trash-restore-btn {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  color: white;
}

.trash-restore-btn:hover {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  transform: scale(1.05);
}

.trash-delete-btn {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: white;
}

.trash-delete-btn:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: scale(1.05);
}

/* ===== TRASH VIEW MODAL ===== */
#trashViewModal .modal-content {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#trashViewBody {
  background: #ffffff;
  border-radius: 5px;
  padding: 16px;
  margin-top: 12px;
  overflow-y: auto;
  flex: 1;
}

#trashViewBody::-webkit-scrollbar {
  width: 6px;
}

#trashViewBody::-webkit-scrollbar-track {
  background: rgba(255, 240, 246, 0.5);
  border-radius: 10px;
}

#trashViewBody::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff9a9e, #ffb3c8);
  border-radius: 10px;
}

#trashViewBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff7fa8, #ff9a9e);
}

#trashViewBody {
  scrollbar-width: thin;
  scrollbar-color: #ff9a9e rgba(255, 240, 246, 0.5);
}

/* Other month dates (grayed out) */
.day-card.other-month {
  opacity: 0.4;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);
  color: #999;
  cursor: default;
  pointer-events: none;
}

.day-card.other-month .day-number {
  color: #999;
}

.day-card.other-month .day-name {
  color: #bbb;
}

/* Weekend dates in other months - maintain weekend identity */
.day-card.other-month.weekend {
  opacity: 0.4;
  background: rgba(255, 120, 170, 0.12);
  border: 1px solid rgba(255, 120, 170, 0.22);
  color: #c2185b;
  cursor: default;
  pointer-events: none;
}

.day-card.other-month.weekend .day-number {
  color: #c2185b;
}

.day-card.other-month.weekend .day-name {
  color: rgba(194, 24, 91, 0.72);
}

/* Empty State */
.history-empty,
.trash-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9b587f;
  font-size: 14px;
}

.history-empty-icon,
.trash-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ===== RESPONSIVE - MOBILE FIRST APPROACH ===== */
/* Base styles for desktop */

/* Large desktop - 1200px and above */
@media (min-width: 1200px) {
  .wrapper {
    max-width: 1000px;
    padding: 40px 50px;
  }
  
  .journey-sidebar {
    width: 300px;
  }
}

/* Small desktop/Large tablet - 1024px */
/* Note: Responsive styles are now handled in the comprehensive media queries section above */

/* Tablet and below - 768px */
/* Note: Responsive styles are now handled in the comprehensive media queries section above */

/* Modal content responsive */
/* Note: All responsive styles are now handled in the comprehensive media queries section at the top */

/* Journey page specific styles */

/* Medium phone - 480px */
/* Note: Responsive styles are now handled in the comprehensive media queries section above */

/* Note: All responsive styles are now handled in the comprehensive media queries section at the top */

/* Additional styles */

/* Modal responsive styles */
/* Note: All responsive styles are now handled in the comprehensive media queries section at the top */

/* === PATCH: Soft romantic borders === */
.title-input,
.editor {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(255, 180, 210, 0.55);
  transition: 0.2s ease;
}
.title-input:focus,
.editor:focus {
  outline: none !important;
  border-color: rgba(255, 120, 170, 0.7);
  box-shadow:
    0 0 0 2px rgba(255, 170, 210, 0.5),
    0 4px 10px rgba(255, 160, 200, 0.35);
}
.modal-content,
.mini-card {
  border: 1px solid rgba(255, 200, 220, 0.55) !important;
  box-shadow:
    0 18px 40px rgba(255, 130, 170, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}
*:focus {
  outline: none !important;
}

@keyframes navFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ===== FLOATING NAVIGATION ===== */
.floating-nav {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 6px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 200, 220, 0.3);
}

/* Desktop Floating Navigation Optimization */
@media (min-width: 1200px) and (max-width: 1440px) {
  .floating-nav {
    top: 15px;
    padding: 8px;
    border-radius: 24px;
    box-shadow: 
      0 15px 50px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.9),
      inset 0 2px 0 rgba(255, 255, 255, 0.95);
  }
  
  .floating-nav .nav-menu {
    gap: 6px;
  }
  
  .floating-nav .nav-item {
    padding: 8px 14px;
    min-width: 60px;
    border-radius: 14px;
  }
  
  .floating-nav .nav-icon {
    font-size: 20px;
    margin-bottom: 3px;
  }
  
  .floating-nav .nav-text {
    font-size: 11px;
  }
  
  .floating-nav .nav-item.nav-action {
    border-radius: 18px;
  }
  
  .floating-nav .notification-badge {
    top: -6px;
    right: -6px;
    font-size: 11px;
    padding: 3px 6px;
    min-width: 20px;
  }
}

.floating-nav .nav-menu {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.floating-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 60px;
  text-decoration: none;
  color: #4a1f3b;
  position: relative;
}

.floating-nav .nav-item:hover {
  background: rgba(255, 130, 170, 0.1);
  transform: translateY(-2px);
}

.floating-nav .nav-item.active {
  background: rgba(255, 95, 159, 0.15);
  color: #ff5f9f;
}

.floating-nav .nav-icon {
  font-size: 18px;
  margin-bottom: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-nav .nav-text {
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.floating-nav .nav-item.nav-action {
  background: transparent;
  border-radius: 12px;
  min-width: 60px;
  padding: 8px 12px;
}

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

.floating-nav .notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e74c3c;
  color: white;
  font-size: 10px;
  font-weight: 300;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Floating Navigation Responsive */
@media (max-width: 768px) {
  .floating-nav {
    top: 15px;
    padding: 6px;
    gap: 2px;
  }
  
  .floating-nav .nav-item {
    padding: 6px 8px;
    min-width: 50px;
  }
  
  .floating-nav .nav-icon {
    font-size: 18px;
  }
  
  .floating-nav .nav-text {
    font-size: 9px;
  }
}

@media (max-width: 600px) {
  .floating-nav {
    top: 10px;
    padding: 4px;
    gap: 1px;
  }
  
  .floating-nav .nav-item {
    padding: 4px 6px;
    min-width: 45px;
  }
  
  .floating-nav .nav-icon {
    font-size: 16px;
    margin-bottom: 1px;
  }
  
  .floating-nav .nav-text {
    font-size: 8px;
  }
  
  .floating-nav .nav-item.nav-action .nav-text {
    display: none;
  }
}

@media (max-width: 400px) {
  .floating-nav {
    top: 8px;
    padding: 3px;
  }
  
  .floating-nav .nav-item {
    padding: 3px 5px;
    min-width: 40px;
  }
  
  .floating-nav .nav-icon {
    font-size: 14px;
  }
  
  .floating-nav .nav-text {
    display: none;
  }
  
  .floating-nav .notification-badge {
    top: -3px;
    right: -3px;
    font-size: 8px;
    min-width: 14px;
  }
}

/* ===== MAIN HEADER ===== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 9998;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
    linear-gradient(145deg, #ffeef8 0%, #ffe0f0 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 4px 20px rgba(255, 130, 170, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 200, 220, 0.3);
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-title {
  font-size: 24px;
  font-weight: 300;
  color: #e11d48;
  margin: 0;
  letter-spacing: -0.5px;
}

.brand-subtitle {
  font-size: 12px;
  color: #9b587f;
  margin: 0;
  font-weight: 300;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: #7b345b;
  font-weight: 300;
}

.nav-item:hover {
  background: rgba(255, 130, 170, 0.1);
  transform: translateY(-2px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2) 0%, rgba(225, 29, 72, 0.1) 100%);
  color: #e11d48;
}

.nav-icon {
  font-size: 20px;
}

.nav-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  padding-top: 100px;
  padding-bottom: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100vw;
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: 
    radial-gradient(ellipse at top left, rgba(255, 182, 193, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(255, 218, 185, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(221, 160, 221, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(176, 224, 230, 0.4) 0%, transparent 50%),
    linear-gradient(135deg, #ffeef8 0%, #ffe0f0 25%, #ffd1e8 50%, #ffc2e0 75%, #ffb3d8 100%);
  background-attachment: fixed;
  color: #4a1f3b;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}

/* ===== MAIN FOOTER ===== */
.main-footer {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
    linear-gradient(145deg, #ffeef8 0%, #ffe0f0 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 200, 220, 0.3);
  box-shadow: 
    0 -4px 20px rgba(255, 130, 170, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 20px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-text {
  font-size: 14px;
  color: #7b345b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 1;
  font-weight: 300;
}

.footer-copyright {
  font-size: 13px;
  color: #9b587f;
  margin: 0;
  opacity: 1;
}

.heart-pulse {
  animation: heartPulse 1.5s ease-in-out infinite;
  color: #e11d48;
}

@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-nav {
    padding: 0;
    height: 100%;
    width: 100%;
  }
  
  .nav-menu {
    gap: 4px;
  }
  
  .nav-item {
    padding: 8px 12px;
  }
  
  .nav-text {
    font-size: 10px;
  }
  
  .brand-title {
    font-size: 20px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* Modern UI Enhancements */

@keyframes wrapperFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

/* Enhanced hover effects */
.day-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(255, 150, 180, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(255, 150, 180, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button enhancements */
.nav-btn,
.save-btn,
.ghost-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.nav-btn::before,
.save-btn::before,
.ghost-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.nav-btn:active::before,
.save-btn:active::before,
.ghost-btn:active::before,
.add-moment-btn:active::before {
  width: 300px;
  height: 300px;
}

/* Modal entrance animation */
.modal.active .modal-content {
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Floating buttons enhancement (DEPRECATED) */
/*
.floating-journey-btn,
.floating-login-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.floating-journey-btn:hover,
.floating-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 130, 170, 0.4);
}
*/

/* Dark Mode Styles */
body.dark-mode {
  background: radial-gradient(
    circle at top,
    #1a0f1a 0,
    #2d1b2d 30%,
    #402740 60%,
    #543354 100%
  );
  color: #f0b4e0;
}

body.dark-mode .wrapper {
  background: rgba(40, 25, 40, 0.95);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 180, 210, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dark-mode .journey-sidebar {
  background: rgba(40, 25, 40, 0.85);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 180, 210, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dark-mode .day-card {
  background: rgba(60, 40, 60, 0.8);
  border: 1px solid rgba(255, 180, 210, 0.2);
}

body.dark-mode .day-card:hover {
  background: rgba(80, 50, 80, 0.9);
  box-shadow: 0 8px 25px rgba(255, 130, 170, 0.3);
}

body.dark-mode .journey-item {
  background: rgba(60, 40, 60, 0.8);
  border: 1px solid rgba(255, 200, 220, 0.2);
}

body.dark-mode .journey-item:hover {
  background: rgba(80, 50, 80, 0.9);
}

body.dark-mode .modal-content,
body.dark-mode .mini-card {
  background: rgba(40, 25, 40, 0.98);
  border: 1px solid rgba(255, 180, 210, 0.3) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 180, 210, 0.2) !important;
}

body.dark-mode .title-input,
body.dark-mode .editor {
  background: rgba(60, 40, 60, 0.9);
  border: 1px solid rgba(255, 180, 210, 0.3);
  color: #f0b4e0;
}

body.dark-mode .title-input:focus,
body.dark-mode .editor:focus {
  border-color: rgba(255, 130, 170, 0.5);
  box-shadow:
    0 0 0 2px rgba(255, 130, 170, 0.3),
    0 4px 10px rgba(255, 130, 170, 0.2);
}

body.dark-mode .nav-btn,
body.dark-mode .save-btn,
body.dark-mode .ghost-btn {
  background: rgba(80, 50, 80, 0.9);
  border: 1px solid rgba(255, 180, 210, 0.3);
  color: #f0b4e0;
}

body.dark-mode .add-moment-btn {
  background: rgba(60, 40, 60, 0.8);
  border-color: rgba(255, 180, 210, 0.3);
  color: #f0b4e0;
}

body.dark-mode .add-moment-btn:hover {
  background: rgba(80, 50, 80, 0.9);
  border-color: rgba(255, 130, 170, 0.5);
  color: #ff6b9d;
}

body.dark-mode .nav-btn:hover,
body.dark-mode .save-btn:hover,
body.dark-mode .ghost-btn:hover {
  background: rgba(100, 60, 100, 0.9);
}

body.dark-mode .floating-journey-btn,
body.dark-mode .floating-login-btn,
body.dark-mode .floating-dark-mode-btn {
  background: rgba(60, 40, 60, 0.9);
  border: 1px solid rgba(255, 180, 210, 0.3);
  color: #f0b4e0;
}
*/

body.dark-mode #darkModeToggle {
  content: "☀";
}

/* Font Awesome Icon Colors */
.fas {
  color: inherit;
}

.far {
  color: inherit;
}

/* Specific icon color optimizations */
.fas.fa-heart {
  color: #ff4757;
}

.fas.fa-camera {
  color: #5f27cd;
}

.fas.fa-broom {
  color: #ff6b9d;
}

.fas.fa-cog {
  color: #747d8c;
}

.fas.fa-sun {
  color: #ffa502;
}

.fas.fa-moon {
  color: #2f3542;
}

.fas.fa-trash {
  color: #ff4757;
}

.fas.fa-edit {
  color: #3742fa;
}

.fas.fa-image {
  color: #ff6348;
}

.fas.fa-birthday-cake {
  color: #ff9ff3;
}

.fas.fa-gift {
  color: #ff6b9d;
}

.fas.fa-thumbtack {
  color: #ff4757;
}

.fas.fa-times-circle {
  color: #ff4757;
}

.fas.fa-check-circle {
  color: #26de81;
}

.fas.fa-info-circle {
  color: #4834d4;
}

.fas.fa-exclamation-triangle {
  color: #ffa502;
}

.fas.fa-eye {
  color: #3742fa;
}

.fas.fa-recycle {
  color: #26de81;
}

.fas.fa-gift-heart {
  color: #ff4757;
}

/* Button hover effects for Font Awesome */
button:hover .fas,
button:hover .far {
  opacity: 0.8;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* Dark mode adjustments */
body.dark-mode .fas.fa-sun {
  color: #ffa502;
}

body.dark-mode .fas.fa-moon {
  color: #f1f2f6;
}

body.dark-mode .fas.fa-cog {
  color: #f1f2f6;
}

/* Smooth theme transition */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Loading States */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button loading states */
.nav-btn.loading,
.save-btn.loading,
.ghost-btn.loading {
  color: transparent;
}

.nav-btn.loading::after,
.save-btn.loading::after,
.ghost-btn.loading::after {
  border-color: #4a1f3b transparent #4a1f3b transparent;
}

/* Success feedback */
.success-feedback {
  position: relative;
  overflow: hidden;
}

.success-feedback::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 24px;
  color: #4caf50;
  animation: successPop 0.6s ease-out;
}

@keyframes successPop {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Error shake animation */
.error-shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Hover lift effect */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Remove focus outline from journey buttons to match review buttons */
#ourJourneyBtn:focus,
#ourJourneyBtnMobile:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus visible for better keyboard navigation */
.focus-visible:focus {
  outline: 2px solid #ff4f7c;
  outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
button,
input,
.day-card,
.journey-item {
  transition: all 0.2s ease;
}

/* Progress indicator */
.progress-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff4f7c, #e11d48, #ff4f7c);
  background-size: 200% 100%;
  animation: progress 1.5s linear infinite;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.progress-indicator.active {
  opacity: 1;
}

@keyframes progress {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Offline Mode Indicator */
.offline-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 152, 0, 0.95);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 300;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideInDown 0.3s ease-out;
}

.offline-indicator.hidden {
  display: none;
}

.offline-icon {
  font-size: 16px;
  animation: pulse 2s infinite;
}

@keyframes slideInDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Settings Modal Styles */
.settings-form {
  padding: 20px 0;
}

.setting-item {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 180, 210, 0.2);
  transition: background 0.3s ease;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 25px 0;
}

.setting-item:hover {
  background: rgba(255, 250, 252, 0.5);
}

.setting-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 16px;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-weight: 300;
  color: #4a1f3b;
}

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

/* Holiday Buttons Grid Layout */
.holiday-buttons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 480px) {
  .holiday-buttons-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .holiday-buttons-grid .setting-btn:first-child {
    grid-column: 1 / -1;
  }
}

/* Button Variants */
.setting-btn.primary-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  font-weight: 300;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
}

.setting-btn.primary-btn:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.setting-btn.secondary-btn {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #495057;
  border: 1px solid #dee2e6;
}

.setting-btn.secondary-btn:hover {
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  color: #343a40;
  border-color: #adb5bd;
}

.setting-btn {
  padding: 10px 18px;
  background: #ffb8d4;
  color: #4a1f3b;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(255, 130, 170, 0.1);
}

.setting-btn:hover {
  background: #ff9fc7;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 130, 170, 0.2);
}

.setting-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(255, 130, 170, 0.2);
}

.setting-btn i {
  font-size: 15px;
  transition: transform 0.2s ease;
}

.setting-btn:hover i {
  transform: scale(1.1);
}

/* Custom Confirmation Dialog */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.confirm-dialog {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

.confirm-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.confirm-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.confirm-dialog-body {
  margin-bottom: 24px;
}

.confirm-dialog-body p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

.confirm-dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.confirm-btn.cancel:hover {
  background: #d0d0d0 !important;
}

.confirm-btn.delete:hover {
  background: #ff5a8a !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.setting-icon {
  font-size: 20px;
  width: 30px;
  text-align: center;
}

.setting-text {
  font-size: 16px;
}

/* Add Holiday Modal Styles */
.add-holiday-modal-content {
  max-width: 500px;
  width: 90%;
  animation: fadeIn 0.3s ease;
}

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

.holiday-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

.holiday-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.holiday-form label {
  font-weight: 300;
  color: #4a1f3b;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.holiday-form label::before {
  content: '';
  width: 4px;
  height: 4px;
  background: #ff82aa;
  border-radius: 50%;
}

.holiday-form .form-input {
  padding: 12px 16px;
  border: 2px solid #ffb8d4;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: white;
}

.holiday-form .form-input:focus {
  outline: none;
  border-color: #ff82aa;
  box-shadow: 0 0 0 3px rgba(255, 130, 170, 0.1);
}

.holiday-form .form-input:hover {
  border-color: #ffa0c7;
}

.holiday-form select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff82aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 180, 210, 0.2);
}

.btn-secondary {
  padding: 10px 20px;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #d0d0d0;
  transform: translateY(-1px);
}

.btn-primary {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Shake animation for validation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
  border-color: #ff4757 !important;
}

.form-input.shake:focus {
  box-shadow: 0 0 0 4px rgba(255, 71, 87, 0.1) !important;
}

.theme-toggle {
  display: flex;
  gap: 10px;
  margin-left: 42px;
}

button.nav-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  color: #4a1f3b;
  border: 1px solid rgba(255, 130, 170, 0.3);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(255, 130, 170, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

button.nav-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(255, 130, 170, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.save-btn {
  background: linear-gradient(135deg, #ff6b9d 0%, #e11d48 50%, #c44569 100%);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 
    0 4px 15px rgba(255, 107, 157, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ghost-btn {
  background: rgba(255, 255, 255, 0.8);
  color: #e11d48;
  border: 2px solid rgba(225, 29, 72, 0.3);
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.setting-action-btn {
  margin-left: 42px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ff4f7c, #e11d48);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  transition: all 0.3s ease;
}

.setting-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 79, 124, 0.4);
}

/* Dark mode settings styles */
body.dark-mode .setting-item {
  border-bottom-color: rgba(255, 180, 210, 0.1);
}

body.dark-mode .setting-label {
  color: #f0b4e0;
}

body.dark-mode .theme-btn {
  background: rgba(60, 40, 60, 0.8);
  border-color: rgba(255, 130, 170, 0.3);
  color: #f0b4e0;
}

body.dark-mode .theme-btn:hover {
  background: rgba(255, 130, 170, 0.1);
  border-color: rgba(255, 130, 170, 0.5);
}

body.dark-mode .setting-action-btn {
  background: linear-gradient(135deg, #ff6b9d, #c44569);
}

/* ===== UPLOAD POPUP MODAL ===== */
.upload-progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upload-modal-content {
  background: #ffffff;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 480px;
  min-height: 200px;
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

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

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

.upload-modal-header {
  text-align: center;
  padding: 28px 28px 20px;
  position: relative;
}

.upload-modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  color: #1a1a1a;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.upload-modal-list {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
}

/* Custom scrollbar for modal list */
.upload-modal-list::-webkit-scrollbar {
  width: 6px;
}

.upload-modal-list::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.upload-modal-list::-webkit-scrollbar-thumb {
  background: #ff6b9d;
  border-radius: 3px;
}

.upload-modal-list::-webkit-scrollbar-thumb:hover {
  background: #e11d48;
}

.upload-modal-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.upload-modal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 107, 157, 0.2);
}

.upload-modal-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5f8 0%, #ffe0ee 100%);
  box-shadow: 0 4px 12px -4px rgba(255, 107, 157, 0.2);
}

.upload-modal-info {
  flex: 1;
  min-width: 0;
}

.upload-modal-name {
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.025em;
}

.upload-modal-status {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 300;
}

.upload-modal-progress {
  height: 6px;
  background: #e5e5e5;
  overflow: hidden;
  position: relative;
}

.upload-modal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #e11d48);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.upload-modal-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.upload-modal-percent {
  font-size: 16px;
  font-weight: 300;
  color: #ff6b9d;
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.upload-modal-item.completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(72, 187, 120, 0.2);
}

.upload-modal-item.completed .upload-modal-icon {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #16a34a;
}

.upload-modal-item.completed .upload-modal-percent {
  color: #16a34a;
}

.upload-modal-item.error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: rgba(255, 100, 100, 0.2);
  animation: shake 0.5s ease-in-out;
}

.upload-modal-item.error .upload-modal-progress-fill {
  background: linear-gradient(90deg, #fc8181, #e53e3e);
}

.upload-modal-item.error .upload-modal-icon {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #dc2626;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .upload-progress-modal {
    padding: 16px;
  }
  
  .upload-modal-content {
    border-radius: 20px;
    max-width: 100%;
  }
  
  .upload-modal-header {
    padding: 24px 24px 16px;
  }
  
  .upload-modal-header h3 {
    font-size: 20px;
  }
  
  .upload-modal-list {
    padding: 0 24px 24px;
    gap: 12px;
  }
  
  .upload-modal-item {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .upload-modal-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* ===== NOTE UPLOAD PROGRESS (DEPRECATED) ===== */
.note-upload-progress {
  margin-top: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 240, 246, 0.95), rgba(255, 230, 240, 0.9));
  border-radius: 12px;
  border: 2px solid rgba(255, 130, 170, 0.3);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

.note-upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  max-width: 400px;
}

.note-upload-item:last-child {
  margin-bottom: 0;
}

.note-upload-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.note-upload-icon {
  font-size: 24px;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

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

.note-upload-info {
  flex: 1;
  min-width: 0;
}

.note-upload-name {
  font-size: 14px;
  font-weight: 300;
  color: #4a1f3b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.note-upload-status {
  font-size: 13px;
  color: #9b587f;
  margin-bottom: 6px;
  font-weight: 300;
}

.note-upload-progress {
  height: 6px;
  background: #ffe0ee;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.note-upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #e11d48);
  border-radius: 3px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.note-upload-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.note-upload-item.completed {
  opacity: 0.8;
  background: linear-gradient(135deg, #f0fff4, #e6ffed);
  border: 1px solid rgba(72, 187, 120, 0.3);
}

.note-upload-item.completed .note-upload-icon {
  animation: none;
}

.note-upload-item.error {
  background: linear-gradient(135deg, #fff5f5, #ffe0e0);
  border: 2px solid rgba(255, 100, 100, 0.4);
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.note-upload-item.error .note-upload-status {
  color: #e53e3e;
  font-weight: 300;
}

.note-upload-item.error .note-upload-progress-fill {
  background: linear-gradient(90deg, #fc8181, #e53e3e);
}

/* Upload percentage indicator */
.note-upload-item::after {
  content: attr(data-percent);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 300;
  color: #e11d48;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(225, 29, 72, 0.2);
}

/* ===== PROFILE MODAL STYLES ===== */
.profile-modal-content {
  max-width: 500px;
  width: 90%;
}

.profile-form .form-group {
  margin-bottom: 1.5rem;
}

.profile-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #5a2341;
}

.profile-form .form-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #fce4ec;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.profile-form .form-input:focus {
  outline: none;
  border-color: #ff7fa8;
  box-shadow: 0 0 0 3px rgba(255, 127, 168, 0.1);
}

.profile-form .form-input[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

.profile-form textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

.profile-form .form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 12px;
  color: #999;
}

.profile-stats {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #fce4ec;
}

.profile-stats h4 {
  margin-bottom: 1rem;
  color: #5a2341;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: #fce4ec;
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 300;
  color: #ff4081;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 0.25rem;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid #fce4ec;
  margin-top: 1rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #ff4081;
  color: white;
}

.btn-primary:hover {
  background: #e91e63;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* Sliding Panels */
.sliding-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.sliding-panel.active {
  right: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #ff6b9d, #e11d48);
  color: white;
}

.panel-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
}

.close-panel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-primary);
  backdrop-filter: blur(10px);
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

.close-panel:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  color: #ff6b9d;
}

.panel-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100vh;
}

.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

.panel-overlay.active {
  opacity: 1;
  visibility: visible;
}