/* ========================================
   NAVIGATION CSS - 統一されたナビゲーション
   ======================================== */

/* Navigation - aligned with homepage/index styles */

.navbar { background: rgba(0, 0, 0, 0.95); height: var(--header-height); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-primary); }
.navbar .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); height: 100%; display: flex; align-items: center; justify-content: space-between; }

.navbar-brand { color: var(--text-primary); text-decoration: none; font-size: 1.5rem; font-weight: 700; }
.navbar-brand:hover { color: var(--color-primary); }

.navbar-nav { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }

.nav-link { color: var(--nav-text-primary); text-decoration: none; font-weight: 500; transition: all var(--transition); padding: 0.5rem 1rem; border-radius: var(--radius); }
.nav-link:hover { color: var(--nav-text-hover); background: rgba(255, 255, 255, 0.1); }

.nav-link.active { color: var(--color-primary); background: rgba(22, 163, 74, 0.1); }

.navbar-toggler { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }

/* Responsive */
@media (max-width: 768px) {
  .navbar-nav { display: none; }
  .navbar-toggler { display: block; }
  
  .navbar-nav.show { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(0, 0, 0, 0.95); padding: 1rem; border-top: 1px solid var(--border-primary); }
} 

/* ブランドロゴ */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-brand::before {
    content: '🦍';
    font-size: 1.25rem;
    animation: float 3s ease-in-out infinite;
}

.navbar-brand:hover {
    color: #16a34a;
    transform: translateY(-1px);
}

/* ナビゲーションメニュー */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 1rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    filter: contrast(1);
}

.navbar-nav a::before {
    display: none;
}

.navbar-nav a:hover {
    color: #0ea5e9;
    background: rgba(255, 255, 255, 0.1);
}

.navbar-nav a:hover::before {
    display: none;
}

/* nav-linkスタイル（spanでもリンクと同じ見た目に） */
.navbar .nav-link,
.navbar span.nav-link,
ul#primary-navigation.navbar-nav li.dropdown span.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--nav-text-primary) !important;
    -webkit-text-fill-color: var(--nav-text-primary) !important;
    text-decoration: none;
    font-weight: 500;
    border-radius: 1rem;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    filter: contrast(1);
}

.nav-link::before {
    display: none;
}

.nav-link:hover {
    color: var(--nav-text-hover) !important;
    background: rgba(255, 255, 255, 0.1);
}

.nav-link:hover::before {
    display: none;
}

/* ナビゲーション内のすべての要素を強制的に白にする */
.navbar * {
    color: var(--nav-text-primary) !important;
}

.navbar a,
.navbar span,
.navbar li,
.navbar .dropdown-item,
.navbar .nav-link {
    color: var(--nav-text-primary) !important;
}

/* 通常状態での設定文字を確実に白にする */
.navbar .dropdown span.nav-link:not(:hover) {
    color: var(--nav-text-primary) !important;
    -webkit-text-fill-color: var(--nav-text-primary) !important;
}

