:root {
  --bg-space: #0a0d14;
  --bg-gray-900: #161b22;
  --bg-gray-800: #1a1e24;
  --bg-gray-700: #21262d;
  --bg-gray-600: #30363d;
  --bg-gray-50: #f8fafc;
  --text-primary: #ffffff;
  --text-secondary: #f0f3f6;
  --text-tertiary: #c9d1d9;
  --text-muted: #8b949e;
  --text-subtle: #6b7280;
  --text-white: #ffffff;
  --text-gray-100: #f0f3f6;
  --text-gray-300: #c9d1d9;
  --text-gray-400: #8b949e;
  --color-primary: #818cf8;
  --color-primary-hover: #6366f1;
  --color-primary-active: #4f46e5;
  --color-secondary: #6b7280;
  --color-accent: #8b5cf6;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --blue-500: #818cf8;
  --blue-600: #6366f1;
  --border-primary: #30363d;
  --border-secondary: #21262d;
  --border-subtle: #1a1e24;
  --border-gray-600: #30363d; 
  --surface-primary: rgba(26, 30, 36, 0.95);
  --surface-secondary: rgba(33, 38, 45, 0.92);
  --surface-elevated: rgba(48, 54, 61, 0.9);
  --surface-overlay: rgba(0, 0, 0, 0.8);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --font-size-xs: 0.75rem;    
  --font-size-sm: 0.875rem;   
  --font-size-base: 1rem;     
  --font-size-lg: 1.125rem;   
  --font-size-xl: 1.25rem;    
  --font-size-2xl: 1.5rem;    
  --font-size-3xl: 1.875rem;  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --space-xs: 0.25rem;    
  --space-sm: 0.375rem;   
  --space-md: 0.5rem;     
  --space-lg: 0.625rem;   
  --space-xl: 0.75rem;    
  --space-2xl: 1rem;      
  --space-3xl: 1.25rem;   
  --space-4xl: 1.5rem;    
  --space-5xl: 2rem;      
  --content-gap-xs: var(--space-xs);
  --content-gap-sm: var(--space-sm);
  --content-gap-md: var(--space-md);
  --content-gap-lg: var(--space-lg);
  --content-gap-xl: var(--space-xl);
  --section-padding: var(--space-xl);  
  --section-margin: var(--space-2xl);  
  --section-gap: var(--space-md);      
}
:root.light-theme {
  --bg-space: #fafafa;                       
  --bg-gray-900: #ffffff;                    
  --bg-gray-800: #f8f9fa;                    
  --bg-gray-700: #f3f4f6;                    
  --bg-gray-600: #e5e7eb;                    
  --bg-gray-50: #1b1b1d;                     
  --light-bg: #fafafa;                       
  --light-bg-alt: #f8f9fa;                   
  --light-card-bg: #ffffff;                  
  --light-border: #e5e7eb;                   
  --light-border-strong: #d1d5db;            
  --light-sidebar-bg: #ffffff;               
  --light-header-bg: #ffffff;                
  --light-hover: rgba(0, 0, 0, 0.04);       
  --light-active: rgba(0, 0, 0, 0.08);      
  --text-primary: #1b1b1d;                   
  --text-secondary: #4b5563;                 
  --text-tertiary: #6b7280;                  
  --text-muted: #9ca3af;                     
  --text-subtle: #d1d5db;                    
  --text-heading: #0f172a;                   
  --light-heading: #0f172a;                  
  --light-text: #1b1b1d;                     
  --light-text-secondary: #4b5563;           
  --light-text-muted: #6b7280;               
  --text-white: #ffffff;                     
  --text-gray-100: #1b1b1d;                  
  --text-gray-300: #4b5563;                  
  --text-gray-400: #6b7280;                  
  --text-gray-500: #9ca3af;                  
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-active: #4338ca;
  --color-secondary: #6b7280;
  --color-accent: #8b5cf6;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --light-accent: #6366f1;
  --light-accent-hover: #4f46e5;
  --light-accent-bg: rgba(99, 102, 241, 0.08); 
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
  --light-success: #10b981;                  
  --light-warning: #f59e0b;                  
  --light-danger: #ef4444;                   
  --light-teal: #14b8a6;                     
  --light-teal-bg: rgba(20, 184, 166, 0.08); 
  --light-purple: #8b5cf6;                   
  --light-purple-bg: rgba(139, 92, 246, 0.08); 
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --border-primary: #e5e7eb;                 
  --border-secondary: #f3f4f6;               
  --border-subtle: #f9fafb;                  
  --border-gray-600: #e5e7eb;                
  --surface-primary: #ffffff;                
  --surface-secondary: #f8f9fa;              
  --surface-elevated: #ffffff;               
  --surface-overlay: rgba(0, 0, 0, 0.4);     
  --light-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --light-shadow-colored: 0 4px 6px rgba(59, 130, 246, 0.1);
  --light-input-bg: #ffffff;                 
  --light-input-border: #e5e7eb;             
  --light-input-focus: #3b82f6;              
}
:root.light-theme .sidebar-search-form,
:root.light-theme .stream-search-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
:root.light-theme .stream-search-container {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border: 1px solid #dbe4f3;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 14px 28px rgba(148, 163, 184, 0.16);
}
:root.light-theme .stream-search-container:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
}
:root.light-theme .stream-search-box {
  background: transparent;
  border: none;
  box-shadow: none;
  height: auto;
  padding: 0;
}
:root.light-theme .stream-search-box .search-text-input {
  color: #0f172a;
}
:root.light-theme .stream-search-box .search-text-input::placeholder {
  color: #9ca3af; 
}
:root.light-theme .stream-search-box .search-clear-btn,
:root.light-theme .stream-search-box .search-dropdown-arrow {
  color: #6b7280;
}
:root.light-theme .content-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: none;
}
:root.light-theme .content-bar .chip-separator {
  background: rgba(148, 163, 184, 0.4);
}
:root.light-theme .stream-search-box:focus-within {
  border-color: inherit;
  box-shadow: none;
}
:root.light-theme .header-gradient {
  background: var(--light-header-bg);
  border-bottom: 1px solid var(--light-border);
  box-shadow: var(--shadow-sm);
}
:root.light-theme .header-search-box {
  background: var(--light-input-bg);
  border: 1px solid var(--light-input-border);
}
:root.light-theme .header-search-box:focus-within {
  background: var(--light-input-bg);
  border-color: var(--light-input-focus);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
:root.light-theme .header-search-text-input {
  color: var(--light-text);
}
:root.light-theme .header-search-text-input::placeholder {
  color: var(--light-text-muted);
}
:root.light-theme .header-search-icon i {
  color: var(--light-text-muted) !important;
}
:root.light-theme .header-search-clear-btn i {
  color: var(--light-text-muted) !important;
}
:root.light-theme .header-search-clear-btn:hover {
  background: var(--light-hover);
}
:root.light-theme .user-welcome {
  color: var(--light-text-muted);
}
:root.light-theme .nav-link {
  color: var(--light-text);
}
:root.light-theme .nav-link:hover {
  color: var(--light-heading);
  background: var(--light-hover);
}
:root.light-theme .theme-toggle-btn {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}
:root.light-theme .theme-toggle-btn:hover {
  background: #e5e7eb !important;
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}
:root.light-theme .tag-dropdown {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}
:root.light-theme .tag-dropdown .dropdown-section-header {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}
:root.light-theme .tag-dropdown-item {
  color: #1f2937;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}
:root.light-theme .tag-dropdown-item:hover {
  background: #f1f5f9;
}
:root.light-theme .inbox-feed,
:root.light-theme .viewer-column {
  background: var(--light-bg) !important; 
  border: none !important;
  box-shadow: none !important;
}
:root.light-theme .content-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light-theme .content-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border-color: #d1d5db;
}
:root.light-theme .content-meta {
  color: #6b7280; 
}
:root.light-theme .content-summary {
  color: #4b5563; 
}
:root.light-theme .content-save-btn {
  border-color: rgba(37, 99, 235, 0.35);
  background: #2563eb; 
  color: #ffffff !important;
  font-weight: 500 !important; 
}
:root.light-theme .content-save-btn:hover {
  border-color: rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.95);
  color: #ffffff !important;
}
:root.light-theme .content-save-btn span,
:root.light-theme .content-save-btn i {
  color: #ffffff !important;
}
:root.light-theme .content-save-btn:hover span,
:root.light-theme .content-save-btn:hover i {
  color: #ffffff !important;
}
:root.light-theme .content-save-btn.saved {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}
:root.light-theme .content-save-btn.saved:hover {
  border-color: rgba(217, 119, 6, 0.65);
  background: rgba(245, 158, 11, 0.26);
  color: #b45309;
}
:root.light-theme .set-alert-btn {
  border-color: rgba(109, 40, 217, 0.35);
  background: #6d28d9; 
  color: #ffffff; 
  font-weight: 500 !important; 
}
:root.light-theme .set-alert-btn:hover {
  border-color: rgba(91, 33, 182, 0.55);
  background: #5b21b6; 
  color: #ffffff;
}
:root.light-theme .share-modal-btn {
  border-color: rgba(13, 148, 136, 0.35);
  background: #0d9488; 
  color: #ffffff;
  font-weight: 500 !important;
}
:root.light-theme .share-modal-btn:hover {
  border-color: rgba(15, 118, 110, 0.55);
  background: #0f766e; 
  color: #ffffff;
}
:root.light-theme .share-modal-btn span,
:root.light-theme .share-modal-btn i {
  color: #ffffff !important;
}
:root.light-theme .share-modal-btn:hover span,
:root.light-theme .share-modal-btn:hover i {
  color: #ffffff !important;
}
:root.light-theme .viewer-toolbar {
  border-bottom: 1px solid #e2e8f0;
}
:root.light-theme .inbox-content {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
}
:root.light-theme .stream-pane.active {
  background: transparent;
}
:root.light-theme #right-panel {
  background: var(--light-card-bg);
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow-md);
}
#right-panel {
  height: 100% !important;
  align-self: stretch !important;
}
:root.light-theme .viewer-detail,
:root.light-theme #article-detail {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
:root.light-theme .viewer-column .right-pane,
:root.light-theme .viewer-detail .detail-metadata,
:root.light-theme #article-detail .detail-metadata {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.03) !important;
}
:root.light-theme #article-detail .detail-header,
:root.light-theme #article-detail .detail-body {
  background: transparent !important;
  color: #1b1b1d !important;
}
:root.light-theme #article-detail .detail-content,
:root.light-theme #article-detail > div {
  background: #ffffff !important;
}
:root.light-theme #article-detail * {
  color: #1b1b1d !important;
}
:root.light-theme #article-detail .content-save-btn,
:root.light-theme #article-detail .content-save-btn * {
  color: #ffffff !important;
}
:root.light-theme .viewer-body {
  background: #ffffff !important;
}
:root.light-theme body {
  background: #f5f5f5 !important;
  color: #1b1b1d !important;
}
:root.light-theme .articles-column,
:root.light-theme #inbox-page,
:root.light-theme .inbox-layout,
:root.light-theme .inbox-content,
:root.light-theme .inbox-columns,
:root.light-theme .stream-pane,
:root.light-theme #stream-content,
:root.light-theme #clusterize-content,
:root.light-theme .mobile-menu-nav,
:root.light-theme #info-panel {
  background: transparent !important;
  color: #1b1b1d !important;
}
:root.light-theme .metric-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.7rem !important;
}
:root.light-theme .metric-label {
  color: #6c757d !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
:root.light-theme .metric-value {
  color: #212529 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}
:root.light-theme .trend-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.7rem !important;
}
:root.light-theme .trend-title {
  color: #212529 !important;
  font-weight: 600 !important;
}
:root.light-theme .trend-title i {
  color: #6c757d !important;
}
:root.light-theme .trend-kpi {
  color: #212529 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}
:root.light-theme .share-btn {
  color: #6c757d !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}
:root.light-theme .share-btn:hover {
  background: #e7f3ff !important;
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  transform: translateY(-1px) !important;
}
:root.light-theme .login-page-wrapper {
  background: #f8f9fa !important;
}
:root.light-theme .login-page-title {
  color: #212529 !important;
}
:root.light-theme .login-form-container {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
:root.light-theme .login-form-container label {
  color: #495057 !important;
  font-weight: 600 !important;
}
:root.light-theme .login-form-container input[type="email"],
:root.light-theme .login-form-container input[type="password"],
:root.light-theme .login-form-container input[type="text"] {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important; 
  color: #1b1b1d !important; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
}
:root.light-theme .login-form-container input:focus {
  border-color: #3b82f6 !important; 
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; 
}
:root.light-theme .signup-container {
  background: #f8f9fa !important;
}
:root.light-theme .signup-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
:root.light-theme .signup-content {
  background: #ffffff !important;
}
:root.light-theme .signup-content label {
  color: #495057 !important;
  font-weight: 600 !important;
}
:root.light-theme .signup-content input[type="email"],
:root.light-theme .signup-content input[type="password"],
:root.light-theme .signup-content input[type="text"] {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important; 
  color: #1b1b1d !important; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
}
:root.light-theme .signup-content input:focus {
  border-color: #3b82f6 !important; 
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; 
}
:root.light-theme .premium-benefits {
  background: #f0f7ff !important;
  border: 2px solid #bfdbfe !important;
}
:root.light-theme .premium-benefits h3 {
  color: #0f172a !important; 
}
:root.light-theme .premium-benefits li {
  color: #1b1b1d !important; 
}
:root.light-theme .premium-benefits i {
  color: #0d6efd !important;
}
:root.light-theme .modal-content {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}
:root.light-theme #alerts-modal {
  background: rgba(0, 0, 0, 0.3) !important; 
}
:root.light-theme #alerts-modal .modal-content,
:root.light-theme #alerts-modal > div {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
:root.light-theme #alerts-modal .modal-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e5e7eb !important;
}
:root.light-theme #alerts-modal .modal-body {
  background-color: #ffffff !important;
}
:root.light-theme #delete-alert-modal {
  background: rgba(0, 0, 0, 0.3) !important; 
}
:root.light-theme #delete-alert-modal .delete-alert-box,
:root.light-theme .delete-alert-box {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
:root.light-theme #alerts-modal *,
:root.light-theme #delete-alert-modal * {
  color: #1b1b1d !important;
}
:root.light-theme #alerts-modal strong,
:root.light-theme #delete-alert-modal strong,
:root.light-theme #alerts-modal h3,
:root.light-theme #delete-alert-modal h3 {
  color: #0f172a !important;
}
:root.light-theme #alerts-modal p,
:root.light-theme #alerts-modal span:not(.fas):not([class*="text-"]),
:root.light-theme #delete-alert-modal span:not(.fas):not([class*="text-"]) {
  color: #4b5563 !important;
}
:root.light-theme #alerts-modal .toggle-alert-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
}
:root.light-theme #alerts-modal .toggle-alert-btn:hover {
  background: #2563eb !important;
}
:root.light-theme #alerts-modal .toggle-alert-btn i {
  color: #ffffff !important;
}
:root.light-theme #alerts-modal .delete-alert-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
}
:root.light-theme #alerts-modal .delete-alert-btn:hover {
  background: #2563eb !important;
}
:root.light-theme #alerts-modal .delete-alert-btn i {
  color: #ffffff !important;
}
:root.light-theme #alerts-modal .modal-close,
:root.light-theme #delete-alert-modal button {
  color: #6b7280 !important;
}
:root.light-theme #alerts-modal [id^="alert-item-"],
:root.light-theme #alerts-list > div {
  background-color: #ffffff !important;
  border: 1px solid #e9ecef !important;
}
:root.light-theme #alerts-modal [id^="alert-item-"]:hover {
  background-color: #f8f9fa !important;
}
:root.light-theme body,
:root.light-theme html {
  background: #fafafa !important;
  color: #1b1b1d !important;
}
:root.light-theme .modal-header {
  border-bottom: 1px solid #e5e7eb !important;
  background: #f8f9fa !important;
}
:root.light-theme .modal-title {
  color: #212529 !important;
}
:root.light-theme .modal-close {
  color: #6c757d !important;
  background: transparent !important;
  border: none !important;
}
:root.light-theme .modal-close:hover {
  color: #212529 !important;
  background: #e9ecef !important;
  border-radius: 6px !important;
}
:root.light-theme .modal-footer {
  border-top: 1px solid #e9ecef !important;
  background: #f8f9fa !important;
}
:root.light-theme .modal-btn.secondary {
  background: #ffffff !important;
  color: #495057 !important;
  border: 1px solid #dee2e6 !important;
}
:root.light-theme .modal-btn.secondary:hover {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
}
:root.light-theme .modal-btn.primary {
  background: #3b82f6 !important; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light-theme .modal-btn.primary:hover {
  background: #2563eb !important; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
:root.light-theme .email-dark-container {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
}
:root.light-theme .email-dark-header {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e9ecef !important;
}
:root.light-theme .email-dark-title {
  color: #212529 !important;
}
:root.light-theme .email-dark-subtitle {
  color: #6c757d !important;
}
:root.light-theme .email-dark-options {
  background: #ffffff !important;
}
:root.light-theme .email-option-row {
  border-bottom: 1px solid #e9ecef !important;
}
:root.light-theme .email-option-row:hover {
  background: #f8f9fa !important;
}
:root.light-theme .email-option-name {
  color: #212529 !important;
}
:root.light-theme .email-option-desc {
  color: #6c757d !important;
}
:root.light-theme .email-slider {
  background-color: #dee2e6 !important;
  border: 1px solid #adb5bd !important;
}
:root.light-theme .email-slider-input:checked + .email-slider {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
:root.light-theme .modal,
:root.light-theme .preference-modal {
  background: rgba(0, 0, 0, 0.4) !important;
}
:root.light-theme .success-message {
  background: #d1e7dd !important;
  color: #0f5132 !important;
  border: 1px solid #badbcc !important;
  border-left: 4px solid #0a3622 !important;
}
:root.light-theme .error-message {
  background: #f8d7da !important;
  color: #842029 !important;
  border: 1px solid #f5c2c7 !important;
  border-left: 4px solid #58151c !important;
}
:root.light-theme .loading-message {
  background: #cfe2ff !important;
  color: #084298 !important;
  border: 1px solid #b6d4fe !important;
  border-left: 4px solid #052c65 !important;
}
:root.light-theme .success-message[style*="display:none"],
:root.light-theme .success-message[style*="display: none"] {
  display: none !important;
}
:root.light-theme .quick-filter {
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  color: var(--light-text);
}
:root.light-theme .quick-filter:hover {
  background: var(--light-accent-bg);
  border-color: var(--light-accent);
  color: var(--light-accent);
}
:root.light-theme .premium-gate h3 {
  color: var(--light-heading) !important;
}
:root.light-theme .premium-gate p {
  color: var(--light-text) !important;
}
:root.light-theme .premium-gate p.text-xs {
  color: #6b7280 !important;
}
:root.light-theme .bg-theme-filter {
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
:root.light-theme .category-search-btn,
:root.light-theme .filter-link {
  background: #eef2f7;
  border: 1px solid #d1d5db;
  color: #1f2937;
  box-shadow: none;
}
:root.light-theme .category-search-btn:hover,
:root.light-theme .filter-link:hover {
  background: #e5f0ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
:root.light-theme .stream-search-advanced {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 26px rgba(148, 163, 184, 0.12);
}
:root.light-theme .stream-search-advanced-toggle {
  border: 1px solid #d1d5db;
  color: #1f2937;
  background: #ffffff;
}
:root.light-theme .stream-search-advanced-toggle[aria-expanded="true"] {
  background: #e5f0ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
:root.light-theme .stream-select,
:root.light-theme .jobs-stream-options {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #1f2937;
}
:root.light-theme .usage-counter {
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.16);
  color: #0f172a;
}
:root.light-theme .global-search-suggestions {
  background: transparent;
  border: none;
  box-shadow: none;
}
:root.light-theme .search-pill {
  background: #2563eb;
  color: #ffffff;
}
:root.light-theme .search-display {
  background: transparent;
}
:root.light-theme .stream-search-box .search-icon,
:root.light-theme .stream-search-icon {
  color: #2563eb;
}
:root.light-theme .stream-control-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(148, 163, 184, 0.12);
}
:root.light-theme .stream-control-input::placeholder {
  color: #9ca3af; 
}
:root.light-theme .stream-header-controls .stream-select {
  background: var(--light-input-bg);
  border: 2px solid var(--light-input-border);
  color: var(--light-text);
  box-shadow: var(--shadow-sm);
}
:root.light-theme .stream-chip.secondary {
  background: var(--light-accent-bg);
  color: var(--light-accent);
  border: 1px solid var(--light-accent-border);
  font-weight: 600;
}
:root.light-theme .stream-chip.secondary:hover {
  background: var(--light-accent);
  color: #ffffff;
  border-color: var(--light-accent);
  transform: translateY(-1px);
}
:root.light-theme #clusterize-scroll,
:root.light-theme #clusterize-scroll-popular,
:root.light-theme #clusterize-scroll-sources,
:root.light-theme #user-tags-container,
:root.light-theme #jobs-stream-list,
:root.light-theme #breach-watch-list,
:root.light-theme #tutorials-list,
:root.light-theme #cve-list {
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  box-shadow: none;
}
:root.light-theme #clusterize-content,
:root.light-theme #clusterize-scroll .clusterize-content {
  background: transparent;
}
:root.light-theme .inbox-sidebar,
:root.light-theme aside#left-sidebar.inbox-sidebar.container-dark {
  background: var(--light-sidebar-bg) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid var(--light-border) !important;
  box-shadow: none !important;
}
:root.light-theme .article-card {
  background: var(--light-card-bg) !important;
  border: 1px solid var(--light-border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-left-color: var(--light-accent) !important; 
  transition: all 0.2s ease !important;
}
:root.light-theme .article-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  border-left-color: var(--light-accent-hover) !important;
  background: var(--light-card-bg) !important;
}
:root.light-theme .article-title {
  color: var(--light-heading) !important;
  font-weight: 700 !important;
}
:root.light-theme .article-meta,
:root.light-theme .article-content p {
  color: var(--light-text) !important;
}
:root.light-theme .mobile-menu-overlay {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
:root.light-theme .mobile-menu {
  background-color: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1) !important;
}
:root.light-theme .mobile-menu-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e9ecef !important;
}
:root.light-theme .mobile-menu-title {
  color: #1b1b1d !important;
}
:root.light-theme .mobile-menu-item {
  color: #1b1b1d !important;
}
:root.light-theme .mobile-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
:root.light-theme .mobile-menu-item i {
  color: #6b7280 !important;
}
:root.light-theme .mobile-menu-close {
  color: #6b7280 !important;
}
:root.light-theme .mobile-menu-close:hover {
  color: #1b1b1d !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}
:root.light-theme .mobile-menu-user {
  color: #1b1b1d !important;
  border-top: 1px solid #e9ecef !important;
}
:root.light-theme .mobile-menu-welcome {
  color: #6b7280 !important;
}
:root.light-theme .mobile-premium-badge {
  background-color: rgba(139, 92, 246, 0.1) !important;
  color: #7c3aed !important;
}
:root.light-theme #mobile-inbox-detail {
  background-color: #ffffff !important;
}
:root.light-theme .mobile-detail-header,
:root.light-theme .mobile-inbox-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e9ecef !important;
}
:root.light-theme .mobile-back-btn {
  color: #3b82f6 !important;
  background: none !important;
}
:root.light-theme .mobile-back-btn i {
  color: #3b82f6 !important;
}
:root.light-theme .mobile-back-btn:hover {
  background: #e0f2fe !important;
  color: #1e40af !important;
}
:root.light-theme .mobile-back-btn:hover i {
  color: #1e40af !important;
}
:root.light-theme .tag-pill {
  background: #e5e7eb !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important; 
}
:root.light-theme .tag-pill:hover {
  background: #d1d5db !important;
  color: #111827 !important;
}
:root.light-theme .tag-pill.more-tags {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}
:root.light-theme .tag-pill-interactive {
  background: #e5e7eb !important;
  color: #1f2937 !important;
}
:root.light-theme .tag-pill-interactive:hover {
  background: #d1d5db !important;
}
:root.light-theme .hamburger-btn {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
}
:root.light-theme .hamburger-btn:hover {
  background: #f9fafb !important;
}
:root.light-theme .search-clear-btn,
:root.light-theme button.search-clear-btn,
:root.light-theme .search-clear-btn i,
:root.light-theme button.search-clear-btn i {
  color: #ffffff !important;
}
:root.light-theme .logo-link {
  color: #3b82f6 !important;
}
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
}
*, *::before, *::after {
  overscroll-behavior: none;
}
html, body {
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg-space);
  color: var(--text-gray-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
.home-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
  }
  .home-shell {
    overflow: visible !important;
    min-height: 100vh !important;
    height: auto !important;
  }
}
.home-shell header {
  flex: 0 0 auto;
}
#inbox-page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1.5rem;
  min-height: 0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#inbox-page .usage-counter {
  flex-shrink: 0;
}
.search-sidebar {
  margin-bottom: 1.5rem;
}
.sidebar-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.sidebar-search-form .search-container {
  flex: 1 1 auto;
}
.sidebar-search-form .search-box {
  width: 100%;
}
.sidebar-search-form .search-text-input {
  width: 100%;
}
.sidebar-search-form .btn {
  align-self: flex-start;
}
.bg-space-950 { background-color: var(--bg-space); }
.bg-gray-900 { background-color: var(--bg-gray-900); }
.bg-gray-800 { background-color: var(--bg-gray-800); }
.bg-gray-700 { background-color: var(--bg-gray-700); }
.bg-white { background-color: #ffffff; }
.text-white { color: var(--text-white); }
.text-gray-100 { color: var(--text-gray-100); }
.text-gray-300 { color: var(--text-gray-300); }
.text-gray-400 { color: var(--text-gray-400); }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #1f2937; }
.text-red-600 { color: #dc2626; }
.text-blue-500 { color: var(--blue-500); }
.text-blue-600 { color: var(--blue-600); }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-100 { background-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-t { border-top-width: 1px; }
.pt-4 { padding-top: 1rem; }
.leading-relaxed { line-height: 1.625; }
.hover\\:underline:hover { text-decoration: underline; }
.prose { max-width: none; }
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }
#inbox-page {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.border { border-width: 1px; }
.border-gray-600 { border-color: var(--border-gray-600); }
.border-gray-200 { border-color: #e5e7eb; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 1rem; padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.p-3 { padding: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mt-4 { margin-top: 0 !important; }
.mt-6 { margin-top: 1.5rem; }
.mt-16 { margin-top: 1rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.transition-all { transition: all 0.3s ease; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
@media (min-width: 768px) {
  .md\\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\\:col-span-2 { grid-column: span 2 / span 2; }
  .md\\:col-span-5 { grid-column: span 5 / span 5; }
  .md\\:block { display: block; }
}
#stream-content {
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  min-height: 0;
  min-width: 0; /* Prevent grid blowout */
  height: 100%;
}
#stream-content .stream-pane {
  flex: 1 1 auto;
  display: none;
  flex-direction: column;
  min-height: 0;
  min-width: 0; /* Prevent grid blowout */
  height: 100%;
}
#stream-content .stream-pane.active {
  display: flex;
}
.stream-pane .clusterize-scroll,
.stream-pane .stream-list,
.stream-pane .clusterize-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0; /* Prevent grid blowout */
  overflow-x: hidden; /* Prevent horizontal overflow */
}
#clusterize-scroll,
#clusterize-scroll-popular,
#clusterize-scroll-sources,
#user-tags-container,
#jobs-stream-list,
#breach-watch-list,
#tutorials-list,
#cve-list {
  overflow-y: auto;
  background: rgba(17, 25, 40, 0.65);
  border-radius: 14px;
  border: 1px solid rgba(94, 106, 135, 0.3);
  padding: 0.25rem 0.35rem 0.75rem;
}
.inbox-layout {
  display: grid;
  grid-template-columns: 325px 1fr; 
  gap: var(--space-sm); 
  align-items: stretch;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.inbox-sidebar,
aside#left-sidebar.inbox-sidebar.container-dark {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700)) !important;
  border-radius: 0 !important;
  padding: var(--space-md); 
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
  align-self: stretch;
}
.inbox-main {
  border: 1px solid rgba(94, 106, 135, 0.35);
  background: rgba(10, 16, 29, 0.92);
  border-radius: 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0; /* Prevent grid blowout */
  overflow: hidden; /* Constrain content */
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.42);
}
.inbox-content {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.85));
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; 
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.45);
}
.inbox-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  padding-bottom: 0.5rem;
}
.inbox-columns > * {
  min-height: 0;
  min-width: 0; /* Prevent grid blowout - critical for flex/grid children */
  height: 100% !important;
  align-self: stretch !important;
}
@media (min-width: 769px) {
  .inbox-columns > .inbox-main,
  .inbox-columns > .viewer-column,
  .inbox-columns > #right-panel {
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }
}
.inbox-columns > .inbox-main {
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
.inbox-feed {
  background: transparent;
  padding: 0.75rem 1.5rem 0.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0; /* Prevent grid blowout */
  height: 100%;
  align-self: stretch;
}
.viewer-column {
  position: relative;
  height: 100% !important;
  overflow-y: auto;
  border-radius: 0;
  background: rgba(10, 16, 29, 0.3);
  border: none;
  padding: 1.5rem 1.5rem 20px 1.5rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  backdrop-filter: none;
  margin-bottom: 0;
  min-height: 0;
  align-self: stretch !important;
}
.viewer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(94, 106, 135, 0.35);
}
.viewer-detail {
  border: 1px solid rgba(94, 106, 135, 0.35);
  border-radius: 16px;
  padding: 1.35rem;
  background: linear-gradient(135deg, rgba(21, 32, 55, 0.95), rgba(12, 19, 34, 0.95));
  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.35);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.viewer-detail h1 {
  margin: 0;
}
.viewer-actions .btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}
.viewer-column .right-pane {
  border: 1px solid rgba(94, 106, 135, 0.25);
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(17, 24, 39, 0.6);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}
#right-pane-jobs #jobs-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}
#right-pane-jobs #jobs-filters {
  flex-shrink: 0;
}

