:root{--nav-blue:#006994;--primary:#0ca678;--user-blue:#007AFF}*{box-sizing:border-box}body,html{height:100%;width:100%;margin:0;padding:0;overflow:hidden}body{display:flex;flex-direction:column;font-family:'Noto Sans TC',sans-serif;background:#f1f5f9}#navbar-placeholder{height:60px;flex-shrink:0;background:var(--nav-blue);z-index:2000}.page-header{height:50px;background:var(--nav-blue);display:flex;align-items:center;justify-content:center;z-index:1000;border-top:1px solid rgba(255,255,255,.1)}.page-header h1{color:#fff;font-size:1.1rem;margin:0;font-weight:800}.main-container{flex:1;display:flex;position:relative;width:100%;overflow:hidden}#cam-list-container{width:400px;height:100%;background:#f8fafc;border-right:1px solid #ddd;z-index:10;overflow-y:auto}#map-wrapper{flex:1;position:relative;height:100%}#map{position:absolute;inset:0;width:100%;height:100%}.user-location-marker{background:var(--user-blue);position:relative}.modern-marker{display:flex;flex-direction:column;align-items:center;cursor:pointer}.marker-dot{width:26px;height:26px;background:var(--primary);border:4px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.2);z-index:2}.marker-label{margin-top:4px;background:#333;color:#fff;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:900;white-space:nowrap}.map-controls{position:absolute;right:20px;bottom:30px;display:flex;flex-direction:column;gap:12px;z-index:100}.fab-btn{width:54px;height:54px;background:#fff;border:none;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,.2);cursor:pointer;color:var(--nav-blue);font-size:1.3rem}.filter-bar{padding:15px;background:#f8fafc;position:sticky;top:0;z-index:20}.filter-row{display:flex;gap:10px;overflow-x:auto}.cat-btn{padding:8px 16px;border:none;border-radius:10px;background:#fff;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.05)}.cat-btn.active{background:var(--primary);color:#fff}.cam-card{background:#fff;border-radius:20px;margin:0 15px 15px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.05);cursor:pointer}.card-info{padding:12px}.card-info h3{margin:0;font-size:1rem;font-weight:900}.mobile-bottom-nav{display:none}@media (max-width:768px){#cam-list-container{width:100%;border:none}#cam-list-container.hidden{display:none!important}#map-wrapper{position:absolute;inset:0;display:none}#map-wrapper.active{display:block!important}.main-container{padding-bottom:70px}.mobile-bottom-nav{display:flex;position:fixed;bottom:0;width:100%;height:70px;background:#fff;border-top:1px solid #eee;z-index:2100}.nav-item{flex:1;border:none;background:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999}.nav-item.active{color:var(--primary)}.nav-item i{font-size:1.4rem}.nav-item span{font-size:11px;font-weight:800;margin-top:4px}.map-controls{bottom:90px}}.video-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:5000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px)}.video-overlay.active{display:flex}.video-box{width:95%;max-width:1000px;position:relative}.video-box iframe{width:100%;aspect-ratio:16/9;border-radius:12px;border:none}.close-overlay{position:absolute;top:-50px;right:0;color:#fff;font-size:40px;background:0 0;border:none;cursor:pointer}.maplibregl-popup-content{padding:0!important;background:0 0!important;box-shadow:none!important;border-radius:20px!important}.luxury-popup{width:260px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;flex-direction:column}.pop-vid{width:100%;aspect-ratio:16/9;background:#000}.pop-vid iframe{width:100%;height:100%;border:none;display:block}.pop-info{padding:15px;display:flex;flex-direction:column;gap:12px}.pop-title{font-size:1.1rem;font-weight:900;color:#1e293b;margin:0}.pop-btn{width:100%;height:42px;background:var(--primary);color:#fff!important;border:none;border-radius:12px;font-size:.95rem;font-weight:800;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}.pop-btn:hover{background:#099268;transform:translateY(-2px)}.user-location-marker{width:20px;height:20px;background:#007aff;border:3px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3)}.user-location-marker::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:rgba(0,122,255,.3);animation:2s infinite user-ping}@keyframes user-ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.5);opacity:0}}.app-loader{position:fixed;inset:0;background:#004d6e;z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}.loader-inner{text-align:center;color:#fff}.turtle-swimming{font-size:5rem;display:inline-block;animation:3s ease-in-out infinite turtleFloat;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}.loader-text-group{margin-top:30px}.loader-main-text{font-size:1.4rem;font-weight:900;margin:0;letter-spacing:2px}.loader-sub-text{font-size:.9rem;opacity:.6;margin-top:10px}.loading-bar-container{width:200px;height:4px;background:rgba(255,255,255,.1);border-radius:10px;margin:30px auto 0;overflow:hidden}.loading-bar-fill{width:0%;height:100%;background:var(--primary);animation:4s ease-in-out infinite loadingProgress}.app-loader.fade-out{opacity:0;visibility:hidden}@keyframes turtleFloat{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-20px) rotate(-5deg)}}@keyframes loadingProgress{0%{width:0%}50%{width:70%}100%{width:100%}}