/* ParaGate Modern AppShell - 深色系玻璃擬物風格 */
/* 參考 Kling 的輕盈科技感設計 */

:root {
    /* Brand Colors - 漸層組合 */
    --brand-from: #7C3AED; /* violet-600 */
    --brand-to: #22D3EE;   /* cyan-400 */
    --brand-gradient: linear-gradient(135deg, var(--brand-from), var(--brand-to));
    
    /* Primary Colors */
    --primary-color: #7C3AED;   /* violet-600 */
    --secondary-color: #22D3EE; /* cyan-400 */
    --accent-color: #10B981;    /* emerald-500 */
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #E5E7EB;  /* gray-200 */
    --text-muted: #9CA3AF;      /* gray-400 */
    --text-inverse: #111827;     /* gray-900 */
    
    /* Glass Effect Colors */
    --glass-bg: rgba(11, 15, 19, 0.6);         /* 深色玻璃背景 */
    --glass-bg-light: rgba(255, 255, 255, 0.08); /* 淺色玻璃背景 */
    --glass-bg-dark: rgba(11, 15, 19, 0.8);    /* 更深色玻璃背景 */
    --glass-border: rgba(255, 255, 255, 0.1);  /* 玻璃邊框 */
    --glass-border-hover: rgba(255, 255, 255, 0.18); /* 懸浮時邊框 */
    
    /* Border Radius */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-pill: 9999px;
    
    /* Layout Dimensions */
    --header-height: 64px;
    --header-height-lg: 72px;
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
    
    /* Motion Specs */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 220ms;
    --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Shadows */
    --shadow-glass: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-glass-lg: 0 20px 40px rgba(0, 0, 0, 0.45);
    --shadow-button: 0 8px 25px rgba(124, 58, 237, 0.4);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.25);
    
    /* Z-Index Layers */
    --z-header: 40;
    --z-sidebar: 30;
    --z-drawer: 50;
    --z-modal: 60;
}

/* Global Styles */
* {
    box-sizing: border-box;
}

body[data-theme="dark"] {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #0B0F13 0%, #1A1B3E 25%, #2D1B69 50%, #7C3AED 100%);
    background-attachment: fixed; /* Keep gradient fixed while content scrolls */
    min-height: 100vh;
    color: white;
    overflow-x: hidden; /* Prevent horizontal scrolling on body */
    overflow-y: auto; /* Ensure vertical scrolling is enabled on body */
}

/* AppShell Layout - Fixed positioning structure */
.app-shell {
    display: flex;
    min-height: 100vh;
    position: relative;
    overflow: visible; /* Allow natural page scrolling when content exceeds viewport */
}

/* Header - Fixed top bar that stays in place */
.app-header {
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    z-index: var(--z-header);
    height: var(--header-height);
    transition: all var(--motion-base) var(--ease-smooth);
    width: calc(100% - var(--sidebar-width)) !important;
}

/* Header adjusts when sidebar is collapsed */
.app-main.sidebar-collapsed .app-header,
.sidebar-collapsed .app-header {
    left: var(--sidebar-width-collapsed) !important;
    width: calc(100% - var(--sidebar-width-collapsed)) !important;
}

body[data-theme="dark"] .app-header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

/* Light theme header */
body[data-theme="light"] .app-header {
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(0,40,80,0.12);
    box-shadow: 0 2px 4px -2px rgba(10,40,70,0.08), 0 8px 28px -10px rgba(10,40,70,0.12);
    color: var(--text-primary);
}

/* Mobile header adjustments */
@media (max-width: 1023.98px) {
    .app-header {
        position: fixed !important;
        top: 0 !important;
        left: var(--sidebar-width-collapsed) !important;
        right: 0 !important;
        width: calc(100% - var(--sidebar-width-collapsed)) !important;
        z-index: calc(var(--z-header) + 1) !important;
    }
    
    .app-main.sidebar-mobile-open .app-header {
        left: 0 !important;
        width: 100% !important;
    }
}

@media (min-width: 1024px) {
    .app-header {
        height: var(--header-height-lg);
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
    max-width: 100%;
}

@media (min-width: 640px) {
    .header-content {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .header-content {
        padding: 0 2rem;
    }
}

/* Sidebar - Fixed Navigation that stays in place while content scrolls */
.app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: var(--z-sidebar) !important;
    width: var(--sidebar-width);
    height: 100vh !important;
    transform: translateX(0);
    transition: all var(--motion-slow) var(--ease-smooth);
    overflow-y: auto;
    overflow-x: hidden;
}

body[data-theme="dark"] .app-sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

/* Light theme sidebar */
body[data-theme="light"] .app-sidebar {
    background: linear-gradient(180deg,#ffffff 0%, #f5f8fb 65%, #edf2f6 100%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-right: 1px solid rgba(0,40,80,0.10);
    box-shadow: 4px 0 18px -8px rgba(20,56,90,0.08);
    color: var(--text-primary);
}

/* Sidebar States */
.app-sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.app-sidebar.mobile-hidden {
    transform: translateX(-100%);
}

/* 自定義滾動條 */
.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--glass-border-hover);
}