/* Jobs filter button styles */
#jobs-filters .jobs-filter {
  background: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-300);
  transition: all 0.15s ease;
}
#jobs-filters .jobs-filter:hover {
  background: var(--bg-gray-600);
  border-color: var(--border-gray-500);
  color: var(--text-gray-100);
}
#jobs-filters .jobs-filter.active {
  background: rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
  color: #58a6ff;
  font-weight: 500;
}
#jobs-filters .filter-divider {
  color: var(--border-gray-600);
  font-size: 0.75rem;
  user-select: none;
}

/* Light theme overrides */
:root.light-theme #jobs-filters .jobs-filter {
  background: var(--bg-gray-100);
  border-color: var(--border-gray-300);
  color: var(--text-gray-600);
}
:root.light-theme #jobs-filters .jobs-filter:hover {
  background: var(--bg-gray-200);
  border-color: var(--border-gray-400);
  color: var(--text-gray-800);
}
:root.light-theme #jobs-filters .jobs-filter.active {
  background: rgba(37, 99, 235, 0.1);
  border-color: #2563eb;
  color: #2563eb;
}
:root.light-theme #jobs-filters .filter-divider {
  color: var(--border-gray-400);
}
.right-pane #related-list,
.right-pane .right-pane-scroll,
.right-pane .space-y-2,
.right-pane #saved-articles-container,
.right-pane #myjobs-container,
.right-pane div[id*="-container"]:not(#jobs-filters) {
  margin: 0;
}
.viewer-column .card-header {
  border-bottom: 1px solid var(--border-gray-700);
  padding-bottom: 0.75rem;
}
.right-pane .card-header {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.right-pane .space-y-2,
.right-pane #recently-viewed-list,
.right-pane #jobs-list,
.right-pane #related-list,
.right-pane #saved-articles-container,
.right-pane #myjobs-container {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
#article-detail {
  padding: 1rem !important;
}

#article-detail.detail-hidden {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .inbox-layout {
    grid-template-columns: 1fr;
  }
  .inbox-sidebar {
    display: none;
  }
  .inbox-content {
    padding: 0;
    min-height: auto;
  }
  .inbox-columns {
    grid-template-columns: 1fr;
  }
  .inbox-feed {
    padding: 1.5rem;
  }
  .viewer-column {
    position: relative;
    top: auto;
    max-height: none;
    padding: 1.25rem;
    margin-top: 0.75rem;
  }
  .stream-search-form {
    flex-wrap: wrap;
  }
  .stream-search-form .search-container {
    flex: 1 1 100%;
  }
  .search-sidebar {
    display: none;
  }
  .stream-search-host {
    flex: 1 1 100%;
    justify-content: stretch;
  }
}
@media (max-width: 768px) {
  .content-save-btn {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
  }
  .set-alert-btn {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
  }
  .mobile-menu-close {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 10px !important;
  }
  .header-search-text-input {
    min-height: 40px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; 
  }
  .theme-toggle-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 40px !important;
    border-radius: 8px;
    background: rgba(88, 166, 255, 0.1);
  }
  .inbox-columns {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .inbox-sidebar,
  .viewer-column,
  #right-panel {
    display: none !important;
  }
  .inbox-feed {
    display: block !important;
    grid-column: 1 / -1 !important;
  }
  .metric-cards {
    grid-template-columns: 1fr;
  }
  .global-search-suggestions {
    grid-template-columns: 1fr;
  }
  .inbox-content {
    padding: 0;
  }
  .inbox-layout {
    height: auto;
    min-height: auto;
  }
  .inbox-columns {
    height: auto;
  }
  .inbox-feed {
    padding: 1.5rem;
    overflow: visible !important;
  }
  .viewer-column {
    padding: 1.2rem;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.3);
    backdrop-filter: none;
  }
  .viewer-detail {
    padding: 1.25rem;
  }
  #right-panel {
    display: none;
  }
  #right-panel.active-mobile {
    display: block;
    position: fixed;
    top: var(--mobile-sticky-offset, 0);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - var(--mobile-sticky-offset, 0));
    z-index: 40;
    background: var(--bg-gray-900);
    overflow-y: auto;
    padding: 1.2rem;
  }
  .viewer-close-btn {
    display: inline-flex !important;
  }
}
.sidebar-section {
  margin-bottom: 1rem;
}
.sidebar-section:last-child {
  margin-bottom: 0;
}
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.sidebar-section-header h2 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0;
}
.link-btn {
  background: none;
  border: none;
  color: var(--blue-300);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}
.metric-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}
.metric-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-gray-500);
}
.metric-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.metric-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}
.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.metric-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.metric-pill {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.9);
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}
.metric-card--sources .metric-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.metric-card--sources .metric-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.64rem;
  color: var(--text-gray-200);
  padding: 0.18rem 0.4rem;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.metric-list-row strong {
  color: var(--text-primary);
  font-weight: 600;
}
.stat-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  transition: all 0.3s ease;
}
.stat-card--secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: column;
  align-items: stretch;
}
:root.light-theme .stat-card--secondary {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
}
.stat-card-header {
  margin-bottom: 0.75rem;
}
.stat-card:hover {
  border-color: rgba(88, 166, 255, 0.5);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}
.platform-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.platform-stat-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  transition: all 0.2s ease;
}
:root.light-theme .platform-stat-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:root.light-theme .platform-stat-item:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}
.platform-stat-item:hover {
  border-color: rgba(88, 166, 255, 0.4);
  background: rgba(59, 130, 246, 0.08);
}
.platform-stat-wide {
  grid-column: span 2;
}
.platform-stat-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.platform-stat-icon.cyber-icon,
.stat-category-icon.cyber-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: none;
  color: #34d14f;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.platform-stat-icon.cyber-icon i,
.stat-category-icon.cyber-icon i {
  line-height: 1;
}
.stat-category-icon.cyber-icon {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  box-shadow: 0 6px 12px rgba(8, 47, 73, 0.3);
}
:root.light-theme .platform-stat-icon.cyber-icon,
:root.light-theme .stat-category-icon.cyber-icon {
  background: rgba(236, 242, 247, 0.95);
  border-color: rgba(148, 163, 184, 0.38);
  box-shadow: none;
  color: #0fb04c;
}
.cyber-icon--sources,
.cyber-icon--articles,
.cyber-icon--updated,
.cyber-icon--latest,
.cyber-icon--cve,
.cyber-icon--breach,
.cyber-icon--education,
.cyber-icon--jobs,
.cyber-icon--tags {
  color: #34d14f;
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(56, 189, 248, 0.15);
}
:root.light-theme .cyber-icon--sources,
:root.light-theme .cyber-icon--articles,
:root.light-theme .cyber-icon--updated,
:root.light-theme .cyber-icon--latest,
:root.light-theme .cyber-icon--cve,
:root.light-theme .cyber-icon--breach,
:root.light-theme .cyber-icon--education,
:root.light-theme .cyber-icon--jobs,
:root.light-theme .cyber-icon--tags {
  color: #0fb04c;
  background: rgba(236, 242, 247, 0.95);
  border-color: rgba(148, 163, 184, 0.38);
}
.platform-stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.platform-stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.platform-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.stat-card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-categories {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem;
}
.stat-category-header {
  padding: 0.5rem 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}
.stat-category-header span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-category-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.stat-category-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.stat-category-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
}
.stat-category-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex: 1;
  gap: 0.5rem;
}
.stat-category-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.stat-category-count {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 3rem;
  text-align: right;
}
:root.light-theme .stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light-theme .stat-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
}
:root.light-theme .stat-card-label {
  color: #6b7280;
}
:root.light-theme .stat-card-value {
  color: #3b82f6;
  font-weight: 600;
}
:root.light-theme .stat-categories {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
:root.light-theme .stat-category-header {
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
:root.light-theme .stat-category-header span {
  color: #6b7280;
}
:root.light-theme .stat-category-item:hover {
  background: #f9fafb;
}
:root.light-theme .stat-category-label {
  color: #4b5563;
}
:root.light-theme .stat-category-count {
  color: #3b82f6;
  font-weight: 600;
}
.trend-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.24);
}
.trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.trend-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.trend-title i {
  color: var(--blue-400);
}
.trend-kpi {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-gray-300);
}
.trend-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  align-items: stretch;
}
.trend-chart {
  flex: 1 1 150px;
  min-width: 150px;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
}
.trend-meta {
  flex: 1 1 135px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 135px;
}
.trend-summary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.trend-summary-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-gray-500);
}
.trend-summary-simple {
  display: grid;
  gap: 0.12rem;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
}
.trend-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.16rem 0.26rem;
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.32);
  border: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.58rem;
  color: var(--text-gray-200);
}
.trend-summary-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-gray-500);
}
.trend-summary-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.82rem;
}
.trend-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}
.trend-summary-chip {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(191, 219, 254, 0.9);
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 999px;
  padding: 0.16rem 0.34rem;
  white-space: nowrap;
}
.trend-summary-chip[data-tone='primary'] {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.35);
}
.trend-summary-chip[data-tone='success'] {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.35);
}
.trend-summary-chip[data-tone='neutral'] {
  color: #cbd5f5;
  background: rgba(129, 140, 248, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.quick-filter-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.quick-filter {
  border: 1px solid var(--border-gray-700);
  background: transparent;
  color: var(--text-gray-300);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.quick-filter.active {
  background: var(--blue-500);
  border-color: var(--blue-400);
  color: white;
}
.my-space-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-gray-700);
  background: var(--bg-gray-850);
  color: var(--text-gray-200);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
}
.my-space-btn:hover {
  background: var(--bg-gray-800);
  border-color: var(--border-gray-500);
}
.drawer-open {
  overflow: hidden;
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.viewer-close-btn {
  display: none;
  border: none;
  background: rgba(94, 106, 135, 0.2);
  color: var(--text-gray-300);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.viewer-close-btn i {
  font-size: 0.75rem;
}
.viewer-close-btn:hover {
  background: rgba(94, 106, 135, 0.35);
  color: var(--text-white);
}
@media (max-width: 768px) {
  .my-space-drawer {
    width: min(100%, 420px);
  }
}
.gap-6 { gap: 1.5rem; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.hidden { display: none; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.opacity-50 { opacity: 0.5; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.max-h-96 { max-height: 24rem; }
.overflow-y-auto { overflow-y: auto; }
.rounded-full { border-radius: 9999px; }
.w-64 { width: 16rem; }
.h-24 { height: 6rem; }
.rounded-md { border-radius: 0.375rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.article-card {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.article-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.article-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  align-items: center;
}
.metadata-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-gray-700);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.metadata-item i {
  font-size: 10px;
  opacity: 0.8;
}
.cve-metadata .metadata-item {
  background: var(--bg-gray-700);
}
.severity-critical {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}
.severity-high {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}
.severity-medium {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}
.severity-low {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}
.severity-unknown {
  background: rgba(107, 114, 128, 0.15) !important;
  border-color: rgba(107, 114, 128, 0.3) !important;
  color: #d1d5db !important;
}
.cvss-critical {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  font-weight: 600;
}
.cvss-high {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
  font-weight: 600;
}
.cvss-medium {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
.cvss-low {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}
.job-metadata .metadata-item {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}
.job-metadata .company {
  background: rgba(88, 166, 255, 0.15) !important;
  border-color: rgba(88, 166, 255, 0.3) !important;
  color: #93c5fd !important;
}
.job-metadata .location {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: #c4b5fd !important;
}
.job-metadata .salary {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
  font-weight: 600;
}
.job-metadata .experience {
  background: rgba(251, 146, 60, 0.15) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
  color: #fdba74 !important;
}
.breach-metadata .metadata-item {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.breach-metadata .records-affected {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  font-weight: 600;
}
.breach-metadata .industry {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: #c4b5fd !important;
}
.breach-metadata .breach-type {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}
.tutorial-metadata .metadata-item {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}
.level-beginner {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}
.level-intermediate {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}
.level-advanced {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}
.level-unknown {
  background: rgba(107, 114, 128, 0.15) !important;
  border-color: rgba(107, 114, 128, 0.3) !important;
  color: #d1d5db !important;
}
.tutorial-metadata .duration {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #6ee7b7 !important;
}
.tutorial-metadata .hands-on {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #d8b4fe !important;
}
.tutorial-metadata .certification {
  background: rgba(251, 146, 60, 0.15) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
  color: #fdba74 !important;
  font-weight: 600;
}
:root.light-theme .article-metadata .metadata-item {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}
:root.light-theme .severity-critical {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}
:root.light-theme .severity-high {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #d97706 !important;
}
:root.light-theme .severity-medium {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #059669 !important;
}
:root.light-theme .severity-low {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #2563eb !important;
}
:root.light-theme .job-metadata .salary {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #059669 !important;
}
:root.light-theme .breach-metadata .records-affected {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}
:root.light-theme .tutorial-metadata .certification {
  background: rgba(251, 146, 60, 0.1) !important;
  border-color: rgba(251, 146, 60, 0.2) !important;
  color: #ea580c !important;
}
@media (max-width: 640px) {
  .article-metadata {
    gap: var(--space-xs);
    margin: var(--space-sm) 0;
  }
  .metadata-item {
    padding: 2px var(--space-xs);
    font-size: 10px;
    gap: 2px;
  }
  .metadata-item i {
    font-size: 8px;
  }
}
.advanced-filters-toggle {
  background: var(--bg-gray-700);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: var(--space-sm);
}
.advanced-filters-toggle:hover {
  background: var(--bg-gray-600);
  color: var(--text-primary);
}
.advanced-filters-container {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-gray-800);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.metadata-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.metadata-filter-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.severity-chips-container {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.severity-chip {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-gray-700);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}
.severity-chip:hover {
  background: var(--bg-gray-600);
}
.severity-chip.active {
  border-color: var(--color-primary);
  background: rgba(88, 166, 255, 0.2);
  color: var(--color-primary);
}
.severity-chip.severity-critical.active {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.severity-chip.severity-high.active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
.severity-chip.severity-medium.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.severity-chip.severity-low.active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
.cvss-input-container,
.salary-input-container {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.cvss-input,
.salary-input,
.metadata-text-input {
  background: var(--bg-gray-700);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  width: 80px;
}
.metadata-text-input {
  width: 100%;
  max-width: 200px;
}
.cvss-input:focus,
.salary-input:focus,
.metadata-text-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-gray-600);
}
.metadata-select-input {
  background: var(--bg-gray-700);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.metadata-select-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-gray-600);
}
.boolean-filter {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-sm) !important;
}
.metadata-checkbox-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}
.metadata-checkbox-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 0 !important;
}
.clear-metadata-filters {
  background: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
  margin-top: var(--space-sm);
}
.clear-metadata-filters:hover {
  background: #dc2626;
  transform: translateY(-1px);
}
:root.light-theme .advanced-filters-toggle {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
:root.light-theme .advanced-filters-toggle:hover {
  background: #e2e8f0;
  color: #1e293b;
}
:root.light-theme .advanced-filters-container {
  background: #ffffff;
  border-color: #e2e8f0;
}
:root.light-theme .metadata-filter-label {
  color: #64748b;
}
:root.light-theme .severity-chip {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
:root.light-theme .severity-chip:hover {
  background: #e2e8f0;
}
:root.light-theme .cvss-input,
:root.light-theme .salary-input,
:root.light-theme .metadata-text-input,
:root.light-theme .metadata-select-input {
  background: #ffffff;
  border-color: #e5e7eb; 
  color: #1b1b1d; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:root.light-theme .cvss-input:focus,
:root.light-theme .salary-input:focus,
:root.light-theme .metadata-text-input:focus,
:root.light-theme .metadata-select-input:focus {
  border-color: #3b82f6; 
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); 
}
:root.light-theme .metadata-checkbox-label {
  color: #475569;
}
@media (max-width: 640px) {
  .advanced-filters-container {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }
  .severity-chips-container {
    gap: 2px;
  }
  .severity-chip {
    padding: 2px var(--space-xs);
    font-size: 10px;
  }
  .cvss-input-container,
  .salary-input-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }
  .cvss-input,
  .salary-input {
    width: 100%;
  }
  .metadata-text-input,
  .metadata-select-input {
    font-size: 10px;
    padding: 2px var(--space-xs);
  }
  .metadata-filter-label {
    font-size: 10px;
  }
  .clear-metadata-filters {
    font-size: 10px;
    padding: 2px var(--space-xs);
  }
}
.container-dark {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.container-light {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  color: #374151;
}
.container-dark-reading {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  color: var(--text-gray-100);
}
.container-dark-reading a {
  color: var(--blue-500);
  text-decoration: none;
}
.container-dark-reading .job-title a {
  color: var(--text-white) !important;
}
.container-dark-reading a:hover {
  color: var(--blue-400);
  text-decoration: underline;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--bg-gray-700);
  color: var(--text-gray-300);
  border: 1px solid var(--border-gray-600);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.share-btn:hover {
  background-color: var(--blue-600);
  color: white;
  transform: translateY(-1px);
}
.share-btn:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
.share-btn i {
  font-size: 14px;
  color: inherit;
}
:root.light-theme .share-btn {
  background-color: var(--blue-600) !important;
  color: #ffffff !important;
  border: 1px solid var(--blue-600) !important;
}
:root.light-theme .share-btn:hover {
  background-color: var(--blue-600) !important;
  color: white !important;
  border-color: var(--blue-600) !important;
}
.nav-link {
  color: var(--text-gray-300);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent; 
  box-sizing: border-box; 
}
.nav-link:hover {
  color: var(--blue-500);
  background-color: rgba(88, 166, 255, 0.1);
}
.btn-primary {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 4px 12px rgba(9, 105, 218, 0.5);
}
.premium-gate {
  padding: 3rem 1rem !important; 
  text-align: center !important;
  max-width: 520px !important; 
  margin: 0 auto !important; 
}
.premium-gate .text-gray-400 {
  margin-bottom: 1.5rem !important; 
}
.premium-gate i {
  font-size: 1.875rem !important; 
  margin-bottom: 0.75rem !important;
}
.premium-gate h3 {
  font-size: 1.125rem !important; 
  font-weight: 600 !important;
  color: var(--text-white) !important;
  margin-bottom: 0.5rem !important;
}
.premium-gate p {
  margin: 0 !important;
  color: var(--text-gray-300) !important;
}
.premium-gate p.text-xs {
  font-size: 0.75rem !important;
  color: var(--text-gray-400) !important;
  margin-top: 0.25rem !important;
}
.premium-gate .btn {
  padding: 0.5rem 1rem 0.5rem 1rem !important;
  padding-left: 1rem !important; 
  font-size: 0.875rem !important; 
}
.theme-toggle-btn {
  background: none;
  border: 1px solid var(--border-gray-600);
  border-radius: 0.375rem;
  padding: 0.5rem;
  color: var(--text-gray-300);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.theme-toggle-btn:hover {
  color: var(--blue-500);
  border-color: var(--blue-500);
  background-color: rgba(88, 166, 255, 0.1);
}
.theme-toggle-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.theme-toggle-btn:active i {
  transform: scale(0.9);
}
.input-dark {
  background-color: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-100);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}
.input-dark:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
.header-gradient {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border-bottom: 1px solid var(--border-gray-600);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.header-stats-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 13px;
  transition: all 0.3s ease;
}
.header-stats-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.3);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.15);
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-icon {
  font-size: 16px;
  line-height: 1;
}
.stat-number {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.stat-divider {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}
@media (max-width: 768px) {
  .header-stats-badge {
    display: none;
  }
}
:root.light-theme .header-stats-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
:root.light-theme .header-stats-badge:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(88, 166, 255, 0.3);
}
:root.light-theme .stat-number {
  color: #0969da;
}
:root.light-theme .stat-label {
  color: rgba(0, 0, 0, 0.8);
}
:root.light-theme .stat-divider {
  color: rgba(0, 0, 0, 0.2);
}
.header-search-form,
.header-search-box,
.header-search-icon,
.header-search-text-input,
.header-search-clear-btn {
  display: none !important;
}
.header-gradient .w-96.mx-4 {
  display: none !important;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-welcome {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
}
.subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.premium-badge {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.free-badge {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}
.nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}
#inbox-page {
  margin-top: 0 !important;
  padding-top: 24px !important;
  border-top: none;
}
.header-gradient .w-full,
#inbox-page {
  padding-left: var(--space-md) !important; 
  padding-right: var(--space-md) !important;
}
.w-96 {
  width: 24rem; 
}
.bg-theme-body {
  background-color: var(--bg-space);
}
.bg-theme-filter {
  background-color: var(--bg-gray-800);
}
.border-theme {
  border-color: var(--border-gray-600);
}
.text-theme-primary {
  color: var(--text-gray-100);
}
.text-theme-secondary {
  color: var(--text-gray-400);
}
.bg-theme-card {
  background-color: var(--bg-gray-800);
}
.bg-theme-input {
  background-color: var(--bg-gray-700);
}
.border-theme-border {
  border-color: var(--border-gray-600);
}
:root.light-theme .bg-theme-filter {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
:root.light-theme .bg-theme-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
:root.light-theme .tab-btn {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-bottom: 3px solid transparent;
  margin-right: 2px;
  border-radius: 6px 6px 0 0;
}
:root.light-theme .tab-btn:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
:root.light-theme .tab-btn.active {
  background-color: #ffffff;
  border-color: #e2e8f0;
  border-bottom-color: #3b82f6;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}
:root.light-theme .bg-theme-input {
  background-color: #ffffff;
  border: 1px solid #e5e7eb; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:root.light-theme input[type="text"]:focus,
:root.light-theme input[type="email"]:focus,
:root.light-theme input[type="password"]:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
:root.light-theme .tab-content {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
:root.light-theme .btn-danger {
  background: #3b82f6 !important;
  color: white !important;
}
:root.light-theme .btn-danger:hover {
  background: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.profile-page {
  min-height: 100vh !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.profile-page > header {
  flex-shrink: 0;
}
.profile-page > div {
  flex: 1;
}
.profile-page > footer {
  flex-shrink: 0;
  margin-top: 0;
}
.logo-link {
  text-decoration: none;
}
.logo-text-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-text {
  font-size: 1.375rem; 
  line-height: 1.2;
  letter-spacing: -0.025em; 
}
.logo-all {
  font-weight: 300; 
  color: var(--text-gray-300);
  letter-spacing: 0.05em; 
}
.logo-security {
  font-weight: 700; 
  color: var(--blue-500);
  letter-spacing: 0.025em; 
}
.logo-news {
  font-weight: 600; 
  color: var(--text-white);
  letter-spacing: 0.05em; 
}
.logo-tagline {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-gray-400);
  letter-spacing: 0.01em;
  padding-left: 12px;
  border-left: 1px solid var(--border-gray-600);
}
:root.light-theme .logo-all {
  color: #111111 !important;
  font-weight: 400;
}
:root.light-theme .logo-security {
  color: #0d6efd !important;
  font-weight: 700;
}
:root.light-theme .logo-news {
  color: #212529 !important;
  font-weight: 600;
}
:root.light-theme .logo-tagline {
  color: #6c757d;
  border-left-color: #dee2e6;
}
.stat-card {  }
.d-flex { display: flex; }
.fs-6 {  }
.tag-pill {
  display: inline-block;
  background-color: #2563eb; 
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid transparent; 
  padding: 0.15rem 0.4rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 0.1rem;
}
.tag-pill:hover {
  background-color: #1d4ed8; 
}
.tag-pill-interactive {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  transform: scale(1);
}
.tag-pill-interactive:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.content-card {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box;
  overflow: hidden; /* Contain content */
}
.content-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 16px 32px rgba(7, 12, 21, 0.32);
}
.content-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.content-card-header-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.content-source-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.content-source-name a {
  color: inherit;
  text-decoration: none;
}
.content-source-name a:hover {
  text-decoration: underline;
}
.content-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--text-gray-300);
  font-size: 0.66rem;
}
.content-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.content-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.content-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.content-meta-row .content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-gray-400);
}
.content-meta-row .content-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.content-meta-row .content-meta span + span::before {
  content: '\2022';
  margin-right: 0.35rem;
  opacity: 0.45;
}
.content-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, 0.4);
  background: rgba(88, 166, 255, 0.22); 
  color: #ffffff; 
  font-size: 0.8rem;
  font-weight: 500;
  box-sizing: border-box; 
  transition: all 0.18s ease;
}
.content-save-btn i {
  font-size: 0.85rem;
}
.content-save-btn:hover {
  border-color: rgba(88, 166, 255, 0.65);
  background: rgba(88, 166, 255, 0.2);
  color: var(--text-white);
}
.content-save-btn.saved {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.18);
  color: #fde68a;
}
.content-save-btn.saved:hover {
  border-color: rgba(250, 204, 21, 0.65);
  background: rgba(250, 204, 21, 0.26);
  color: #fef3c7;
}
.article-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.set-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.20); 
  color: #ffffff; 
  font-size: 0.8rem;
  font-weight: 500;
  box-sizing: border-box; 
  transition: all 0.18s ease;
  cursor: pointer;
}
.set-alert-btn i {
  font-size: 0.85rem;
}
.set-alert-btn:hover {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(168, 85, 247, 0.2);
  color: var(--text-white);
}
.set-alert-btn:focus {
  outline: 2px solid rgba(168, 85, 247, 0.8);
  outline-offset: 2px;
}
.share-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, 0.4);
  background: rgba(20, 184, 166, 0.20);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  box-sizing: border-box;
  transition: all 0.18s ease;
  cursor: pointer;
}
.share-modal-btn i {
  font-size: 0.85rem;
}
.share-modal-btn:hover {
  border-color: rgba(20, 184, 166, 0.65);
  background: rgba(20, 184, 166, 0.25);
  color: var(--text-white);
}
.share-modal-btn:focus {
  outline: 2px solid rgba(20, 184, 166, 0.8);
  outline-offset: 2px;
}
.content-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-white);
}
.content-summary {
  font-size: 0.82rem !important;     
  color: var(--text-gray-300);
  line-height: 1.1 !important;      
  margin: 0;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.2em !important;     
}
.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.content-tags .tag-pill {
  margin: 0;
}
.content-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  background: var(--bg-gray-700);
  color: var(--text-white);
  border: 1px solid var(--border-primary);
  margin-right: 0.5rem;
}
.content-type-badge i {
  font-size: 0.9rem;
}
.content-type-podcast {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}
.content-type-video {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.content-type-lab {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}
.content-type-course {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}
.content-type-tutorial {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}
#tutorials-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0 1rem;
}
.content-type-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  background: var(--bg-gray-700);
  color: var(--text-tertiary);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.content-type-filter-badge:hover {
  background: var(--bg-gray-600);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}