/* より具体的なセレクタで通常状態を強制 */
.navbar .dropdown > span.nav-link:not(:hover),
.navbar .dropdown > .nav-link:not(:hover) {
    color: var(--nav-text-primary) !important;
    -webkit-text-fill-color: var(--nav-text-primary) !important;
    background-color: transparent !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Chrome用の特別な指定 */
.navbar span.nav-link,
.navbar .dropdown span.nav-link,
ul#primary-navigation.navbar-nav li.dropdown span.nav-link,
.navbar .dropdown .nav-link {
    color: var(--nav-text-primary) !important;
    -webkit-text-fill-color: var(--nav-text-primary) !important;
    filter: contrast(1) brightness(1) saturate(1);
    background-color: transparent !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* より具体的なセレクタでChromeの問題を解決 */
.navbar .dropdown > span.nav-link,
.navbar .dropdown > .nav-link {
    color: var(--nav-text-primary) !important;
    -webkit-text-fill-color: var(--nav-text-primary) !important;
    filter: contrast(1) brightness(1) saturate(1);
    background-color: transparent !important;
}

/* ホバー時のみアクセントカラー */
.navbar a:hover,
.navbar span:hover,
.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
    color: var(--nav-text-hover) !important;
    -webkit-text-fill-color: var(--nav-text-hover) !important;
}

/* ドロップダウンメニュー */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    padding: 0;
    margin-top: 0.5rem;
    overflow: hidden;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 通知ドロップダウン */
.notifications-dropdown .dropdown-menu {
    min-width: 320px;
}

  .notifications-toggle {
     position: relative;
     overflow: visible; /* ensure badge is not clipped */
     background: none;
     border: none;
     color: #ffffff;
     padding: 0.5rem;
     border-radius: 0.5rem;
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     gap: 0.25rem;
 }

.notifications-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.notification-icon {
    width: 20px;
    height: 20px;
    color: #ffffff;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.notifications-toggle:hover .notification-icon {
    color: #16a34a;
    transform: scale(1.1);
}

/* 通知バッジ */
  .notification-badge {
     position: absolute;
     top: -8px;
     right: -8px;
     transform: translate(50%, -50%);
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     color: white;
     font-size: 0.72rem;
     font-weight: 700;
     padding: 0.2rem 0.48rem;
     border-radius: 999px;
     min-width: 1.4rem;
     height: 1.4rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
     animation: pulse 2s infinite;
     pointer-events: none;
 }

.notification-badge.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
    }
}

/* 通知メニュー */
.notifications-menu {
    padding: 0;
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.view-all-notifications-header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.view-all-notifications-header:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.notifications-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

.mark-all-read-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mark-all-read-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}

.notifications-content {
    padding: 1rem 1.5rem;
}

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

