:root{--primary-color: #2196F3;--secondary-color: #FFC107;--background-color: #f5f5f5;--card-background: #ffffff;--text-color: #333333;--border-color: #e0e0e0}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Verdana,sans-serif;background-color:var(--background-color);color:var(--text-color);display:block}#app{min-height:100vh;display:flex;flex-direction:column}.ui5-bar{background-color:var(--primary-color)!important;color:#fff!important;box-shadow:0 2px 4px #0000001a}.ui5-bar .ui5-title{color:#fff!important}.ui5-bar ui5-link{color:#fff!important;font-size:14px!important;text-decoration:none!important}.ui5-bar ui5-link:hover{text-decoration:underline!important}.main-content{flex:1;padding:20px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}.test-controls{margin-bottom:20px;padding:15px;background-color:var(--card-background);border-radius:8px;box-shadow:0 2px 4px #0000000d;text-align:center}.ui5-tabcontainer{background-color:var(--card-background);border-radius:8px;box-shadow:0 2px 4px #0000000d;margin-bottom:20px}.ui5-tabcontainer .ui5-tab{padding:12px 24px;border-radius:8px 8px 0 0}.ui5-tabcontainer .ui5-tab[selected]{background-color:var(--primary-color);color:#fff}.weather-view{margin-top:20px}.graph-container{background-color:var(--card-background);border-radius:8px;padding:20px;margin-bottom:0;box-shadow:0 2px 4px #0000000d;position:relative}.graph-container:not(:last-child){border-bottom:1px solid var(--border-color);padding-bottom:20px;margin-bottom:20px}.js-plotly-plot .plotly .legend{background-color:var(--card-background)!important;border:1px solid var(--border-color)!important;border-radius:4px!important;padding:8px!important;transition:all .3s ease!important}.js-plotly-plot .plotly .legend .legendtext{color:var(--text-color)!important}.js-plotly-plot .plotly .legend .legendtoggle{cursor:pointer!important}@media screen and (max-width: 768px){.js-plotly-plot .plotly .legend{position:absolute!important;max-height:40vh!important;overflow-y:auto!important;background-color:#fffffff2!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:8px!important;padding:8px!important;z-index:1000!important;box-shadow:0 2px 8px #0000001a!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important}.js-plotly-plot .plotly .legend .legendtext{font-size:14px!important;line-height:1.4!important;padding:4px 0!important}.js-plotly-plot .plotly .legend .legendtoggle{padding:8px!important;margin:2px 0!important;border-radius:4px!important;touch-action:manipulation!important}.js-plotly-plot .plotly .legend .legendtoggle:hover{background-color:#0000000d!important}.js-plotly-plot .plotly .legend .legendtoggle:active{background-color:#0000001a!important}.js-plotly-plot .plotly .legend .legendtoggle rect{width:24px!important;height:24px!important;rx:4px!important;ry:4px!important}.js-plotly-plot .plotly .legend::-webkit-scrollbar{width:6px!important}.js-plotly-plot .plotly .legend::-webkit-scrollbar-track{background:rgba(0,0,0,.05)!important;border-radius:3px!important}.js-plotly-plot .plotly .legend::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2)!important;border-radius:3px!important}.js-plotly-plot .plotly .hoverlayer .hovertext{text-align:left!important}.js-plotly-plot .plotly .hoverlayer .hovertext text{text-anchor:start!important}.js-plotly-plot .plotly .legend::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)!important}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:24px}.loading-spinner{width:64px;height:64px;border-radius:50%;border:5px solid var(--border-color);border-top-color:var(--primary-color);animation:weather-spin 1s linear infinite}@keyframes weather-spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-color);font-size:16px;opacity:.65;letter-spacing:.02em}.footer{padding:16px;text-align:center;background-color:var(--card-background);border-top:1px solid var(--border-color);margin-top:0}.footer a{color:var(--primary-color);text-decoration:none}.footer a:hover{text-decoration:underline}ui5-link{font-size:14px}@media (max-width: 768px){.main-content,.graph-container{padding:10px}}