/* =====================================================
   Layer 3: Components - Forms & Input
   Origin: sections.css (v51), lightwinner-mobile.css, warm-theme.css
   ===================================================== */

/* --- Base Form Container (from sections.css) --- */
.contact-form-container {
    padding: 15px 40px;
    /* USER FIX: Ultra-Minimal Vertical Padding */
    background: var(--lw-panel-bg);
    backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    -webkit-backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* USER FIX: Removed height: 100% to let Grid stretch naturally */
}

.contact-form-container h3 {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #fff 0%, #aaa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.4;
    /* USER FIX: Increase line-height */
    padding-bottom: 5px;
    /* USER FIX: Prevent clipping of 'g' */
}

.contact-form-container:hover {
    border-color: rgba(0, 255, 255, 0.3);
}

/* --- Input Groups --- */
.lw-form-group {
    margin-bottom: 25px;
    /* USER FIX: Tighter spacing to fit title */
    position: relative;
}

.lw-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.02) !important;
    /* Subtle Fill */
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    /* Thicker Line */
    border-radius: 4px 4px 0 0;
    padding: 20px 10px;
    /* USER FIX: Taller Inputs (Was 15px 12px) */
    /* Taller Input */
    color: #fff;
    font-size: 1.05rem;
    outline: none;
    transition: all 0.3s;
    font-family: inherit;
    min-height: 65px;
    /* USER FIX: Bigger Input Boxes */
}

textarea.lw-input {
    height: 240px !important;
    /* USER FIX: Balanced height with title */
    min-height: 240px !important;
}

.lw-input:focus {
    border-bottom-color: var(--accent-color, cyan);
    background: rgba(255, 255, 255, 0.05) !important;
}

.lw-label {
    position: absolute;
    top: 15px;
    left: 12px;
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.lw-input:focus~.lw-label,
.lw-input:not(:placeholder-shown)~.lw-label {
    top: -24px;
    left: 0;
    font-size: 0.9rem;
    color: var(--accent-color, cyan);
    font-weight: 500;
}

/* --- Submit Button --- */
.lw-submit {
    width: 100%;
    /* Full Width Button */
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 15px auto 0;
    background: rgba(255, 255, 255, 0.08);
    /* Slightly lighter glass */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0 40px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 8px;
    /* Tighter radius matching inputs */
    font-weight: 600;
    position: relative;
    overflow: hidden;
    z-index: 1;
    backdrop-filter: var(--lw-glass-blur);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.lw-submit:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    letter-spacing: 4px;
    /* Subtle expansion */
    border-color: var(--accent-color, cyan);
    background: rgba(0, 255, 255, 0.1);
    color: var(--accent-color, cyan);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
}

.lw-submit::before {
    display: none;
    /* Remove swipe fill for cleaner look */
}

/* --- Responsive Layout (Mobile) --- */
@media (max-width: 900px) {
    .contact-form-container {
        width: 100% !important;
        max-width: none !important;
        padding: 25px 20px;
        /* Reduced mobile padding */
    }

    .contact-form-container h3 {
        font-size: 1.8rem;
    }
}

/* --- Mobile Specific Overrides (from lightwinner-mobile.css) --- */
@media (max-width: 1024px) {

    .contact-info,
    .contact-form-container {
        width: 100% !important;
        max-width: none !important;
        padding: 30px 20px !important;
    }

    .lw-input,
    .lw-textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- Light Mode Overrides (from warm-theme.css) --- */
body.light-mode .contact-form-container {
    background: linear-gradient(160deg,
            rgba(255, 250, 245, 0.92) 0%,
            rgba(255, 255, 255, 0.88) 100%) !important;
    backdrop-filter: blur(25px) !important;
    border: 1.5px solid rgba(214, 126, 46, 0.2) !important;
    box-shadow: 0 12px 35px rgba(93, 64, 55, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.light-mode .contact-form-container h3 {
    color: #1A1A1A !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
}

body.light-mode .lw-input,
body.light-mode .lw-textarea {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid rgba(214, 126, 46, 0.25) !important;
    color: #2C2C2C !important;
}

body.light-mode .lw-input:focus,
body.light-mode .lw-textarea:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #d67e2e !important;
    box-shadow: 0 0 0 3px rgba(214, 126, 46, 0.1) !important;
    outline: none;
}

body.light-mode .lw-input::placeholder,
body.light-mode .lw-textarea::placeholder {
    color: rgba(93, 64, 55, 0.5) !important;
}

body.light-mode .lw-submit {
    background: linear-gradient(135deg,
            rgba(214, 126, 46, 0.15) 0%,
            rgba(214, 126, 46, 0.08) 100%) !important;
    border: 1.5px solid rgba(214, 126, 46, 0.4) !important;
    color: #5d4037 !important;
    text-shadow: none !important;
}

body.light-mode .lw-submit:hover {
    background: linear-gradient(135deg,
            #d67e2e 0%,
            #ff9800 100%) !important;
    border-color: #d67e2e !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(214, 126, 46, 0.35) !important;
}
/* 
 * ITCSS - Component Layer: Video Player
 * -------------------------------------
 */

#lw-stage-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 12px !important;
}

#lw-stage-placeholder,
#global-player-stage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5;
}

#global-player-stage {
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
}

#global-player-stage.playing {
    display: flex !important;
}