.notification-preview-text {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.notification-preview-text strong {
    color: #0ea5e9;
    font-weight: 600;
}

.view-all-notifications {
    display: inline-block;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.view-all-notifications:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
    color: white;
}

.no-notifications {
    text-align: center;
    padding: 2rem 1rem;
}

.no-notifications-icon {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.no-notifications p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.9rem;
}

.no-notifications .view-all-notifications {
    margin-top: 1rem;
}

/* ユーザーメニュー */
.user-dropdown .dropdown-menu {
    min-width: 280px;
}

.user-toggle {
    background: none;
    border: none;
    color: #ffffff;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.dropdown-arrow {
    color: rgba(255, 255, 255, 0.7);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.user-toggle:hover .dropdown-arrow {
    color: #16a34a;
    transform: rotate(180deg);
}

/* ユーザーメニューコンテンツ */
.user-menu {
    padding: 0;
}

.user-menu-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-avatar-large-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-details {
    flex: 1;
}

.user-name-large {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.user-email {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.user-menu-items {
    padding: 0.5rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-left: 3rem;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 0.9rem;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateX(5px);
}

.menu-icon {
    color: rgba(255, 255, 255, 0.7);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover .menu-icon {
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 1rem;
}

.logout-item {
    color: #ef4444;
    margin-left: 0; /* ログアウトボタンは左側の余白を適用しない */
}

.logout-item:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.logout-item:hover .menu-icon {
    color: #ef4444;
}

/* ユーザープロフィール */
.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.user-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.user-profile:hover::before {
    left: 100%;
}

.user-profile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border-color: #16a34a;
    color: #16a34a;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition);
}

.user-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.user-name {
    color: #ffffff;
    font-weight: 600;
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.user-profile:hover .user-avatar,
.user-profile:hover .user-avatar-placeholder {
    border-color: #0ea5e9;
}

/* モバイルナビゲーション */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.mobile-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-toggle span {
    width: 24px;
    height: 2px;
    background: #ffffff;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* アニメーション */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

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

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .navbar .container {
        padding: 0 1rem;
    }
    
    .navbar-nav {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: flex;
    }
    
    .navbar-nav.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav.active a {
        padding: 1rem;
        border-radius: var(--radius-lg);
        margin-bottom: 0.5rem;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.05);
        margin-top: 0.5rem;
    }

    /* Mobile: push hamburger to the right, bell sits before it */
    #mobile-notifications-link { margin-left: auto; }
} 

/* Mobile dropdown sheet and overlay */
@media (max-width: 768px) {
  /* Inline dropdowns on mobile */
  .nav-overlay { display: none !important; }
  body.dropdown-open, body.nav-locked { overflow: auto !important; }

  /* Show dropdown content inline within mobile menu */
  .navbar-nav.active .dropdown-menu,
  .dropdown-menu {
    position: static !important;
    top: auto; left: auto; right: auto;
    margin: 0.25rem 0 0.5rem 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Ensure links look consistent in inline list */
  .user-menu .menu-item,
  .notifications-menu a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
} 

@media (max-width: 768px) {
  .user-menu .section-title {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.8rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
  }
} 

@media (max-width: 768px) {
  /* Drawer container */
  .navbar-nav {
    display: none;
  }
  .mobile-nav-toggle { display: flex; }

  .navbar-nav.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height, 70px);
    left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
    overflow-y: auto;
    height: calc(100vh - var(--header-height, 70px));
    z-index: 999;
  }

  /* Spacing & grouping */
  .navbar-nav.active > li { margin-bottom: 0.25rem; }
  .navbar-nav.active a { padding: 0.9rem 0.75rem; border-radius: var(--radius-lg); }

  /* Section titles in user menu already styled; ensure contrast for inline lists */
  .dropdown-menu {
    background: transparent !important;
    margin: 0.25rem 0 0.75rem 0;
  }

  /* Sticky bottom actions (e.g., logout) */
  .navbar-nav.active .logout-item {
    position: relative;
  }
} 

@media (max-width: 768px) {
  /* Reset dropdown menu visuals in drawer */
  .navbar-nav.active .dropdown-menu {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0.25rem 0 0.75rem 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
} 

/* Visibility helpers */
.mobile-only { display: none; }
.desktop-only { display: initial; }
/* Inline elements that should appear only on mobile (e.g., header bell icon) */
.mobile-inline { display: none; }


@media (max-width: 768px) {
  .mobile-only { display: list-item; }
  .desktop-only { display: none !important; }
  .mobile-inline { display: inline-flex; }
} 

@media (max-width: 768px) {
  .mobile-section-title {
    padding: 0.75rem 0.25rem 0.25rem;
    font-size: 0.8rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
  }
} 

@media (max-width: 768px) {
  /* Stronger separators for professional clarity */
  .mobile-section-title {
    border-top: 1px solid rgba(255,255,255,0.28); /* stronger */
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    padding-left: 0.25rem;
  }
  .navbar-nav .mobile-section-title:first-of-type {
    border-top: 1px solid rgba(255,255,255,0.28); /* start with a clear top rule */
    margin-top: 0.5rem;
    padding-top: 0.6rem;
  }

  /* Item rows with clear dividers */
  .mobile-only > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    margin: 0;
    border-radius: 1.5rem;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    min-height: 120px;
    text-align: center;
    font-size: 0.9rem;
  }
  
  /* 異なる形状のカード */
  .mobile-only:nth-child(odd) > a {
    border-radius: 2rem 0.5rem 2rem 0.5rem;
  }
  
  .mobile-only:nth-child(even) > a {
    border-radius: 0.5rem 2rem 0.5rem 2rem;
  }
  
  /* 特別なカード */
  .mobile-only:first-child > a {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-color: rgba(22, 163, 74, 0.3);
  }
  
  .mobile-only:nth-child(3) > a {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.3);
  }
  
  .mobile-only:nth-child(5) > a {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
    border-color: rgba(168, 85, 247, 0.3);
  }
  
  .mobile-only > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .mobile-only > a:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px) scale(1.05) rotate(1deg);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  }
  
  .mobile-only > a:hover::before {
    left: 100%;
  }
  
  .mobile-only > a:active {
    transform: translateY(-1px) scale(0.95) rotate(0deg);
    transition: all 100ms ease;
  }

  /* Avoid extra border on the very last item */
  .navbar-nav .mobile-only:last-child > a { border-bottom: none; }

  /* Emphasize logout separation */
  .mobile-only .logout-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    margin: 0;
    border-radius: 1rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
    width: 100%;
  }
  
  .mobile-only .logout-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .mobile-only .logout-item:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.12) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
  }
  
  .mobile-only .logout-item:hover::before {
    left: 100%;
  }
  
  .mobile-only .logout-item:active {
    transform: translateY(0) scale(0.98);
    transition: all 100ms ease;
  }
} 