/* Sidebar Brand/Logo */
.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    transition: padding var(--motion-base) var(--ease-smooth);
}

.app-sidebar.collapsed .sidebar-brand {
    padding: 1.5rem 0.75rem;
    justify-content: center;
}

.brand-logo {
    width: 40px;
    height: 40px;
    margin-right: 0.75rem;
    transition: margin var(--motion-base) var(--ease-smooth);
}

.app-sidebar.collapsed .brand-logo {
    margin-right: 0;
}

.brand-text {
    flex: 1;
    opacity: 1;
    transition: opacity var(--motion-base) var(--ease-smooth);
}

.app-sidebar.collapsed .brand-text {
    opacity: 0;
    pointer-events: none;
}

.brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Sidebar Toggle Button */
body[data-theme="dark"] .sidebar-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-smooth);
}

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

.app-sidebar.collapsed .sidebar-toggle {
    right: 50%;
    transform: translateX(50%);
}

.app-sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* Navigation Groups */
.nav-group {
    /* reserved for future group spacing adjustments (kept to avoid layout shift) */
    margin-bottom: 0.5rem;
}

.nav-group + .nav-group {
    border-top: 1px solid var(--glass-border);
}

body[data-theme="dark"] .nav-group-title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1rem;
    margin: 0 0 0.5rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .nav-group-title:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

body[data-theme="dark"] .nav-group-title[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.nav-toggle-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.nav-group-title[aria-expanded="true"] .nav-toggle-icon {
    transform: rotate(180deg);
}

/* Collapse Animation */
.nav-group .collapse {
    transition: all 0.3s ease;
}

.nav-group .collapsing {
    transition: height 0.3s ease;
}

.app-sidebar.collapsed .nav-group-title {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* Navigation Items */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin: 0;
}

body[data-theme="dark"] .nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all var(--motion-fast) var(--ease-smooth);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

    /* Light nav links */
    body[data-theme="light"] .nav-link {
        display:flex;
        align-items:center;
        padding:0.7rem 1rem;
        color: var(--text-secondary);
        text-decoration:none;
        transition: all var(--motion-fast) var(--ease-smooth);
        border-radius:8px;
        font-weight:500;
        position:relative;
    }
    body[data-theme="light"] .nav-link:hover { background: rgba(0,80,140,0.06); color: var(--text-primary); }
    body[data-theme="light"] .nav-link.active {
        background: linear-gradient(135deg,#e8f2fa,#dceaf4);
        color: var(--text-primary);
        border-left:3px solid var(--btn-primary-bg, #3396D3);
        box-shadow: 0 4px 10px -4px rgba(30,80,120,0.18) inset;
    }
    body[data-theme="light"] .nav-link.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--gradient-action, linear-gradient(180deg,#154D71,#33A1E0)); }

body[data-theme="dark"] .nav-link:hover {
    background: var(--glass-bg-light);
    color: white;
    text-decoration: none;
}

body[data-theme="dark"] .nav-link.active {
    background: var(--glass-border);
    color: white;
    border-left: 3px solid var(--brand-to);
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-gradient);
}

.nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: margin var(--motion-base) var(--ease-smooth);
}

.app-sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.nav-text {
    flex: 1;
    font-weight: 500;
    opacity: 1;
    transition: opacity var(--motion-base) var(--ease-smooth);
    white-space: nowrap;
    overflow: hidden;
}

.app-sidebar.collapsed .nav-text {
    opacity: 0;
    pointer-events: none;
}

.nav-badge {
    margin-left: auto;
    opacity: 1;
    transition: opacity var(--motion-base) var(--ease-smooth);
}

.app-sidebar.collapsed .nav-badge {
    opacity: 0;
    pointer-events: none;
}

/* Tooltip for Collapsed State */
.app-sidebar.collapsed .nav-link {
    position: relative;
    justify-content: center;
}

.app-sidebar.collapsed .nav-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast);
    z-index: 1000;
}