.content-type-filter-badge.active {
  background: rgba(88, 166, 255, 0.15);
  border-color: rgba(88, 166, 255, 0.4);
  color: var(--color-primary);
  font-weight: 600;
}
.content-type-filter-badge i {
  font-size: 1rem;
}
.content-submeta {
  font-size: 0.72rem !important;    
  color: var(--text-gray-400);
  display: flex;
  flex-wrap: nowrap !important;     
  gap: 0.25rem !important;          
  margin-top: 2px !important;       
}
.content-submeta .content-label {
  color: var(--text-gray-300);
  font-weight: 600;
}
.content-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.content-card .btn.btn-xs {
  text-transform: none;
}
.article-card {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box;
  overflow: hidden; /* Contain content */
}
.article-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.content-card--article {
  display: block;
}
.content-card--article .content-card-header {
  margin-bottom: 0.6rem;
}
.content-card--article .article-content {
  margin-top: 0.25rem;
}
.article-image {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.375rem;
}
.article-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 0.25rem;
  line-height: 1.3;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-title:hover {
  color: var(--blue-500);
}
.article-metadata {
  font-size: 0.8125rem;  
  color: var(--text-gray-400);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.article-summary,
.article-description,
.article-excerpt,
.content-preview,
.article-preview,
p.summary,
p.description {
  font-size: 0.8125rem;  
  line-height: 1.5;
  color: var(--text-gray-300);
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.source-link {
  color: #60a5fa; 
  text-decoration: none;
}
.source-link:hover {
  color: #93c5fd; 
  text-decoration: underline;
}
:root.light-theme .source-link {
  color: #1d4ed8; 
}
:root.light-theme .source-link:hover {
  color: #1e40af; 
  text-decoration: underline;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  gap: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.filter-pill .remove-filter {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background-color 0.2s;
}
.filter-pill .remove-filter:hover {
  background: rgba(255, 255, 255, 0.3);
}
.filter-link {
  color: var(--text-gray-300);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}
.filter-link:hover {
  color: var(--blue-500);
  background-color: rgba(88, 166, 255, 0.1);
}
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}
.toggle-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #374151, #4b5563);
  border-radius: 14px;
  border: 2px solid #6b7280;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
input:checked + .toggle-switch .toggle-track {
  background: linear-gradient(145deg, var(--blue-500), #4a90e2);
  border-color: var(--blue-400);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 12px rgba(88, 166, 255, 0.4);
}
input:checked + .toggle-switch .toggle-thumb {
  transform: translateX(24px);
  background: linear-gradient(145deg, #ffffff, #e2e8f0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-switch:hover .toggle-track {
  border-color: #9ca3af;
  transform: scale(1.02);
}
input:checked + .toggle-switch:hover .toggle-track {
  border-color: #60a5fa;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 16px rgba(88, 166, 255, 0.5);
}
.toggle-switch:hover .toggle-thumb {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.relative { position: relative; }
.absolute { position: absolute; }
.top-1\/2 { top: 50%; }
.right-2 { right: 0.5rem; }
.left-1 { left: 0.25rem; }
.top-1 { top: 0.25rem; }
.top-full { top: 100%; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.transform { transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.w-10 { width: 2.5rem; }
.h-6 { height: 1.5rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.mr-3 { margin-right: 0.75rem; }
.pr-8 { padding-right: 2rem; }
.z-10 { z-index: 10; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.border-t { border-top-width: 1px; }
.border-gray-700 { border-color: #374151; }
.fw-bold { font-weight: 700; }
.fs-6 { font-size: 1rem; }
.d-flex { display: flex; }
.nav { display: flex; list-style: none; padding: 0; margin: 0; }
.nav-item { display: list-item; }
.nav-tabs { border-bottom: 1px solid var(--border-gray-600); }
.nav-link { display: block; padding: 0.5rem 1rem; text-decoration: none; transition: all 0.3s ease; }
.gap-2 { gap: 0.5rem; }
.card-header {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.375rem 0.375rem 0 0;
  font-weight: 600;
  font-size: 0.875rem;
}
.container-dark-card {
  background: linear-gradient(135deg, var(--bg-gray-800), var(--bg-gray-700));
  border: 1px solid var(--border-gray-600);
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.stat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value {
  white-space: nowrap;
}
.articles-column {
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 200px;
  padding: 0;
}
#left-sidebar #info-panel {
  border-top: 1px solid var(--border-gray-600);
  border-radius: 0.375rem;
  padding-top: 0.75rem;
}
#left-sidebar #info-panel h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#clusterize-scroll,
#clusterize-scroll-popular,
#clusterize-scroll-sources,
#user-tags-container {
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}
#clusterize-content,
#clusterize-content-popular,
#clusterize-content-sources,
#user-tags-list {
  padding-bottom: 150px !important;
  box-sizing: border-box !important;
}
.end-of-articles-indicator,
.max-limit-indicator {
  margin-bottom: 80px !important;
  position: relative !important;
  z-index: 10 !important;
}
.nav-tabs {
  border-bottom: 1px solid var(--border-gray-600);
}
.dark-tab {
  background-color: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-300);
  border-radius: 0.375rem 0.375rem 0 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500; 
  box-sizing: border-box; 
  border-bottom: none;
}
.dark-tab:hover {
  background-color: var(--bg-gray-600);
  color: var(--blue-500);
}
.dark-tab.active {
  background-color: var(--bg-gray-800);
  border-bottom: 1px solid var(--bg-gray-800);
  color: var(--blue-500);
  font-weight: 600;
}
.feed-pane {
  background-color: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modal-overlay.show {
  display: flex;
}
.modal {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modal.show {
  display: flex !important;
}
.loading-message,
.error-message,
.success-message {
  border-radius: 8px !important;
  border: none !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
#email-loading-message.loading-message,
#tags-loading-message.loading-message,
#feeds-loading-message.loading-message,
#email-error-message.error-message,
#tags-error-message.error-message,
#feeds-error-message.error-message,
.modal .loading-message,
.modal .error-message,
.modal div.loading-message,
.modal div.error-message,
div.loading-message,
div.error-message {
  display: none !important;
}
.loading-message,
.modal .alert-info,
div[style*="background-color: #2563eb"],
div[style*="background: #2563eb"],
.bg-blue-500 {
  background: rgba(88, 166, 255, 0.1) !important;
  border: 1px solid rgba(88, 166, 255, 0.2) !important;
  border-left: 4px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.error-message,
.modal .alert-danger,
div[style*="background-color: #dc2626"],
div[style*="background: #dc2626"],
div[style*="background-color: red"],
.bg-red-500 {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-left: 4px solid #ef4444 !important;
  color: #dc2626 !important;
}
.modal .alert-success,
div[style*="background-color: #16a34a"],
div[style*="background: green"],
.bg-green-500 {
  display: none !important;
}
.modal .alert,
.modal .alert-primary,
.modal .alert-info,
.modal .alert-danger,
.modal .alert-warning,
.modal .alert-success,
#email-modal .alert,
#tags-modal .alert,
#feeds-modal .alert {
  border-radius: 8px !important;
  border: none !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  font-weight: 500 !important;
}
.modal .alert-primary,
.modal .alert-info,
#email-modal .alert-info,
#tags-modal .alert-info,
#feeds-modal .alert-info {
  background: rgba(88, 166, 255, 0.1) !important;
  border-left: 4px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.modal .alert-danger,
.modal .alert-warning,
#email-modal .alert-danger,
#tags-modal .alert-danger,
#feeds-modal .alert-danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border-left: 4px solid #ef4444 !important;
  color: #dc2626 !important;
}
.modal .alert-success,
#email-modal .alert-success,
#tags-modal .alert-success,
#feeds-modal .alert-success {
  display: none !important;
}
.modal div[style*="background-color:#2563eb"],
.modal div[style*="background-color: #2563eb"],
.modal div[style*="background:#2563eb"],
.modal div[style*="background: #2563eb"],
.modal div[style*="background-color:#3b82f6"],
.modal div[style*="background: blue"] {
  background: rgba(88, 166, 255, 0.1) !important;
  border: 1px solid rgba(88, 166, 255, 0.2) !important;
  border-left: 4px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: 6px !important;
}
.modal div[style*="background-color:#dc2626"],
.modal div[style*="background-color: #dc2626"],
.modal div[style*="background:#dc2626"],
.modal div[style*="background: #dc2626"],
.modal div[style*="background-color:#ef4444"],
.modal div[style*="background: red"] {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-left: 4px solid #ef4444 !important;
  color: #dc2626 !important;
  border-radius: 6px !important;
}
.success-message {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 4px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
}
#email-premium-required,
#tags-premium-required,
#feeds-premium-required {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.05), rgba(16, 185, 129, 0.05)) !important;
  border: 1px solid rgba(88, 166, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 12px 0 !important;
  color: var(--text-primary) !important;
  position: relative !important;
}
#email-premium-required::before,
#tags-premium-required::before,
#feeds-premium-required::before {
  content: "💎";
  font-size: 18px;
  margin-right: 8px;
}
.modal-content {
  border-radius: 12px !important;
  background: var(--bg-gray-800) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-primary) !important;
  padding: 20px 24px !important;
}
.modal-body {
  padding: 24px !important;
}
.modal-footer {
  border-top: 1px solid var(--border-primary) !important;
  padding: 16px 24px !important;
}
.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}
.modal-content img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.5rem;
}
.close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--blue-600);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%);
  color: white !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(9, 105, 218, 0.5);
}
.btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
}
.btn-outline-secondary:hover {
  background-color: #6c757d;
  color: white;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.applied-filters-container {
  padding: 0.5rem 0;
}
@media (min-width: 768px) {
  .d-md-block { display: block !important; }
}
@media (max-width: 767.98px) {
  .hidden.md\\:block { display: none; }
  .md\\:col-span-2,
  .md\\:col-span-5 { 
    grid-column: span 12 / span 12;
  }
  .md\\:grid-cols-12 {
    grid-template-columns: 1fr;
  }
}
.desktop-nav {
  display: flex;
}
.mobile-nav {
  display: none;
  align-items: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .desktop-nav {
    display: none !important;
  }
  .mobile-nav {
    display: flex !important;
  }
}
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.hamburger-line {
  display: block;
  width: 20px;
  height: 3px;
  background-color: white;
  margin: 2px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.theme-toggle-mobile {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}
.theme-toggle-mobile:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background-color: #1f2937;
  backdrop-filter: blur(10px);
  border-left: 1px solid #374151;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}
.mobile-menu-overlay.active .mobile-menu {
  transform: translateX(0);
}
.mobile-menu-header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid #374151;
  background-color: #111827;
}
.mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; 
}
.mobile-menu-logo * {
  pointer-events: auto; 
}
.mobile-menu-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-text-primary);
}
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--theme-text-primary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
.mobile-menu-close:hover {
  background-color: var(--theme-hover);
}
.mobile-menu-nav {
  padding: 20px 0;
}
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: var(--theme-text-primary);
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.2s ease;
  min-height: 56px; 
}
.mobile-menu-item:hover {
  background-color: var(--theme-hover);
  text-decoration: none;
  color: var(--theme-text-primary);
}
.mobile-menu-item i {
  width: 20px;
  text-align: center;
  color: var(--theme-accent);
}
.mobile-menu-user {
  padding: 16px 20px;
  border-bottom: 1px solid #374151;
  background-color: #111827;
}
.mobile-menu-welcome {
  display: block;
  color: var(--theme-text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}
.mobile-premium-badge {
  background: linear-gradient(135deg, #007bff, #6610f2);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#article-detail {
  display: none; 
  position: relative; 
}
#article-detail .detail-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  pointer-events: none;
}
:root.light-theme #article-detail .detail-loading-overlay {
  background: rgba(255,255,255,0.6);
}
#article-detail .detail-loading-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#article-detail .detail-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(88,166,255,0.25);
  border-top-color: var(--blue-500);
  border-radius: 50%;
  animation: anl-spin 0.9s linear infinite;
}
@keyframes anl-spin {
  to { transform: rotate(360deg); }
}
body.deep-link-mode #stream-container,
body.deep-link-mode .main-stream-area,
body.deep-link-mode .header-gradient,
body.deep-link-mode .bg-theme-filter,
body.deep-link-mode #sidebar-left,
body.deep-link-mode #sidebar-right {
  display: none !important;
}
body.deep-link-mode #article-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 10000;
  background: var(--bg-gray-900);
  overflow-y: auto;
}
:root.light-theme body.deep-link-mode #article-detail {
  background: #ffffff;
}
.deep-link-banner {
  padding: 1.5rem 2rem 1rem 2rem;
  margin-bottom: 1rem;
}
.deep-link-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.deep-link-back-btn:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--color-primary);
  transform: translateX(-2px);
}
.deep-link-back-btn:active {
  transform: translateX(0);
}
.deep-link-back-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.deep-link-back-btn:hover svg {
  transform: translateX(-2px);
}
:root.light-theme .deep-link-back-btn {
  color: #2563eb;
  border-color: #e5e7eb;
}
:root.light-theme .deep-link-back-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
}
@media (max-width: 640px) {
  .deep-link-banner {
    padding: 1rem;
  }
  .deep-link-back-btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
  }
}
@media (max-width: 768px) {
  :root.light-theme .header-gradient {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  :root.light-theme .bg-theme-filter {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  :root.light-theme .theme-toggle-btn,
  :root.light-theme .theme-toggle-mobile {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
  }
  :root.light-theme #theme-icon,
  :root.light-theme #theme-icon-mobile {
    color: #374151 !important;
  }
  :root.light-theme .nav .nav-link,
  :root.light-theme .nav .dark-tab {
    background: #ffffff !important;
    border-color: #e5e7eb !important; 
    color: #374151 !important;
    font-weight: 500 !important; 
  }
  :root.light-theme .nav .nav-link:hover,
  :root.light-theme .nav .dark-tab:hover {
    color: #2563eb !important;
    background-color: rgba(59, 130, 246, 0.08) !important; 
    border-color: #bfdbfe !important;
  }
  :root.light-theme .nav .nav-link.active,
  :root.light-theme .nav .dark-tab.active {
    color: #1d4ed8 !important; 
    background: #f0f7ff !important; 
    border-color: #bfdbfe !important; 
    box-shadow: inset 0 -2px 0 #2563eb !important; 
  }
  :root.light-theme .article-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  }
  :root.light-theme .article-content p,
  :root.light-theme .article-meta {
    color: #6b7280 !important;
  }
  :root.light-theme #article-detail {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
  }
  :root.light-theme input[type="text"],
  :root.light-theme input[type="search"] {
    background: #ffffff !important;
    color: #1b1b1d !important; 
    border: 1px solid #e5e7eb !important;
  }
  :root.light-theme input::placeholder {
    color: #9ca3af !important;
  }
  :root.light-theme .btn-outline-secondary {
    border-color: #cbd5e1 !important;
    color: #374151 !important;
  }
  :root.light-theme .btn-outline-secondary:hover {
    background: #374151 !important;
    color: #ffffff !important;
  }
  :root.light-theme .share-btn {
    color: #6c757d !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
  }
  :root.light-theme .share-btn:hover {
    background: #e7f3ff !important;
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    transform: translateY(-1px) !important;
  }
  :root.light-theme .hamburger-btn {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
  }
  :root.light-theme .hamburger-btn:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
  }
  :root.light-theme .hamburger-line {
    background-color: #374151 !important;
  }
  :root.light-theme .category-search-btn,
  :root.light-theme .filter-link {
    background: #eef2f7 !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
  }
  :root.light-theme .category-search-btn:hover,
  :root.light-theme .filter-link:hover {
    background: #e7efff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
  }
  :root.light-theme .search-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }
  :root.light-theme .search-display {
    background: transparent !important;
  }
  :root.light-theme .search-text-input {
    color: #1b1b1d !important; 
  }
  :root.light-theme .search-text-input::placeholder {
    color: #9ca3af !important; 
  }
  :root.light-theme .search-clear-btn {
    color: #6b7280 !important;
  }
  :root.light-theme .search-clear-btn:hover {
    color: #111827 !important;
  }
  :root.light-theme .search-dropdown-arrow {
    color: #6b7280 !important;
  }
  :root.light-theme .search-box:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
  }
  :root.light-theme {
    --theme-text-primary: #1f2937;   
    --theme-text-secondary: #6b7280; 
    --theme-accent: #2563eb;        
    --theme-hover: #f3f4f6;         
  }
  :root.light-theme .mobile-menu {
    background-color: #ffffff !important;
    border-left: 1px solid #e5e7eb !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.06) !important;
  }
  :root.light-theme .mobile-menu-header,
  :root.light-theme .mobile-menu-user {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  :root.light-theme .mobile-menu-title,
  :root.light-theme .mobile-menu-item {
    color: var(--theme-text-primary) !important;
  }
  :root.light-theme .mobile-menu-item:hover {
    background-color: #f3f4f6 !important;
    color: var(--theme-text-primary) !important;
  }
  :root.light-theme .mobile-menu-item i {
    color: var(--theme-accent) !important;
  }
  :root.light-theme .mobile-menu-close {
    color: var(--theme-text-primary) !important;
  }
  :root.light-theme .mobile-menu-close:hover {
    background-color: #e5e7eb !important;
  }
  :root.light-theme .mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }
  .header-gradient .flex.items-center.justify-between {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .logo-text {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  .logo-link svg {
    width: 24px !important;
    height: 24px !important;
  }
  .logo-text-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .logo-tagline {
    font-size: 0.65rem !important;
    padding-left: 0 !important;
    border-left: none !important;
    opacity: 0.85;
  }
  .desktop-nav {
    display: none !important;
  }
  .mobile-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  * {
    -webkit-tap-highlight-color: rgba(66, 153, 224, 0.3);
    -webkit-touch-callout: none;
  }
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .header-gradient {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .header-gradient .py-4 {
    padding: 0.5rem 0 !important;
  }
  .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .bg-gray-800 {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .bg-gray-800 .max-w-7xl {
    padding: 0 1rem;
  }
  .bg-theme-filter .flex.items-center.justify-between {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  .bg-theme-filter .flex.items-center.space-x-6 {
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    padding-bottom: 4px;
  }
  .bg-theme-filter .flex.items-center.space-x-6::-webkit-scrollbar {
    display: none;
  }
  .category-search-btn, .filter-link {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem;
    background-color: rgba(75, 85, 99, 0.6) !important;
    border: 1px solid rgba(107, 114, 128, 0.4) !important;
    color: #f3f4f6;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 48px !important; 
    min-width: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
    font-weight: 500;
  }
  .category-search-btn:hover, .filter-link:hover {
    background-color: rgba(59, 130, 246, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
    color: #f9fafb !important; 
  }
  .toggle-switch {
    transform: scale(1.2);
  }
  .search-box {
    width: 100% !important;
    max-width: none;
    min-height: 48px !important;
  }
  .search-display {
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
  }
  .search-clear-btn {
    min-width: 44px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .search-text-input {
    font-size: 18px !important; 
  }
  #stream-search-form {
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem;
    align-items: stretch;
  }
  #stream-search-form .stream-search-container {
    flex: 1 !important;
    width: auto !important;
  }
  #stream-search-form .stream-search-submit {
    width: 100%;
  }
  .grid.grid-cols-10 {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }
  .col-span-2, .col-span-4 {
    width: 100% !important;
    flex: none;
  }
  #left-sidebar {
    display: none;
  }
  #main-feed {
    order: 1;
    grid-column: span 8 !important; 
  }
  #stream-content,
  #stream-content .stream-pane {
    min-height: auto !important;
    overflow: visible !important;
  }
  #clusterize-scroll,
  #clusterize-scroll-popular,
  #user-tags-container {
    max-height: none !important;
    overflow: visible !important;
  }
  #clusterize-scroll-sources {
    max-height: 500px !important;
    overflow-y: auto !important;
  }
  .stream-search-form {
    padding: 0.75rem;
    gap: 0.6rem;
  }
  .stream-search-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .stream-search-submit {
    min-height: 44px;
  }
  .stream-search-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .stream-search-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .article-card {
    display: flex !important;
    flex-direction: row !important;
    padding: 0.85rem !important;        
    margin-bottom: 12px !important;     
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    gap: 0.5rem !important;
  }
  .article-card:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .article-image {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    border-radius: 0.25rem !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }
  .article-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0.375rem !important;
  }
  .article-content {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .article-content h3 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
  }
  .article-card:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .article-card .article-image {
    display: block !important;
    float: right !important;
    margin: 0 0 8px 12px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: var(--bg-secondary) !important;
    clear: none !important;
  }
  .article-card .article-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 4px !important;
  }
  .article-content {
  }
  .article-content p {
    font-size: 0.8rem !important;
    line-height: 1.4;
    color: #9ca3af;
    margin-bottom: 0.25rem;
  }
  .article-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
  }
  #main-feed {
    max-height: none !important;
    min-height: auto !important;
    overflow-y: visible !important;
  }
  #main-feed .tab-content {
    height: auto !important;
    overflow: visible !important;
  }