@media (max-width: 768px) {
  /* Unify ALL mobile nav links appearance */
  .navbar-nav.active > li { margin: 0; }
  .navbar-nav.active > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    margin: 0;
    border-radius: 1.5rem;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    min-height: 120px;
    text-align: center;
    font-size: 0.9rem;
  }
  
  /* 異なる形状のカード */
  .navbar-nav.active > li:nth-child(odd) > a {
    border-radius: 2rem 0.5rem 2rem 0.5rem;
  }
  
  .navbar-nav.active > li:nth-child(even) > a {
    border-radius: 0.5rem 2rem 0.5rem 2rem;
  }
  
  /* 特別なカード */
  .navbar-nav.active > li:first-child > a {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-color: rgba(22, 163, 74, 0.3);
  }
  
  .navbar-nav.active > li:nth-child(3) > a {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.3);
  }
  
  .navbar-nav.active > li:nth-child(5) > a {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
    border-color: rgba(168, 85, 247, 0.3);
  }
  
  .navbar-nav.active > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .navbar-nav.active > li > a:hover { 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px) scale(1.05) rotate(1deg);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  }
  
  .navbar-nav.active > li > a:hover::before {
    left: 100%;
  }
  
  .navbar-nav.active > li > a:active {
    transform: translateY(-1px) scale(0.95) rotate(0deg);
    transition: all 100ms ease;
  }
  
  /* Avoid border on the final link in list (where appropriate) */
  .navbar-nav.active > li:last-child > a { border-bottom: none; }
} 

@media (max-width: 768px) {
  /* Drawer entrance animation */
  @keyframes drawerIn {
    from { 
      opacity: 0; 
      transform: translateY(-12px); 
      filter: blur(4px);
    }
    to { 
      opacity: 1; 
      transform: translateY(0); 
      filter: blur(0);
    }
  }
  
  .navbar-nav.active {
    animation: drawerIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.92) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 1.5rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 100%;
  }
  
  /* モバイルメニューのグリッドアイテム */
  .navbar-nav.active > li {
    margin: 0;
    width: 100%;
  }
  
  /* 2列目のアイテムを少し下にずらす（ログアウト以外） */
  .navbar-nav.active > li:nth-child(even):not(:last-child) {
    margin-top: 1rem;
  }
  
  /* ログアウトボタンは2列分使う */
  .navbar-nav.active > li:last-child {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 999; /* 最後に配置 */
  }
  
  .navbar-nav.active > li:last-child > a {
    width: 60%;
    max-width: 250px;
    margin: 0;
  }
  
  /* ログアウトボタンのスタイル */
  .navbar-nav.active .logout-item.mobile-link {
    text-align: center;
    padding-top: 3rem;
  }
  
  /* モバイルのaタグにtext-align: centerを指定 */
  .navbar-nav.active > li > a {
    text-align: center;
  }
  
  /* PCナビゲーションのメインリンクを中央寄せ */
  .navbar-nav:not(.active) {
    justify-content: center;
  }
  
  .navbar-nav:not(.active) .nav-link {
    text-align: center;
  }
  
  /* PCのドロップダウンメニューのspanタグのアイコン系を削除 */
  .navbar .dropdown span.nav-link::before,
  .navbar .dropdown span.nav-link::after {
    display: none !important;
  }
  
  /* PCのドロップダウンメニューのmenu-iconクラスを非表示 */
  .navbar .dropdown .menu-item .menu-icon,
  .menu-item .menu-icon,
  .dropdown .menu-item .menu-icon,
  .menu-icon {
    display: none !important;
  }

  /* Unified link look with accent hover/active */
  .navbar-nav.active > li > a {
    position: relative;
  }
  .navbar-nav.active > li > a:hover,
  .navbar-nav.active > li > a:active {
    background: rgba(255,255,255,0.08);
    border-left: 2px solid var(--color-accent);
    padding-left: 0.75rem;
  }
  /* Optional current-page highlight (apply .is-current on server if desired) */
  .navbar-nav.active > li > a.is-current {
    background: rgba(255,255,255,0.10);
    border-left: 2px solid var(--color-accent);
    padding-left: 0.75rem;
  }

  /* Spacing adjustments between sections */
  .mobile-section-title + .mobile-only { margin-top: 0.1rem; }
  .mobile-only + .mobile-section-title { margin-top: 0.9rem; }
} 