.video-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 浮窗模式 */
#global-player-stage.floating {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 320px !important;
    height: 180px !important;
    border: 1px solid var(--accent-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    z-index: 100000;
}

/* 控制条样�?(V19: Class-based visibility for Touch/Mobile) */
.vid-controls-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    /* Ensure above overlay */
}

#global-player-stage.controls-active .vid-controls-bar,
#global-player-stage:hover .vid-controls-bar {
    opacity: 1;
    pointer-events: auto;
}

.vid-progress-container {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    border-radius: 2px;
}

.vid-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--lw-accent);
    border-radius: 2px;
}

@media (max-width: 768px) {
    #global-player-stage.floating {
        width: 90vw !important;
        height: 30vw !important;
        bottom: 80px !important;
        right: 5vw !important;
    }
}
/* 
 * ITCSS - Component Layer: Audio Modal
 * -----------------------------------
 */

#sound-prompt-modal .lw-modal-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
}

#sound-prompt-modal .lw-modal-content {
    background: #0a0f19 !important;
    /* Solid, Non-transparent */
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 255, 255, 0.15) !important;
    padding: 60px 50px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 24px !important;
}

#sound-prompt-modal h3 {
    font-size: 2.2rem !important;
    margin-bottom: 10px !important;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#sound-prompt-modal p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* Modal Actions Layout */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 25px;
}

.modal-actions button {
    flex: 1;
    min-width: 0;
    /* Prevent overflow */
    justify-content: center;
}

/* Premium Primary Button (Yes) */
#btn-enable-sound {
    background: linear-gradient(90deg, #ffcc00, #00ffff) !important;
    /* Gold to Cyan Gradient */
    color: #000 !important;
    border: none !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 10px 40px rgba(0, 255, 255, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
}

#btn-enable-sound::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#btn-enable-sound:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(0, 255, 255, 0.5) !important;
}

#btn-enable-sound:hover::after {
    opacity: 1;
}

/* Premium Secondary Button (No) */
#btn-keep-silent {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 16px 30px !important;
    border-radius: 50px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px);
}

#btn-keep-silent:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    #sound-prompt-modal .lw-modal-content {
        padding: 24px 18px !important;
        width: 90% !important;
        max-width: 320px !important;
    }

    #btn-enable-sound,
    #btn-keep-silent {
        width: 100% !important;
        border-radius: 50px !important;
    }
}
/* Component: Site Footer (Synced with Navbar Glass) */

/* --- 0. Shared Glass Tokens (Implicitly from variables.css) --- */
/* 
   We use the exact same vars as #global-navbar for consistency.
   Navbar uses: 
   background: var(--lw-panel-bg);
   backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
*/

.site-footer {
    padding: 30px 20px;
    margin-top: 0;

    /* 1. Base Glass - Synced with Navbar */
    background: var(--lw-panel-bg, rgba(10, 10, 15, 0.6));
    backdrop-filter: var(--lw-glass-blur, blur(12px)) var(--lw-glass-saturate, saturate(180%));
    -webkit-backdrop-filter: var(--lw-glass-blur, blur(12px)) var(--lw-glass-saturate, saturate(180%));

    /* 2. Border - Synced with Navbar (Top instead of Bottom) */
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    /* Layout */
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
    transition: background-color 0.3s, border-color 0.3s;
    overflow: hidden;
    /* For shimmer containment */
}