.back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
    height: 56px;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }
  .back-to-top-btn:hover {
    background: rgba(59, 130, 246, 1);
    transform: scale(1.1);
  }
  .back-to-top-btn.show {
    display: flex;
  }
  .mobile-menu-separator {
    height: 1px;
    background-color: #374151;
    margin: 16px 0;
  }
  .mobile-menu-footer {
    padding: 16px 20px 20px;
    text-align: center;
  }
  .mobile-menu-copyright {
    color: #6b7280;
    font-size: 12px;
  }
footer {
  display: none !important;
}
.stream-pane #clusterize-scroll-sources,
#stream-pane-news-sources #clusterize-scroll-sources {
  max-height: 732px !important;
  height: 732px !important;
  min-height: 732px !important;
  overflow-y: auto !important;
  flex: 0 0 732px !important; 
}
.back-to-top-btn {
  display: none !important;
}
.footer-minimal {
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(10, 12, 20, 0.95));
  box-shadow: 0 -8px 24px rgba(2, 6, 23, 0.45);
  padding-top: 10px;
  padding-bottom: 10px;
}
.footer-minimal .footer-content {
  gap: 12px;
}
.footer-minimal p,
.footer-minimal a {
  font-size: 0.875rem;
  line-height: 1.3;
}
  .articles-column {
    padding: 0 0.5rem;
  }
  .nav-tabs {
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border-gray-600) !important;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-link, .dark-tab {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    transition: all 0.3s ease !important;
    text-decoration: none;
    font-weight: 500;
    background-color: var(--bg-gray-700) !important;
    border: 1px solid var(--border-gray-600) !important;
    color: var(--text-gray-300) !important;
    border-bottom: none !important;
  }
  .nav-link:hover, .dark-tab:hover {
    color: var(--blue-500) !important;
    background-color: rgba(88, 166, 255, 0.1) !important;
  }
  .nav-link.active, .dark-tab.active {
    background-color: rgba(88, 166, 255, 0.14) !important; 
    border-color: rgba(88, 166, 255, 0.35) !important;      
    color: var(--text-white) !important; 
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 var(--blue-500) !important;  
  }
  .nav-link:active {
    transform: translateY(1px);
  }
  .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  .text-xl {
    font-size: 1.125rem;
  }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  .tag-pill {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.2rem;
    white-space: nowrap;
    border-radius: 9999px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #article-detail {
    position: relative !important;
    display: block !important;
  }
  .slideout-panel {
    position: fixed !important;
    top: 60px !important; 
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #article-detail .article-detail-content {
    max-width: 100%;
    padding: 0;
  }
  #article-detail h2 {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  #article-detail .article-summary {
    font-size: 0.9rem !important;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  #detail-source-image {
    width: 60px !important;
    height: 60px !important;
    border-radius: 0.5rem;
    object-fit: cover !important;
  }
  #detail-screenshot {
    width: 100% !important;
    max-height: 200px !important;
    object-fit: cover !important;
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  .share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
  }
  .share-buttons a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  input, select, textarea {
    font-size: 16px; 
  }
  .bookmark-btn {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .job-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.5rem !important;
    background: rgba(31, 41, 55, 0.6) !important;
    border: 1px solid rgba(107, 114, 128, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 48px !important; 
    position: relative !important;
  }
  .job-card:hover, .job-card:active {
    background: rgba(55, 65, 81, 0.8) !important;
    border-color: rgba(107, 114, 128, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  }
  .job-card h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-white) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    padding-right: 2rem !important; 
  }
  .job-card .job-company {
    font-size: 0.875rem !important;
    color: #9ca3af !important;
    margin-bottom: 0.25rem !important;
    font-weight: 500 !important;
  }
  .job-card .job-location {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin-bottom: 0.5rem !important;
  }
  .job-card .job-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    font-size: 0.75rem !important;
  }
  .job-card .experience-level {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.625rem !important;
    font-weight: 500 !important;
  }
  .job-card .job-save {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 0.25rem !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }
  .job-card .job-save:hover, .job-card .job-save:active {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #f3f4f6 !important;
  }
  #jobs-filters {
    margin-bottom: 0.5rem !important;
  }
  #jobs-filters .flex {
    gap: 0.25rem !important;
  }
  #jobs-filters .jobs-filter {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    border-radius: 0.25rem !important;
    white-space: nowrap !important;
  }
  #right-tabs {
    margin-bottom: 0.5rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #right-tabs::-webkit-scrollbar {
    display: none !important;
  }
  #right-tabs .nav-link {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }
  .right-pane {
    padding: 0 !important;
  }
  .right-pane .card-header {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  .btn {
    min-height: 40px !important; 
    min-width: 44px !important;
  }
  .btn-xs {
    min-height: 32px !important;
    min-width: 32px !important;
    font-size: 0.75rem !important;
  }
  #article-detail .job-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  #article-detail .job-company {
    font-size: 1rem !important;
    color: #9ca3af !important;
    margin-bottom: 0.75rem !important;
  }
  #article-detail .job-details-section {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(107, 114, 128, 0.2) !important;
  }
  #article-detail .job-details-section:last-child {
    border-bottom: none !important;
  }
  .related-article {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(107, 114, 128, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .related-article:active {
    background-color: rgba(59, 130, 246, 0.1);
  }
  .related-article img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 0.375rem;
    object-fit: cover !important;
    flex-shrink: 0;
  }
  .related-article h4 {
    font-size: 0.9rem !important;
    line-height: 1.3;
    margin: 0;
    font-weight: 600;
  }
  .source-link {
    color: #60a5fa !important;
    text-decoration: none;
    font-weight: 500;
  }
  .source-link:hover {
    color: #93c5fd !important;
    text-decoration: underline;
  }
  .article-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem !important;  
    color: #9ca3af;
  }
  .article-card {
    margin-bottom: 12px !important;   
  }
  .article-card:last-child {
    margin-bottom: 12px !important;   
  }
  .load-more-btn {
    width: 100%;
    padding: 0.75rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    min-height: 48px;
  }
  .container-dark, .container-dark-card, .container-dark-reading {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
  }
.sticky {
    position: -webkit-sticky;
    position: sticky;
  }
  .loading-placeholder {
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .grid.grid-cols-10 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .col-span-2 {
    grid-column: span 1;
  }
  .col-span-4 {
    grid-column: span 1;
  }
  #main-feed {
    grid-column: span 2;
  }
}
@media (min-width: 1025px) {
  .hidden.md\\:flex { display: flex; }
  .hidden.md\\:block { display: block; }
}
.search-container {
  position: relative;
  display: inline-block;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  border-radius: 0.5rem;
  width: 16rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  overflow: visible;
}
.search-display {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  min-width: 0;
}
.stream-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.stream-header-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 60%;
}
.stream-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stream-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-accent, #60a5fa);
  letter-spacing: 0.01em;
}
.stream-count[data-empty="true"] {
  display: none;
}
.stream-header-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.stream-header-controls .cve-severity-chips {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.stream-header-controls .stream-select {
  min-width: 140px;
}
.stream-control-input,
.search-text-input {
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(94, 106, 135, 0.4) !important;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  min-width: 300px;
  width: 300px;
  color: var(--text-gray-100);
  font-size: 18px;
  padding-left: 1rem !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 1.2;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stream-control-input:focus,
.search-text-input:focus {
  border-color: rgba(88, 166, 255, 0.6) !important;
  background: rgba(17, 24, 39, 0.7);
  outline: none;
}
.stream-control-input::placeholder,
.search-text-input::placeholder {
  color: rgba(156, 163, 175, 0.7);
}
.search-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.search-input-wrapper .search-text-input,
.search-input-wrapper .stream-control-input {
  padding-right: 2.5rem !important; 
}
.search-clear-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(156, 163, 175, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
  z-index: 10;
}
.search-clear-btn:hover {
  color: rgba(88, 166, 255, 0.8);
  background: rgba(88, 166, 255, 0.1);
}
.search-clear-btn:active {
  background: rgba(88, 166, 255, 0.2);
}
.search-clear-btn i {
  font-size: 14px;
  pointer-events: none;
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
input[type="search"]::-ms-clear {
  display: none;
}
@media (max-width: 768px) {
  .stream-header-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .stream-header-title {
    max-width: 100%;
  }
  .stream-header-controls {
    justify-content: flex-start;
  }
}
.search-pill-container {
  display: none;
  margin-right: 0.5rem;
}
.search-pill-container.active {
  display: flex !important;
  align-items: center;
}
.search-pill {
  display: inline-flex !important;
  align-items: center;
  background-color: #2563eb; 
  color: white;
  border-radius: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  height: 1.5rem;
  line-height: 1;
  white-space: nowrap;
}
.search-pill:hover {
  background-color: #1d4ed8;
}
.search-pill .remove-filter {
  background: none !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  font-size: 10px !important;
  margin-left: 4px !important;
  padding: 0 !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50%;
}
.search-pill .remove-filter:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.search-text-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-gray-100);
  font-size: 18px;
  padding: 0;
  height: 100%;
  line-height: 1.2;
  box-sizing: border-box !important;
}
.search-text-input::placeholder {
  color: var(--text-gray-400);
}
.search-text-input.hidden-by-pill {
  opacity: 0;
  pointer-events: none;
}
.stream-search-host {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 560px;
  position: relative;
  align-items: stretch;
}
.global-search-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.stream-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.35);
}
.stream-search-input-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.stream-search-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.stream-search-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-gray-100);
}
.stream-search-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-gray-100);
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.stream-search-advanced-toggle:hover {
  border-color: rgba(59, 130, 246, 0.6);
  color: var(--blue-500);
}
.stream-search-advanced-toggle[aria-expanded="true"] {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.6);
  color: var(--blue-500);
}
.stream-search-input-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
}
.stream-search-container {
  flex: 1 1 auto;
  min-width: 0;
}
.stream-search-box {
  width: 100% !important;
  background-color: rgba(31, 41, 55, 0.85);
  border-color: rgba(148, 163, 184, 0.2);
  padding-left: 0.6rem;
  gap: 0.5rem;
}
.stream-search-submit {
  flex: 0 0 auto;
  white-space: nowrap;
}
.stream-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray-400);
  font-size: 0.85rem;
}
.stream-search-submit {
  white-space: nowrap;
  min-height: 42px;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  font-size: 0.75rem;
  height: 38px;
}
.stream-search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
}
.global-search-suggestions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}
.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.24);
  color: var(--text-gray-100);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  justify-content: center;
  flex: 0 0 auto;
}
.suggestion-chip--ghost {
  background: rgba(59, 130, 246, 0.08);
  border: 1px dashed rgba(59, 130, 246, 0.35);
  color: rgba(191, 219, 254, 0.85);
}
.suggestion-chip:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.45);
  transform: translateY(-1px);
}
.suggestion-chip .suggestion-icon {
  font-size: 0.8rem;
  opacity: 0.75;
}
.suggestion-chip .suggestion-label {
  font-weight: 500;
}
.stream-search-advanced {
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.45);
}
.advanced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.advanced-label {
  font-size: 0.8rem;
  color: var(--text-gray-300);
  min-width: 90px;
}
.advanced-select {
  flex: 1;
  background: rgba(31, 41, 55, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.5rem;
  color: var(--text-gray-100);
  padding: 0.5rem 0.75rem;
}
.advanced-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.stream-search-advanced[hidden] {
  display: none;
}
.stream-search-box:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}
.stream-search-box .search-text-input {
  font-size: 18px;
}
.stream-search-box .search-clear-btn {
  margin-left: 0.35rem;
}
.search-clear-btn {
  background: none;
  border: none;
  color: var(--text-gray-400);
  cursor: pointer;
  padding: 0.25rem;
  display: none;
  margin-left: 0.5rem;
  flex: 0 0 auto;
}
.search-clear-btn:hover {
  color: white;
}
.search-clear-btn.visible {
  display: block;
}
.search-dropdown-arrow {
  color: var(--text-gray-400);
  font-size: 0.75rem;
  margin-left: 0.25rem;
  cursor: pointer;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  border-radius: 0.5rem;
}
.search-dropdown-arrow:focus,
.search-dropdown-arrow:hover {
  color: var(--text-gray-100);
  background: rgba(59, 130, 246, 0.15);
  outline: none;
}
.search-box:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
.tag-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  max-height: 400px;
  background-color: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 20;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
}
.tag-dropdown .dropdown-loading,
.tag-dropdown .dropdown-empty-state,
.tag-dropdown .dropdown-error {
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  color: var(--text-gray-300);
  text-align: left;
}
.tag-dropdown .dropdown-error {
  color: #f87171;
}
.tag-dropdown.show {
  display: block;
}
.dropdown-section-header {
  padding: 0.75rem 1rem 0.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--bg-gray-800);
  border-bottom: 1px solid var(--border-gray-600);
  position: sticky;
  top: 0;
}
.tag-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(107, 114, 128, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-gray-100);
}
.tag-dropdown-item:hover {
  background-color: var(--blue-500);
  color: white;
}
.tag-dropdown-item span {
  font-size: 0.875rem;
}
.premium-modal-content {
  max-width: 480px !important;
  width: 90% !important;
  padding: 0 !important;
  border-radius: 1rem !important;
  background: var(--bg-gray-800) !important;
  border: 1px solid var(--border-gray-600) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  overflow: hidden;
}
.premium-modal-header {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%);
  padding: 1.25rem 1.5rem 1rem;
  text-align: center;
  position: relative;
}
.premium-icon {
  margin: 0 auto 1rem;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.premium-modal-title {
  color: white !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.premium-close-button {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(10px);
}
.premium-close-button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1);
}
.premium-modal-body {
  padding: 1.5rem;
}
.premium-message {
  color: var(--text-gray-100) !important;
  font-size: 1.125rem !important;
  text-align: center;
  margin-bottom: 2rem !important;
  line-height: 1.6;
}
.premium-benefits {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  max-height: none;
  overflow: visible;
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-gray-100);
  font-size: 0.85rem;
  line-height: 1.3;
}
.benefit-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.1rem;
}
.premium-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pricing-option {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--border-gray-600);
  border-radius: 0.75rem;
  background: var(--bg-gray-700);
  position: relative;
  transition: all 0.3s ease;
}
.pricing-option.popular {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}
.pricing-option .price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-gray-100);
}
.pricing-option .period {
  font-size: 1rem;
  color: var(--text-gray-400);
}
.save-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #10b981;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-weight: 600;
}
.pricing-divider {
  color: var(--text-gray-400);
  font-size: 1rem;
  font-weight: 500;
}
.premium-modal-footer {
  padding: 1rem 1.5rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.upgrade-btn {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%) !important;
  color: white !important;
  border: none !important;
  padding: 1rem 2rem !important;
  border-radius: 0.75rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
}
.upgrade-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(88, 166, 255, 0.4) !important;
}
.upgrade-btn:active {
  transform: translateY(0) !important;
}
.maybe-later-btn {
  background: transparent !important;
  color: var(--text-gray-400) !important;
  border: 1px solid var(--border-gray-600) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.maybe-later-btn:hover {
  color: var(--text-gray-200) !important;
  border-color: var(--border-gray-500) !important;
  background: var(--bg-gray-700) !important;
}
@media (max-width: 640px) {
  .premium-modal-content {
    width: 95% !important;
    max-width: none !important;
    margin: 1rem !important;
  }
  .premium-modal-header {
    padding: 1rem 1.25rem 0.75rem;
  }
  .premium-modal-title {
    font-size: 1.35rem !important;
  }
  .premium-modal-body {
    padding: 1.25rem;
  }
  .premium-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .benefit-item {
    font-size: 0.8rem;
    gap: 0.4rem;
  }
  .benefit-item svg {
    width: 14px;
    height: 14px;
  }
  .premium-pricing {
    flex-direction: column;
    gap: 0.75rem;
  }
  .pricing-option {
    width: 100%;
    justify-content: center;
  }
  .premium-modal-footer {
    padding: 0.75rem 1.25rem 1rem;
  }
  .upgrade-btn {
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }
}
.preferences-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 24px !important;
  height: 400px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.preference-card {
  background: var(--bg-gray-800) !important;
  border: 2px solid var(--border-gray-600) !important;
  border-radius: 12px !important;
  height: 190px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  padding: 20px 16px 16px 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.preference-card:hover {
  border-color: var(--border-blue) !important;
  background: var(--bg-gray-750) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.15) !important;
}
.preference-card.coming-soon {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}
.preference-card.coming-soon:hover {
  transform: none !important;
  border-color: var(--border-gray-600) !important;
  background: var(--bg-gray-800) !important;
  box-shadow: none !important;
}
.card-icon {
  font-size: 36px !important;
  margin: 0 0 12px 0 !important;
  flex-shrink: 0 !important;
}
.card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-gray-100) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}
.card-status {
  font-size: 12px !important;
  color: var(--text-gray-400) !important;
  margin: 0 0 32px 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 40px !important;
}
.card-action {
  position: absolute !important;
  bottom: 16px !important;
  left: 20px !important;
  right: 20px !important;
  padding: 8px 12px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.card-action.primary {
  background: #58a6ff !important;
  color: white !important;
  border: 1px solid #0969da !important;
  box-shadow: 0 2px 4px rgba(88, 166, 255, 0.2) !important;
}
.card-action.primary:hover {
  background: #0969da !important;
  border-color: #0860ca !important;
  box-shadow: 0 3px 8px rgba(88, 166, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}
.card-action.secondary {
  background: #30363d !important;
  color: #f0f6fc !important;
  border: 1px solid #58a6ff !important;
  box-shadow: 0 1px 3px rgba(88, 166, 255, 0.1) !important;
}
.card-action.secondary:hover {
  background: #21262d !important;
  color: white !important;
  border-color: #58a6ff !important;
  box-shadow: 0 2px 6px rgba(88, 166, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}
.card-action.coming-soon {
  background: #21262d !important;
  color: #8b949e !important;
  border: 1px solid #30363d !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.card-action.coming-soon:hover {
  background: #21262d !important;
  color: #8b949e !important;
  border-color: #30363d !important;
  transform: none !important;
}
[data-theme="light"] .preference-card {
  background: white !important;
  border-color: #e1e4e8 !important;
}
[data-theme="light"] .preference-card:hover {
  border-color: var(--border-blue) !important;
  background: #f8f9fa !important;
}
[data-theme="light"] .card-title {
  color: #24292e !important;
}
[data-theme="light"] .card-status {
  color: #6a737d !important;
}
[data-theme="light"] .card-action.primary {
  background: #0969da !important;
  color: white !important;
  border-color: #0860ca !important;
  box-shadow: 0 2px 4px rgba(9, 105, 218, 0.2) !important;
}
[data-theme="light"] .card-action.primary:hover {
  background: #0860ca !important;
  border-color: #0757ba !important;
  box-shadow: 0 3px 8px rgba(9, 105, 218, 0.3) !important;
}
[data-theme="light"] .card-action.secondary {
  background: white !important;
  color: #0969da !important;
  border-color: #0969da !important;
  box-shadow: 0 1px 3px rgba(9, 105, 218, 0.1) !important;
}
[data-theme="light"] .card-action.secondary:hover {
  background: #f6f8fa !important;
  color: #0860ca !important;
  border-color: #0860ca !important;
  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.2) !important;
}
[data-theme="light"] .card-action.coming-soon {
  background: #f6f8fa !important;
  color: #656d76 !important;
  border-color: #d0d7de !important;
}
[data-theme="light"] .card-action.coming-soon:hover {
  background: #f6f8fa !important;
  color: #656d76 !important;
  border-color: #d0d7de !important;
}
@media (max-width: 768px) {
  .bg-theme-filter .flex {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; 
    gap: 0 !important;
    padding: 0 !important;
  }
  .bg-theme-filter .flex::-webkit-scrollbar {
    display: none !important; 
  }
  .tab-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .tab-btn i {
    font-size: 11px !important;
    margin-right: 4px !important;
  }
  .card-action {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 140px !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    min-height: 32px !important;
    border-radius: 5px !important;
  }
  .card-action.primary {
    padding: 6px 14px !important;
    width: auto !important;
  }
  .preference-card {
    height: 165px !important;
    padding: 14px 10px 10px 10px !important;
  }
  .card-icon {
    font-size: 28px !important;
    margin: 0 0 8px 0 !important;
  }
  .card-title {
    font-size: 13px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  .card-status {
    font-size: 11px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }
  .preferences-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 10px 0 !important;
  }
  .tab-content-wrapper {
    padding: 16px 12px !important;
  }
}
.pill {
  display: inline-block !important;
  background: var(--bg-blue) !important;
  color: white !important;
  padding: 4px 8px !important;
  margin: 2px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}
.pill button {
  background: none !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  margin-left: 4px !important;
}
.checkbox-list label {
  display: block !important;
  padding: 6px 0 !important;
  color: var(--text-gray-200) !important;
  cursor: pointer !important;
}
.checkbox-list input[type="checkbox"] {
  margin-right: 8px !important;
}
[data-theme="light"] .checkbox-list label {
  color: #24292e !important;
}
@media (min-width: 769px) {
  footer {
    display: block !important;
  }
}
.signup-container {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.signup-card {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 600px;
  width: 100%;
  overflow: hidden;
}
.signup-header {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%);
  padding: 2rem;
  text-align: center;
  color: white;
}
.signup-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.signup-subtitle {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  opacity: 0.9;
}
.signup-content {
  padding: 2rem;
}
.premium-benefits {
  background: var(--bg-gray-900) !important;
  border: 1px solid var(--border-gray-600) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.benefits-title {
  color: #58a6ff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
}
.benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 0.75rem !important;
}
.benefit-item {
  color: var(--text-gray-100) !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
}
.benefit-item i {
  margin-right: 0.5rem !important;
}
.premium-terms {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.1), rgba(9, 105, 218, 0.1)) !important;
  border: 1px solid #58a6ff !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}
.premium-price {
  color: #58a6ff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}
.premium-details {
  color: var(--text-gray-300) !important;
  font-size: 0.9rem !important;
}
.signup-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}
.form-group {
  display: flex !important;
  flex-direction: column !important;
}
.form-label {
  color: var(--text-gray-100) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.95rem !important;
}
.form-input {
  background: var(--bg-gray-900) !important;
  border: 1px solid var(--border-gray-600) !important;
  border-radius: 8px !important;
  padding: 0.875rem 1rem !important;
  color: var(--text-gray-100) !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
}
.form-input:focus {
  outline: none !important;
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) !important;
}
.form-input::placeholder {
  color: var(--text-gray-400) !important;
}
.payment-section {
  border-top: 1px solid var(--border-gray-600) !important;
  padding-top: 1.5rem !important;
  margin-top: 1.5rem !important;
}
.payment-title {
  color: var(--text-gray-100) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
}
.payment-title i {
  color: #58a6ff !important;
  margin-right: 0.5rem !important;
}
.stripe-element-container {
  background: var(--bg-gray-900) !important;
  border: 1px solid var(--border-gray-600) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin: 0.5rem 0 1rem 0 !important;
}
.security-notice {
  display: flex !important;
  align-items: center !important;
  color: var(--text-gray-300) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1.5rem !important;
}
.security-notice i {
  margin-right: 0.5rem !important;
  color: #3fb950 !important;
}
.terms-agreement {
  margin-bottom: 1.5rem !important;
}
.terms-label {
  display: flex !important;
  align-items: flex-start !important;
  color: var(--text-gray-300) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
.terms-checkbox {
  margin-top: 0.125rem !important;
  margin-right: 0.75rem !important;
  accent-color: #58a6ff !important;
}
.terms-link {
  color: #58a6ff !important;
  text-decoration: underline !important;
}
.terms-link:hover {
  color: #79c0ff !important;
}
.signup-submit {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  padding: 1rem 2rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.signup-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 25px -5px rgba(88, 166, 255, 0.3) !important;
}
.signup-submit:active {
  transform: translateY(0) !important;
}
.signup-submit:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.loading-spinner {
  display: inline-block !important;
  animation: spin 1s linear infinite !important;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.security-info {
  text-align: center !important;
  color: var(--text-gray-300) !important;
  font-size: 0.875rem !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--border-gray-700) !important;
}
.google-section {
  border-top: 1px solid var(--border-gray-600) !important;
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  text-align: center !important;
}
.google-text {
  color: var(--text-gray-300) !important;
  margin-bottom: 1rem !important;
  font-size: 0.95rem !important;
}
.google-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-gray-900) !important;
  border: 1px solid var(--border-gray-600) !important;
  border-radius: 8px !important;
  padding: 0.875rem 1.5rem !important;
  color: var(--text-gray-100) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.google-button:hover {
  background: var(--bg-gray-800) !important;
  border-color: var(--border-gray-500) !important;
  transform: translateY(-1px) !important;
}
.google-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.75rem !important;
}
.error-text {
  color: #f85149 !important;
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
}
@media (max-width: 768px) {
  .signup-container {
    padding: 1rem 0.5rem;
  }
  .signup-content {
    padding: 1.5rem;
  }
  .signup-header {
    padding: 1.5rem;
  }
  .signup-title {
    font-size: 1.75rem;
  }
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}
.upgrade-container {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
}
.upgrade-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-width: 800px;
  width: 100%;
  overflow: hidden;
}
.upgrade-header {
  background: linear-gradient(135deg, #1f2937, #374151);
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}
.upgrade-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.upgrade-subtitle {
  font-size: 1.125rem;
  color: #d1d5db;
}
.upgrade-content {
  padding: 2rem;
}
.flash-messages {
  margin-bottom: 1.5rem;
}
.flash-message {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  border: 1px solid;
  font-size: 0.95rem;
  line-height: 1.5;
}
.flash-error {
  background-color: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #f85149;
}
.flash-success {
  background-color: rgba(46, 160, 67, 0.1);
  border-color: rgba(46, 160, 67, 0.3);
  color: #2ea043;
}
.flash-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
  color: #ffc107;
}
.flash-info {
  background-color: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
}
.flash-message button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.75rem;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.flash-message button:hover {
  opacity: 1;
}
.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.2);
}
.pricing-card-popular {
  border: 2px solid #58a6ff;
  transform: scale(1.02);
}
.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}
.badge-text {
  background: #58a6ff;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}
.pricing-card-header {
  text-align: center;
  margin-bottom: 2rem;
}
.pricing-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.pricing-card-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.pricing-card-period {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.pricing-card-savings {
  color: #22c55e;
  font-weight: 600;
  font-size: 0.95rem;
}
.pricing-card-features {
  margin-bottom: 2rem;
}
.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
.feature-item i {
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.pricing-card-button {
  width: 100%;
  background: #58a6ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pricing-card-button:hover {
  background: #4c94e0;
}
.pricing-card-button-popular {
  background: #58a6ff;
  box-shadow: 0 4px 14px 0 rgba(88, 166, 255, 0.39);
}
.pricing-card-button-popular:hover {
  background: #4c94e0;
  box-shadow: 0 6px 20px 0 rgba(88, 166, 255, 0.5);
}
.comparison-section {
  margin-bottom: 2rem;
}
.comparison-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 1.5rem;
}
.comparison-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--card-border);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}
.comparison-th {
  padding: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}