/* Mobile menu premium separators */
@media (max-width: 768px) {
  :root { --mobile-divider: rgba(255,255,255,0.16); }

  /* Remove bottom borders from links; use hairline separators instead */
  .navbar-nav.active > li > a {
    border-bottom: none !important;
    position: relative;
  }
  .navbar-nav.active > li > a::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0, var(--mobile-divider) 12%, var(--mobile-divider) 88%, transparent 100%);
    transform: translateZ(0); /* avoid blurring */
    pointer-events: none;
  }
  /* Hide separator for last item and before section breaks */
  .navbar-nav.active > li:last-child > a::after { display: none; }
  /* If the next sibling is a section title, omit the separator beneath this item */
  .navbar-nav.active > li.mobile-only:has(+ .mobile-section-title) > a::after { display: none; }

  /* Section titles with clearer top rule, but no double lines around them */
  .mobile-section-title {
    border-top: 1px solid var(--mobile-divider);
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    padding-left: 0.25rem;
  }
  .navbar-nav .mobile-section-title:first-of-type {
    border-top: 1px solid var(--mobile-divider);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  /* Logout separation keeps its top rule, no extra line above */
  .mobile-only .logout-item {
    border-top: 1px solid var(--mobile-divider);
    margin-top: 0.75rem;
    padding-top: 0.9rem;
  }
} 

@media (max-width: 768px) {
  /* Plain professional list: remove section headers from layout */
  .mobile-section-title { display: none !important; }

  /* Add subtle icon bullets via pseudo-elements */
  .navbar-nav.active > li > a {
    position: relative;
    padding-left: 1.5rem; /* room for bullet */
  }
  .navbar-nav.active > li > a::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    transform: translateY(-50%);
  }
  .navbar-nav.active > li > a:hover::before { background: var(--color-accent); }

  /* Tighten overall rhythm */
  .navbar-nav.active > li { margin: 0; }
} 

/* Logout as left-aligned button (desktop dropdown + mobile drawer) */
.user-menu .logout-item,
.navbar-nav.active a.logout-item {
  display: block;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff !important;
  border: 1px solid rgba(220, 38, 38, 0.85);
  text-align: left;
  padding: 0.95rem 0.75rem;
  border-radius: 0.6rem;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.user-menu .logout-item:hover,
.navbar-nav.active a.logout-item:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-color: rgba(185, 28, 28, 0.95);
} 

@media (max-width: 768px) {
  /* Mobile notifications badge */
  .mobile-link.mobile-notifications {
    position: relative;
    padding-right: 2.2rem; /* room for badge on the right */
  }
  .mobile-link .mobile-badge {
    position: absolute;
    right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    min-width: 1.4rem; height: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(21,128,61,.25);
  }

  /* Mobile links polish */
  .mobile-link { position: relative; }
  .mobile-link:hover { background: rgba(255,255,255,0.08); }
  .mobile-link::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 50%; width: 6px; height: 6px; border-radius: 999px;
    background: rgba(255,255,255,0.45);
    transform: translateY(-50%);
  }
  .mobile-link:hover::before { background: var(--color-accent); }
} 

@media (max-width: 768px) {
  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    margin-bottom: 0.25rem;
  }
  .mobile-drawer-header span { font-weight: 700; letter-spacing: .02em; }
  .mobile-drawer-header .mobile-drawer-close {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: background 160ms ease;
  }
  .mobile-drawer-header .mobile-drawer-close:hover { background: rgba(255,255,255,0.08); }
} 