/* Optional: Shimmer Effect (Subtle reflection) */
.site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.03) 35%,
            rgba(255, 255, 255, 0.05) 40%,
            rgba(255, 255, 255, 0.03) 45%,
            transparent 60%);
    background-size: 200% 100%;
    pointer-events: none;
    opacity: 0.4;
    z-index: -1;
}

.footer-content {
    max-width: 1600px;
    /* Match Nav Max-Width */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.footer-copyright {
    color: var(--text-color, rgba(255, 255, 255, 0.6));
    /* Use theme var */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
    opacity: 0.8;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-legal a {
    color: var(--text-color, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    position: relative;
    opacity: 0.7;
}

.footer-legal a:hover {
    color: var(--accent-color, #00ffff);
    opacity: 1;
    text-shadow: 0 0 10px var(--accent-color, rgba(0, 255, 255, 0.5));
}

.footer-legal .sep {
    color: rgba(255, 255, 255, 0.1);
    font-size: 10px;
}

.ccpa-link {
    color: var(--text-color, rgba(255, 255, 255, 0.7)) !important;
}

/* --- Light Mode Overrides (Synced with Nav Light) --- */
html.light-mode .site-footer {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

html.light-mode .site-footer::after {
    opacity: 0;
    /* No shimmer in light mode */
}

html.light-mode .footer-copyright {
    color: rgba(0, 0, 0, 0.5);
}

html.light-mode .footer-legal a,
html.light-mode .ccpa-link {
    color: #333 !important;
}

html.light-mode .footer-legal a:hover {
    color: var(--accent-color, #00ffff) !important;
    text-shadow: none;
}

html.light-mode .footer-legal .sep {
    color: rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .site-footer {
        padding: 15px 20px 40px;
        /* Highly compressed height */
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
        /* Tight vertical gap */
        padding: 0;
        text-align: center;
    }

    .footer-copyright {
        order: 2;
        opacity: 0.3;
        font-size: 10px;
        letter-spacing: 0.5px;
        margin-top: -5px;
        /* Pull up closer */
    }

    .footer-legal {
        order: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
        /* Highly compressed link spacing */
        width: 100%;
        display: flex;
        align-items: center;
    }

    .footer-legal a {
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.5px;
        opacity: 0.5;
        text-transform: uppercase;
        display: inline-block;
        padding: 0;
        /* Remove internal padding */
    }

    /* Hide separators completely */
    .footer-legal .sep {
        display: none;
    }

    /* Subtle treatment for CCPA */
    .footer-legal .ccpa-link {
        margin-top: 0;
        opacity: 0.3;
        font-size: 9px;
        letter-spacing: 0.5px;
        width: 100%;
    }
}
/* 
 * ITCSS - Component Layer: CCT Overlay
 * -----------------------------------
 */

#cct-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: overlay;
    background-color: transparent !important;
}
/* Component: Cookie Banner (GDPR/CCPA) */
#lw-cookie-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 400px;
    max-width: calc(100vw - 40px);
    z-index: 9999;

    /* Glassmorphism Base (Dark Default) */
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    /* Animation State */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    /* Click-through when hidden */
}

#lw-cookie-banner.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cb-inner {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cb-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.cb-content p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.cb-content a {
    color: var(--accent-cyan, #00e5ff);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.cb-content a:hover {
    border-bottom-color: var(--accent-cyan, #00e5ff);
}

.cb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

/* Button Styles specifically for Banner */
#cb-reject {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

#cb-reject:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

#cb-accept {
    background: var(--accent-cyan, #00e5ff);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    transition: all 0.2s;
}

#cb-accept:hover {
    background: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

/* --- Light Mode Overrides --- */
html.light-mode #lw-cookie-banner {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Subtle grey border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html.light-mode .cb-content h3 {
    color: #111;
}

html.light-mode .cb-content p {
    color: #555;
}

html.light-mode #cb-reject {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #444;
}

html.light-mode #cb-reject:hover {
    border-color: #000;
    color: #000;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #lw-cookie-banner {
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }

    .cb-inner {
        padding: 20px;
        gap: 12px;
    }

    .cb-content h3 {
        font-size: 15px;
    }

    .cb-content p {
        font-size: 12px;
    }

    .cb-actions {
        width: 100%;
        flex-wrap: wrap;
        /* Allow wrapping for better fit */
        justify-content: space-between;
        gap: 10px;
    }

    .cb-actions button {
        flex: 1 1 auto;
        /* Don't force equal stretch if content differs greatly */
        min-width: 100px;
        padding: 10px 12px;
        /* Reduced vertical padding */
        font-size: 12px;
        height: 40px;
        /* Standardize height */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Target specific IDs if needed for finer control */
    #cb-manage {
        flex: 2;
        /* Give more room to the longer text if needed, or keep balanced */
        border: none !important;
        background: transparent !important;
        text-decoration: underline;
        opacity: 0.6;
    }
}
/* ==========================================================================
   Component: Legal Modal (Refactored Clean v10.0)
   ========================================================================== */

/* --- 1. Global Overflow Lock --- */
body.no-scroll {
    overflow: hidden !important;
    padding-right: 0 !important;
    /* Prevent layout shift */
}

/* --- 2. Modal Overlay (Fixed Wrapper) --- */
.lw-modal-overlay.glass-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    /* High Z-Index */

    background: rgba(0, 0, 0, 0.6);
    /* Dim background */
    backdrop-filter: blur(8px);
    /* Glass effect */

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* PREVENT global touches */
    touch-action: auto !important;
    /* ALLOW touch events */
}