.comparison-td {
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--card-border);
}
.comparison-td.border-b-0 {
  border-bottom: none;
}
.back-link {
  text-align: center;
  margin-top: 2rem;
}
.back-link-text {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.back-link-text:hover {
  color: #4c94e0;
  text-decoration: underline;
}
.upgrade-modal-content {
  max-width: 800px;
}
.upgrade-modal-body {
  text-align: center;
  padding: 2rem;
}
.loading-spinner {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
.loading-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.loading-text {
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 768px) {
  .upgrade-container {
    padding: 1rem 0.5rem;
  }
  .upgrade-header {
    padding: 1.5rem;
  }
  .upgrade-title {
    font-size: 1.75rem;
  }
  .upgrade-content {
    padding: 1.5rem;
  }
  .pricing-plans {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pricing-card {
    padding: 1.5rem;
  }
  .pricing-card-popular {
    transform: none;
  }
  .comparison-th,
  .comparison-td {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
}
.plan-selection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.plan-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-card);
  cursor: pointer;
  transition: all 0.2s ease;
}
.plan-option:hover {
  border-color: var(--color-primary);
  background: var(--color-card-hover);
}
.plan-option.plan-popular {
  border-color: var(--color-primary);
  background: rgba(88, 166, 255, 0.1);
}
.plan-radio {
  margin-right: 1rem;
  accent-color: var(--color-primary);
}
.plan-details {
  flex: 1;
}
.plan-name {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}
.plan-price {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-primary);
}
.save-badge {
  background: #28a745;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}
.right-pane .article-mini-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-gray-600); border-radius: 6px; background: var(--bg-gray-800); }
.right-pane .mini-thumb { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
.right-pane .mini-meta { display: flex; flex-direction: column; }
.right-pane .mini-title { font-size: 12px; color: var(--text-gray-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right-pane .mini-sub { font-size: 11px; color: var(--text-gray-400); }
.right-pane #related-list .article-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.75rem;
  align-items: center;
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 0.5rem;
  padding: 0.5rem 0.6rem;
}
.right-pane #related-list .article-card .article-image {
  width: 60px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
}
.right-pane #related-list .article-card .article-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0.375rem !important;
}
.right-pane #related-list .article-card .article-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.right-pane #related-list .article-card .article-title {
  font-size: 0.85rem;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}
.right-pane #related-list .article-card .article-metadata {
  font-size: 0.8125rem;  
  color: var(--text-gray-400);
}
.right-pane #related-list .article-card .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.job-card { border: 1px solid var(--border-gray-600); border-radius: 8px; padding: 10px; background: var(--bg-gray-800); }
.job-title { font-weight: 700; color: var(--text-white); font-size: 0.95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-sub { color: var(--text-gray-400); font-size: 0.8rem; margin: 4px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-actions { display: flex; gap: 8px; }
.btn.btn-xs {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 32px;
  border-radius: 6px;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .2s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #2563eb; }
.switch input:checked + .slider:before { transform: translateX(18px); }
.source-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border-gray-600); background: var(--bg-gray-800); border-radius: 8px; padding: 8px 10px; }
.source-name { color: var(--text-gray-100); font-size: 0.9rem; }
.job-salary { 
  background: linear-gradient(135deg, #059669, #10b981); 
  color: white; 
  padding: 8px 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  font-weight: 500; 
}
.job-details { 
  background: var(--bg-gray-700); 
  padding: 8px 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  border-left: 3px solid var(--blue-500); 
  font-size: 0.9rem; 
}
.job-details span { 
  display: inline-block; 
  margin-right: 8px; 
}
.job-skills { 
  background: var(--bg-gray-700); 
  padding: 8px 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  border-left: 3px solid #f59e0b; 
}
.job-company { 
  background: var(--bg-gray-700); 
  padding: 8px 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  border-left: 3px solid #8b5cf6; 
}
.job-benefits { 
  background: var(--bg-gray-700); 
  padding: 8px 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  border-left: 3px solid #06b6d4; 
}
.job-deadline { 
  background: linear-gradient(135deg, #dc2626, #ef4444); 
  color: white; 
  padding: 6px 10px; 
  border-radius: 6px; 
  margin: 8px 0; 
  font-size: 0.9rem; 
  font-weight: 500; 
}
.job-description { 
  background: var(--bg-gray-800); 
  padding: 12px; 
  border-radius: 6px; 
  margin: 8px 0; 
  border: 1px solid var(--border-gray-600); 
}
.job-description p { 
  margin-bottom: 8px; 
  line-height: 1.5; 
}
.job-description p:last-child { 
  margin-bottom: 0; 
}
#back-to-utilities {
  margin-bottom: 1.5rem !important;
}
.stream-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.content-bar {
  width: 100%;
  background: rgba(10, 16, 29, 0.92);
  padding: 1rem 1.5rem;
  backdrop-filter: blur(6px);
}
.content-bar-search,
.content-bar #stream-search-host {
  flex: 0 1 380px;
  max-width: 420px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.content-bar .stream-chip-group {
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-top: 0;
}
:root.light-theme #stream-search-host:empty,
:root.light-theme .content-bar-search:empty,
#stream-search-host:empty,
.content-bar-search:empty {
  display: none;
}
.content-bar .stream-chip-cluster {
  flex-wrap: wrap;
}
.content-bar .chip-separator {
  display: inline-block;
}
.stream-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 220px;
}
.stream-search-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.stream-search-form .search-container {
  flex: 1 1 240px;
}
.stream-search-form .btn {
  flex: 0 0 auto;
  text-transform: none;
}
.stream-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-white);
  margin: 0;
}
.stream-subtitle {
  font-size: 0.8rem;
  margin: 0;
}
.stream-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  align-items: center;
}
.stream-chip-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stream-chip-group::-webkit-scrollbar {
  display: none;
}
.stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-300);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.stream-chip.secondary {
  border-color: rgba(88, 166, 255, 0.25);
  color: var(--text-gray-400);
  background: rgba(88, 166, 255, 0.05);
}
.stream-chip.secondary.active {
  background: linear-gradient(135deg, rgba(151, 197, 255, 0.25), rgba(88, 166, 255, 0.2));
  color: var(--text-white);
  border-color: var(--blue-500);
}
.chip-separator {
  width: 1px;
  background: var(--border-gray-700);
  align-self: stretch;
  margin: 0 0.25rem;
}
.stream-chip i {
  font-size: 0.85rem;
}
.stream-chip:hover {
  border-color: var(--blue-500);
  color: var(--text-white);
}
.stream-chip.active {
  background: linear-gradient(135deg, rgba(72, 123, 255, 0.2), rgba(88, 166, 255, 0.15));
  border-color: var(--blue-500);
  color: var(--text-white);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.25);
}
.stream-chip.premium-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 600;
  background: linear-gradient(120deg, rgba(250, 204, 21, 0.25), rgba(59, 130, 246, 0.2));
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: #f8fafc;
}
.stream-chip.premium-chip i {
  color: #facc15;
  font-size: 0.85rem;
}
.stream-chip.premium-chip .chip-label {
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
}
.stream-chip.premium-chip .chip-glow {
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(250, 204, 21, 0.35), transparent 70%);
  z-index: -1;
}
.chip-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85);
}
.chip-badge.visible {
  display: inline-flex;
}
.stream-chip.premium-chip:hover {
  border-color: rgba(250, 204, 21, 0.7);
  background: linear-gradient(120deg, rgba(250, 204, 21, 0.35), rgba(59, 130, 246, 0.25));
}
.stream-pane {
  display: none;
  margin-bottom: 1.5rem;
  flex-direction: column;
  min-height: 0;
}
.stream-pane.active {
  display: flex;
}
.my-stuff-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.my-stuff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.my-stuff-tab {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: #cbd5f5;
  cursor: pointer;
  transition: all 0.2s ease;
}
.my-stuff-tab.active {
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
  border-color: rgba(59, 130, 246, 0.55);
  color: #f8fafc;
}
.my-stuff-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
  padding-right: 8px;
}
.my-stuff-section {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.my-stuff-section[style*="display: block"] {
  display: flex !important;
}
.my-stuff-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  padding: 1.25rem;
  color: #cbd5f5;
}
.my-stuff-card.subtle {
  background: rgba(15, 23, 42, 0.6);
  border-style: dashed;
}
.premium-gate-copy {
  text-align: center;
  color: #cbd5f5;
  margin-bottom: 1rem;
}
.premium-gate-copy h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1rem;
  color: #f8fafc;
}
.premium-gate-copy p {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: #94a3b8;
}
.gate-icon {
  font-size: 2.5rem;
  color: #facc15;
  display: block;
  margin-bottom: 0.75rem;
}
.gate-feature-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #a5b4fc;
  font-size: 0.8rem;
}
.gate-feature-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.gate-feature-list i {
  color: #4ade80;
}
.my-stuff-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.my-stuff-placeholder {
  padding: 1rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.85rem;
  color: #94a3b8;
}
.my-cve-card,
.my-job-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 1rem;
  color: #e2e8f0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.my-cve-card:hover,
.my-job-card:hover,
.my-cve-card:focus-visible,
.my-job-card:focus-visible {
  border-color: rgba(59, 130, 246, 0.55);
  transform: translateY(-1px);
  outline: none;
}
.my-cve-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #cbd5f5;
}
.my-cve-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: #f8fafc;
}
.my-cve-meta {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}
.my-job-card h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f8fafc;
}
.my-job-meta {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: #94a3b8;
}
.my-job-posted {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}
.my-sources-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.my-source-pill {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #cbd5f5;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}
.stream-premium-gate {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  text-align: center;
}
.stream-premium-gate .gate-icon {
  font-size: 1.5rem;
  color: #facc15;
  margin-bottom: 0.75rem;
}
.stream-premium-gate h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 600;
}
.stream-premium-gate p {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin: 0.6rem 0 1rem;
}
.stream-premium-gate .btn {
  margin-top: 0.75rem;
}
.stream-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cve-filters {
  gap: 0.75rem;
  align-items: center;
}
.cve-severity-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cve-severity-chip {
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.25);
  color: var(--text-gray-200);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cve-severity-chip.active {
  background: rgba(88, 166, 255, 0.3);
  color: var(--text-white);
  border-color: var(--blue-500);
}
.active-filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.stream-select {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-100);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
}
.stream-select:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.stream-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stream-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-gray-400);
  border: 1px dashed var(--border-gray-600);
  border-radius: 8px;
}
.premium-placeholder {
  padding: 1.5rem;
  border: 1px dashed var(--border-gray-600);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.05);
}
.tab-description {
  color: var(--text-gray-400);
}
.free-limit-notice {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.08);
  color: var(--text-gray-200);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.free-limit-notice i {
  color: var(--blue-400, #3b82f6);
}
.jobs-stream-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.jobs-stream-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stream-card {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cve-card {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-700);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cve-card:hover {
  border-color: var(--blue-500);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.4);
}
.cve-card-header,
.cve-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.cve-id {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--text-gray-300);
}

/* KEV Badge - CISA Known Exploited Vulnerabilities */
.kev-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  white-space: nowrap;
}
.cve-card.is-kev {
  border-left: 3px solid #ef4444;
}
.light-theme .kev-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}
.light-theme .cve-card.is-kev {
  border-left-color: #dc2626;
}

/* KEV badge in detail title */
#detail-title .kev-badge {
  vertical-align: middle;
  margin-left: 0.25rem;
}

.cve-title {
  font-size: 1rem;
  color: var(--text-white);
  margin: 0;
}
.cve-summary {
  font-size: 0.88rem;
  color: var(--text-gray-300);
  line-height: 1.5;
}
.cve-meta {
  font-size: 0.8rem;
  color: var(--text-gray-400);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cve-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.cve-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-gray-300);
}
.cvss-score {
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.cve-cwe {
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.25);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.cve-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.3);
  color: var(--text-gray-100);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cve-save-btn:hover {
  background: rgba(88, 166, 255, 0.25);
  border-color: var(--blue-500);
}
.cve-save-btn.saved {
  background: var(--blue-500);
  border-color: rgba(88, 166, 255, 0.9);
  color: white;
}
.stream-card:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}
.stream-card h4 {
  font-size: 1rem;
  color: var(--text-white);
  margin-bottom: 0.4rem;
}
.stream-card-meta {
  font-size: 0.75rem;
  color: var(--text-gray-400);
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stream-card-summary {
  font-size: 0.85rem;
  color: var(--text-gray-300);
  line-height: 1.5;
}
.severity-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.severity-badge:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.severity-critical { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.45); }
.severity-high { background: rgba(249, 115, 22, 0.25); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.4); }
.severity-medium { background: rgba(234, 179, 8, 0.25); color: #fef08a; border: 1px solid rgba(234, 179, 8, 0.45); }
.severity-low { background: rgba(34, 197, 94, 0.25); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.4); }
.severity-unknown { background: rgba(148, 163, 184, 0.2); color: #cbd5f5; border: 1px solid rgba(148, 163, 184, 0.35); }
.detail-section {
  margin-bottom: 1rem;
  color: var(--text-gray-200);
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* CVE-specific meta grid styling */
.cve-meta-grid {
  background: var(--bg-gray-900);
  border: 1px solid var(--border-gray-700);
  border-radius: 8px;
  padding: 1rem;
  gap: 1rem;
}
.cve-meta-grid .meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cve-meta-grid .meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-gray-400);
}
.cve-meta-grid .meta-value {
  font-size: 0.9rem;
  color: var(--text-gray-100);
}

/* CVSS score styling - colored by severity */
.cvss-score {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.cvss-score.cvss-critical { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.cvss-score.cvss-high { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
.cvss-score.cvss-medium { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.cvss-score.cvss-low { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.cvss-score.cvss-unknown { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }

.cvss-vector {
  font-size: 0.7rem;
  color: var(--text-gray-400);
  word-break: break-all;
  display: block;
  margin-top: 0.25rem;
}

/* CWE link styling */
.cwe-link {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}
.cwe-link:hover {
  text-decoration: underline;
}

/* Pending data indicator */
.data-pending {
  font-size: 0.8rem;
  color: var(--text-gray-500);
  font-style: italic;
}

/* Meta row for vendors/products */
.meta-row {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}
.meta-row strong {
  color: var(--text-gray-300);
}

/* Light theme overrides for CVE detail */
.light-theme .cve-meta-grid {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.light-theme .cve-meta-grid .meta-label {
  color: #64748b;
}
.light-theme .cve-meta-grid .meta-value {
  color: #1e293b;
}
.light-theme .cvss-score.cvss-critical { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.light-theme .cvss-score.cvss-high { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.light-theme .cvss-score.cvss-medium { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.light-theme .cvss-score.cvss-low { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.light-theme .cvss-vector {
  color: #64748b;
}
.light-theme .cwe-link {
  color: #2563eb;
}
.light-theme .data-pending {
  color: #94a3b8;
}

.detail-list {
  list-style: disc inside;
  font-size: 0.85rem;
  color: var(--text-gray-300);
}
.detail-list a,
.detail-list a:visited {
  color: #60a5fa;
  text-decoration: underline;
}

.filter-chip {
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.35);
  color: var(--text-gray-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
}
.stream-sentinel {
  height: 1px;
  width: 100%;
}
.tutorial-card {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tutorial-meta {
  font-size: 0.75rem;
  color: var(--text-gray-400);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stream-card-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--border-gray-600);
  color: var(--text-gray-300);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  border-color: var(--blue-500);
  color: var(--text-white);
}
.context-card {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.8rem;
}
.context-card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-white);
}
.context-card-title i {
  color: var(--blue-500);
  font-size: 1rem;
}
.context-card-desc {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-gray-400);
  line-height: 1.4;
}
.your-space-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.your-space-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--blue-200);
}
.your-space-chip i {
  font-size: 0.85rem;
  color: var(--blue-300);
}
.your-space-context {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-gray-300);
  background: var(--bg-gray-800);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-gray-700);
  flex: 1 1 auto;
  min-width: 0;
}
.your-space-context i {
  color: var(--blue-400);
  font-size: 0.8rem;
}
.context-divider {
  color: var(--text-gray-500);
}
#stream-context-label {
  font-weight: 600;
  color: var(--text-white);
}
#stream-context-desc {
  color: var(--text-gray-400);
}
@media (max-width: 768px) {
  .your-space-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .your-space-context {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .content-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.9rem 1.05rem;
  }
  .content-bar-search,
  .content-bar #stream-search-host {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .content-bar .stream-chip-group {
    justify-content: flex-start;
  }
  .content-bar .chip-separator {
    display: none;
  }
}
@media (max-width: 768px) {
  .stream-header {
    gap: 0.75rem;
  }
  .stream-chip-group {
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  .stream-chip {
    flex: 0 0 auto;
  }
  .stream-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .jobs-stream-options {
    width: 100%;
  }
  .stream-select {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .home-shell {
    overflow-y: auto;
  }
  #inbox-page {
    overflow-y: visible;
    min-height: auto;
  }
  .inbox-content {
    min-height: auto;
  }
  .inbox-feed {
    height: auto;
  }
}
@media (max-width: 768px) {
  html, body {
    overflow-y: auto;
  }
}
.content-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.content-bottom .content-tags:empty {
  display: none;
}
.content-bottom .content-save-btn {
  margin-left: auto;
}
.content-bottom .content-tags {
  flex: 1 1 auto;
}
.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-gray-400);
}
.content-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.content-meta span + span::before {
  content: '\2022';
  margin-right: 0.35rem;
  opacity: 0.45;
}
.content-actions.content-bottom {
  flex-wrap: wrap;
}
.content-actions-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.global-search-suggestions::-webkit-scrollbar {
  height: 4px;
}
.global-search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 999px;
}
.sidebar-navigation {
  padding: 1.5rem 0;
}
.nav-section {
  margin-bottom: 2rem;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: var(--text-gray-300);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  transition: all 0.2s ease;
  cursor: pointer;
  margin: 0 0.75rem;
}
.nav-item:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue-500);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
  color: var(--blue-500);
  border-left: 3px solid var(--blue-500);
  margin-left: 0.75rem;
  padding-left: 1.25rem;
}
.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-label {
  flex: 1;
  white-space: nowrap;
}
.nav-badge {
  padding: 0.15rem 0.5rem;
  background: var(--blue-500);
  color: white;
  font-size: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}
