.chart-container {
           position: relative;
           width: 100%;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
           height: 300px;
           max-height: 400px;
       }

       @media (min-width: 768px) {
           .chart-container {
               height: 350px;
           }
       }

       .tab-btn.active {
           background-color: #0f172a;
           color: #ffffff;
           border-color: #0f172a;
       }

       .diagram-node {
           transition: all 0.3s ease;
           cursor: pointer;
       }

       .diagram-node:hover {
           transform: translateY(-2px);
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
       }

       .diagram-node.active-node {
           box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
           background-color: #eff6ff;
           border-color: #3b82f6;
       }

       .connection-line {
           position: absolute;
           background-color: #cbd5e1;
           z-index: 0;
       }

       /* --- Dark/Light Mode Custom Overrides --- */
       html[data-theme="dark"] body {
           background-color: #020617 !important;
           background-image: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 80%) !important;
           color: #f8fafc !important;
       }

       html[data-theme="dark"] .bg-white {
           background-color: rgba(15, 23, 42, 0.45) !important;
           backdrop-filter: blur(12px) !important;
           -webkit-backdrop-filter: blur(12px) !important;
           color: #f8fafc !important;
       }

       html[data-theme="dark"] .bg-slate-50 {
           background-color: #020617 !important;
       }

       html[data-theme="dark"] .bg-slate-100 {
           background-color: rgba(255, 255, 255, 0.05) !important;
           color: #f8fafc !important;
       }

       html[data-theme="dark"] .bg-slate-900 {
           background-color: rgba(15, 23, 42, 0.75) !important;
       }

       html[data-theme="dark"] .text-slate-800,
       html[data-theme="dark"] .text-slate-900 {
           color: #f8fafc !important;
       }

       html[data-theme="dark"] .text-slate-600,
       html[data-theme="dark"] .text-slate-500,
       html[data-theme="dark"] .text-slate-700 {
           color: #94a3b8 !important;
       }

       html[data-theme="dark"] .border-slate-200,
       html[data-theme="dark"] .border-slate-100 {
           border-color: rgba(255, 255, 255, 0.08) !important;
       }

       html[data-theme="dark"] .shadow-sm {
           box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
       }

       html[data-theme="dark"] .tab-btn.active {
           background-color: rgba(59, 130, 246, 0.2) !important;
           color: #3b82f6 !important;
           border-color: #3b82f6 !important;
       }

       /* Day view overrides for footer */
       html[data-theme="light"] footer {
           background-color: #f1f5f9 !important;
           color: #334155 !important;
           border-top: 1px solid rgba(15, 23, 42, 0.08);
       }