.app-sidebar.collapsed .nav-link:hover[data-tooltip]::after {
    opacity: 1;
}

/* Main Content Area - Positioned beside fixed sidebar */
.app-main {
    position: relative !important;
    flex: 1;
    margin-left: var(--sidebar-width) !important;
    margin-top: var(--header-height) !important; /* Add top margin for fixed header */
    transition: margin-left var(--motion-slow) var(--ease-smooth);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height)) !important; /* Use min-height to allow content to expand */
    width: calc(100% - var(--sidebar-width)) !important;
    overflow: visible !important; /* Allow content to overflow naturally */
}

.app-main.sidebar-collapsed {
    margin-left: var(--sidebar-width-collapsed) !important;
    width: calc(100% - var(--sidebar-width-collapsed)) !important;
}

@media (min-width: 1024px) {
    .app-main {
        margin-top: var(--header-height-lg) !important;
        min-height: calc(100vh - var(--header-height-lg)) !important;
    }
}

/* Content Area - Scrollable content */
.content-area {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem 1.5rem 4rem 1.5rem; /* Increase bottom padding to ensure content is visible */
    overflow-y: visible; /* Allow natural content flow and scrolling */
    overflow-x: hidden; /* Prevent horizontal scroll */
    min-height: calc(100vh - var(--header-height) - 3rem); /* Ensure minimum height accounting for header and padding */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Dark mode: ensure main/content surfaces remain transparent so parent radial gradient shows,
   avoiding a lighter fallback bar at very bottom on long pages */
body[data-theme="dark"] .app-main, 
body[data-theme="dark"] .content-area { background: transparent; }

/* Desktop content area height adjustment */
@media (min-width: 1024px) {
    .content-area {
        min-height: calc(100vh - var(--header-height-lg) - 3rem) !important;
    }
}

/* Specific fixes for AI tool pages and other content-heavy pages */
.ai-tool-container {
    padding-bottom: 4rem !important; /* Extra padding to ensure bottom content is visible */
    min-height: calc(100vh - var(--header-height) - 6rem); /* Ensure minimum height */
}

/* Ensure all form sections and result sections have adequate spacing */
#resultSection, #errorSection, .glass-card {
    margin-bottom: 2rem !important;
}

/* Fix for any positioned elements that might be cut off */
.position-fixed, .position-sticky {
    z-index: 1000;
}

/* Glass Components */
body[data-theme="dark"] .glass {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
}

body[data-theme="dark"] .glass-card {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow-glass);
    transition: all var(--motion-base) var(--ease-smooth);
}

    /* Light generic glass card override (legacy app shell components) */
    body[data-theme="light"] .glass-card {
        background: rgba(255,255,255,0.85);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter: blur(14px) saturate(160%);
        border:1px solid rgba(0,40,80,0.12);
        box-shadow: 0 4px 14px -6px rgba(30,70,110,0.18), 0 2px 4px rgba(30,70,110,0.08);
        color: var(--text-primary);
    }
    body[data-theme="light"] .glass-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px -6px rgba(30,70,110,0.24), 0 2px 6px rgba(30,70,110,0.12);
        border-color: rgba(0,80,140,0.20);
    }

body[data-theme="dark"] .glass-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-glass-lg);
    border-color: var(--glass-border-hover);
}

/* Brand Buttons */
body[data-theme="dark"] .btn-brand {
    background: var(--brand-gradient);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.75rem 2rem;
    transition: all var(--motion-fast) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

body[data-theme="dark"] .btn-brand:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
    color: white;
}

body[data-theme="dark"] .btn-brand:active {
    transform: scale(0.98);
}

/* Glass Buttons */
body[data-theme="dark"] .btn-glass {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all var(--motion-fast) var(--ease-smooth);
}

body[data-theme="dark"] .btn-glass:hover {
    background: var(--glass-border);
    border-color: var(--glass-border-hover);
    color: white;
    transform: translateY(-1px);
}