.lw-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- 3. Modal Content Box (The Window) --- */
.legal-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 85vh;
    /* Standard fixed height */
    max-height: 900px;

    background: #0a0a0f;
    /* Fallback */
    background: var(--lw-panel-bg, rgba(15, 15, 20, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8);

    display: flex;
    flex-direction: column;
    /* Vertical Flex Layout */
    overflow: hidden;
    /* Hide anything spilling out of the box rounded corners */
}

/* Light Mode Background */
html.light-mode .legal-modal-content {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- 4. Close Button --- */
.lw-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

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

html.light-mode .lw-modal-close {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

html.light-mode .lw-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* --- 5. Modal Body (THE SCROLLABLE AREA) --- */
.lw-modal-body {
    flex: 1;
    /* Take remaining height */
    overflow-y: scroll !important;
    /* Always enable scrolling */
    overflow-x: hidden;
    position: relative;
    padding: 0;
    /* Reset */

    /* Scroll Isolation */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* iOS Momentum */
    touch-action: pan-y;
    /* Vertical scroll only */

    /* Scrollbar Styling: HIDDEN */
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE */
}

/* Scrollbar Webkit: HIDDEN */
.lw-modal-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

.lw-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.lw-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.lw-modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Light Mode Scrollbar */
html.light-mode .lw-modal-body {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

html.light-mode .lw-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

html.light-mode .lw-modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* --- 6. Content Injection Overrides (Crucial Fixes) --- */
/* Target the injected container specifically inside the modal */
#legal-modal-body .legal-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;

    /* V10 FIX: Ensure no overflow restrictions on the child */
    overflow: visible !important;

    /* KILL THE GLOBAL MARGIN that causes layout breakage */
    margin: 0 !important;

    /* Text Alignment and Padding */
    text-align: left !important;
    /* Force Left */
    /* Add internal padding for aesthetics */
    padding: 60px 40px 100px 40px !important;

    /* Remove transparency effects if double-applied */
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Typography inside modal */
#legal-modal-body h1,
#legal-modal-body h2,
#legal-modal-body h3,
#legal-modal-body p,
#legal-modal-body li {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Typography inside modal */
#legal-modal-body h1 {
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.2;
    padding-right: 40px;
    /* Space for close button */
    margin-bottom: 2rem !important;
    /* Spacing after title */
}

#legal-modal-body h2 {
    font-size: 1.4rem;
    margin-top: 2.5rem !important;
    /* Space above section */
    margin-bottom: 1rem !important;
    /* Space below section title */
    color: #fff;
    opacity: 1;
}

#legal-modal-body p,
#legal-modal-body li {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 1rem !important;
}

