/* ==========================================
   白天模式 - 弹窗/模态框样式
   ========================================== */

/* 
   设计原则：
   1. 字体：深色 (#1a1e3a, #2d3748)
   2. 背景：保持毛玻璃半透明，但使用浅色调
   3. 边框：使用深色半透明
*/

/* ==========================================
   1. Product Modal (sections.css)
   ========================================== */

/* Product Modal Content - 浅色毛玻璃 */
body.light-mode .product-modal-content {
    background: var(--palette-white);
    /* 增加不透明度 */
    /* WHITE: No blur */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* Info Section */
body.light-mode .modal-info-section {
    background: rgba(255, 255, 255, 0.1);
}

/* 标题文字 - 深色 */
body.light-mode .modal-header-group h2 {
    color: var(--palette-gray-800);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 描述文字 - 深灰色 */
body.light-mode .modal-desc {
    color: var(--text-muted);
}

/* 规格标签 */
body.light-mode .modal-specs {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .spec-label {
    color: var(--text-muted);
}

body.light-mode .spec-value {
    color: #2d3748;
}

/* 关闭按钮 */
body.light-mode .modal-close {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--palette-gray-800);
}

body.light-mode .modal-close:hover {
    background: var(--palette-gray-800);
    color: var(--palette-white);
}

/* 导航按钮 */
body.light-mode .prod-nav {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--palette-gray-800);
    background: rgba(255, 255, 255, 0.5);
}

body.light-mode .prod-nav:hover {
    border-color: var(--palette-gray-800);
    background: rgba(255, 255, 255, 0.8);
}

/* Badge标签 */
body.light-mode .modal-badge {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 媒体区分隔线 */
body.light-mode .modal-media-section {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Carousel导航 */
body.light-mode .carousel-nav {
    background: transparent;
    /* Minimalist: No background */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    /* No border */
    color: #FFD700;
    /* Gold Arrow */
    box-shadow: none;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    /* Gold Glow */
}

body.light-mode .carousel-nav:hover {
    background: rgba(255, 215, 0, 0.1);
    /* Subtle Gold Hint */
    color: #DAA520;
    /* Darker Gold on Hover */
    border-color: transparent;
    box-shadow: none;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

/* Carousel dots */
body.light-mode .dot {
    background: rgba(0, 0, 0, 0.3);
}

body.light-mode .dot.active {
    background: var(--palette-gray-800);
}

/* ==========================================
   2. Audio Onboarding Modal (sections.css)
   ========================================== */

body.light-mode .lw-modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* USER FIX: Remove blur */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

body.light-mode .lw-modal-content h3 {
    color: #1a1e3a;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .lw-modal-content p {
    color: #4a5568;
}

/* 主按钮 - 品牌橙强调 */
body.light-mode .lw-btn-primary {
    background: linear-gradient(135deg, var(--palette-orange-500), var(--palette-orange-600));
    color: var(--palette-white);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

body.light-mode .lw-btn-primary:hover {
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.5);
}

/* Ghost按钮 */
body.light-mode .lw-btn-text {
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #1a1e3a;
}

body.light-mode .lw-btn-text:hover {
    background: #1a1e3a;
    color: #ffffff;
    border-color: #1a1e3a;
}

/* ==========================================
   3. Lightwinner Log Modal (lightwinner.css)
   ========================================== */

/* Overlay背景 - 浅色遮罩 */
body.light-mode .lw-modal-overlay {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal外框 - 保持透明但有浅色边框 */
body.light-mode .lw-modal-content {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
}

/* 左侧文字区域 - 浅色毛玻璃 */
body.light-mode .modal-content-scroll {
    /* USER FIX: Much lighter background for readability */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 文字颜色 - 深色 */
body.light-mode .modal-text {
    /* USER FIX: Much darker text */
    color: #1a1a1a !important;
    text-shadow: none !important;
}

body.light-mode .modal-header h2 {
    color: #1a1e3a;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .modal-excerpt {
    color: var(--palette-gray-800);
    border-left-color: var(--palette-orange-500);
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.05), transparent);
}

body.light-mode .modal-date {
    color: #718096;
}

/* Tags */
body.light-mode .tag,
body.light-mode .modal-tags .tag {
    /* USER FIX: Premium gold tag design for light mode */
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(255, 215, 0, 0.25));
    color: #B8860B !important;
    /* Dark gold */
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

body.light-mode .modal-tags .tag:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(255, 215, 0, 0.35));
    border-color: #D4AF37;
    box-shadow:
        0 4px 12px rgba(212, 175, 55, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* USER FIX: View count in light mode - dark gray instead of gold */
body.light-mode .log-card-views {
    color: #4A5568;
    /* Dark gray for readability */
}

body.light-mode .log-card-views svg {
    opacity: 0.8;
}

/* Gallery Labels */
body.light-mode .gallery-label {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1e3a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .label-icon {
    color: var(--palette-orange-500);
}

/* Gallery Images */
body.light-mode .gallery-image {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* USER FIX: Enhanced shadow, no blur */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.light-mode .gallery-image:hover {
    border-color: var(--palette-orange-500);
    box-shadow:
        0 20px 50px rgba(249, 115, 22, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 自定义滚动条 - 深色 */
body.light-mode .lw-cust-scroll-track {
    background: rgba(0, 0, 0, 0.08);
}

body.light-mode .lw-cust-scroll-thumb {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

body.light-mode .lw-cust-scroll-track:hover .lw-cust-scroll-thumb,
body.light-mode .lw-cust-scroll-thumb:hover,
body.light-mode .lw-cust-scroll-thumb.grabbing {
    background: var(--palette-orange-500);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.5),
        0 0 30px rgba(249, 115, 22, 0.3),
        0 0 5px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

body.light-mode .lw-cust-scroll-thumb.grabbing {
    background: var(--palette-orange-600);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.7),
        0 0 40px rgba(249, 115, 22, 0.4);
}

/* 关闭按钮 */
body.light-mode .lw-modal-close {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--palette-gray-800);
}

body.light-mode .lw-modal-close:hover {
    background: rgba(220, 38, 38, 0.8);
    color: var(--palette-white);
}

/* Laser分隔线 - 橙色 */
body.light-mode #lw-log-modal .modal-content-scroll::after {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            var(--palette-orange-500) 50%,
            rgba(0, 0, 0, 0) 100%) !important;
    opacity: 0.6 !important;
}

/* ==========================================
   4. Global Search Modal (navigation.css)
   需要在navigation.css中添加
   ========================================== */

body.light-mode #global-search-modal {
    background: transparent !important;
}

body.light-mode #global-search-modal .search-container {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

body.light-mode #global-search-modal input {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--lw-text-main);
}

body.light-mode #global-search-modal input::placeholder {
    color: #9ca3af;
}

body.light-mode #global-search-modal .search-results {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode #global-search-modal .search-result-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #2d3748;
}

body.light-mode #global-search-modal .search-result-item:hover {
    background: rgba(249, 115, 22, 0.1);
}