@media (max-width: 768px) {
  /* Drawer background: no blur, calm overlay */
  .navbar-nav.active {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Row layout: icon + label */
  .mobile-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 0.75rem 0.95rem 0.75rem;
    line-height: 1.3;
  }
  .mobile-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0.9;
    flex-shrink: 0;
  }
  .mobile-label { flex: 1; }

  /* Remove previous bullet decoration */
  .navbar-nav.active > li > a::before { display: none !important; }

  /* Hairline separators */
  .navbar-nav.active > li > a {
    position: relative;
    border-bottom: none !important;
  }
  .navbar-nav.active > li > a::after {
    content: '';
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: -1px; height: 1px;
    background: rgba(255,255,255,0.16);
  }
  .navbar-nav.active > li:last-child > a::after { display: none; }

  /* Notifications badge: flat, subtle */
  .mobile-link.mobile-notifications { padding-right: 3rem; }
  .mobile-link .mobile-badge {
    position: absolute;
    right: 1.1rem; top: 50%; transform: translateY(-50%);
    background: #16a34a;
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.5rem;
    min-width: 1.2rem; height: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none;
  }

  /* Hover/active */
  .navbar-nav.active > li > a:hover { background: rgba(255,255,255,0.06); }
  .navbar-nav.active > li > a.is-current { background: rgba(255,255,255,0.10); }
  
  /* ポイントシステムのアクティブ状態を無効化 */
  .menu-item.mi-points.is-current,
  .menu-item.mi-points.active {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  .menu-item.mi-points.is-current .menu-icon,
  .menu-item.mi-points.active .menu-icon {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Logout: simple link with separator */
  .navbar-nav.active a.logout-item { color: #ef4444 !important; }
  .navbar-nav.active a.logout-item::before {
    content: '';
    position: absolute;
    left: 0.75rem; right: 0.75rem; top: -1px; height: 1px;
    background: rgba(255,255,255,0.16);
  }
  .navbar-nav.active a.logout-item:hover { background: rgba(239,68,68,0.08); }

  /* Mobile drawer header */
  .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.16); }
  .mobile-drawer-header span { font-weight: 700; letter-spacing: .02em; }
  .mobile-drawer-header .mobile-drawer-close { color: rgba(255,255,255,0.85); text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 0.5rem; }
  .mobile-drawer-header .mobile-drawer-close:hover { background: rgba(255,255,255,0.08); }
} 

/* Mobile header bell (left of hamburger) */
.mobile-notifications-link {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-radius: 0.6rem;
  line-height: 1;
}
.mobile-notifications-link:hover { background: rgba(255,255,255,0.1); }
.mobile-notifications-link .notification-icon { width: 20px; height: 20px; }
/* Ensure badge anchors to the button itself, not the viewport */
.mobile-notifications-link { overflow: visible; }
.mobile-notifications-link .notification-badge {
  top: -4px !important;
  right: -4px !important;
  transform: none !important;
  min-width: 1.1rem !important;
  height: 1.1rem !important;
  font-size: 0.68rem !important;
  padding: 0 .32rem !important;
} 

/* Desktop: align badge look to mobile header bell */
@media (min-width: 769px) {
  /* Desktop small, refined look (pre-revert state) */
  .notifications-dropdown .notifications-toggle { padding: 0.35rem 0.45rem; }
  .notifications-dropdown .notification-icon { width: 18px; height: 18px; }
  .notifications-dropdown .notification-badge {
    top: -3px;
    right: -3px;
    transform: none;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.62rem;
    padding: 0 .28rem;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
  }
} 

/* Avoid clipping from generic .navbar .nav-link overflow */
.navbar .nav-link.notifications-toggle,
.notifications-dropdown .nav-link.notifications-toggle {
  overflow: visible !important;
}
/* Ensure badge renders above the icon and underline */
.notifications-dropdown .notification-badge { z-index: 2; } 