/* --- 7. Light Mode Text Overrides (Fix Visibility) --- */
/* Target BOTH html and body classes to be 100% sure */
html.light-mode #legal-modal-body,
body.light-mode #legal-modal-body,
html.light-mode #legal-modal-body *,
body.light-mode #legal-modal-body * {
    color: #111 !important;
}

/* Explicit overrides if needed */
html.light-mode #legal-modal-body h1,
body.light-mode #legal-modal-body h1 {
    color: #000 !important;
}

html.light-mode #legal-modal-body p,
body.light-mode #legal-modal-body p {
    color: #333 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .legal-modal-content {
        width: 100%;
        height: 100%;
        /* Fullscreen on mobile */
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    #legal-modal-body .legal-container {
        padding: 80px 20px 120px 20px !important;
    }
}
/* 
 * 项目详情弹窗样式�?(Project Modal Layer) - v3.8
 * -------------------------------------------
 * 用途：负责“精选项目”点击后的全�?浮层详情展示，包含图库、参数列表和描述�?
 * 设计：支持深�?浅色模式切换，移动端自动转为全屏覆盖模式以优化阅读体验�?
 * 
 * 主要内容�?
 * 1. 弹窗外层容器 & 毛玻璃背�?(.project-modal)
 * 2. 内容主体及深色模式适配 (.modal-content)
 * 3. 媒体展示�?(图片/视频容器)
 * 4. 项目参数网格 (Meta Grid: 类别、地点、日期等)
 * 5. 移动端全屏覆盖逻辑 (@media max-width: 768px)
 * 6. 扩展图库网格 (.modal-gallery-section)
 */

.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    /* Topmost */
    opacity: 0;
    pointer-events: none;
    /* Click-through when hidden */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.6);
    /* Backdrop */
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Content Container */
.project-modal .modal-content {
    background: #fff;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 20px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Support */
body:not(.light-mode) .project-modal .modal-content {
    background: #1e1e1e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Image Section */
.project-modal .modal-image-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.project-modal .modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Details Section */
.project-modal .modal-details {
    padding: 30px;
}

.project-modal .modal-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--accent-color, #d4af37);
    color: #fff;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.project-modal .modal-title {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 15px;
    line-height: 1.2;
}

.project-modal .modal-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 30px;
}

body:not(.light-mode) .project-modal .modal-description {
    color: #ccc;
}

/* Meta Grid */
.project-modal .modal-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body:not(.light-mode) .project-modal .modal-meta-grid {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.project-modal .modal-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #444;
}

body:not(.light-mode) .project-modal .modal-meta-item {
    color: #ddd;
}

/* Close Button */
.project-modal .modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    color: #000;
}

body:not(.light-mode) .project-modal .modal-close-btn {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-modal .modal-close-btn:hover {
    transform: scale(1.1);
}

/* =========================================
   MOBILE FULL SCREEN OVERRIDE (For User)
   ========================================= */
@media (max-width: 768px) {

    /* V45: Full Screen Opaque Overlay */
    .project-modal {
        background: #000;
        z-index: 999999;
    }

    .project-modal .modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .project-modal .modal-image-container {
        height: 40vh;
        /* Larger image on mobile */
        flex-shrink: 0;
    }

    .project-modal .modal-details {
        padding: 24px;
        flex: 1;
        overflow-y: auto;
    }

    .project-modal .modal-title {
        font-size: 1.8rem;
    }

    .project-modal .modal-close-btn {
        top: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.5);
        /* Always dark bg on mobile over image */
        color: #fff;
    }
}