/* ==========================================
   5. Components Modal (components.css)
   ========================================== */

body.light-mode .lw-modal-backdrop {
    background: transparent !important;
}

/* ==========================================
   6. Inline样式覆盖（针对index.html中的inline style）
   ========================================== */

/* Sound Prompt Modal - 需要用!important覆盖inline样式 */
body.light-mode #sound-prompt-modal .lw-modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    /* High Opacity */
    backdrop-filter: blur(50px) !important;
    /* Enhanced Blur */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4) !important;
    /* Strong Shadow */
}

body.light-mode #sound-prompt-modal h3 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #1a1e3a !important;
    text-shadow: none !important;
}

body.light-mode #sound-prompt-modal p {
    color: #4a5568 !important;
    font-weight: 500 !important;
}

/* 按钮 */
body.light-mode #btn-enable-sound {
    background: linear-gradient(135deg, var(--palette-orange-500), var(--palette-orange-600)) !important;
    color: var(--palette-white) !important;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3) !important;
}

body.light-mode #btn-keep-silent {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: var(--lw-text-main) !important;
    font-weight: 600 !important;
}

body.light-mode #btn-keep-silent:hover {
    background: var(--palette-gray-800) !important;
    color: var(--palette-white) !important;
    border-color: var(--palette-gray-800) !important;
}