.nav-premium-indicator {
  color: #fbbf24;
  font-size: 0.75rem;
  opacity: 0.8;
}
.nav-divider {
  height: 1px;
  background: var(--border-gray-600);
  margin: 1rem 1.5rem;
  opacity: 0.5;
}
.premium-nav-item {
  position: relative;
}
.premium-nav-item:not(.nav-item.active):hover .nav-premium-indicator {
  color: #fbbf24;
  opacity: 1;
}
:root.light-theme .nav-item {
  color: var(--text-gray-400);
}
:root.light-theme .nav-item:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue-600);
}
:root.light-theme .nav-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
  color: var(--blue-600);
  border-left-color: var(--blue-600);
}
:root.light-theme .nav-badge {
  background: var(--blue-600);
}
:root.light-theme .nav-divider {
  background: var(--border-gray-600);
}
.inbox-content.container-dark {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.inbox-main.container-dark,
.inbox-feed.container-dark {
  padding: 1.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.inbox-columns {
  gap: 0 !important;
}
.viewer-column.container-dark {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.inbox-main.inbox-feed,
.viewer-column {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  align-self: stretch !important;
  min-height: 100% !important;
}
.inbox-main.inbox-feed {
  background: rgba(10, 16, 29, 0.92) !important;
  border: 1px solid rgba(94, 106, 135, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.42) !important;
}
.viewer-column.container-dark {
  background: rgba(10, 16, 29, 0.92) !important;
  border: 1px solid rgba(94, 106, 135, 0.35) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.42) !important;
}
.viewer-column.container-dark .viewer-body {
  padding: 1.5rem;
  padding-bottom: 0;
  flex: 1;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(21, 32, 55, 0.95), rgba(12, 19, 34, 0.95));
}
.viewer-column.container-dark .viewer-detail {
  border: none;
  border-radius: 0;
  padding: 1.35rem;
  background: transparent;
  box-shadow: none;
  margin: 0;
}
@media (max-width: 1024px) {
  .inbox-content.container-dark,
  .inbox-main.container-dark,
  .inbox-feed.container-dark,
  .viewer-column.container-dark {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .viewer-column {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0 !important;
  }
  .inbox-columns {
    gap: 0 !important;
  }
}
@media (max-width: 768px) {
  .viewer-column {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .inbox-feed {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .inbox-content.container-dark {
    padding: 0 !important;
  }
}
@media (max-width: 640px) {
  .inbox-content,
  .inbox-main,
  .inbox-feed,
  .viewer-column {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}
.text-primary {
  color: var(--text-primary);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.text-secondary {
  color: var(--text-secondary);
  font-weight: 500;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.text-tertiary {
  color: var(--text-tertiary);
  font-weight: 400;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.text-muted {
  color: var(--text-muted);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
}
.text-subtle {
  color: var(--text-subtle);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-wide);
}
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.interactive-primary {
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.interactive-primary:hover {
  color: var(--color-primary-hover);
}
.interactive-primary:active {
  color: var(--color-primary-active);
}
.sidebar-navigation .nav-item {
  color: var(--text-tertiary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}
.sidebar-navigation .nav-item:hover {
  color: var(--color-primary) !important;
}
.sidebar-navigation .nav-item.active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}
.nav-item {
  color: var(--text-tertiary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}
.nav-item:hover {
  color: var(--color-primary) !important;
}
.nav-item.active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}
.nav-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-normal);
}
.logo-text {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.user-welcome {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.stream-header-title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-tight);
}
.tab-description {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
}
.content-card h3 {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.content-meta {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: var(--line-height-normal);
}
.btn {
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
  transition: all 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%);
  color: white;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%);
}
.btn-primary:active {
  background: linear-gradient(135deg, #0860ca 0%, #0757ba 100%);
}
.header-search-text-input {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-normal);
}
.header-search-text-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.inbox-sidebar {
  padding: var(--section-padding) !important;
}
.sidebar-navigation {
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-2xl);
}
.nav-section {
  margin-bottom: var(--space-2xl);
}
.nav-item {
  margin: var(--space-xs) var(--space-md) !important;
  padding: var(--space-md) var(--space-xl) !important;
}
.inbox-feed {
  padding: var(--space-md) !important; 
}
.stream-header {
  margin-bottom: var(--space-md); 
  padding: 0 !important;
}
.stream-header-bar {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
}
.stream-header-title {
  margin-bottom: var(--space-sm);
}
.tab-description {
  margin-top: var(--space-xs);
}
.content-card,
.article-card {
  margin-bottom: 12px !important;   
  padding: 0.85rem !important;      
  text-align: left !important;      
}
@media (max-width: 768px) {
  .article-card,
  .content-card {
    margin-bottom: 12px !important;   
    padding: 0.85rem !important;      
  }
  .article-metadata {
    font-size: 0.8125rem !important;  
  }
}
.content-card .content-card-header {
  margin: 0 !important;
  text-align: left !important;
}
.content-card .article-content {
  margin: 0 !important;
}
.content-card > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.category-tabs-container {
  background: var(--surface-primary);
  border-bottom: 2px solid var(--border-primary);
  padding: 0 16px;
  margin-bottom: 8px;
  position: relative;
}
.category-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-tabs::-webkit-scrollbar {
  display: none;
}
.category-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 10px 16px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
  margin-top: 8px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.category-tab i {
  font-size: 0.75rem;
  opacity: 0.8;
}
.category-tab:hover {
  background: var(--surface-elevated);
  color: var(--text-secondary);
  transform: translateY(-1px);
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
}
.category-tab.active {
  background: var(--bg-gray-800);
  color: var(--text-primary);
  border-color: var(--color-primary);
  box-shadow: 0 -4px 8px rgba(88, 166, 255, 0.2);
  z-index: 2;
  margin-top: 4px;
  padding-bottom: 14px;
}
.category-tab.active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bg-gray-800);
  z-index: 3;
}
.category-tab.active i {
  color: var(--color-primary);
  opacity: 1;
}
.category-tab .premium-indicator {
  color: var(--color-warning);
  font-size: 0.625rem;
  margin-left: 2px;
}
@media (max-width: 768px) {
  .category-tabs-container {
    padding: 0 8px;
  }
  .category-tab {
    padding: 14px 16px;
    font-size: 0.875rem;
    min-width: max-content;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .category-tab span {
    display: inline;
  }
  .category-tab.active {
    margin-top: 2px;
    padding: 14px 16px;
    background: var(--color-primary);
    color: white;
    font-weight: 600;
  }
  .category-tab.active i {
    color: white !important;
    opacity: 1 !important;
  }
}
.stream-header-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  min-height: 95px !important; 
  padding: 14px 18px !important;
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 6px !important;
}
.stream-header-title {
  flex: 1;
  min-width: 0;
}
.stream-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.stream-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--surface-elevated);
  padding: 2px 6px;
  border-radius: 3px;
}
.stream-control-select {
  width: 140px;
  padding: 6px 8px;
  font-size: 0.875rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
}
.active-filter-row {
  margin-bottom: 12px;
  min-height: 20px; 
}
.cve-severity-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  justify-content: flex-end;
}
.cve-severity-chip {
  padding: 3px 8px;
  font-size: 0.75rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cve-severity-chip:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}
.cve-severity-chip[data-severity="critical"] {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
}
.cve-severity-chip[data-severity="high"] {
  background: rgba(249, 115, 22, 0.25);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.4);
}
.cve-severity-chip[data-severity="medium"] {
  background: rgba(234, 179, 8, 0.25);
  color: #fef08a;
  border: 1px solid rgba(234, 179, 8, 0.45);
}
.cve-severity-chip[data-severity="low"] {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.cve-severity-chip[data-severity="critical"]:hover {
  background: rgba(239, 68, 68, 0.35);
}
.cve-severity-chip[data-severity="high"]:hover {
  background: rgba(249, 115, 22, 0.35);
}
.cve-severity-chip[data-severity="medium"]:hover {
  background: rgba(234, 179, 8, 0.35);
}
.cve-severity-chip[data-severity="low"]:hover {
  background: rgba(34, 197, 94, 0.35);
}
.cve-severity-chip.active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.cve-controls {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-height: 70px;
}
.cve-controls-row-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: nowrap; 
}
.cve-controls-row-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start; 
  width: 100%;
}
.cve-stream-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cve-stream-search .btn {
  white-space: nowrap;
}
[data-stream-id="vulnerabilities"] .stream-header-bar {
  min-height: 100px !important;
}
@media (max-width: 768px) {
  .stream-header-bar {
    flex-direction: column;
    align-items: stretch;
    min-height: auto !important;
    padding: 6px 10px !important; 
    margin-bottom: 6px !important; 
  }
  .stream-header-title {
    margin-bottom: 4px !important; 
  }
  .stream-header-title .stream-title-row {
    font-size: 13px !important; 
    line-height: 1.2 !important;
    gap: 4px !important;
  }
  .stream-header-title .text-xs {
    display: none !important; 
  }
  .stream-header-controls {
    margin-top: 0 !important; 
    flex-direction: column !important; 
    gap: 4px !important; 
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .stream-control-input,
  .search-text-input {
    padding: 0.5rem 1rem 0.5rem 1rem !important;
  padding-left: 1rem !important;
    font-size: 18px !important;
    border-radius: 0.5rem !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  .stream-select,
  .stream-control-select {
    padding: 4px 6px !important; 
    font-size: 12px !important; 
    min-height: 32px !important; 
    border-radius: 4px !important;
  }
  .btn.btn-xs {
    padding: 4px 8px !important; 
    font-size: 11px !important; 
    min-height: 32px !important; 
    border-radius: 4px !important;
  }
  .latest-controls,
  .popular-controls,
  .sources-controls,
  .cve-controls,
  .jobs-controls,
  .tutorials-controls,
  .breach-controls {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .latest-stream-search,
  .popular-stream-search,
  .sources-stream-search,
  .cve-stream-search,
  .jobs-stream-search,
  .tutorials-stream-search {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .latest-stream-search input,
  .popular-stream-search input,
  .sources-stream-search input,
  .cve-stream-search input,
  .jobs-stream-search input,
  .tutorials-stream-search input {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .latest-stream-options,
  .popular-stream-options,
  .sources-stream-options,
  .jobs-stream-options,
  .tutorials-stream-options {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .latest-stream-options select,
  .popular-stream-options select,
  .sources-stream-options select,
  .jobs-stream-options select,
  .tutorials-stream-options select {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .cve-controls-row-1,
  .cve-controls-row-2 {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .cve-severity-chips {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .cve-severity-chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    min-height: 32px !important;
  }
  .inbox-content {
    padding: 0 4px !important; 
  }
  .inbox-columns {
    gap: 0 !important; 
    padding: 0 !important;
  }
  .inbox-main,
  .inbox-feed {
    padding: 0 !important; 
    margin: 0 !important;
  }
  .articles-column,
  #clusterize-content,
  #clusterize-content-popular,
  #clusterize-content-sources {
    padding: 0 4px !important; 
  }
  #stream-content {
    height: auto !important; 
    overflow-y: visible !important; 
    max-height: none !important; 
  }
  .stream-pane {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  #clusterize-scroll,
  #clusterize-scroll-popular,
  #clusterize-scroll-sources {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .category-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
    -webkit-overflow-scrolling: touch !important; 
    scroll-behavior: smooth !important;
  }
  .category-tabs::-webkit-scrollbar {
    display: none !important; 
  }
  .category-tab {
    flex-shrink: 0 !important;
    min-width: max-content !important;
    padding: 14px 16px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
  }
  .stream-title-row span {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  .stream-count {
    font-size: 12px !important;
    opacity: 0.8 !important;
  }
  .load-more-btn,
  .infinite-scroll-loading,
  .infinite-scroll-end {
    margin: 12px 4px !important;
    padding: 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
  .article-card {
    transition: transform 0.15s ease !important; 
    will-change: transform !important; 
  }
  .article-card:hover {
    transform: none !important; 
  }
  .article-card:active {
    transform: scale(0.98) !important; 
  }
  .article-card {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(135deg,
      rgba(22, 27, 34, 0.95),
      rgba(19, 23, 28, 0.92)) !important;
  }
  :root.light-theme .article-card {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  }
  :root.light-theme .article-card .article-title {
    color: #0f172a !important; 
  }
  :root.light-theme .article-card .article-summary,
  :root.light-theme .article-card .article-content p {
    color: #4b5563 !important; 
  }
  :root.light-theme .article-card .publish-date,
  :root.light-theme .article-card .article-date {
    color: #6b7280 !important; 
  }
  :root.light-theme .article-card .article-source {
    color: #3b82f6 !important;
  }
  .stream-control-input,
  .stream-control-select {
    width: auto;
    min-width: 120px;
    flex: 1;
  }
  .cve-controls {
    min-width: auto;
    flex-direction: column;
  }
  .cve-severity-chips {
    justify-content: flex-start;
    margin-bottom: 8px;
  }
}
.content-card h3 {
  margin-bottom: 1px !important; 
  line-height: 1.1 !important;   
  font-size: 0.9rem !important;  
}
.content-meta {
  margin-top: var(--space-md) !important;
  margin-bottom: var(--space-sm) !important;
  gap: var(--space-sm) !important;
}
.content-actions {
  margin-top: 3px !important;       
  padding-top: 2px !important;      
  gap: var(--space-xs) !important;  
}
.viewer-column {
  padding: var(--section-padding) !important;
}
.viewer-detail {
  padding: 0 !important;
}
.viewer-body h1 {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-tight);
}
.viewer-actions {
  margin-top: var(--space-xl);
  gap: var(--space-sm);
}
.metric-cards {
  gap: var(--space-lg) !important;
  margin-bottom: var(--space-2xl);
}
.metric-card {
  padding: var(--space-xl) !important;
}
.trend-card {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl) !important;
}
.trend-header {
  margin-bottom: var(--space-lg);
}
.trend-meta {
  margin-top: var(--space-md);
  gap: var(--space-sm);
}
.content-bar-search {
  margin-bottom: var(--space-lg);
}
.stream-search-container {
  padding: var(--space-md) var(--space-lg) !important;
}
.empty-state {
  padding: var(--space-4xl) var(--space-2xl) !important;
  text-align: center;
}
.empty-state p {
  margin-bottom: var(--space-lg);
}
.usage-counter {
  margin-bottom: var(--space-2xl) !important;
  padding: var(--space-lg) var(--space-xl) !important;
}
.divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: var(--space-lg) 0;
}
.divider-light {
  background: var(--border-secondary);
  opacity: 0.3;
}
.divider-strong {
  background: var(--border-primary);
  opacity: 0.6;
}
.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--border-subtle);
  margin: 0 var(--space-lg);
}
.nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent 100%);
  margin: var(--space-lg) var(--space-md);
  opacity: 0.4;
}
.content-card {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  background: var(--surface-primary) !important;
  transition: all 0.2s ease;
  position: relative;
}
.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 30%, var(--color-primary) 70%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 8px 8px 0 0;
}
.content-card:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}
.content-card:hover::before {
  opacity: 0.6;
}
.section-separator {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 15%, var(--border-subtle) 85%, transparent 100%);
  margin: var(--space-3xl) 0;
  opacity: 0.3;
}
.section-separator-strong {
  background: linear-gradient(90deg, transparent 0%, var(--border-primary) 25%, var(--border-primary) 75%, transparent 100%);
  opacity: 0.5;
}
.stream-header-bar {
  border-bottom: 1px solid var(--border-subtle) !important;
  position: relative;
}
.stream-header-bar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 30%);
  opacity: 0.4;
}
.viewer-column {
  border-left: 1px solid var(--border-subtle) !important;
  position: relative;
}
.viewer-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--color-primary) 0%, transparent 20%, transparent 80%, var(--color-primary) 100%);
  opacity: 0.3;
}
.inbox-sidebar {
  border-right: 1px solid var(--border-subtle) !important;
  position: relative;
}
.inbox-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--border-primary) 25%, var(--border-primary) 75%, transparent 100%);
  opacity: 0.2;
}
.metric-card {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  background: var(--surface-secondary) !important;
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.6;
}
.trend-card {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  background: var(--surface-secondary) !important;
  position: relative;
}
.trend-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  opacity: 0.4;
}
.content-meta span + span::before {
  content: '•';
  margin: 0 var(--space-xs);
  color: var(--text-muted);
  opacity: 0.5;
}
.empty-state {
  border: 2px dashed var(--border-subtle) !important;
  border-radius: 12px !important;
  background: var(--surface-secondary) !important;
  position: relative;
}
.empty-state::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 2px solid var(--border-subtle);
  border-radius: 50%;
  opacity: 0.2;
}
.usage-counter {
  border: 1px solid var(--border-primary) !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
}
.usage-counter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-warning) 50%, var(--color-danger) 100%);
  opacity: 0.8;
}
:root.light-theme .content-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
:root.light-theme .content-card:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
}
:root.light-theme .content-card h3,
:root.light-theme .content-card .content-title,
:root.light-theme .content-card .article-title {
  color: #0f172a !important; 
}
:root.light-theme .content-card p,
:root.light-theme .content-card .content-text,
:root.light-theme .content-card .article-content {
  color: #4b5563 !important; 
}
:root.light-theme .content-card .content-meta,
:root.light-theme .content-card .article-meta {
  color: #6b7280 !important; 
}
:root.light-theme .metric-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-left-color: #2563eb !important; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
}
:root.light-theme .trend-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-left: 4px solid #10b981 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
}
:root.light-theme .empty-state {
  background: rgba(241, 245, 249, 0.6) !important;
}
.content-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0);
}
.content-card:hover {
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
  background: var(--surface-elevated) !important;
}
.content-card:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2), var(--shadow-lg) !important;
  outline: none;
}
.nav-item {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(0);
}
.nav-item:hover {
  background: rgba(88, 166, 255, 0.12) !important;
  color: var(--color-primary) !important;
  transform: translateX(3px);
  border-radius: 6px !important;
}
.nav-item:focus {
  background: rgba(88, 166, 255, 0.15) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3) !important;
  outline: none;
  border-radius: 6px !important;
}
.nav-item.active:hover {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.25) 0%, rgba(88, 166, 255, 0.15) 100%) !important;
  transform: translateX(4px);
}
.btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  transition: left 0.5s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
.btn:hover::before {
  left: 100%;
}
.btn:focus {
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.4), var(--shadow-md) !important;
  outline: none;
}
.btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%) !important;
  box-shadow: 0 4px 14px rgba(88, 166, 255, 0.4) !important;
}
.btn-primary:active {
  background: linear-gradient(135deg, #0860ca 0%, #0757ba 100%) !important;
}
.header-search-text-input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.header-search-box {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.header-search-box:focus-within {
  background: rgba(88, 166, 255, 0.08) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}
.header-search-text-input:focus {
  outline: none;
  color: var(--text-primary) !important;
}
a {
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--color-primary-hover) !important;
}
a:focus {
  color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.logo-link {
  transition: all 0.3s ease !important;
  transform: scale(1);
}
.logo-link:hover {
  transform: scale(1.02);
}
.logo-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
.theme-toggle-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: rotate(0deg) scale(1);
  border-radius: 50% !important;
  position: relative;
  overflow: hidden;
}
.theme-toggle-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.theme-toggle-btn:hover {
  transform: rotate(180deg) scale(1.1);
  color: var(--color-primary) !important;
}
.theme-toggle-btn:hover::before {
  opacity: 0.1;
}
.theme-toggle-btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.metric-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0);
}
.metric-card:hover {
  border-color: var(--border-primary) !important;
  background: var(--surface-elevated) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
.trend-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0);
}
.trend-card:hover {
  border-color: var(--border-primary) !important;
  background: var(--surface-elevated) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
.content-save-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: scale(1);
  position: relative;
  overflow: hidden;
}
.content-save-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.3;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.content-save-btn:hover {
  transform: scale(1.05);
  color: var(--color-primary) !important;
}
.content-save-btn:hover::after {
  width: 100%;
  height: 100%;
}
.content-save-btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.content-save-btn.saved:hover {
  color: var(--color-accent) !important;
}
.stream-chip {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0);
}
.stream-chip:hover {
  background: var(--color-primary) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}