/* Mobile Responsiveness */
@media (max-width: 1023.98px) {
    /* Mobile: Default collapsed icon-only sidebar - force override desktop styles */
    .app-sidebar,
    body[data-theme="light"] .app-sidebar,
    body[data-theme="dark"] .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: var(--sidebar-width-collapsed) !important;
        height: 100vh !important;
        transform: translateX(0) !important;
        z-index: var(--z-sidebar) !important;
    }
    
    /* Mobile: When hamburger menu is clicked, show full sidebar */
    .app-sidebar.mobile-open,
    body[data-theme="light"] .app-sidebar.mobile-open,
    body[data-theme="dark"] .app-sidebar.mobile-open {
        width: var(--sidebar-width) !important;
        transform: translateX(0) !important;
        z-index: var(--z-drawer) !important;
        box-shadow: var(--shadow-glass-lg) !important;
    }
    
    /* Mobile: Main content starts after collapsed sidebar and remains fixed position */
    .app-main {
        position: relative !important;
        margin-left: var(--sidebar-width-collapsed) !important;
        margin-top: var(--header-height) !important;
        width: calc(100% - var(--sidebar-width-collapsed)) !important;
        transition: margin-left var(--motion-slow) var(--ease-smooth) !important;
        min-height: calc(100vh - var(--header-height)) !important; /* Use min-height for mobile */
        z-index: 1 !important;
        overflow: visible !important; /* Allow natural content flow on mobile */
    }
    
    /* Mobile: When sidebar is fully open, main content is full width with overlay */
    .app-main.sidebar-mobile-open {
        margin-left: 0 !important;
        width: 100% !important;
        z-index: 1 !important;
    }
    
    /* Mobile: Ensure content area takes full height and remains scrollable */
    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important; /* Allow natural scrolling on mobile */
        min-height: calc(100vh - var(--header-height) - 2rem) !important; /* Use min-height for mobile */
        padding: 1rem 1rem 4rem 1rem !important; /* Increase bottom padding for mobile */
        box-sizing: border-box !important;
    }
    
    /* Mobile: Hide sidebar text and badges in collapsed state - force override */
    .app-sidebar:not(.mobile-open) .nav-text,
    .app-sidebar:not(.mobile-open) .nav-badge,
    .app-sidebar:not(.mobile-open) .brand-text,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .nav-text,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .nav-badge,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .brand-text,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .nav-text,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .nav-badge,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .brand-text {
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }
    
    /* Mobile: Center icons in collapsed state - force override */
    .app-sidebar:not(.mobile-open) .nav-link,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .nav-link,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .nav-link {
        justify-content: center !important;
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Mobile: Center brand logo - force override */
    .app-sidebar:not(.mobile-open) .sidebar-brand,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .sidebar-brand,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .sidebar-brand {
        justify-content: center !important;
        padding: 1.5rem 0.75rem !important;
    }
    
    /* Mobile: Show nav group titles and icons when sidebar is opened - force override */
    .app-sidebar.mobile-open .nav-group-title,
    body[data-theme="light"] .app-sidebar.mobile-open .nav-group-title,
    body[data-theme="dark"] .app-sidebar.mobile-open .nav-group-title {
        display: flex !important;
        opacity: 1 !important;
        height: auto !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        border-bottom: 1px solid var(--glass-border) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        cursor: pointer !important;
    }
    
    /* Mobile: Hide nav group titles in collapsed state - force override */
    .app-sidebar:not(.mobile-open) .nav-group-title,
    body[data-theme="light"] .app-sidebar:not(.mobile-open) .nav-group-title,
    body[data-theme="dark"] .app-sidebar:not(.mobile-open) .nav-group-title {
        display: none !important;
    }
    
    /* Mobile: Force expand all nav groups when sidebar is open - force override */
    .app-sidebar.mobile-open .nav-group .collapse {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        transition: none !important;
    }
    
    /* Mobile: Show all nav items when sidebar is open - force override */
    .app-sidebar.mobile-open .nav-item {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Mobile: Ensure nav icons are visible when sidebar is open - force override */
    .app-sidebar.mobile-open .nav-icon {
        display: inline-flex !important;
        opacity: 1 !important;
        margin-right: 12px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Mobile: Submenu indicator for collapsed items */
    .app-sidebar:not(.mobile-open) .nav-link.has-submenu::after {
        content: '⋯';
        position: absolute;
        bottom: 2px;
        right: 50%;
        transform: translateX(50%);
        font-size: 0.75rem;
        color: var(--brand-to);
        opacity: 0.8;
    }
    
    /* Mobile Header */
    .mobile-menu-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--glass-bg-light);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: all var(--motion-fast) var(--ease-smooth);
    }
    
    /* Light theme mobile menu trigger */
    body[data-theme="light"] .mobile-menu-trigger {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 40, 80, 0.15);
        color: var(--text-primary);
    }
    
    body[data-theme="light"] .mobile-menu-trigger:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(0, 80, 140, 0.25);
        color: var(--text-primary);
    }
    
    .mobile-menu-trigger:hover {
        background: var(--glass-border);
        color: white;
    }
    
    /* Mobile: Hamburger animation */
    .mobile-menu-trigger .hamburger-icon {
        width: 20px;
        height: 16px;
        position: relative;
        transform: rotate(0deg);
        transition: .3s ease-in-out;
        cursor: pointer;
    }
    
    .mobile-menu-trigger .hamburger-icon span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: currentColor;
        border-radius: 1px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .2s ease-in-out;
    }
    
    .mobile-menu-trigger .hamburger-icon span:nth-child(1) {
        top: 0px;
    }
    
    .mobile-menu-trigger .hamburger-icon span:nth-child(2) {
        top: 7px;
    }
    
    .mobile-menu-trigger .hamburger-icon span:nth-child(3) {
        top: 14px;
    }
    
    /* Mobile: Hamburger to X animation */
    .mobile-menu-trigger.active .hamburger-icon span:nth-child(1) {
        top: 7px;
        transform: rotate(135deg);
    }
    
    .mobile-menu-trigger.active .hamburger-icon span:nth-child(2) {
        opacity: 0;
        left: -20px;
    }
    
    .mobile-menu-trigger.active .hamburger-icon span:nth-child(3) {
        top: 7px;
        transform: rotate(-135deg);
    }
    
    /* Mobile Overlay */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: calc(var(--z-drawer) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-smooth);
    }
    
    .mobile-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Mobile: Submenu popover */
    .mobile-submenu-popover {
        position: fixed;
        left: var(--sidebar-width-collapsed);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        box-shadow: var(--shadow-glass-lg);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        min-width: 200px;
        max-width: 280px;
        z-index: calc(var(--z-sidebar) + 1);
        opacity: 0;
        pointer-events: none;
        transform: translateX(-10px);
        transition: all var(--motion-base) var(--ease-smooth);
    }
    
    /* Light theme submenu popover */
    body[data-theme="light"] .mobile-submenu-popover {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 40, 80, 0.15);
        box-shadow: 0 8px 32px -10px rgba(20, 56, 90, 0.25), 0 2px 8px rgba(20, 56, 90, 0.15);
        color: var(--text-primary);
    }
    
    .mobile-submenu-popover.active {
        opacity: 1;
        pointer-events: all;
        transform: translateX(0);
    }
    
    .mobile-submenu-popover .submenu-header {
        padding: 1rem;
        border-bottom: 1px solid var(--glass-border);
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.875rem;
        background: var(--glass-bg-dark);
        border-radius: 12px 12px 0 0;
    }
    
    /* Light theme submenu header */
    body[data-theme="light"] .mobile-submenu-popover .submenu-header {
        background: rgba(240, 248, 252, 0.9);
        border-bottom: 1px solid rgba(0, 40, 80, 0.12);
        color: var(--text-primary);
    }
    
    .mobile-submenu-popover .submenu-items {
        padding: 0.5rem;
    }
    
    .mobile-submenu-popover .submenu-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        color: var(--text-secondary);
        text-decoration: none;
        border-radius: 8px;
        transition: all var(--motion-fast) var(--ease-smooth);
        font-size: 0.875rem;
    }
    
    .mobile-submenu-popover .submenu-item:hover {
        background: var(--glass-bg-light);
        color: var(--text-primary);
    }
    
    /* Light theme submenu item hover */
    body[data-theme="light"] .mobile-submenu-popover .submenu-item:hover {
        background: rgba(0, 80, 140, 0.08);
        color: var(--text-primary);
    }
    
    .mobile-submenu-popover .submenu-item i {
        width: 16px;
        margin-right: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Mobile: Tooltip for collapsed nav items */
    .app-sidebar:not(.mobile-open) .nav-link[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-fast);
        z-index: 1000;
        font-weight: 500;
    }
    
    .app-sidebar:not(.mobile-open) .nav-link:hover[data-tooltip]::before {
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .mobile-menu-trigger {
        display: none !important;
    }
    
    .mobile-overlay {
        display: none !important;
    }
    
    .mobile-submenu-popover {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    /* Hide desktop sidebar toggle on mobile */
    .sidebar-toggle {
        display: none !important;
    }
}

/* Header Controls */
.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

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

.header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

/* Dropdown Menus */
.dropdown-menu {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    transition: all var(--motion-fast) var(--ease-smooth);
}

.dropdown-item:hover {
    background: var(--glass-bg-light);
    color: white;
}

/* Focus States for Accessibility */
.nav-link:focus,
.btn-brand:focus,
.btn-glass:focus,
.sidebar-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.6);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--motion-base) var(--ease-smooth);
}