/* Log Modal Close Button RGB Ring - 白天模式调整 */
body.light-mode #lw-log-modal .lw-modal-close {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--palette-gray-800) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

body.light-mode #lw-log-modal .lw-modal-close::before {
    background: conic-gradient(from 0deg,
            var(--palette-orange-500), #9333ea, #eab308, var(--palette-orange-500)) !important;
    /* 橙-紫-黄-橙 */
}

/* ==========================================
   7. 通用模态框元素
   ========================================== */

/* CTA按钮 */
body.light-mode .modal-cta {
    background: var(--palette-gray-800);
    color: var(--palette-white);
}

body.light-mode .modal-cta:hover {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.4);
}

/* Meta信息 */
/* Meta信息 */
body.light-mode .modal-meta-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

body.light-mode .modal-pos-indicator {
    color: rgba(0, 0, 0, 0.2);
}

body.light-mode .spec-value {
    color: #1a1a1a;
}

/* Log列表项 */
body.light-mode .log-entry,
body.light-mode .log-card-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .log-entry:hover,
body.light-mode .log-entry.active,
body.light-mode .log-card-item:hover {
    background: rgba(249, 115, 22, 0.05);
    border-left: 3px solid var(--palette-orange-500);
}

body.light-mode .log-title,
body.light-mode .log-card-title {
    color: var(--lw-text-main);
}

body.light-mode .log-date-bottom,
body.light-mode .log-card-date {
    color: #718096;
}

body.light-mode .log-card-summary {
    color: #4a5568;
}

/* Journal Dynamic Islands*/
/* 按钮样式 */
body.light-mode .modal-cta {
    background: var(--palette-gray-800);
    color: var(--palette-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Fix alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

body.light-mode .modal-cta:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Product Badge Override */
body.light-mode .modal-badge {
    background: transparent;
    border: 1px solid #1a1e3a;
    color: #1a1e3a;
    box-shadow: none;
    font-weight: 700;
}

body.light-mode .filter-island {
    background: var(--palette-orange-600);
    /* 品牌橙色阶 */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.light-mode .filter-island:hover {
    background: var(--palette-orange-700);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25);
}

body.light-mode .island-top {
    background: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.light-mode .island-bot {
    color: rgba(255, 255, 255, 0.95);
}

/* Sidebar组件 */
body.light-mode .atlas-sidebar,
body.light-mode .atlas-list,
body.light-mode .atlas-map {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .j-region-header {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #2c2c2c !important;
    font-size: 0.6rem !important;
    /* USER FIX: Smaller font */
    padding: 8px 6px 8px 4px !important;
    /* USER FIX: Tighter padding */
}

body.light-mode .j-region-header:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .j-country-item {
    color: #4a5568;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem !important;
    /* USER FIX: Enlarged for better readability */
}

body.light-mode .j-country-item:hover {
    color: var(--lw-text-main);
    border-left-color: var(--palette-orange-500);
}

/* ==========================================
   8. V123 Mobile Popup Polish (整合自 v123_popup_polish.css)
   ========================================== */

/* Mobile Popup Glass Container - 浅色毛玻璃 */
body.light-mode .popup-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    color: var(--lw-text-main) !important;
}

/* Timeline Popup标题 - 深色 */
body.light-mode .lw-timeline-popup h3 {
    color: var(--lw-text-main) !important;
    text-shadow: none !important;
}

/* Popup段落文字 - 深灰色 */
body.light-mode .popup-glass p {
    color: var(--lw-text-dim) !important;
}

/* Popup关闭按钮 - 深灰色 */
body.light-mode .popup-close {
    color: var(--lw-text-dim) !important;
}

/* Modal Meta Row分隔线 - 浅色 */
body.light-mode .modal-meta-row {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
}

/* Timeline Popup Button Fix (v3.6) */
body.light-mode .lw-timeline-popup .popup-btn.full-view {
    background: var(--palette-gray-800) !important;
    /* Premium Dark Navy */
    color: var(--palette-white) !important;
    /* Sharp White Text */
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.light-mode .lw-timeline-popup .popup-btn.full-view:hover {
    background: var(--palette-black) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}