.stream-chip:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.usage-counter {
  transition: all 0.3s ease !important;
}
.usage-counter:hover {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-md) !important;
}
:root.light-theme .content-card:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15) !important;
}
:root.light-theme .nav-item:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  color: var(--color-primary) !important;
}
:root.light-theme .nav-item.active:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
}
:root.light-theme .btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}
@media (prefers-reduced-motion: reduce) {
  .content-card,
  .nav-item,
  .btn,
  .theme-toggle-btn,
  .metric-card,
  .trend-card,
  .content-save-btn,
  .stream-chip,
  .logo-link {
    transition-duration: 0.01s !important;
    animation-duration: 0.01s !important;
  }
  .content-card:hover,
  .nav-item:hover,
  .btn:hover,
  .theme-toggle-btn:hover,
  .metric-card:hover,
  .trend-card:hover,
  .content-save-btn:hover,
  .stream-chip:hover,
  .logo-link:hover {
    transform: none !important;
  }
}
.mobile-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-overlay);
  z-index: 9999;
  display: none;
}
.mobile-search-overlay.active {
  display: flex !important;
  flex-direction: column;
}
@media (max-width: 768px) {
  .w-96.mx-4 {
    display: none !important;
  }
  .mobile-search-trigger {
    display: none !important;
  }
  .mobile-search-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-gray-800);
    border-bottom: 1px solid var(--border-primary);
    gap: 12px;
  }
  .mobile-search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    color: white;
    font-size: 16px; 
    outline: none;
  }
  .mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  .mobile-search-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }
  .mobile-search-results {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: var(--bg-gray-900);
  }
}
@media (max-width: 768px) {
  .category-tabs-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .category-tabs {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .category-tabs::-webkit-scrollbar {
    display: none;
  }
  .category-tab {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    border-radius: 8px !important;
  }
  .category-tab {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .category-tab i {
    font-size: 12px !important;
  }
  .category-tab span {
    font-size: 12px !important;
  }
  .category-tab .premium-indicator {
    font-size: 9px !important;
    margin-left: 2px !important;
  }
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 16px;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-link {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    min-height: 40px !important;
  }
  .my-stuff-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px !important;
  }
  .my-stuff-nav::-webkit-scrollbar {
    display: none;
  }
  .my-stuff-tab {
    flex-shrink: 0 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    min-height: 40px !important;
  }
  .nav-tab .tab-count,
  .nav-tab .tab-metric,
  .category-tab .tab-count,
  .category-tab .tab-metric {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .inbox-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .inbox-columns {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  .inbox-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    overflow-x: hidden !important;
  }
  #stream-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .stream-pane {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .content-bar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 8px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }
  .articles-column,
  #clusterize-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .content-card,
  .article-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;     
    padding: 0.85rem !important;        
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .article-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .content-card h3,
  .content-card h2 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .content-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }
  .article-card {
    padding: 0.85rem !important;        
    margin-bottom: 12px !important;     
  }
  .article-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }
  .article-summary,
  .article-excerpt {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .article-meta {
    font-size: 11px !important;
    gap: 8px !important;
  }
  .article-tags,
  .content-bottom {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .tag-pill {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  .content-save-btn,
  .btn-sm,
  .save-btn {
    min-height: 40px !important;
    min-width: 44px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .content-save-btn span {
    font-size: 11px !important;
  }
  .category-tabs-container {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    position: relative !important;
  }
  .category-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: calc(100vw - 8px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%) !important;
  }
  .category-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .category-tabs-container {
    position: relative !important;
    overflow: hidden !important; 
  }
  .category-tabs {
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
    padding-bottom: 4px !important;
  }
  .category-tabs::-webkit-scrollbar {
    display: none !important; 
  }
  .category-tab {
    flex-shrink: 0 !important;
    min-width: auto !important; 
    padding: 8px 14px !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    text-align: center !important;
    height: 32px !important;
    border-radius: 16px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
  }
  .category-tab:focus {
    outline: 2px solid var(--text-link) !important;
    outline-offset: 2px !important;
  }
  .category-tab.active:focus {
    outline: 2px solid var(--text-link) !important;
    outline-offset: 2px !important;
  }
  .category-tab span {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .category-tab i {
    font-size: 11px !important;
    opacity: 0.8 !important;
  }
  .category-tabs-container::before,
  .category-tabs-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
  .category-tabs-container::before {
    left: 0 !important;
    background: linear-gradient(90deg,
      var(--bg-primary) 0%,
      rgba(var(--bg-primary-rgb), 0.9) 50%,
      rgba(var(--bg-primary-rgb), 0.3) 80%,
      transparent 100%) !important;
  }
  .category-tabs-container::after {
    right: 0 !important;
    background: linear-gradient(270deg,
      var(--bg-primary) 0%,
      rgba(var(--bg-primary-rgb), 0.9) 50%,
      rgba(var(--bg-primary-rgb), 0.3) 80%,
      transparent 100%) !important;
  }
  .category-tabs-container {
    position: relative !important;
  }
  .category-tabs-container[data-scrollable="true"]::after {
    content: '›' !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: var(--text-primary) !important;
    opacity: 0.7 !important;
    font-weight: bold !important;
    animation: slideHint 1.5s ease-in-out infinite !important;
    z-index: 11 !important;
  }
  @keyframes slideHint {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.7; }
    50% { transform: translateY(-50%) translateX(3px); opacity: 1; }
  }
  .content-save-btn {
    max-width: 70px !important;
    box-sizing: border-box !important;
    position: relative !important;
    right: 0 !important;
    transform: none !important;
    margin-right: 0 !important;
    contain: layout style !important;
  }
  .content-save-btn span {
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .article-content,
  .content-item {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  .mobile-article-detail-view {
    width: 100% !important;
    background: var(--bg-primary) !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
  }
  .mobile-inbox-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 8px 8px 0 0 !important;
  }
  .mobile-back-btn {
    background: none !important;
    border: none !important;
    color: var(--text-link) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background-color 0.2s ease !important;
  }
  .mobile-back-btn:hover {
    background: var(--bg-hover) !important;
  }
  .mobile-inbox-content {
    padding: 0 !important;
    background: var(--bg-primary) !important;
    border-radius: 0 0 8px 8px !important;
  }
  #mobile-article-detail-clone {
    padding: 16px !important;
    border-radius: 0 0 8px 8px !important;
  }
  .mobile-breach-detail {
    padding: 16px !important;
    background: var(--bg-primary) !important;
    border-radius: 0 0 8px 8px !important;
  }
  .mobile-breach-detail .detail-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }
  .mobile-breach-detail .detail-metadata {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  .mobile-breach-detail .detail-source {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
  }
  .mobile-breach-detail .detail-meta {
    font-size: 0.8125rem !important;
    color: var(--text-gray-400) !important;
  }
  .mobile-breach-detail .detail-summary {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    margin-bottom: 16px !important;
  }
  .mobile-article-detail-view,
  .articles-list,
  #articles-container {
    transition: opacity 0.2s ease !important;
  }
  .content-item * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .content-card,
  .content-item {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
  }
  .content-title,
  .article-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .content-preview,
  .article-preview {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .content-meta,
  .article-meta {
    font-size: 11px !important;
  }
  .job-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  .job-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .job-company,
  .job-location {
    font-size: 13px !important;
  }
  .content-meta-secondary,
  .content-tags-overflow,
  .article-tags-overflow,
  .engagement-badge {
    display: none !important;
  }
  .content-actions,
  .article-actions {
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .stream-section {
    padding: 0 !important;
  }
  .stream-content {
    padding: 8px !important;
  }
  .right-panel {
    padding: 12px !important;
  }
  .right-pane {
    padding: 8px !important;
  }
  .modal-content {
    margin: 16px !important;
    border-radius: 12px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }
  .modal-header {
    padding: 16px !important;
  }
  .modal-body {
    padding: 16px !important;
  }
  .form-control {
    min-height: 40px !important;
    font-size: 16px !important; 
  }
  .list-group-item {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  .site-stats,
  .metrics-section,
  .stats-container {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .header-container {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .logo-link {
    font-size: 18px !important;
    flex-shrink: 0;
  }
  .desktop-nav {
    gap: 8px !important;
  }
  .theme-toggle-btn {
    min-width: 44px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }
  .user-welcome {
    font-size: 12px !important;
    display: none !important; 
  }
  .hamburger-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
  }
}
@media (max-width: 768px) {
  .logo-link {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 0 !important;
  }
  .logo-link svg {
    width: 44px !important;
    height: 40px !important;
    min-width: 44px !important;
    min-height: 40px !important;
  }
  #mobile-search-trigger {
    display: none !important;
  }
  input[type="text"],
  input[type="search"],
  select,
  #latest-stream-search,
  #latest-stream-search-btn,
  #latest-stream-timeframe,
  #latest-stream-source,
  .search-text-input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0.5rem 1rem 0.5rem 1rem !important;
  padding-left: 1rem !important;
    font-size: 18px !important;
    border-radius: 0.5rem !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  button[type="submit"],
  .search-btn,
  #latest-stream-search-btn {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }
  .source-link {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 8px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    background: var(--surface-secondary) !important;
    border: 1px solid var(--border-primary) !important;
  }
  .source-link:hover {
    background: var(--surface-elevated) !important;
    border-color: var(--color-primary) !important;
  }
  button,
  .btn,
  .save-btn,
  .content-save-btn,
  [role="button"] {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    touch-action: manipulation !important;
  }
  .category-tab {
    min-height: 40px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
  }
  #theme-toggle,
  .theme-toggle-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-link,
  .mobile-menu-item {
    min-height: 40px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
  }
  a,
  button,
  input,
  select,
  textarea,
  [tabindex="0"],
  [role="button"] {
    touch-action: manipulation !important;
  }
  input[type="hidden"] {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .category-tabs-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; 
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .category-tabs-container::-webkit-scrollbar {
    display: none !important;
  }
  .category-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: max-content !important; 
    min-width: 100% !important;
    overflow-x: visible !important; 
    overflow-y: hidden !important;
  }
  .category-tab {
    flex-shrink: 0 !important; 
    min-width: max-content !important; 
    padding: 12px 16px !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .category-tab span {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .category-tab i {
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  .category-tab .premium-indicator {
    font-size: 9px !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
  }
  .category-tab:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    scroll-margin-left: 8px !important;
    scroll-margin-right: 8px !important;
  }
  .category-tab.active {
    scroll-margin-left: 8px !important;
    scroll-margin-right: 8px !important;
  }
  .category-tabs-container {
    position: relative !important;
  }
  .category-tabs-container.can-scroll-left::before,
  .category-tabs-container.can-scroll-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .category-tabs-container.can-scroll-left::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary) 0%, var(--bg-primary) 50%, transparent 100%);
  }
  .category-tabs-container.can-scroll-right::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary) 0%, var(--bg-primary) 50%, transparent 100%);
  }
  .category-tab:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    scroll-margin-left: 8px !important;
    scroll-margin-right: 8px !important;
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  }
  .category-tabs-container {
    scroll-behavior: smooth !important;
  }
}
@media (max-width: 768px) {
  .article-card {
    display: flex !important;
    flex-direction: row !important;
    padding: 0.85rem !important;        
    margin-bottom: 12px !important;     
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    gap: 0.5rem !important;
    min-height: 130px !important;
    height: auto !important;
  }
  .article-card:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  .article-image {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0;
  }
  .article-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0.375rem;
  }
  .article-content {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 80px !important;
  }
  .article-content h3 {
    font-size: 0.95rem !important;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .article-content p {
    font-size: 0.8rem !important;
    color: #9ca3af;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .article-metadata {
    display: block !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.8125rem !important;  
  }
  .article-metadata a {
    color: #60a5fa !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline !important;
  }
  .article-content {
    display: flex !important;
    flex-direction: column !important;
  }
  .article-content > :last-child {
    margin-top: auto !important;
  }
  .article-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    flex: 1 !important;
    align-items: center !important;
  }
  .content-save-btn {
    display: flex !important;
    align-items: center !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
  }
  .article-card .article-tags {
    height: auto !important;
    overflow: visible !important;
  }
  .article-card .content-bottom {
    min-height: 24px !important;
    height: auto !important;
  }
  .article-card .content-save-btn {
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .content-card--breach,
  .stream-card.content-card--breach {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; 
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 130px !important;
    height: auto !important;
    text-align: left !important;
  }
  .content-card--breach .btn.btn-xs,
  .stream-card.content-card--breach .btn.btn-xs {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
  }
  .content-card--breach *,
  .stream-card.content-card--breach * {
    text-align: left !important;
  }
  .stream-card.content-card--breach h4,
  .stream-card.content-card--breach .content-title {
    text-align: left !important;
    margin-bottom: 0.25rem !important;
  }
  .stream-card.content-card--breach p,
  .stream-card.content-card--breach .content-summary {
    text-align: left !important;
    margin-bottom: 0.25rem !important;
  }
  .content-card--breach:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .content-card--breach .content-card-header,
  .stream-card.content-card--breach .content-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important; 
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
  }
  .content-card--breach .content-icon,
  .stream-card.content-card--breach .content-icon {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  .content-card--breach .content-card-header img,
  .stream-card.content-card--breach .content-card-header img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }
  .content-card--breach .content-card-header-body,
  .stream-card.content-card--breach .content-card-header-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important; 
    text-align: left !important;
  }
  .content-card--breach .content-source-name,
  .stream-card.content-card--breach .content-source-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0.25rem 0 !important;
    font-size: 0.75rem !important;
  }
  .content-card--breach .content-meta,
  .content-card--breach .content-source-meta,
  .stream-card.content-card--breach .content-meta,
  .stream-card.content-card--breach .content-source-meta {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
  }
  .content-card--breach .content-meta span,
  .stream-card.content-card--breach .content-meta span {
    display: inline !important;
    text-align: left !important;
  }
  .content-card--breach .content-source-name a,
  .content-card--breach .content-source-name-text,
  .content-card--breach .source-link,
  .stream-card.content-card--breach .content-source-name a,
  .stream-card.content-card--breach .content-source-name-text,
  .stream-card.content-card--breach .source-link {
    color: #60a5fa !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline !important;
    text-align: left !important;
  }
  .content-card--breach .content-title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .content-card--breach .content-summary {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .content-card--breach .content-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
  }
  .content-card--breach .content-actions-left {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    align-items: center !important;
  }
  .content-card--breach .content-save-btn {
    display: flex !important;
    align-items: center !important;
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .cve-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 130px !important;
    height: auto !important;
    text-align: left !important;
  }
  .cve-card .btn.btn-xs {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
  }
  .cve-card * {
    text-align: left !important;
  }
  .cve-card:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .cve-card .content-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
  }
  .cve-card .content-icon {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  .cve-card .content-card-header img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }
  .cve-card .content-card-header-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
    text-align: left !important;
  }
  .cve-card .content-source-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0.25rem 0 !important;
    font-size: 0.75rem !important;
  }
  .cve-card .content-meta,
  .cve-card .content-source-meta {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
  }
  .cve-card .content-meta span {
    display: inline !important;
    text-align: left !important;
  }
  .cve-card .cve-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .cve-card .cve-id {
    font-size: 0.8rem !important;
    text-align: left !important;
  }
  .cve-card .severity-badge {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
  }
  .cve-card .content-title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .cve-card .content-bottom {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: auto !important;
  }
  .cve-card .cve-save-btn {
    display: flex !important;
    align-items: center !important;
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 3px !important;
    color: #60a5fa !important;
    flex-shrink: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .tutorial-card,
  .content-card--tutorial {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 130px !important;
    height: auto !important;
    text-align: left !important;
  }
  .tutorial-card .btn.btn-xs,
  .content-card--tutorial .btn.btn-xs {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
  }
  .tutorial-card *,
  .content-card--tutorial * {
    text-align: left !important;
  }
  .tutorial-card:active,
  .content-card--tutorial:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .tutorial-card .content-card-header,
  .content-card--tutorial .content-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
  }
  .tutorial-card .content-icon,
  .content-card--tutorial .content-icon {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  .tutorial-card .content-card-header img,
  .content-card--tutorial .content-card-header img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }
  .tutorial-card .content-card-header-body,
  .content-card--tutorial .content-card-header-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
    text-align: left !important;
  }
  .tutorial-card .content-source-name,
  .content-card--tutorial .content-source-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0.25rem 0 !important;
    font-size: 0.75rem !important;
  }
  .tutorial-card .content-meta,
  .tutorial-card .content-source-meta,
  .content-card--tutorial .content-meta,
  .content-card--tutorial .content-source-meta {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
  }
  .tutorial-card .content-meta span,
  .content-card--tutorial .content-meta span {
    display: inline !important;
    text-align: left !important;
  }
  .tutorial-card .content-title,
  .content-card--tutorial .content-title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .tutorial-card .content-summary,
  .content-card--tutorial .content-summary {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .tutorial-card .content-tags,
  .content-card--tutorial .content-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  .tutorial-card .content-actions,
  .content-card--tutorial .content-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
  }
  .tutorial-card .content-actions-left,
  .content-card--tutorial .content-actions-left {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    align-items: center !important;
  }
  .tutorial-card .content-save-btn,
  .content-card--tutorial .content-save-btn {
    display: flex !important;
    align-items: center !important;
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .content-card--job,
  .stream-card.content-card--job {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 130px !important;
    height: auto !important;
    text-align: left !important;
  }
  .content-card--job:active,
  .stream-card.content-card--job:active {
    transform: scale(0.98) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
  .content-card--job .btn.btn-xs,
  .stream-card.content-card--job .btn.btn-xs {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
  }
  .content-card--job *,
  .stream-card.content-card--job * {
    text-align: left !important;
  }
  .content-card--job .content-card-header,
  .stream-card.content-card--job .content-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.25rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .content-card--job .content-icon,
  .stream-card.content-card--job .content-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .content-card--job .content-icon img,
  .stream-card.content-card--job .content-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 2px !important;
  }
  .content-card--job .content-card-header-body,
  .stream-card.content-card--job .content-card-header-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .content-card--job .article-metadata,
  .stream-card.content-card--job .article-metadata {
    font-size: 0.6875rem !important;
    color: #9ca3af !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .content-card--job .content-title,
  .stream-card.content-card--job .content-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin: 0.25rem 0 !important;
    line-height: 1.3 !important;
    color: inherit !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .content-card--job .content-subtitle,
  .stream-card.content-card--job .content-subtitle {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin: 0.125rem 0 0.25rem 0 !important;
    line-height: 1.3 !important;
  }
  .content-card--job .content-summary,
  .stream-card.content-card--job .content-summary {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin: 0.25rem 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }
  .content-card--job .content-tags,
  .stream-card.content-card--job .content-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    align-items: center !important;
  }
  .content-card--job .tag-pill,
  .stream-card.content-card--job .tag-pill {
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    white-space: nowrap !important;
  }
  .content-card--job .content-actions,
  .stream-card.content-card--job .content-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
  }
  .content-card--job .content-actions-left,
  .stream-card.content-card--job .content-actions-left {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    align-items: center !important;
  }
  .content-card--job .content-save-btn,
  .stream-card.content-card--job .content-save-btn {
    display: flex !important;
    align-items: center !important;
    font-size: 0.625rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .my-cve-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 110px !important;
    height: auto !important;
    text-align: left !important;
  }
  .my-cve-card * {
    text-align: left !important;
  }
  .my-cve-card:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .my-cve-card .content-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }
  .my-cve-card .content-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 0.25rem !important;
  }
  .my-cve-card .content-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0.25rem !important;
  }
  .my-cve-card .content-card-header-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .my-cve-card .article-metadata {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
  }
  .my-cve-card .my-cve-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-cve-card .my-cve-id {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #60a5fa !important;
  }
  .my-cve-card .severity-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
  }
  .my-cve-card .my-cve-title {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .my-job-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 100px !important;
    height: auto !important;
    text-align: left !important;
  }
  .my-job-card * {
    text-align: left !important;
  }
  .my-job-card:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }
  .my-job-card .content-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }
  .my-job-card .content-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 0.25rem !important;
  }
  .my-job-card .content-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0.25rem !important;
  }
  .my-job-card .content-card-header-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .my-job-card .article-metadata {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
  }
  .my-job-card h4 {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
.login-page-wrapper {
  padding: 2rem 1rem;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: none;
  margin: 0 auto;
  width: 100%;
}
.login-page-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: var(--text-primary);
  font-weight: 600;
}
.login-form-container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg-gray-800);
  padding: 25px;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .login-form-container {
    min-width: 500px;
    width: 500px;
  }
}
@media (max-width: 768px) {
  .login-page-wrapper {
    padding: 1rem 0.5rem;
  }
  .login-form-container {
    max-width: 100%;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
  }
}
.login-form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.login-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.login-input-field {
  width: 100%;
  padding: 12px;
  height: 44px;
  font-size: 1rem;
  background: var(--bg-gray-700);
  border: 1px solid var(--border-gray-600);
  border-radius: 8px;
  color: var(--text-primary);
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.login-input-field:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}
.login-input-field::placeholder {
  color: var(--text-gray-400);
}
.login-submit-button {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.login-submit-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.login-divider {
  margin: 25px 0;
  border: none;
  border-top: 1px solid var(--border-primary);
}
.login-alternative-text {
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-gray-400);
  font-size: 0.9rem;
}
.login-google-button {
  text-align: center;
}
.login-google-button img {
  width: 220px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 8px;
}
.login-google-button img:hover {
  transform: scale(1.02);
}
.page-wrapper .header {
  background: var(--bg-gray-900);
  border-bottom: 1px solid var(--border-primary);
  padding: 1rem 0;
}
.page-wrapper .header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-wrapper .header .logo a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}
.page-wrapper .header .navbar {
  display: flex;
  gap: 1rem;
}
.page-wrapper .header .navbar a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.page-wrapper .header .navbar a:hover {
  color: var(--text-primary);
  background: var(--bg-gray-800);
}
.page-wrapper .footer {
  background: var(--bg-gray-900);
  border-top: 1px solid var(--border-primary);
  padding: 1rem 0;
  margin-top: auto;
}
.page-wrapper .footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}
.page-wrapper .footer p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.9rem;
}
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-gray-950);
}
.page-wrapper .main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.auth-modal.active {
  display: flex;
}
.auth-modal-content {
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: slideUp 0.3s ease;
}
:root.light-theme .auth-modal-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-gray-400);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.auth-modal-close:hover {
  background: var(--bg-gray-700);
  color: var(--text-gray-100);
}
:root.light-theme .auth-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.auth-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}
.auth-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-gray-100);
  margin-bottom: 12px;
  line-height: 1.2;
}
:root.light-theme .auth-modal-title {
  color: #111827;
}
.auth-modal-text {
  font-size: 15px;
  color: var(--text-gray-400);
  margin-bottom: 28px;
  line-height: 1.5;
}
:root.light-theme .auth-modal-text {
  color: #6b7280;
}
.auth-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.auth-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  min-height: 52px;
}
.auth-modal-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.auth-modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}
.auth-modal-btn-primary:active {
  transform: translateY(0);
}
.auth-modal-btn-secondary {
  background: var(--bg-gray-700);
  color: var(--text-gray-100);
  border: 1px solid var(--border-gray-600);
}
.auth-modal-btn-secondary:hover {
  background: var(--bg-gray-600);
  border-color: var(--border-gray-500);
}
:root.light-theme .auth-modal-btn-secondary {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #d1d5db;
}
:root.light-theme .auth-modal-btn-secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}
.auth-modal-footer {
  font-size: 13px;
  color: var(--text-gray-500);
  margin: 0;
}
:root.light-theme .auth-modal-footer {
  color: #9ca3af;
}
:root.light-theme .stream-header-bar,
:root.light-theme .card-header {
  background: var(--light-card-bg) !important;
  border-bottom: 2px solid var(--light-border) !important;
  color: var(--light-text) !important;
  box-shadow: none !important;
}
:root.light-theme .stream-header-title {
  color: var(--light-heading) !important;
  font-weight: 700 !important;
  text-shadow: none;
}
:root.light-theme .inbox-sidebar,
:root.light-theme aside#left-sidebar {
  background: var(--light-sidebar-bg) !important;
  border-right: 1px solid var(--light-border) !important;
}
:root.light-theme #right-panel {
  background: var(--light-card-bg) !important;
  border: 1px solid var(--light-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root.light-theme .stream-control-input,
:root.light-theme .search-text-input {
  background: var(--light-input-bg) !important;
  border: 1px solid var(--light-input-border) !important;
  color: var(--light-text) !important;
}
:root.light-theme .stream-control-input:focus,
:root.light-theme .search-text-input:focus {
  border-color: var(--light-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
  background: var(--light-input-bg) !important;
}
:root.light-theme .stream-control-input::placeholder,
:root.light-theme .search-text-input::placeholder {
  color: var(--light-text-muted) !important;
}
:root.light-theme .btn,
:root.light-theme button {
  border: 1px solid var(--light-accent) !important;
  background: var(--light-accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}
:root.light-theme .btn:hover,
:root.light-theme button:hover {
  background: var(--light-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .auth-modal {
    padding: 16px;
  }
  .auth-modal-content {
    padding: 28px 20px;
    border-radius: 12px;
  }
  .auth-modal-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    margin-bottom: 16px;
  }
  .auth-modal-title {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .auth-modal-text {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .auth-modal-btn {
    padding: 16px 20px;
    font-size: 15px;
    min-height: 56px;
  }
  .auth-modal-close {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }
}
@media (max-width: 768px) {
  .stream-header-controls {
    gap: 4px !important;
    padding: 6px !important;
    flex-direction: column !important;
  }
  .latest-controls,
  .popular-controls,
  .sources-controls,
  .cve-controls,
  .jobs-controls,
  .tutorials-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .latest-stream-search,
  .popular-stream-search,
  .sources-stream-search,
  .cve-stream-search,
  .jobs-stream-search,
  .tutorials-stream-search,
  .breach-stream-search {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }
  .stream-control-input,
  .search-text-input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0.5rem 1rem 0.5rem 1rem !important;
  padding-left: 1rem !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    flex: 1 !important;
  }
  #latest-stream-search-btn,
  #popular-stream-search-btn,
  #sources-stream-search-btn,
  #cve-stream-search-btn,
  #jobs-stream-search-btn,
  #tutorials-stream-search-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0 !important; 
    flex-shrink: 0 !important;
  }
  #latest-stream-search-btn::before,
  #popular-stream-search-btn::before,
  #sources-stream-search-btn::before,
  #cve-stream-search-btn::before,
  #jobs-stream-search-btn::before,
  #tutorials-stream-search-btn::before {
    content: "\f002"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px !important;
  }
  .latest-stream-options,
  .popular-stream-options,
  .cve-stream-options {
    display: flex !important;
    gap: 4px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .stream-control-select,
  .stream-select {
    height: 36px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  #breach-search {
    height: 36px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  .severity-btn,
  .filter-chip {
    padding: 4px 8px !important;
    font-size: 11px !important;
    height: 28px !important;
    line-height: 1.2 !important;
  }
  .stream-header-controls > div + div {
    margin-top: 0 !important;
  }
  .stream-select,
  .stream-control-select {
    background-size: 12px !important;
    padding-right: 24px !important;
  }
}
:root.light-theme .metric-card .metric-label {
  color: #6c757d !important;
}
:root.light-theme .metric-card .metric-value,
:root.light-theme .metric-card span,
:root.light-theme .metric-card strong {
  color: #212529 !important;
}
:root.light-theme .metric-card .metric-pill {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}
:root.light-theme .trend-card .trend-kpi,
:root.light-theme .trend-card .trend-summary-title,
:root.light-theme .trend-card .trend-summary-value,
:root.light-theme .trend-card span,
:root.light-theme .trend-card strong {
  color: #212529 !important;
}
:root.light-theme .trend-card .trend-summary-label {
  color: #6c757d !important;
}
:root.light-theme .trend-card .trend-summary-chip {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}
:root.light-theme .metric-list-row {
  background: rgba(37, 99, 235, 0.08) !important;
  border-left: 3px solid #2563eb !important;
  border-top: 1px solid rgba(37, 99, 235, 0.15) !important;
  border-right: 1px solid rgba(37, 99, 235, 0.15) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15) !important;
  color: #495057 !important;
}
:root.light-theme .metric-list-row:nth-child(1) {
  background: rgba(147, 51, 234, 0.08) !important;
  border-left-color: #9333ea !important;
  border-top-color: rgba(147, 51, 234, 0.15) !important;
  border-right-color: rgba(147, 51, 234, 0.15) !important;
  border-bottom-color: rgba(147, 51, 234, 0.15) !important;
}
:root.light-theme .metric-list-row:nth-child(2) {
  background: rgba(239, 68, 68, 0.08) !important;
  border-left-color: #ef4444 !important;
  border-top-color: rgba(239, 68, 68, 0.15) !important;
  border-right-color: rgba(239, 68, 68, 0.15) !important;
  border-bottom-color: rgba(239, 68, 68, 0.15) !important;
}
:root.light-theme .metric-list-row:nth-child(3) {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left-color: #10b981 !important;
  border-top-color: rgba(16, 185, 129, 0.15) !important;
  border-right-color: rgba(16, 185, 129, 0.15) !important;
  border-bottom-color: rgba(16, 185, 129, 0.15) !important;
}
:root.light-theme .metric-list-row:nth-child(4) {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left-color: #f59e0b !important;
  border-top-color: rgba(245, 158, 11, 0.15) !important;
  border-right-color: rgba(245, 158, 11, 0.15) !important;
  border-bottom-color: rgba(245, 158, 11, 0.15) !important;
}
:root.light-theme .metric-list-row strong {
  color: #212529 !important;
}
:root.light-theme .trend-summary-line {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  color: #495057 !important;
}
:root.light-theme .checkbox-list {
  background: #ffffff !important;
  border: 2px solid #dee2e6 !important;
  color: #212529 !important;
}
:root.light-theme .checkbox-list label {
  color: #212529 !important;
}
:root.light-theme .checkbox-list label:hover {
  background: #f8f9fa !important;
}
:root.light-theme .pill-container {
  background: #ffffff !important;
  border: 2px solid #dee2e6 !important;
}
:root.light-theme .search-box,
:root.light-theme .modal-search input {
  background: #ffffff !important;
  border: 2px solid #dee2e6 !important;
  color: #212529 !important;
}
:root.light-theme .search-box:focus,
:root.light-theme .modal-search input:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}
:root.light-theme .column-title {
  color: #212529 !important;
}
:root.light-theme .column-content {
  background: transparent !important;
}
:root.light-theme .modal-column {
  background: transparent !important;
}
:root.light-theme .checkbox-list input[type="checkbox"] {
  accent-color: #0d6efd !important;
}
:root.light-theme .pill {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}
:root.light-theme .pill:hover {
  background-color: #0b5ed7 !important;
}
:root.light-theme .pill-remove {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}
:root.light-theme .pill-remove:hover {
  background-color: #bb2d3b !important;
}
:root.light-theme {
  --light-blue-primary: #2563eb;
  --light-blue-hover: #1d4ed8;
  --light-blue-border: #3b82f6;
}
:root.light-theme .modal-btn.primary,
:root.light-theme .signup-submit,
:root.light-theme .login-submit-button,
:root.light-theme button[type="submit"]:not(.modal-btn):not(.google-button) {
  background: #3b82f6 !important; 
  border-color: #3b82f6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light-theme .modal-btn.primary:hover,
:root.light-theme .signup-submit:hover,
:root.light-theme .login-submit-button:hover {
  background: #2563eb !important; 
  border-color: #2563eb !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
:root.light-theme .card-action.primary,
:root.light-theme .nav-link:hover {
  background: #3b82f6 !important; 
}
:root.light-theme .card-action.primary:hover {
  background: #2563eb !important; 
}
:root.light-theme .pill {
  background-color: #2563eb !important;
}
:root.light-theme .pill:hover {
  background-color: #1d4ed8 !important;
}
:root.light-theme input:focus,
:root.light-theme textarea:focus,
:root.light-theme select:focus,
:root.light-theme .search-box:focus,
:root.light-theme .modal-search input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
:root.light-theme .tab-btn {
  background: transparent !important;
  color: #6c757d !important;
  border-bottom: 3px solid transparent !important;
}
:root.light-theme .tab-btn:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #495057 !important;
}
:root.light-theme .tab-btn.active {
  background: transparent !important;
  color: #212529 !important;
  border-bottom-color: #2563eb !important;
  font-weight: 600 !important;
}
:root.light-theme .tab-btn.active::before {
  display: none !important;
}
:root.light-theme .email-slider-input:checked + .email-slider {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}
:root.light-theme a:not(.nav-link):not(.logo-link):not(.free-badge):not(.subscription-badge) {
  color: #2563eb !important;
}
:root.light-theme a:not(.nav-link):not(.logo-link):not(.free-badge):not(.subscription-badge):hover {
  color: #1d4ed8 !important;
}
:root.light-theme input[type="checkbox"]:checked,
:root.light-theme .checkbox-list input[type="checkbox"] {
  accent-color: #2563eb !important;
}
:root.light-theme .category-tab,
:root.light-theme .my-stuff-tab,
:root.light-theme .dark-tab {
  background: #2563eb !important;
  border-color: #2563eb !important;
  border-bottom: none !important; 
  color: #ffffff !important;
  font-weight: 500 !important; 
}
:root.light-theme .category-tab:hover,
:root.light-theme .my-stuff-tab:hover,
:root.light-theme .dark-tab:hover {
  background: #1d4ed8 !important;
}
:root.light-theme .category-tab i,
:root.light-theme .my-stuff-tab i,
:root.light-theme .dark-tab i {
  color: #ffffff !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
:root.light-theme .category-tab.active i,
:root.light-theme .my-stuff-tab.active i,
:root.light-theme .dark-tab.active i {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
:root.light-theme .btn-primary {
  background: linear-gradient(135deg, #58a6ff 0%, #0969da 100%) !important;
  border-color: #0969da !important;
  color: #ffffff !important;
}
:root.light-theme .btn-primary:hover {
  background: linear-gradient(135deg, #0969da 0%, #0860ca 100%) !important;
  border-color: #0860ca !important;
  color: #ffffff !important;
}
:root.light-theme .stat-pill,
:root.light-theme .metric-pill {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
}
:root.light-theme .search-btn,
:root.light-theme button[type="submit"].search-button {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
:root.light-theme .search-btn:hover {
  background: #1d4ed8 !important;
}
:root.light-theme .detail-action-btn,
:root.light-theme .source-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}
:root.light-theme .detail-action-btn:hover,
:root.light-theme .source-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}
:root.light-theme .article-link,
:root.light-theme .source-link {
  color: #2563eb !important;
}
:root.light-theme .article-link:hover,
:root.light-theme .source-link:hover {
  color: #1d4ed8 !important;
}
:root.light-theme #detail-link,
:root.light-theme a.btn.btn-primary,
:root.light-theme button.btn.btn-primary {
  color: #ffffff !important;
}
#detail-link,
#detail-link:hover,
#detail-link:active,
#detail-link:focus {
  color: #ffffff !important;
}
a.btn.btn-primary,
a.btn.btn-primary:hover,
a.btn.btn-primary:active,
button.btn.btn-primary,
button.btn.btn-primary:hover,
button.btn.btn-primary:active {
  color: #ffffff !important;
}
#share-facebook,
#share-facebook:hover,
#share-facebook:active,
#share-twitter,
#share-twitter:hover,
#share-twitter:active,
#share-linkedin,
#share-linkedin:hover,
#share-linkedin:active,
#share-whatsapp,
#share-whatsapp:hover,
#share-whatsapp:active,
#share-reddit,
#share-reddit:hover,
#share-reddit:active,
#share-email,
#share-email:hover,
#share-email:active,
.share-btn,
.share-btn:hover,
.share-btn:active {
  color: #ffffff !important;
}
.content-save-btn,
.content-save-btn:hover,
.content-save-btn:active,
.content-save-btn:focus {
  color: #ffffff !important;
}
.sidebar-footer {
  margin-top: auto;
  padding: 0px 20px 4px 20px;
  border-top: 1px solid var(--color-border);
}
.sidebar-footer .social-links {
  margin-bottom: 4px;
}
.policy-links {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}
.policy-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}
.policy-links a:hover {
  color: var(--color-primary);
}
.policy-copyright {
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
  margin-top: 4px;
  text-align: center;
}
@media (max-width: 768px) {
  .sidebar-footer {
    display: none;
  }
}
.mobile-menu-section {
  padding: 8px 0;
}
.mobile-menu-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 8px 20px 4px 20px;
  letter-spacing: 0.05em;
}
.mobile-menu-item-small {
  font-size: 0.9rem;
  padding: 10px 20px;
}
.mobile-menu-item-small i {
  width: 20px;
  font-size: 0.9rem;
}
.policy-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.policy-modal-dialog {
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  margin: 20px;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.policy-modal-content {
  background: #1a1d23;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.policy-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #2d3139;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d0f12;
}
.policy-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.policy-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.policy-modal-close:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.policy-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  line-height: 1.6;
}
.policy-modal-body h4 {
  margin: 24px 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.policy-modal-body h4:first-child {
  margin-top: 0;
}
.policy-modal-body p {
  margin: 12px 0;
  color: var(--color-text-secondary);
}
.policy-modal-body ul {
  margin: 12px 0;
  padding-left: 24px;
  color: var(--color-text-secondary);
}
.policy-modal-body li {
  margin: 8px 0;
}
.policy-modal-body strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.policy-modal-body a {
  color: var(--color-primary);
  text-decoration: none;
}
.policy-modal-body a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .policy-modal-dialog {
    width: 95%;
    max-height: 90vh;
    margin: 10px;
  }
  .policy-modal-header {
    padding: 16px 20px;
  }
  .policy-modal-header h3 {
    font-size: 1.1rem;
  }
  .policy-modal-body {
    padding: 20px;
  }
}
:root.light-theme .policy-modal-content {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
:root.light-theme .policy-modal-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  border-bottom-color: #e5e7eb;
}
:root.light-theme .policy-modal-close:hover {
  background: #e5e7eb;
}
:root.light-theme .policy-links a {
  color: #6b7280;
}
:root.light-theme .policy-links a:hover {
  color: #2563eb;
}
:root.light-theme .policy-copyright {
  color: #9ca3af;
}
.breach-category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-breach {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-case_study {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-analysis {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.badge-vulnerability {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-alert {
  background: rgba(234, 88, 12, 0.2);
  color: #fdba74;
  border: 1px solid rgba(234, 88, 12, 0.3);
}
.badge-incident {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
:root.light-theme .badge-breach {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
:root.light-theme .badge-case_study {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #93c5fd;
}
:root.light-theme .badge-analysis {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #d8b4fe;
}
:root.light-theme .badge-vulnerability {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fcd34d;
}
:root.light-theme .badge-alert {
  background: #ffedd5;
  color: #ea580c;
  border: 1px solid #fdba74;
}
:root.light-theme .badge-incident {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}
.breach-metadata {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.breach-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.severity-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.severity-high {
  background: rgba(251, 146, 60, 0.15);
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.3);
}
.severity-medium {
  background: rgba(250, 204, 21, 0.15);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.3);
}
.severity-low {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.industry-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.records-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
:root.light-theme .severity-critical {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
:root.light-theme .severity-high {
  background: #ffedd5;
  color: #ea580c;
  border: 1px solid #fdba74;
}
:root.light-theme .severity-medium {
  background: #fef9c3;
  color: #ca8a04;
  border: 1px solid #fde047;
}
:root.light-theme .severity-low {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}
:root.light-theme .industry-badge {
  background: #ede9fe;
  color: #7c3aed;
  border: 1px solid #c4b5fd;
}
:root.light-theme .records-badge {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #93c5fd;
}
.clickable-badge {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.clickable-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(1.15);
}
.clickable-badge:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.clickable-badge.active {
  box-shadow: 0 0 0 2px var(--color-primary);
  font-weight: 600;
}
.cloud-badge {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.3);
}
.tech-badge {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
:root.light-theme .cloud-badge {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
:root.light-theme .tech-badge {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #d8b4fe;
}
:root.light-theme .clickable-badge:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(0.95);
}
:root.light-theme .clickable-badge.active {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.search-wrapper-with-pills {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap; 
  gap: 4px;
  padding: 6px 40px 6px 8px;
  height: 40px; 
  min-height: 40px;
  max-height: 40px;
  overflow-x: auto; 
  overflow-y: hidden; 
  background: var(--bg-gray-800);
  border: 1px solid var(--border-gray-600);
  border-radius: 6px;
  width: 300px; 
  box-sizing: border-box;
}
.search-wrapper-with-pills::-webkit-scrollbar {
  height: 3px;
}
.search-wrapper-with-pills::-webkit-scrollbar-track {
  background: transparent;
}
.search-wrapper-with-pills::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 2px;
}
.search-wrapper-with-pills::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}
.search-wrapper-with-pills:focus-within {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.search-wrapper-with-pills .search-text-input,
.search-wrapper-with-pills .stream-control-input {
  flex: 1 1 auto;
  min-width: 80px;
  max-width: 100%;
  width: auto !important; 
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.search-wrapper-with-pills .search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.filter-pills-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap; 
  flex-shrink: 0; 
}
:root.light-theme .search-wrapper-with-pills {
  background: #ffffff;
  border-color: #d1d5db;
}
:root.light-theme .search-wrapper-with-pills:focus-within {
  border-color: var(--blue-500);
}
.filter-pill-badge {
  cursor: default !important;
  position: relative;
  padding-right: 22px !important; 
  margin: 0;
  flex-shrink: 0; 
  white-space: nowrap; 
}
.filter-pill-badge:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.filter-pill-remove {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: opacity 0.15s ease;
}
.filter-pill-remove:hover {
  opacity: 1;
}
.clear-all-filters-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-gray-600);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: 8px;
}
.clear-all-filters-btn:hover {
  background: var(--bg-gray-700);
  border-color: var(--border-blue);
  color: var(--text-blue);
}
.clear-all-filters-btn:active {
  background: var(--bg-gray-600);
  transform: scale(0.98);
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #ef4444;
  border-radius: 9px;
  line-height: 1;
}
.job-location-salary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.job-location-badge {
  color: #60a5fa; 
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:root.light-theme .job-location-badge {
  color: #2563eb; 
}
.job-salary-card {
  color: #10b981; 
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:root.light-theme .job-salary-card {
  color: #059669; 
}
.job-location-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.1);
  border-left: 3px solid #60a5fa;
  border-radius: 4px;
  color: #60a5fa;
}
:root.light-theme .job-location-detail {
  background: rgba(37, 99, 235, 0.1);
  border-left-color: #2563eb;
  color: #2563eb;
}
.job-salary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.1);
  border-left: 3px solid #10b981;
  border-radius: 4px;
}
.job-salary-actual {
  color: #10b981; 
}
.job-salary-estimated {
  color: #e5e7eb; 
  font-weight: 500;
}
:root.light-theme .job-salary-estimated {
  color: #374151;
}
.job-salary-icon {
  font-size: 12px;
  opacity: 0.8;
}
.job-salary-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  margin-left: 4px;
}
.job-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.job-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  color: #60a5fa;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.job-location-badge:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}
:root.light-theme .job-location-badge {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
  color: #2563eb;
}
:root.light-theme .job-location-badge:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}
.job-salary-badge--actual {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.job-salary-badge--estimated {
  background: #374151; 
  color: #ffffff; 
  border: 1px solid #4b5563;
  font-weight: 600;
}
:root.light-theme .job-salary-badge--estimated {
  background: #6b7280;
  color: #ffffff;
  border-color: #9ca3af;
}
.filter-pills-container:not(:empty) ~ .search-text-input::placeholder {
  opacity: 0.5;
}
.active-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 8px;
}
.active-filters-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-gray-700);
  border: 1px solid var(--border-gray-500);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray-100);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.active-filter-pill:hover {
  background: var(--bg-gray-600);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.filter-remove {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-gray-400);
  line-height: 1;
  margin-left: 2px;
}
.active-filter-pill:hover .filter-remove {
  color: var(--text-gray-100);
}
.clear-all-filters {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.clear-all-filters:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}
:root.light-theme .active-filters-container {
  background: rgba(88, 166, 255, 0.06);
  border-color: rgba(88, 166, 255, 0.15);
}
:root.light-theme .active-filters-label {
  color: var(--text-gray-600);
}
:root.light-theme .active-filter-pill {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
:root.light-theme .active-filter-pill:hover {
  background: #e5e7eb;
  border-color: var(--color-primary);
}
:root.light-theme .filter-remove {
  color: #9ca3af;
}
:root.light-theme .active-filter-pill:hover .filter-remove {
  color: #374151;
}
:root.light-theme .clear-all-filters {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}
:root.light-theme .clear-all-filters:hover {
  background: #fecaca;
  border-color: #f87171;
}
.create-alert-btn {
  padding: 8px 16px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .set-alert-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .set-alert-btn i {
    font-size: 10px !important;
  }
  #alert-modal-backdrop #alert-modal {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px !important;
  }
  #alert-modal .sticky.top-0 {
    padding: 12px 16px 10px !important;
  }
  #alert-modal h2 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  #alert-modal .sticky.top-0 p {
    font-size: 12px !important;
  }
  #alert-modal > div:nth-child(2) {
    padding: 12px 16px !important;
  }
  #alert-suggestions-container {
    gap: 10px !important;
  }
  #alert-suggestions-container .alert-suggestion {
    padding: 10px !important;
  }
  #alert-suggestions-container h4 {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }
  #alert-suggestions-container p {
    font-size: 11px !important;
  }
  .create-alert-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: 36px !important;
  }
  #alert-modal .sticky.bottom-0 {
    padding: 10px 16px !important;
  }
  #alert-modal .sticky.bottom-0 p {
    font-size: 10px !important;
  }
  .delete-alert-box {
    width: 90% !important;
    min-width: 280px !important;
    max-width: 90% !important;
    padding: 12px 14px !important;
    margin: 10px !important;
  }
  .delete-alert-box strong:first-child {
    font-size: 13px !important;
  }
  .delete-alert-box span {
    font-size: 12px !important;
  }
  .delete-alert-box button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .alert-card-item {
    padding: 12px !important;
  }
  .alert-card-item h4 {
    font-size: 14px !important;
  }
  .alert-card-item select,
  .alert-card-item .toggle-alert-btn,
  .alert-card-item .delete-alert-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  @media (max-width: 400px) {
    .alert-card-item > div:last-child {
      flex-direction: column !important;
    }
    .alert-card-item select,
    .alert-card-item button {
      width: 100% !important;
    }
  }
}
.upgrade-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10001 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
}
.upgrade-modal-content {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9) !important;
  max-width: 42rem !important; 
  width: 95% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: 0 1rem !important;
}
:root.light-theme .upgrade-modal-content {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
:root.light-theme .upgrade-modal-content .text-white {
  color: #111827 !important; 
}
:root.light-theme .upgrade-modal-content .text-gray-300 {
  color: #6b7280 !important; 
}
:root.light-theme .upgrade-modal-content .text-gray-400 {
  color: #6b7280 !important; 
}
:root.light-theme .upgrade-modal-content .text-gray-400.hover\:text-white:hover {
  color: #111827 !important; 
}
:root.light-theme .upgrade-modal-backdrop {
  background: rgba(0, 0, 0, 0.4) !important; 
}
:root.light-theme .free-badge {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}
:root.light-theme .upgrade-modal-content .text-blue-400 {
  color: #2563eb !important; 
}
:root.light-theme .upgrade-modal-content .text-purple-400 {
  color: #7c3aed !important; 
}
:root.light-theme .upgrade-modal-content .text-green-400 {
  color: #16a34a !important; 
}
:root.light-theme .upgrade-modal-content .text-orange-400 {
  color: #ea580c !important; 
}
:root.light-theme .upgrade-modal-content a[href="/auth/signup"],
:root.light-theme #upgrade-modal-backdrop a[href="/auth/signup"] {
  color: white !important; 
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important; 
}
:root.light-theme .upgrade-modal-content button.text-gray-400,
:root.light-theme #upgrade-modal-backdrop button {
  color: #1f2937 !important; 
  background: transparent !important; 
}
:root.light-theme .upgrade-modal-content button.text-gray-400:hover,
:root.light-theme #upgrade-modal-backdrop button:hover {
  color: #111827 !important; 
}
html {
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  max-width: 100vw;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
.content-card,
.stream-card,
.card,
.article-card {
  max-width: 100%;
}
.modal-content,
.modal-dialog {
  max-width: 95vw;
  margin-left: auto;
  margin-right: auto;
}
.article-metadata,
.stat-item,
.meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.container,
.main-content,
.feed-container {
  max-width: 100%;
  overflow-x: hidden;
}
@media (min-width: 769px) {
  .article-metadata,
  .meta-text,
  .secondary-text,
  small,
  .text-small {
    font-size: 16px;
  }
  label {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
  }
  .container,
  .main-content,
  .feed-container,
  .content-wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  button,
  .btn,
  a[role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
  }
  .btn-xs,
  button.btn-xs {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .btn-primary,
  button.btn-primary {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
  }
  .tag-pill,
  .badge,
  .tag {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
  body {
    font-size: 14px;
  }
  .article-metadata,
  .meta-text,
  .secondary-text,
  small,
  .text-small {
    font-size: 14px !important;
  }
  label {
    font-size: 14px;
    font-weight: 500;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px !important; 
    line-height: 1.5;
  }
  textarea {
    min-height: 88px; 
  }
  .content-card,
  .stream-card,
  .card {
    max-width: 100% !important;
    padding: 0.5rem; 
  }
  .modal,
  .modal-dialog {
    margin: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
  .modal-content {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  .modal button,
  .modal .btn {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
  }
  .profile-form button[type="submit"],
  .profile-form input[type="submit"],
  form button[type="submit"],
  form input[type="submit"] {
    min-height: 48px !important;
    padding: 12px 32px !important;
    font-size: 16px !important;
    font-weight: 600;
    width: 100%; 
    margin-top: 1rem;
  }
  .form-group,
  .input-group {
    margin-bottom: 1rem;
  }
  a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .nav-button,
  .tab-button {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
  }
  table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .right-panel {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .feed-item,
  .article-item {
    max-width: 100%;
  }
  .stats-container,
  .metadata-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 375px) {
  .container,
  .main-content {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  button,
  .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .content-card,
  .stream-card {
    padding: 0.375rem;
  }
  .modal,
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }
}
button:focus,
.btn:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
:root.light-theme button:focus,
:root.light-theme .btn:focus,
:root.light-theme a:focus,
:root.light-theme input:focus,
:root.light-theme select:focus,
:root.light-theme textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  button + button,
  .btn + .btn,
  a[role="button"] + a[role="button"] {
    margin-left: 8px;
  }
  button:not(:last-child),
  .btn:not(:last-child) {
    margin-bottom: 8px;
  }
}
@media print {
  .modal,
  .modal-backdrop,
  .hamburger-menu,
  .floating-button {
    display: none !important;
  }
  body {
    max-width: 100%;
    overflow: visible;
  }
  .collapsed {
    display: block !important;
    max-height: none !important;
  }
}
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes cardFloat1 {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-8px) rotate(-5deg);
  }
}
@keyframes cardFloat2 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
}
@keyframes cardFloat3 {
  0%, 100% {
    transform: translateY(0) rotate(5deg);
  }
  50% {
    transform: translateY(-6px) rotate(5deg);
  }
}
.scene-indicator:hover {
  opacity: 0.8 !important;
  transform: scale(1.2);
  transition: all 0.2s ease;
}
.shareable-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.shareable-modal-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.shareable-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
:root.light-theme .shareable-modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.shareable-modal-container {
  position: relative !important;
  z-index: 100000 !important;
  background: var(--bg-gray-900);
  border-radius: 16px;
  max-width: 900px;
  max-height: 90vh;
  width: 92%;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 2.5rem;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  cursor: default;
}
.shareable-modal-overlay.active .shareable-modal-container {
  transform: scale(1);
}
:root.light-theme .shareable-modal-container {
  background: #ffffff;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}
#shareable-modal-content {
  position: relative;
  width: 100%;
}
.shareable-modal-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 100001 !important;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.shareable-modal-close:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-primary);
  transform: rotate(90deg);
}
.shareable-modal-close:active {
  transform: rotate(90deg) scale(0.95);
}
:root.light-theme .shareable-modal-close {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #374151;
}
:root.light-theme .shareable-modal-close:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  color: #111827;
}
.shareable-modal-container::-webkit-scrollbar {
  width: 8px;
}
.shareable-modal-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.shareable-modal-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}
.shareable-modal-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
:root.light-theme .shareable-modal-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
:root.light-theme .shareable-modal-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
:root.light-theme .shareable-modal-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .shareable-modal-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 1.5rem;
    padding-top: 4rem; 
  }
  .shareable-modal-close {
    top: 0.75rem;
    right: 0.75rem;
  }
  .shareable-modal-backdrop {
    cursor: default;
  }
}
body.modal-open {
  overflow: hidden;
}

