/* * Spider Chart CSS - Modern Standards Compliant Stylesheet * Renamed from radar.css to spider.css *//* CSS Custom Properties for maintainable theming */:root{ /* Modern color palette */ --primary-bg:linear-gradient(135deg,#4338ca 0%,#6366f1 100%); --primary-bg-solid:#4338ca; --primary-text:#ffffff; --secondary-bg:#fafbfc; --secondary-text:#2d3748; --accent-color:#4f46e5; --accent-hover:#4338ca; --border-color:#e2e8f0; --border-light:#f1f5f9; --success-color:#10b981; --warning-color:#f59e0b; --error-color:#ef4444; --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04); /* Modern typography with enhanced font stack */ --font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",system-ui,ui-sans-serif,Roboto,"Helvetica Neue","Inter","Arial Nova",Arial,sans-serif; --font-family-mono:"SF Mono",ui-monospace,"Cascadia Code","Roboto Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; --font-weight-light:300; --font-weight-normal:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; --font-weight-extrabold:800; --font-size-xs:11px; --font-size-sm:13px; --font-size-base:15px; --font-size-lg:17px; --font-size-xl:19px; --font-size-2xl:22px; --font-size-3xl:28px; --line-height-tight:1.25; --line-height-normal:1.5; --line-height-loose:1.75; --letter-spacing-tight:-0.025em; --letter-spacing-normal:0; --letter-spacing-wide:0.025em; /* Consistent spacing scale */ --spacing-1:4px; --spacing-2:8px; --spacing-3:12px; --spacing-4:16px; --spacing-5:20px; --spacing-6:24px; --spacing-8:32px; --spacing-10:40px; --spacing-12:48px; /* Modern design tokens */ --border-radius-sm:6px; --border-radius-md:8px; --border-radius-lg:12px; --border-radius-xl:16px; --border-radius-2xl:20px; --transition-fast:0.15s cubic-bezier(0.4,0,0.2,1); --transition-normal:0.25s cubic-bezier(0.4,0,0.2,1); --transition-slow:0.35s cubic-bezier(0.4,0,0.2,1); --transition-bounce:0.5s cubic-bezier(0.68,-0.55,0.265,1.55); --transition-spring:0.3s cubic-bezier(0.175,0.885,0.32,1.275); --z-index-dropdown:100; --z-index-modal:1000; --z-index-overlay:999; /* Glass morphism properties */ --glass-bg:rgba(255,255,255,0.25); --glass-border:rgba(255,255,255,0.18); --glass-blur:blur(16px); --glass-saturate:saturate(180%);}/* Reset and base styles */*,*::before,*::after{ box-sizing:border-box;}body{ overflow:hidden; margin:0; padding:0; font-size:var(--font-size-base); font-family:var(--font-family); font-weight:var(--font-weight-normal); line-height:var(--line-height-normal); letter-spacing:var(--letter-spacing-normal); color:var(--secondary-text); text-rendering:optimizeLegibility; background: radial-gradient(circle at 20% 50%,rgba(120,119,198,0.3) 0%,transparent 50%), radial-gradient(circle at 80% 20%,rgba(255,119,198,0.3) 0%,transparent 50%), radial-gradient(circle at 40% 80%,rgba(120,198,121,0.3) 0%,transparent 50%), linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%); background-attachment:fixed; background-size:100% 100%; background-repeat:no-repeat; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:relative;}/* Animated background particles */body::before{ content:''; position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: radial-gradient(circle at 25% 25%,rgba(79,70,229,0.1) 0%,transparent 50%), radial-gradient(circle at 75% 75%,rgba(139,92,246,0.1) 0%,transparent 50%); background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; animation:float 20s ease-in-out infinite; pointer-events:none; z-index:-1;}@keyframes float{ 0%,100%{transform:translate(0px,0px) rotate(0deg)} 33%{transform:translate(30px,-30px) rotate(120deg)} 66%{transform:translate(-20px,20px) rotate(240deg)}}/* Focus management for accessibility */*:focus{ outline:2px solid var(--accent-color); outline-offset:2px;}/* Enhanced focus for mobile */@media (hover:none) and (pointer:coarse){ *:focus{ outline-width:3px; outline-offset:3px; }}/* Skip link for accessibility */.skip-link{ position:absolute; top:-40px; left:6px; background:var(--primary-bg); color:var(--primary-text); padding:var(--spacing-sm); text-decoration:none; transition:top var(--transition-duration); border-radius:var(--border-radius); z-index:calc(var(--z-index-modal) 1);}.skip-link:focus{ top:6px;}/* Main layout components */#title{ position:relative; font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); text-align:left; background:var(--primary-bg); padding:var(--spacing-5); color:var(--primary-text) !important; min-height:60px; display:flex; align-items:center; box-shadow:var(--shadow-sm); border-bottom:1px solid rgba(255,255,255,0.1); letter-spacing:var(--letter-spacing-tight); line-height:var(--line-height-tight); text-shadow:0 1px 2px rgba(0,0,0,0.3);}#chart{ position:absolute; top:calc(60px var(--spacing-5) * 2); left:320px; width:calc(100vw - 320px - var(--spacing-8)); max-width:900px; padding:var(--spacing-8); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--border-radius-2xl); box-shadow:var(--shadow-xl); backdrop-filter:var(--glass-blur) var(--glass-saturate); transition:all var(--transition-normal) ease; animation:slideInRight 0.8s var(--transition-spring) 0.2s both; overflow:hidden;}#chart::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); animation:shimmer 3s infinite;}@keyframes slideInRight{ from{ transform:translateX(100px); opacity:0; } to{ transform:translateX(0); opacity:1; }}@keyframes shimmer{ 0%{left:-100%} 100%{left:100%}}#apps{ position:absolute; top:calc(60px var(--spacing-5) * 2); font-size:var(--font-size-sm); max-width:280px; width:280px; background:var(--glass-bg); backdrop-filter:var(--glass-blur) var(--glass-saturate); border:1px solid var(--glass-border); padding:var(--spacing-6); height:calc(100vh - 60px - var(--spacing-5) * 2); overflow-y:auto; border-right:1px solid var(--border-color); box-shadow:var(--shadow-lg); transition:all var(--transition-normal); animation:slideInLeft 0.6s var(--transition-spring);}@keyframes slideInLeft{ from{ transform:translateX(-100%); opacity:0; } to{ transform:translateX(0); opacity:1; }}/* Responsive Design for Different Screen Sizes *//* Mobile devices (portrait) - up to 767px */@media screen and (max-width:767px){ body{ overflow:auto; font-size:var(--font-size-sm); } #title{ font-size:var(--font-size-lg); padding:var(--spacing-4); min-height:60px; text-align:center; position:sticky; top:0; z-index:var(--z-index-dropdown); } #apps{ position:relative; top:0; width:100%; max-width:none; padding:var(--spacing-4); height:auto; order:2; border-right:none; border-bottom:1px solid var(--border-color); background:var(--secondary-bg); box-shadow:none; } /* Enhanced mobile interactions */ .appDiv{ padding:var(--spacing-4); margin-bottom:var(--spacing-2); min-height:44px;/* iOS minimum touch target */ border:1px solid var(--border-light); background:rgba(255,255,255,0.9); } .appDiv input[type="checkbox"]{ width:20px; height:20px; margin-top:0; } .appDiv label{ font-size:var(--font-size-sm); line-height:1.4; padding-left:var(--spacing-2); } .appDiv .color-indicator{ width:16px; height:16px; align-self:center; } .titleDiv{ font-size:var(--font-size-xs); padding:var(--spacing-3); position:sticky; top:60px; z-index:50; background:var(--secondary-bg); margin:0 calc(-1 * var(--spacing-4)) var(--spacing-3); } #chart{ position:relative; top:0; left:0; width:100%; display:flex; justify-content:center; order:3; overflow-x:auto; padding:var(--spacing-4); background:transparent; box-shadow:none; border-radius:0; backdrop-filter:none; } #footer{ position:relative; text-align:center; margin:var(--spacing-4); bottom:auto; right:auto; order:4; background:transparent; box-shadow:none; backdrop-filter:none; padding:var(--spacing-4); } /* Stack layout vertically */ body{ display:flex; flex-direction:column; min-height:100vh; } /* Mobile modal improvements */ .showModel{ max-width:95vw; max-height:90vh; padding:var(--spacing-6); margin:var(--spacing-4); border-radius:var(--border-radius-lg); } /* Touch-friendly links */ .footerLinks{ display:block; margin:0; padding:var(--spacing-1) 0; min-height:32px; line-height:1.4; text-align:center; }}/* Tablet devices - 768px to 1023px */@media screen and (min-width:768px) and (max-width:1023px){ #chart{ left:300px; width:calc(100vw - 300px - var(--spacing-6)); } #apps{ max-width:260px; width:260px; } #title{ font-size:var(--font-size-lg); }}/* Large screens - 1024px to 1439px */@media screen and (min-width:1024px) and (max-width:1439px){ #chart{ left:340px; width:calc(100vw - 340px - var(--spacing-6)); }}/* Extra large screens - 1440px and up */@media screen and (min-width:1440px){ #chart{ left:380px; width:calc(100vw - 380px - var(--spacing-6)); max-width:1000px; } #apps{ max-width:340px; width:340px; padding:var(--spacing-8); } #title{ font-size:var(--font-size-2xl); padding:var(--spacing-6); min-height:80px; }}/* Application list styling - clean and compact */.appDiv{ color:var(--secondary-text); font-weight:var(--font-weight-normal); display:flex; align-items:center; gap:var(--spacing-2); line-height:1.4; transition:all var(--transition-fast); border-radius:var(--border-radius-sm); padding:var(--spacing-2); margin-bottom:1px; border-left:3px solid transparent; position:relative; background:transparent; animation:fadeInUp 0.5s var(--transition-spring) calc(var(--stagger-delay,0) * 0.1s) both;}@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); }}/* Stagger animation for list items */.appDiv:nth-child(1){--stagger-delay:1}.appDiv:nth-child(2){--stagger-delay:2}.appDiv:nth-child(3){--stagger-delay:3}.appDiv:nth-child(4){--stagger-delay:4}.appDiv:nth-child(5){--stagger-delay:5}.appDiv:nth-child(6){--stagger-delay:6}.appDiv:nth-child(7){--stagger-delay:7}.appDiv:nth-child(8){--stagger-delay:8}.appDiv:nth-child(9){--stagger-delay:9}.appDiv:nth-child(10){--stagger-delay:10}.appDiv:nth-child(11){--stagger-delay:11}.appDiv:nth-child(12){--stagger-delay:12}.appDiv:hover{ background:rgba(255,255,255,0.05); border-left-color:var(--accent-color); padding-left:var(--spacing-3);}.appDiv input[type="checkbox"]{ flex-shrink:0; margin:0; width:16px; height:16px; cursor:pointer; accent-color:var(--accent-color);}.appDiv input[type="checkbox"]:focus{ outline:2px solid var(--accent-color); outline-offset:2px;}.appDiv label{ flex:1; line-height:var(--line-height-normal); margin:0; cursor:pointer; font-weight:var(--font-weight-medium); font-size:var(--font-size-sm); letter-spacing:var(--letter-spacing-normal);}.appDiv .color-indicator{ flex-shrink:0; width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,0.6); transition:all var(--transition-fast); order:-1;}/* Cross-highlighting styles for chart-menu interaction */.appDiv.chart-highlight{ background:rgba(79,70,229,0.1); border-left-color:var(--accent-color); border-left-width:4px; padding-left:var(--spacing-3); font-weight:var(--font-weight-medium);}.appDiv.chart-dimmed{ opacity:0.4;}.appDiv.chart-highlight .color-indicator{ border-width:2px; border-color:var(--accent-color);}.appDiv:hover .color-indicator{ border-width:2px; border-color:var(--accent-color);}.titleDiv{ color:var(--secondary-text); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:var(--letter-spacing-wide); line-height:var(--line-height-tight); padding:var(--spacing-4) var(--spacing-3); border-bottom:2px solid var(--border-light); margin-bottom:var(--spacing-4); background:linear-gradient(135deg,rgba(79,70,229,0.05) 0%,rgba(79,70,229,0.1) 100%); border-radius:var(--border-radius-md) var(--border-radius-md) 0 0; position:relative; overflow:hidden; animation:slideInDown 0.6s var(--transition-spring) 0.3s both;}.titleDiv::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--accent-color),var(--accent-hover)); animation:expandWidth 1.5s var(--transition-spring) 0.8s both;}@keyframes slideInDown{ from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); }}@keyframes expandWidth{ from{width:0} to{width:100%}}.specialDiv{ color:var(--accent-color); font-weight:var(--font-weight-semibold); padding:var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-6); cursor:pointer; border-radius:var(--border-radius-md); border:1px solid transparent; transition:all var(--transition-fast); user-select:none; background:rgba(79,70,229,0.05); position:relative; overflow:hidden;}.specialDiv::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transition:left var(--transition-slow);}.specialDiv:hover{ background:linear-gradient(135deg,rgba(79,70,229,0.1) 0%,rgba(139,92,246,0.2) 100%); border-color:var(--accent-color); transform:translateX(6px) translateY(-2px) scale(1.02); box-shadow:0 6px 20px rgba(79,70,229,0.25),var(--shadow-md);}.specialDiv:hover::before{ left:100%;}.specialDiv:active{ transform:translateX(0);}/* Footer styling - subtle and minimal */#footer{ position:fixed; right:var(--spacing-6); bottom:var(--spacing-6); font-size:var(--font-size-xs); font-weight:var(--font-weight-normal); text-align:right; color:rgba(0,0,0,0.4); padding:var(--spacing-1); transition:all var(--transition-fast); opacity:0.6; line-height:var(--line-height-normal); letter-spacing:var(--letter-spacing-normal); z-index:var(--z-index-tooltip);}#footer:hover{ opacity:0.8;}@keyframes slideInUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); }}/* Modal/overlay styling */.showModel{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); visibility:visible; padding:var(--spacing-8); background:rgba(255,255,255,0.95); border:1px solid var(--border-color); border-radius:var(--border-radius-xl); box-shadow:var(--shadow-xl); backdrop-filter:blur(20px); opacity:1; z-index:var(--z-index-modal); max-width:90vw; max-height:90vh; overflow:auto; transition:all var(--transition-normal);}.hideModel{ visibility:hidden; opacity:0; transform:translate(-50%,-50%) scale(0.9); transition:all var(--transition-normal);}/* Modal backdrop */.showModel::before{ content:''; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:calc(var(--z-index-modal) - 1);}.footerLinks{ color:inherit; font-weight:inherit; cursor:pointer; text-decoration:none; transition:all var(--transition-fast); display:block; margin:0; padding:0; font-size:inherit; text-align:right; line-height:1.4;}.footerLinks:hover{ opacity:1;}.footerLinks:focus{ outline:2px solid var(--accent-color); outline-offset:2px;}/* High contrast mode support */@media (prefers-contrast:high){ :root{ --primary-bg:#000000; --primary-text:#ffffff; --secondary-text:#000000; --accent-color:#0000ff; --border-color:#000000; } .appDiv .color-indicator{ border-width:2px; }}/* Reduced motion support */@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }}/* Dark mode toggle switch */#dark-mode-toggle{ position:absolute; right:var(--spacing-6); top:50%; transform:translateY(-50%); width:60px; height:30px; background:rgba(255,255,255,0.2); border-radius:30px; border:1px solid rgba(255,255,255,0.3); cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:0 5px; transition:all var(--transition-normal); backdrop-filter:blur(10px); box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);}#dark-mode-toggle:hover{ background:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.15),inset 0 2px 4px rgba(0,0,0,0.1);}#dark-mode-toggle:focus{ outline:2px solid var(--accent-color); outline-offset:2px;}.toggle-icon{ font-size:16px; transition:all var(--transition-normal); z-index:1; pointer-events:none;}.sun-icon{ opacity:1; transform:scale(1) rotate(0deg);}.moon-icon{ opacity:0.3; transform:scale(0.8) rotate(-180deg);}.toggle-slider{ position:absolute; width:26px; height:26px; background:white; border-radius:50%; left:2px; transition:all var(--transition-bounce); box-shadow:0 2px 6px rgba(0,0,0,0.2);}/* Dark mode active state */#dark-mode-toggle.dark{ background:rgba(99,102,241,0.3); border-color:rgba(139,92,246,0.5);}#dark-mode-toggle.dark .toggle-slider{ left:32px; background:linear-gradient(135deg,#6366f1 0%,#7c3aed 100%);}#dark-mode-toggle.dark .sun-icon{ opacity:0.3; transform:scale(0.8) rotate(180deg);}#dark-mode-toggle.dark .moon-icon{ opacity:1; transform:scale(1) rotate(0deg);}/* Mobile responsiveness for toggle */@media screen and (max-width:767px){ #dark-mode-toggle{ right:var(--spacing-4); width:50px; height:26px; } .toggle-slider{ width:22px; height:22px; } #dark-mode-toggle.dark .toggle-slider{ left:26px; } .toggle-icon{ font-size:14px; }}/* System preference dark mode - MOVED BEFORE manual toggle styles */@media (prefers-color-scheme:dark){ :root{ --primary-bg:linear-gradient(135deg,#1e293b 0%,#334155 100%); --primary-bg-solid:#1e293b; --primary-text:#f8fafc; --secondary-bg:#0f172a; --secondary-text:#e2e8f0; --accent-color:#6366f1; --accent-hover:#7c3aed; --border-color:#334155; --border-light:#475569; --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2); --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.3),0 4px 6px -2px rgba(0,0,0,0.2); --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.2); /* Dark mode glass morphism */ --glass-bg:rgba(15,23,42,0.4); --glass-border:rgba(255,255,255,0.08); --glass-blur:blur(20px); } body{ background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; } #apps{ background-color:rgba(15,23,42,0.8); } #chart{ background:rgba(15,23,42,0.6); } .appDiv{ background:rgba(30,41,59,0.6); border-color:rgba(255,255,255,0.05); } .appDiv:hover{ background:rgba(30,41,59,0.8); } .showModel{ background:rgba(15,23,42,0.95); color:var(--secondary-text); border-color:var(--border-color); } #footer{ color:rgba(255,255,255,0.4); } /* Dark mode SVG text enhancement */ #chart svg text{ fill:var(--secondary-text) !important; stroke:rgba(15,23,42,0.8); stroke-width:0.5px; paint-order:stroke fill; }}/* Manual dark mode toggle - OVERRIDES system preference when class is present */html.dark-mode,html.dark-mode:root{ --primary-bg:linear-gradient(135deg,#1e293b 0%,#334155 100%) !important; --primary-bg-solid:#1e293b !important; --primary-text:#f8fafc !important; --secondary-bg:#0f172a !important; --secondary-text:#e2e8f0 !important; --accent-color:#6366f1 !important; --accent-hover:#7c3aed !important; --border-color:#334155 !important; --border-light:#475569 !important; --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3) !important; --shadow-md:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2) !important; --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.3),0 4px 6px -2px rgba(0,0,0,0.2) !important; --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.2) !important; /* Dark mode glass morphism */ --glass-bg:rgba(15,23,42,0.4) !important; --glass-border:rgba(255,255,255,0.08) !important; --glass-blur:blur(20px) !important;}html.dark-mode body{ background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%) !important; background-size:100% 100% !important; background-repeat:no-repeat !important; background-attachment:fixed !important;}html.dark-mode body::before{ background-image: radial-gradient(circle at 25% 25%,rgba(99,102,241,0.1) 0%,transparent 50%), radial-gradient(circle at 75% 75%,rgba(139,92,246,0.1) 0%,transparent 50%) !important;}html.dark-mode #apps{ background-color:rgba(15,23,42,0.8) !important;}html.dark-mode #chart{ background:rgba(15,23,42,0.6) !important;}html.dark-mode .appDiv{ background:rgba(30,41,59,0.6) !important; border-color:rgba(255,255,255,0.05) !important;}html.dark-mode .appDiv:hover{ background:rgba(30,41,59,0.8) !important;}html.dark-mode .showModel{ background:rgba(15,23,42,0.95) !important; color:var(--secondary-text) !important; border-color:var(--border-color) !important;}html.dark-mode #footer{ color:rgba(255,255,255,0.4) !important;}/* Dark mode SVG text enhancement */html.dark-mode #chart svg text{ fill:var(--secondary-text) !important; stroke:rgba(15,23,42,0.8) !important; stroke-width:0.5px !important; paint-order:stroke fill !important;}/* Light mode override - forces light mode even when system prefers dark */html.light-mode,html.light-mode:root{ --primary-bg:linear-gradient(135deg,#4338ca 0%,#6366f1 100%) !important; --primary-bg-solid:#4338ca !important; --primary-text:#ffffff !important; --secondary-bg:#fafbfc !important; --secondary-text:#2d3748 !important; --accent-color:#4f46e5 !important; --accent-hover:#4338ca !important; --border-color:#e2e8f0 !important; --border-light:#f1f5f9 !important; --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05) !important; --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06) !important; --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05) !important; --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04) !important; /* Light mode glass morphism */ --glass-bg:rgba(255,255,255,0.25) !important; --glass-border:rgba(255,255,255,0.18) !important; --glass-blur:blur(16px) !important; --glass-saturate:saturate(180%) !important;}html.light-mode body{ background: radial-gradient(circle at 20% 50%,rgba(120,119,198,0.3) 0%,transparent 50%), radial-gradient(circle at 80% 20%,rgba(255,119,198,0.3) 0%,transparent 50%), radial-gradient(circle at 40% 80%,rgba(120,198,121,0.3) 0%,transparent 50%), linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%) !important; background-size:100% 100% !important; background-repeat:no-repeat !important; background-attachment:fixed !important;}html.light-mode body::before{ background-image: radial-gradient(circle at 25% 25%,rgba(79,70,229,0.1) 0%,transparent 50%), radial-gradient(circle at 75% 75%,rgba(139,92,246,0.1) 0%,transparent 50%) !important;}html.light-mode #apps{ background:rgba(255,255,255,0.25) !important; border:1px solid rgba(255,255,255,0.18) !important;}html.light-mode #chart{ background:rgba(255,255,255,0.25) !important; border:1px solid rgba(255,255,255,0.18) !important;}/* Ensure title text is white in all light mode scenarios */#title,html.light-mode #title{ color:#ffffff !important;}html.light-mode .appDiv{ background:rgba(255,255,255,0.25) !important; border-color:rgba(255,255,255,0.1) !important;}html.light-mode .appDiv:hover{ background:rgba(255,255,255,0.8) !important; border-color:var(--accent-color) !important;}html.light-mode .showModel{ background:rgba(255,255,255,0.95) !important; color:var(--secondary-text) !important; border-color:var(--border-color) !important;}html.light-mode #footer{ color:rgba(0,0,0,0.4) !important;}/* Light mode SVG text enhancement */html.light-mode #chart svg text{ fill:var(--secondary-text) !important; stroke:none !important; paint-order:fill !important;}/* Mobile landscape optimization */@media screen and (max-width:767px) and (orientation:landscape){ #title{ min-height:50px; font-size:var(--font-size-base); padding:var(--spacing-3); } #apps{ padding:var(--spacing-3); } .appDiv{ padding:var(--spacing-3); min-height:40px; } #chart{ padding:var(--spacing-3); }}/* Touch device optimizations */@media (hover:none) and (pointer:coarse){ .appDiv{ min-height:48px;/* Larger touch target */ } .appDiv input[type="checkbox"]{ width:22px; height:22px; } .specialDiv{ min-height:48px; display:flex; align-items:center; } /* Reduce hover effects on touch devices */ .appDiv:hover{ transform:none; } .specialDiv:hover{ transform:none; } /* Enhanced active states for touch feedback */ .appDiv:active{ background:rgba(79,70,229,0.1); transform:scale(0.98); } .specialDiv:active{ background:rgba(79,70,229,0.2); transform:scale(0.98); }}/* Scroll-based reveal animations */@media (prefers-reduced-motion:no-preference){ .scroll-reveal{ opacity:0; transform:translateY(30px); transition:all 0.6s var(--transition-spring); } .scroll-reveal.revealed{ opacity:1; transform:translateY(0); }}/* Loading state animations */.loading{ position:relative; pointer-events:none;}.loading::after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient( 90deg, transparent, rgba(255,255,255,0.8), transparent ); animation:skeleton 1.5s infinite;}@keyframes skeleton{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}/* Floating action animations */.floating{ animation:floating 3s ease-in-out infinite;}@keyframes floating{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}/* Prevent zoom on double-tap for iOS */@media screen and (max-width:767px){ input,select,textarea{ font-size:16px;/* Prevents zoom on iOS */ }}/* Print styles */@media print{ body{ overflow:visible; } #apps{ position:static; width:auto; height:auto; background:transparent; border:none; padding:0; margin-bottom:var(--spacing-md); } #chart{ position:static; left:0; top:0; } #footer{ position:static; text-align:left; margin:var(--spacing-md) 0; } .showModel, .hideModel{ position:static; visibility:visible; opacity:1; transform:none; box-shadow:none; border:1px solid #ccc; } .footerLinks{ color:#000000; text-decoration:underline; }}