/* === Enhanced structured dropdowns for desktop === */
@media (min-width: 769px) {
  /* User dropdown container */
  .user-dropdown .dropdown-menu.user-menu {
    min-width: 320px;
    padding: 0;
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .user-menu-items { 
    padding: 0.5rem; 
  }

  /* User dropdown header styling */
  .user-menu-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
  }

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

  .user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

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

  .user-avatar-large-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .user-details {
    flex: 1;
    min-width: 0;
  }

  .user-name-large {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-email {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Menu sections */
  .menu-section {
    margin-bottom: 0.75rem;
  }

  .section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
  }

  /* Menu items with proper icon positioning */
  .menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
  }

  .menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
  }

  /* Icon positioning - fixed left position for consistent alignment */
  .menu-item::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0.85;
  }

  /* Icon definitions for each menu item */
  .menu-item.mi-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  }

  .menu-item.mi-edit::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  }

  .menu-item.mi-favorites::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.3 5.3 0 0 0-7.5 0L12 5.9l-1.3-1.3a5.3 5.3 0 0 0-7.5 7.5l1.3 1.3L12 21l7.5-7.5 1.3-1.3a5.3 5.3 0 0 0 0-7.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.3 5.3 0 0 0-7.5 0L12 5.9l-1.3-1.3a5.3 5.3 0 0 0-7.5 7.5l1.3 1.3L12 21l7.5-7.5 1.3-1.3a5.3 5.3 0 0 0 0-7.5z'/%3E%3C/svg%3E");
  }

  .menu-item.mi-posts::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h7l2 2h5a2 2 0 0 1 2 2z'/%3E%3Cline x1='17' y1='13' x2='7' y2='13'/%3E%3Cline x1='17' y1='17' x2='7' y2='17'/%3E%3Cline x1='10' y1='9' x2='7' y2='9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h7l2 2h5a2 2 0 0 1 2 2z'/%3E%3Cline x1='17' y1='13' x2='7' y2='13'/%3E%3Cline x1='17' y1='17' x2='7' y2='17'/%3E%3Cline x1='10' y1='9' x2='7' y2='9'/%3E%3C/svg%3E");
  }

  .menu-item.mi-plans::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  }

  .menu-item.mi-subscription::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  }

  .menu-item.mi-users::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  .menu-item.mi-files::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z'/%3E%3C/svg%3E");
  }

  .menu-item.mi-logout::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  }

  /* Menu item content positioning - left padding for icon space */
  .menu-item .menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 2.5rem; /* Space for the pseudo-element icon */
  }

  .menu-item .menu-label {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
  }

  /* Logout emphasis */
  .user-menu .logout-item { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
    border: 1px solid rgba(220,38,38,.85); 
  }
  
  .user-menu .logout-item:hover { 
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); 
  }
}

/* === Enhanced structured dropdowns for desktop === */
@media (min-width: 769px) {
  /* User dropdown header styling */
  .user-menu-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
  }

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

  .user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

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

  .user-avatar-large-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .user-details {
    flex: 1;
    min-width: 0;
  }

  .user-name-large {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-email {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Menu sections */
  .menu-section {
    margin-bottom: 0.75rem;
  }

  .section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
  }

  /* Menu items with icons and labels */
  .menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
  }

  .menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
  }

  .menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .menu-label {
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* Notification dropdown enhancements */
  .notifications-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .notifications-header-icon {
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
  }

  .notifications-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
  }

  .mark-all-read-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mark-all-read-btn:hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
  }

  .mark-all-read-icon {
    color: currentColor;
    flex-shrink: 0;
  }

  /* Notification status display */
  .notification-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .notification-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    font-weight: 600;
    align-self: flex-start;
  }

  .count-number {
    font-size: 1.125rem;
  }

  .count-label {
    font-size: 0.875rem;
    opacity: 0.9;
  }

  .notification-preview-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
  }

  .view-all-notifications {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    align-self: flex-start;
  }

  .view-all-notifications:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
  }

  .view-all-icon {
    color: currentColor;
    flex-shrink: 0;
  }

  /* Enhanced no notifications state */
  .no-notifications {
    text-align: center;
    padding: 2rem 1rem;
  }

  .no-notifications-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .no-notifications-icon {
    color: rgba(255, 255, 255, 0.4);
  }

  .no-notifications-text {
    margin: 0 0 0.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 500;
  }

  .no-notifications-subtext {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
  }
}