/* Loading States */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--brand-to);
    animation: spin 1s linear infinite;
}

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

/* Smooth Page Transitions */
.page-transition {
    transition: all var(--motion-base) var(--ease-smooth);
}

/* Print Styles */
@media print {
    .app-sidebar,
    .mobile-overlay {
        display: none !important;
    }
    
    .app-main {
        margin-left: 0 !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* ========================================
   AI TOOLS PAGE STYLES (Kling風格)
======================================== */

/* Base AI tool container: keep neutral/transparent so theme-specific backgrounds come from design-system.css */
.ai-tool-container {
    padding: 1rem;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg,
        rgba(124, 58, 237, 0.02) 0%,
        rgba(59, 130, 246, 0.02) 50%,
        rgba(16, 185, 129, 0.02) 100%);
    background-color: transparent; /* allow dark theme override (radial) without blending artifacts */
}

/* 頁面標題區塊 */
.page-header {
    margin-bottom: 2rem;
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.page-header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
}

.page-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, 
        var(--primary-gradient-start) 0%, 
        var(--primary-gradient-end) 100%);
    border-radius: 16px;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
}

.page-title-info {
    flex: 1;
}

.page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle {
    margin: 0.5rem 0 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 400;
}

.page-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-badge {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* 工具內容區域 */
.tool-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 工具導航 */
.tool-nav .nav-pills {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tool-nav .nav-link {
    border-radius: 12px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--motion-standard) var(--ease-smooth);
    padding: 1rem 1.5rem;
    margin: 0;
}

.tool-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.tool-nav .nav-link.active {
    background: linear-gradient(135deg, 
        var(--primary-gradient-start) 0%, 
        var(--primary-gradient-end) 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.nav-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-icon {
    font-size: 1.25rem;
    min-width: 20px;
}

.nav-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.nav-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}

.nav-desc {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* 設定面板 */
.setting-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

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

.setting-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1;
}

.required {
    color: #ef4444;
    margin-left: 0.25rem;
}

.form-switch-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-switch-group .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Light Mode: 修正進階模式切換按鈕的背景和邊框 */
body[data-theme="light"] .form-switch-group .form-check-input {
    background-color: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

.form-switch-group .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-switch-group .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin: 0;
}

/* Light Mode: 修正進階模式標籤文字顏色 */
body[data-theme="light"] .form-switch-group .form-check-label {
    color: rgba(0, 0, 0, 0.8);
}

.prompt-mode {
    transition: all var(--motion-standard) var(--ease-smooth);
}

.prompt-mode:not(.active) {
    display: none;
}

/* Form controls (Kling style) - limit translucent variant to dark theme to avoid white-on-white in light mode */
body[data-theme="dark"] .ai-tool-container .form-control,
body[data-theme="dark"] .ai-tool-container .form-select,
body[data-theme="dark"] .ai-tool-container .form-range {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: rgba(255,255,255,0.9);
    padding: 0.75rem 1rem;
    transition: all var(--motion-fast) var(--ease-smooth);
}

body[data-theme="dark"] .ai-tool-container .form-control:focus,
body[data-theme="dark"] .ai-tool-container .form-select:focus {
    background: rgba(255,255,255,0.12);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
    color: #fff;
}

body[data-theme="dark"] .ai-tool-container .form-control::placeholder { color: rgba(255,255,255,0.5); }

/* Light Mode: 修正徽章對比度問題 */
body[data-theme="light"] .badge.bg-light {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #495057 !important;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

body[data-theme="light"] .badge.text-info {
    color: #0dcaf0 !important;
}

/* Light Mode: 修正卡片標題顏色 */
body[data-theme="light"] .card-title,
body[data-theme="light"] .ai-section-header h3,
body[data-theme="light"] .ai-section-header h5,
body[data-theme="light"] .ai-section-header h6 {
    color: #212529 !important;
}

/* Light Mode: 通用文字對比度修正 */
body[data-theme="light"] .glass-card,
body[data-theme="light"] .ai-panel {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #212529;
}

body[data-theme="light"] .glass-card .card-body,
body[data-theme="light"] .ai-panel .card-body {
    color: #212529;
}

/* Light Mode: 修正文字標籤顏色 */
body[data-theme="light"] .form-label,
body[data-theme="light"] .setting-label {
    color: #495057 !important;
}

/* Light Mode: 修正小文字和描述顏色 */
body[data-theme="light"] .form-text,
body[data-theme="light"] .text-muted,
body[data-theme="light"] .card-subtitle {
    color: #6c757d !important;
}

/* Light Mode: 修正卡片標題區域 */
body[data-theme="light"] .ai-section-header {
    background: rgba(248, 249, 250, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light Mode: 確保按鈕文字對比度 */
body[data-theme="light"] .btn-outline-primary,
body[data-theme="light"] .btn-outline-secondary {
    color: #0d6efd;
    border-color: #0d6efd;
}

body[data-theme="light"] .btn-outline-primary:hover,
body[data-theme="light"] .btn-outline-secondary:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Light Mode: 修正 text-white-50 類別在淺色背景的問題 */
body[data-theme="light"] .text-white-50 {
    color: rgba(33, 37, 41, 0.6) !important;
}

/* Light Mode: 修正卡片標題區域的小文字 */
body[data-theme="light"] .card-header small,
body[data-theme="light"] .bg-info small {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Light theme explicit styles for AI tool form controls */
body[data-theme="light"] .ai-tool-container .form-control,
body[data-theme="light"] .ai-tool-container .form-select,
body[data-theme="light"] .ai-tool-container .form-range {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}
body[data-theme="light"] .ai-tool-container .form-control:focus,
body[data-theme="light"] .ai-tool-container .form-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(51,150,211,0.25);
    outline: none;
    background: #fff;
}
body[data-theme="light"] .ai-tool-container .form-control::placeholder { color: var(--text-muted); }

/* Language selector (was white text on white bg) */
body[data-theme="light"] select.btn-glass.form-select,
body[data-theme="light"] .btn-glass select.form-select {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
body[data-theme="dark"] select.btn-glass.form-select,
body[data-theme="dark"] .btn-glass select.form-select {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Setting label color normalization */
.setting-label { color: var(--text-primary); font-weight:600; display:inline-flex; align-items:center; gap:.35rem; }
body[data-theme="dark"] .setting-label { color: var(--text-secondary); }

/* 響應式設計 */
@media (max-width: 768px) {
    .ai-tool-container {
        padding: 1rem;
    }
    
    .page-header-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-badges {
        flex-direction: row;
        justify-content: center;
    }
    
    .nav-content {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .nav-icon {
        font-size: 1.5rem;
    }
    
    .setting-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Modern Form Components */
.form-control-modern {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all var(--motion-base) var(--ease-smooth);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.form-control-modern:focus {
    background: var(--glass-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    color: var(--text-primary);
    outline: none;
}

.form-control-modern::placeholder {
    color: var(--text-muted);
}

.form-select-modern {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all var(--motion-base) var(--ease-smooth);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.form-select-modern:focus {
    background: var(--glass-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    color: var(--text-primary);
    outline: none;
}

.form-label-modern {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

.form-group-modern {
    margin-bottom: 1.5rem;
}

/* Modern Button Styles */
.btn-primary-modern {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    border-radius: var(--border-radius-md);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    transition: all var(--motion-base) var(--ease-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-button);
}

.btn-primary-modern:hover {
    background: linear-gradient(135deg, #6D28D9, #0EA5E9);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(124, 58, 237, 0.5);
    color: white;
    text-decoration: none;
}

.btn-outline-primary-modern {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-md);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    transition: all var(--motion-base) var(--ease-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-outline-primary-modern:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
    text-decoration: none;
}

.btn-secondary-modern {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    transition: all var(--motion-base) var(--ease-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-secondary-modern:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
}

.btn-outline-secondary-modern {
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    transition: all var(--motion-base) var(--ease-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-outline-secondary-modern:hover {
    background: var(--glass-bg-light);
    border-color: var(--text-secondary);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
}

/* Modern Container and Card Styles */
.modern-container {
    padding: 1.5rem;
    max-width: 100%;
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.card-header-modern {
    background: var(--glass-bg-dark);
    border-bottom: 1px solid var(--glass-border);
    padding: 1.5rem;
}

.card-title-modern {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body-modern {
    padding: 1.5rem;
}

body[data-theme="dark"] .hero-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-glass-lg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin-bottom: 2rem;
    overflow: hidden;
}
    /* Light hero placeholder styling */
    body[data-theme="light"] .hero-section {
        background: linear-gradient(145deg,#ffffff,#f5f8fb);
        border:1px solid rgba(0,60,110,0.10);
        border-radius: var(--border-radius-xl);
        box-shadow: 0 10px 32px -14px rgba(25,70,110,0.22), 0 4px 10px -4px rgba(25,70,110,0.10);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
        color: var(--text-primary);
    }

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    gap: 2rem;
}

body[data-theme="dark"] .hero-title {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="dark"] .hero-subtitle {
    color: var(--text-muted);
    font-size: 1.25rem;
    margin: 0;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

/* Input Group Styles */
body[data-theme="dark"] .input-group-modern {
    display: flex;
    align-items: stretch;
}

body[data-theme="dark"] .input-group-text-modern {
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border);
    border-right: none;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body[data-theme="dark"] .input-group-modern .form-control-modern {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    border-left: none;
}

body[data-theme="dark"] .input-group-modern .form-select-modern {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    border-left: none;
}

/* Table Responsive */
body[data-theme="dark"] .table-responsive-modern {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
    /* Light table wrapper */
    body[data-theme="light"] .table-responsive-modern {
        border-radius: var(--border-radius-lg);
        overflow:hidden;
        background:#ffffff;
        border:1px solid rgba(0,40,80,0.12);
        box-shadow: 0 2px 10px -4px rgba(20,60,90,0.12);
    }

    /* Light dropdown */
    body[data-theme="light"] .dropdown-menu {
        background:#ffffff;
        border:1px solid rgba(0,40,80,0.12);
        box-shadow: 0 8px 32px -10px rgba(20,56,90,0.18), 0 2px 6px rgba(20,56,90,0.10);
        color: var(--text-primary);
    }
    body[data-theme="light"] .dropdown-item { color: var(--text-secondary); }
    body[data-theme="light"] .dropdown-item:hover { background:#eef5fa; color: var(--text-primary); }

    /* Light forms (legacy modern-appshell) */
    body[data-theme="light"] .form-control-modern,
    body[data-theme="light"] .form-select-modern {
        background:#ffffff;
        border:1px solid rgba(0,40,80,0.20);
        color: var(--text-primary);
        font-size: 0.95rem;
    }
    body[data-theme="light"] .form-control-modern:focus,
    body[data-theme="light"] .form-select-modern:focus {
        border-color: var(--btn-primary-bg, #3396D3);
        box-shadow: 0 0 0 3px rgba(51,150,211,0.30);
    }

    /* Light table cells */
    body[data-theme="light"] table,
    body[data-theme="light"] .table-modern { color: var(--text-primary); font-size: 0.95rem; }
    body[data-theme="light"] .table-modern thead th { background:#f1f6fa; color: var(--text-secondary); }
    body[data-theme="light"] .table-modern tbody tr:hover { background:#eef5fa; }

    /* Increase overall base font for PHR embedded contexts */
    body.phr-theme-light, body[data-theme="light"] .phr-theme-light, body[data-theme="light"] .phr-theme { font-size: 16px; }
    body.phr-theme-light .stat-value-modern { font-size: 30px; }
    body.phr-theme-light .case-name-modern { font-size: 2.1rem; }
    body.phr-theme-light .module-button { font-size: 0.95rem; padding:16px 20px; }

    /* Module button adapt in unified light context (when used inside legacy shell) */
    body[data-theme="light"] .module-button { background:#ffffff; border:1px solid rgba(0,40,80,0.14); color: var(--text-primary); }
    body[data-theme="light"] .module-button:hover { background:#f6fbfe; border-color: var(--btn-primary-bg, #3396D3); }
    body[data-theme="light"] .module-button .icon { color: var(--btn-primary-bg, #3396D3); }

    /* Ensure select option text visible */
    body[data-theme="light"] select.form-select-modern option { color: #102a38; }

    /* Accessibility: force high contrast for small metadata */
    body[data-theme="light"] .badge-modern, body[data-theme="light"] .status-pill { color: #2a4454; }

    /* Notes: These light overrides retrofit the older app shell components to match the new design-system light palette without rewriting HTML. */

/* Modal Styles */
body[data-theme="dark"] .modal-content-modern {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-glass-lg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

body[data-theme="dark"] .modal-header-modern {
    background: var(--glass-bg-dark);
    border-bottom: 1px solid var(--glass-border);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-theme="dark"] .modal-title-modern {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-theme="dark"] .modal-body-modern {
    padding: 1.5rem;
    color: var(--text-primary);
}

body[data-theme="dark"] .modal-footer-modern {
    background: var(--glass-bg-dark);
    border-top: 1px solid var(--glass-border);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

body[data-theme="dark"] .btn-close-modern {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    padding: 0.5rem;
    transition: all var(--motion-base) var(--ease-smooth);
    border-radius: var(--border-radius-md);
}

body[data-theme="dark"] .btn-close-modern:hover {
    background: var(--glass-bg);
    color: var(--text-primary);
}

/* Content Section */
body[data-theme="dark"] .content-section {
    /* Additional dark content section styles placeholder */
    min-height: 0; /* linter-safe noop */
}