/* ============================================
   Article Detail - Side-by-Side Layout
   ============================================ */

.detail-content-layout {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-screenshot-container {
  flex-shrink: 0;
  width: 160px;
}

.detail-screenshot-thumb {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-screenshot-thumb:hover {
  transform: scale(1.02);
}

.detail-metadata-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.detail-meta-label {
  flex-shrink: 0;
  font-weight: 600;
  color: #58a6ff;
  min-width: 70px;
}

.detail-meta-value {
  flex: 1;
  color: #e5e7eb;
}

.detail-summary-section {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(88, 166, 255, 0.08);
  border-radius: 8px;
  border-left: 3px solid #58a6ff;
}

.detail-summary-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #58a6ff;
  margin-bottom: 0.5rem;
}

.detail-summary-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e5e7eb;
}

.detail-keypoints-section {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.08);
  border-radius: 8px;
  border-left: 3px solid #8b5cf6;
}

.detail-keypoints-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b5cf6;
  margin-bottom: 0.5rem;
}

.detail-keypoints-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.detail-keypoints-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #e5e7eb;
  margin-bottom: 0.25rem;
}

/* Light theme support */
:root.light-theme .detail-screenshot-thumb {
  border-color: rgba(0, 0, 0, 0.1);
}

:root.light-theme .detail-meta-row {
  color: #6b7280;
}

:root.light-theme .detail-meta-value {
  color: #374151;
}

:root.light-theme .detail-summary-section {
  background: rgba(88, 166, 255, 0.06);
}

:root.light-theme .detail-summary-text {
  color: #374151;
}

:root.light-theme .detail-keypoints-section {
  background: rgba(139, 92, 246, 0.06);
}

:root.light-theme .detail-keypoints-list li {
  color: #374151;
}

/* Section titles */
.detail-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #58a6ff;
  margin-bottom: 0.75rem;
}

/* Summary content */
.detail-summary-content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e5e7eb;
}

.detail-summary-content p {
  margin-bottom: 0.75rem;
}

.detail-summary-content p:last-child {
  margin-bottom: 0;
}

/* Tags inline */
.detail-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.detail-tags-inline .tag-pill {
  font-size: 0.7rem;
  padding: 2px 6px;
}

/* Actions row */
.detail-actions-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-actions-row .btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.detail-save-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

/* Share section */
.detail-share-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light theme support for new sections */
:root.light-theme .detail-summary-content {
  color: #374151;
}

:root.light-theme .detail-actions-row {
  border-top-color: rgba(0, 0, 0, 0.1);
}

:root.light-theme .detail-share-section {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Hide screenshot container when using placeholder or for non-article feeds */
.detail-screenshot-container.hidden-screenshot {
  display: none;
}

/* Full width metadata panel when no screenshot */
.detail-content-layout:not(:has(.detail-screenshot-container:not(.hidden-screenshot))) .detail-metadata-panel {
  flex: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .detail-content-layout {
    flex-direction: column;
  }

  .detail-screenshot-container {
    width: 100%;
    max-width: 200px;
  }

  .detail-screenshot-thumb {
    max-height: 150px;
  }
}