:root{--primary: #0d2b5b;--accent: #3498db;--info: #17a2b8;--light: #f5f7fa;--dark: #2c3e50;--text-light: #bdc3c7;--card-bg: rgba(44, 62, 80, .9);--shadow: 0 8px 30px rgba(0, 0, 0, .2);--border-radius: 10px;--transition: all .3s cubic-bezier(.25, .8, .25, 1);--wave-color: #1e90ff;--current-color: #00b894;--temperature-color: #e74c3c;--sea-level-color: #9b59b6;--safe-green: #2ecc71;--safety-caution: #f39c12;--safety-danger: #e74c3c}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;overflow:hidden;background-color:#ecf0f1}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#2980b9}.data-panel{scrollbar-width:thin;scrollbar-color:var(--accent) rgba(0,0,0,.2)}#map{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:default}.leaflet-grab{cursor:default}.leaflet-dragging .leaflet-grab{cursor:grab}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#2c3e50cc;z-index:9999;display:none;justify-content:center;align-items:center;flex-direction:column;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-spinner{border:4px solid rgba(255,255,255,.2);width:36px;height:36px;border-radius:50%;border-left-color:var(--accent);animation:spin 1s linear infinite}#loading-text{color:#fff;margin-top:15px;font-size:1rem}#temp-message{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#e74c3ce6;color:#fff;padding:10px 20px;border-radius:8px;z-index:2000;transition:opacity .5s ease-in-out;opacity:0;pointer-events:none;box-shadow:var(--shadow)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #ffffffb3}70%{transform:scale(1.2);box-shadow:0 0 10px 15px #fff0}to{transform:scale(1);box-shadow:0 0 #fff0}}.active-marker-pulse div{animation:pulse 1.5s infinite}.ui-overlay{position:absolute;z-index:1000;pointer-events:none}.ui-overlay>*{pointer-events:auto}.top-bar{top:15px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;gap:15px}.search-container{position:relative;display:flex;gap:5px;background:var(--card-bg);padding:10px;border-radius:var(--border-radius);box-shadow:var(--shadow);flex-grow:1;max-width:600px}#instruction-tooltip,#reload-instruction{position:absolute;top:100%;left:10px;margin-top:10px;background:var(--card-bg);color:#fff;padding:15px;border-radius:var(--border-radius);z-index:10;font-size:.9rem;line-height:1.4;display:none;box-shadow:var(--shadow);width:250px;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}#reload-instruction{left:auto;right:10px;width:280px}#instruction-tooltip.visible,#reload-instruction.visible{display:block;opacity:1;transform:translateY(0)}#instruction-tooltip:before,#reload-instruction:before{content:"";position:absolute;bottom:100%;left:30px;border-width:8px;border-style:solid;border-color:transparent transparent var(--card-bg) transparent}#reload-instruction:before{left:auto;right:30px}#close-instruction-tooltip{position:absolute;top:5px;right:8px;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}.search-container select{width:100%;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff;font-size:.9rem;transition:var(--transition);flex-grow:1;flex-basis:50%}.search-container select:focus{outline:none;background:#fff3;border-color:var(--accent)}.search-container option{background:var(--dark);color:#fff}#find-my-location,#reload-data{border:none;background:#ffffff1a;color:#fff;cursor:pointer;padding:0 12px;border-radius:8px;transition:var(--transition);font-size:1rem;flex-shrink:0}#find-my-location:hover,#reload-data:hover{background:var(--accent)}#forecast-param-select option{color:#000}.top-controls{display:flex;align-items:center;gap:10px}#digital-clock{background:var(--card-bg);padding:10px 15px;border-radius:var(--border-radius);box-shadow:var(--shadow);color:#fff;font-weight:500;min-width:110px;text-align:center;font-size:.9rem}.auth-container,.lang-switcher{background:var(--card-bg);padding:5px;border-radius:var(--border-radius);box-shadow:var(--shadow);display:flex;align-items:center}.lang-switcher button,.google-sign-in-btn,.sign-out-btn{border:none;background:transparent;color:#fff;cursor:pointer;padding:8px 12px;border-radius:8px;transition:var(--transition)}.lang-switcher button:hover,.google-sign-in-btn:hover,.sign-out-btn:hover{background:#fff3}.lang-switcher button.active{background:var(--accent)}.google-sign-in-btn{display:flex;align-items:center;gap:8px}.user-info{display:none;align-items:center;gap:10px;padding:0 10px}.user-info img{width:32px;height:32px;border-radius:50%}body.user-logged-in .google-sign-in-btn{display:none}body.user-logged-in .user-info{display:flex}.left-panel{left:15px;width:280px;transform:translate(0);transition:transform .4s ease}.right-panel{right:15px;width:380px;transform:translate(0);transition:transform .4s ease}.left-panel,.right-panel{position:absolute;top:80px;bottom:15px}.left-panel.collapsed{transform:translate(calc(-100% - 15px))}.right-panel.collapsed{transform:translate(calc(100% + 15px))}.panel-toggle{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:60px;background:var(--card-bg);color:#fff;border:none;cursor:pointer;font-size:1.2rem;box-shadow:var(--shadow)}.left-panel .panel-toggle{right:-30px;border-radius:0 8px 8px 0}#right-panel-toggle{left:-30px;border-radius:8px 0 0 8px}.data-panel{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:15px;overflow-y:auto;flex-grow:1;color:#fff;height:100%}.data-panel h3{border-bottom:2px solid var(--accent);padding-bottom:8px;margin-bottom:12px;font-size:1rem;display:flex;align-items:center;gap:10px}.data-panel h4{color:var(--accent);margin-top:20px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:8px;font-size:.9rem}.placeholder-text{display:flex;justify-content:center;align-items:center;height:100%;text-align:center;color:var(--text-light);font-size:.9rem}.data-panel-section{margin-bottom:20px}.chart-container{height:180px;margin-top:15px}#forecast-chart-description{font-size:.8rem;color:var(--text-light);text-align:center;margin-top:8px;padding:5px;background:#0003;border-radius:6px}.layer-control-group{display:flex;flex-direction:column;gap:8px}.layer-control-group label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem}.bottom-panel{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#2c3e50f2,#2c3e50cc);box-shadow:0 -5px 20px #0003;color:#fff;border-top-left-radius:16px;border-top-right-radius:16px;padding:8px 15px 15px;transform:translateY(calc(100% - 30px));transition:transform .3s ease-out;touch-action:none}.bottom-panel.open{transform:translateY(0)}#bottom-panel-location{text-align:center;font-size:1rem;margin-bottom:10px;font-weight:500}#bottom-panel-toggle{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:80px;height:30px;background:var(--card-bg);border-radius:8px 8px 0 0;color:#fff;border:none;cursor:pointer;font-size:1.2rem;box-shadow:var(--shadow)}.legend-container-horizontal{display:flex;justify-content:center;align-items:center;gap:15px;padding-bottom:10px}.legend-item{display:flex;align-items:center;font-size:.8rem}.legend-color{width:15px;height:15px;border-radius:4px;margin-right:8px;border:1px solid rgba(255,255,255,.3)}.forecast-controls{display:flex;justify-content:center;margin-bottom:10px}.forecast-tabs{display:flex;background:#0003;border-radius:30px;padding:4px}.forecast-tab{padding:6px 14px;border-radius:30px;border:none;background:transparent;cursor:pointer;font-size:.85rem;color:var(--text-light);transition:var(--transition)}.forecast-tab.active{background:var(--accent);color:#fff;font-weight:600}.forecast-container{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}.forecast-day,.forecast-hour{background:#ffffff1a;border-radius:8px;padding:6px;text-align:center;min-width:90px;display:flex;flex-direction:column;gap:5px}.forecast-day h4,.forecast-hour h4{font-size:.8rem;margin-bottom:4px}.forecast-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:6px;background:#00000026;font-size:.85rem}.leaflet-popup-content-wrapper{background:var(--card-bg);color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow)}.leaflet-popup-content{margin:15px;line-height:1.5;min-width:280px}.leaflet-popup-tip{background:var(--card-bg)}.popup-header{font-size:1.2rem;font-weight:700;margin-bottom:5px;border-bottom:1px solid var(--accent);padding-bottom:8px}.popup-subheader{font-size:.8rem;color:var(--text-light);margin-bottom:12px}.popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.popup-item .label{font-size:.75rem;color:var(--text-light);display:block;margin-bottom:2px}.popup-item .value{font-size:1.1rem;font-weight:600}.popup-item .value .indicator{font-size:1rem}.marine-activity-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}.activity-btn{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;padding:6px;text-align:center;cursor:pointer;transition:var(--transition);font-size:.85rem}.activity-btn:hover{border-color:var(--accent);background:#3498db33}.activity-btn.active{border-color:var(--accent);background:var(--accent)}.activity-btn i{font-size:1.2rem;margin-bottom:4px;color:var(--accent)}.activity-btn.active i{color:#fff}#activity-description{margin-top:10px;font-style:italic;color:var(--text-light);font-size:.8rem;min-height:35px}.param-grid{display:grid;grid-template-columns:1fr;gap:8px}.param-item{background:#ffffff1a;border-radius:6px;padding:8px;display:flex;justify-content:space-between;align-items:center}.param-label{color:var(--text-light);font-size:.8rem;display:flex;align-items:center;gap:5px}.param-value{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}.indicator{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:15px;color:#fff}.indicator.good{background-color:var(--safe-green)}.indicator.fair{background-color:var(--safety-caution)}.indicator.high{background-color:var(--safety-danger)}.safety-index{display:flex;flex-direction:column;gap:10px;margin:15px 0}.safety-index-bar{display:flex;align-items:center;gap:10px;width:100%;font-size:.9rem}.safety-meter{flex:1;height:10px;background:#0003;border-radius:5px;overflow:hidden}.safety-fill{height:100%;border-radius:5px;transition:width .5s ease}.safety-fill.safe{background:var(--safe-green)}.safety-fill.caution{background:var(--safety-caution)}.safety-fill.danger{background:var(--safety-danger)}.safety-summary{font-size:.85rem;text-align:center;background:#0003;padding:8px;border-radius:6px}.wave-direction-indicator{width:18px;height:18px;background:var(--wave-color);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}.wave-direction-indicator:after{content:"";font-family:"Font Awesome 6 Free";font-weight:900;color:#fff;transform:rotate(var(--direction, 0deg));font-size:11px}.tooltip{position:relative;display:inline-block}.tooltip .tooltip-icon{color:var(--text-light);cursor:help;font-size:.9em}.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:var(--dark);color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:.8rem}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.ai-advice-container{background:#0003;padding:12px;border-radius:8px;font-size:.9rem;line-height:1.5}.ai-advice-container h3{font-size:1rem}.ai-advice-container ul{list-style:none;padding-left:0}.ai-advice-container li{margin-bottom:.5em;padding-left:1.2em;position:relative}.ai-advice-container li:before{content:"•";position:absolute;left:0;color:var(--accent)}.ai-loading{display:flex;align-items:center;gap:8px}.health-meter{width:120px;height:120px;position:relative;margin:10px auto}.health-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.8rem;font-weight:700}.water-wave{position:absolute;bottom:0;left:0;width:100%;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%2305bfdb'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%2305bfdb'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%2305bfdb'/%3E%3C/svg%3E");background-size:1200px 100px;animation:wave 12s linear infinite;opacity:.1;z-index:2}.water-wave:nth-of-type(2){animation-delay:-5s;animation-duration:15s;opacity:.05;bottom:10px}body.waves-hidden .water-wave{display:none}@keyframes wave{0%{background-position-x:0}to{background-position-x:1200px}}@media (max-width: 768px){.top-bar{flex-wrap:wrap;gap:5px;top:5px;left:5px;right:5px}.search-container{flex-grow:1;min-width:250px;padding:5px;gap:5px;order:1;flex-basis:100%}.search-container select{padding:8px;font-size:.85rem}.top-controls{flex-grow:1;justify-content:flex-end;gap:5px;order:2;flex-basis:100%;justify-content:space-between}#digital-clock,.lang-switcher,.auth-container{padding:8px;font-size:.8rem}.lang-switcher button,.google-sign-in-btn,.sign-out-btn{padding:6px 8px;font-size:.8rem}.left-panel,.right-panel{top:110px;bottom:5px;width:75%;max-width:380px;z-index:2000}.left-panel{left:5px}.right-panel{right:5px}.left-panel.collapsed{transform:translate(-105%)}.right-panel.collapsed{transform:translate(105%)}.panel-toggle{width:30px;height:60px;font-size:1.2rem}#left-panel .panel-toggle{right:-30px}#right-panel-toggle{left:-30px}.popup-grid{grid-template-columns:1fr}.data-panel{padding:10px}.data-panel h3{font-size:.95rem}.data-panel h4{font-size:.85rem}.param-label{font-size:.75rem}.param-value{font-size:.85rem}}