/* --- GALLERY EXTENSION (V55) --- */
.modal-gallery-section {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

body:not(.light-mode) .modal-gallery-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.light-mode .modal-gallery-section {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.gallery-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 500;
    opacity: 0.8;
}

.modal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.gallery-item {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

/* Mobile specific for gallery */
@media (max-width: 768px) {
    .modal-gallery-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes fadeInImg {
    from {
        opacity: 0.5;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in {
    animation: fadeInImg 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* ==========================================
   白天模式 - 弹窗/模态框样式
   ========================================== */

/* 
   设计原则�?
   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;
}
/*
 * Architectural Lens Cursor Component (_cursor.css)
 * -------------------------------------------------
 * Design logic: A precision dot with a glowing engineering ring.
 * Features: Breathing idle, expansion on hover, ping on click.
 */

#custom-cursor {
    position: fixed;
    top: -100px;
    left: -100px;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: difference;
    /* Removed transition for 1:1 feel */
}

/* 1. Precision Center Dot */
.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2;
}

/* 2. Single Minimal Ring - UPDATED: Thicker & Brighter with Glow */
.cursor-ring {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    transition: width 0.15s ease-out, height 0.15s ease-out, border-color 0.15s ease-out, border-width 0.15s ease-out;
}

/* 3. Hovering State: Simple Expansion */
#custom-cursor.hovering .cursor-ring {
    width: 38px;
    height: 38px;
    border-color: #fff;
    border-width: 2px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

#custom-cursor.hovering .cursor-dot {
    transform: scale(1.2);
}

/* 4. Click Ping Effect (Simplified) */
#custom-cursor.clicking .cursor-ring {
    animation: cursorPingV3 0.3s ease-out forwards;
}

@keyframes cursorPingV3 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 5. Valentine's Day Heart Particles */
.heart-particle {
    position: fixed;
    pointer-events: none;
    z-index: 100002;
    font-size: 20px;
    user-select: none;
    animation: heartFly 0.8s ease-out forwards;
}

@keyframes heartFly {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.8) rotate(var(--rot));
        opacity: 0;
    }
}

/* Light Mode tweak */
html.light-mode #custom-cursor {
    opacity: 0.85;
}

/* Optimized for Touch */
@media (max-width: 768px) {
    #custom-cursor {
        display: none !important;
    }
}
/* 
 * 增强型全局搜索弹窗样式 (Search Pro Max Edition)
 * ----------------------------------------------------
 * 设计方案：Cyberpunk x Glassmorphism
 */

#global-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-index-modal);
    display: none;
    /* Controlled by .active */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#global-search-modal.active {
    display: flex;
}

.search-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: -1;
}

.search-container {
    width: 100%;
    max-width: 700px;
    background: var(--search-glass);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--search-border);
    border-radius: 12px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    animation: modal-enter 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Digital Scanline Effect */
.search-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg,
            rgba(255, 0, 0, 0.02),
            rgba(0, 255, 0, 0.01),
            rgba(0, 0, 255, 0.02));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0.3;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Header & Input */
.search-header {
    padding: 30px 40px 10px;
    position: relative;
    border-bottom: 1px solid var(--low-border, rgba(255, 255, 255, 0.05));
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--search-border);
    color: var(--lw-text);
    font-size: 1.5rem;
    padding: 15px 0;
    outline: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-bottom-color: var(--search-glow);
    text-shadow: 0 0 10px var(--search-border);
}

.search-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--lw-border);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-close:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: #ff4444;
}

/* Results Content */
.search-results {
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px 40px 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--search-border) transparent;
}

.search-results::-webkit-scrollbar {
    width: 4px;
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--search-border);
    border-radius: 10px;
}

/* Placeholder */
.search-placeholder,
.search-no-results {
    text-align: center;
    padding: 60px 0;
    color: var(--lw-text-muted);
}

.quick-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.quick-tags span {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--lw-border);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-tags span:hover {
    border-color: var(--search-glow);
    background: rgba(255, 170, 0, 0.1);
    color: var(--search-glow);
}

/* Result Groups & Items */
.search-result-group {
    margin-bottom: 30px;
}

.group-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--search-glow);
    margin-bottom: 15px;
    opacity: 0.8;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--search-border);
    transform: translateX(5px);
}

.result-thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    margin-right: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.result-thumb-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--lw-text-muted);
    flex-shrink: 0;
}

.result-info {
    flex-grow: 1;
}

.result-type {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.result-info h4 {
    margin: 0;
    color: var(--lw-text);
    font-size: 1rem;
}

.result-info p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--lw-text-muted);
}

.result-action {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--search-glow);
}

.search-result-item:hover .result-action {
    opacity: 1;
    transform: translateX(0);
}

/* Light Mode Polish */
body.light-mode .search-container {
    background: var(--search-glass);
    border-color: var(--search-border);
}

body.light-mode .search-result-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
    .search-container {
        max-width: 95vw;
    }

    .search-header {
        padding: 20px 20px 10px;
    }

    .search-results {
        padding: 10px 20px 20px;
    }

    .search-input {
        font-size: 1.2rem;
    }
}