*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--bg: #0f0f0f;--bg-app: #09090b;--bg-card: #1a1a1a;--bg-card-hover: #222;--text: #e8e8e8;--text-muted: #888;--text-secondary: #d4d4d8;--accent: #fafafa;--border: #2a2a2a;--border-hover: #444;--placeholder: #444;--pill-bg: #0e0e0e;--pill-active-bg: #1c1c1c;--pill-active-border: #333;--stream-bg: #141414;--footer-text: #3f3f46;--player-bg: #111;--radius: 8px;--font: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}@media(prefers-color-scheme:light){:root{--bg: #ffffff;--bg-app: #f8f9fa;--bg-card: #ffffff;--bg-card-hover: #f5f5f5;--text: #18181b;--text-muted: #71717a;--text-secondary: #3f3f46;--accent: #18181b;--border: #e4e4e7;--border-hover: #a1a1aa;--placeholder: #a1a1aa;--pill-bg: #f4f4f5;--pill-active-bg: #e4e4e7;--pill-active-border: #a1a1aa;--stream-bg: #f0f0f0;--footer-text: #a1a1aa;--player-bg: #f0f0f0}}[data-theme=light]{--bg: #ffffff;--bg-app: #f8f9fa;--bg-card: #ffffff;--bg-card-hover: #f5f5f5;--text: #18181b;--text-muted: #71717a;--text-secondary: #3f3f46;--accent: #18181b;--border: #e4e4e7;--border-hover: #a1a1aa;--placeholder: #a1a1aa;--pill-bg: #f4f4f5;--pill-active-bg: #e4e4e7;--pill-active-border: #a1a1aa;--stream-bg: #f0f0f0;--footer-text: #a1a1aa;--player-bg: #f0f0f0}[data-theme=dark]{--bg: #0f0f0f;--bg-app: #09090b;--bg-card: #1a1a1a;--bg-card-hover: #222;--text: #e8e8e8;--text-muted: #888;--text-secondary: #d4d4d8;--accent: #fafafa;--border: #2a2a2a;--border-hover: #444;--placeholder: #444;--pill-bg: #0e0e0e;--pill-active-bg: #1c1c1c;--pill-active-border: #333;--stream-bg: #141414;--footer-text: #3f3f46;--player-bg: #111}html{font-family:var(--font);background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased}body{min-height:100vh;line-height:1.5}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{max-width:1200px;margin:0 auto;padding:0 16px}.top-nav{display:flex;align-items:center;padding:0 24px;height:48px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:100}.top-nav__brand{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-right:28px;color:var(--text)}.top-nav__brand-dot{color:var(--accent)}.top-nav__links{display:flex;gap:20px;flex:1}.top-nav__link{font-size:.875rem;color:var(--text-muted);transition:color .15s;white-space:nowrap}.top-nav__link:hover{color:var(--text)}.top-nav__link--highlight{color:#e53e3e;font-weight:600;display:inline-flex;align-items:center;gap:0}.top-nav__link--highlight:hover{color:#c53030}.top-nav__link-icon{height:1.2em;width:auto;object-fit:contain;margin-right:-4px}.top-nav__actions{display:flex;align-items:center;gap:16px}.search-bar{display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:5px 12px;width:200px}.search-bar__icon{color:var(--text-muted);flex-shrink:0}.search-bar__input{background:none;border:none;color:var(--text);font-size:.875rem;font-family:var(--font);outline:none;width:100%}.search-bar__input::placeholder{color:var(--placeholder)}.theme-toggle{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}.theme-toggle:hover{color:var(--text);border-color:var(--border-hover)}.menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;padding:6px;align-items:center;justify-content:center}.menu-toggle:hover{color:var(--text);border-color:var(--border-hover)}.side-menu-overlay{position:fixed;inset:0;background:#00000080;z-index:1000}.side-menu{position:fixed;top:0;right:0;bottom:0;width:260px;background:var(--bg, #ffffff);padding:16px;padding-bottom:env(safe-area-inset-bottom,16px);z-index:1001;overflow-y:auto}.side-menu__close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;margin-left:auto;margin-bottom:16px}.side-menu__links{display:flex;flex-direction:column;gap:0}.side-menu__link{display:block;padding:12px 8px;font-size:1rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}.side-menu__link:first-child{border-top:1px solid var(--border)}.side-menu__link--highlight{color:#e53e3e;font-weight:600}.view-toggle{display:inline-flex;gap:2px;background:var(--bg-card);border-radius:6px;padding:2px;border:1px solid var(--border)}.view-toggle__btn{background:none;border:none;color:var(--text-muted);font-size:.875rem;font-family:var(--font);padding:4px 12px;border-radius:4px;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;gap:4px}.view-toggle__icon{flex-shrink:0}.view-toggle__btn:hover{color:var(--text)}.view-toggle__btn.active{background:var(--border);color:var(--text)}.category-tabs{display:flex;gap:4px;padding:12px 24px 0;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.category-tabs__tab{background:none;border:none;color:var(--text-muted);font-size:.9rem;font-family:var(--font);padding:7px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;white-space:nowrap;flex-shrink:0}.category-tabs__tab:hover{color:var(--text)}.category-tabs__tab.active{color:var(--text);border-bottom-color:var(--text)}.category-tabs__tab--typhoon{color:#ef4444;font-weight:600}.category-tabs__tab--typhoon:hover{color:#dc2626}.category-tabs__tab--typhoon.active{color:#ef4444;border-bottom-color:#ef4444}.subcategory-pills{display:flex;gap:6px;padding:12px 24px;flex-wrap:wrap}.subcategory-pills__pill{background:var(--pill-bg);border:1px solid var(--border);border-radius:16px;color:var(--text-muted);font-size:.8125rem;font-family:var(--font);padding:4px 12px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.subcategory-pills__pill:hover{border-color:var(--border-hover);color:var(--text)}.subcategory-pills__pill.active{background:var(--pill-active-bg);border-color:var(--pill-active-border);color:var(--text)}.subcategory-pills__dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}.subcategory-pills__count{color:var(--placeholder);font-size:.75rem}.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 24px}.typhoon-banner{display:flex;align-items:center;gap:16px;padding:8px 24px;background:#ef44441a;border-bottom:1px solid rgba(239,68,68,.3);font-size:.8125rem;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none}.typhoon-banner::-webkit-scrollbar{display:none}.typhoon-banner__name{font-weight:700;color:#ef4444}.typhoon-banner__intl{font-weight:400;color:var(--text-muted);margin-left:6px;font-size:.75rem}.typhoon-banner__stat{color:var(--text-muted)}.typhoon-banner__warning{background:#ef4444;color:#fff;padding:2px 8px;border-radius:4px;font-size:.6875rem;font-weight:600}.typhoon-banner__time{color:var(--text-muted);font-size:.75rem;margin-left:auto}.typhoon-tooltip{background:#1e3a5fe6;color:#93c5fd;border:1px solid #3b82f6;border-radius:4px;font-size:.6875rem;padding:2px 6px}@media(min-width:640px){.camera-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.camera-grid{grid-template-columns:repeat(4,1fr);gap:16px}}.grid-card{display:block;text-decoration:none;color:inherit}.grid-card__stream{aspect-ratio:16 / 9;background:var(--stream-bg);border-radius:6px;overflow:hidden;position:relative}.grid-card__stream img{width:100%;height:100%;object-fit:cover}.grid-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.8125rem}.grid-card__badge{position:absolute;top:6px;left:6px;padding:2px 6px;background:#000000b3;border-radius:3px;font-size:.6875rem;font-weight:600;display:flex;align-items:center;gap:3px}.grid-card__badge-dot{width:4px;height:4px;border-radius:50%;display:inline-block}.grid-card__source-badge{position:absolute;top:6px;left:6px;background:#0009;color:#e5e7eb;font-size:.625rem;padding:1px 6px;border-radius:3px;z-index:1;pointer-events:none}.grid-card__name{font-size:.875rem;color:var(--text-secondary);margin-top:6px;font-weight:500}.grid-card__location{font-size:.8125rem;color:var(--text-muted);margin-top:1px}.grid-card--ad{display:block}.grid-card--ad .grid-card__stream{display:flex;align-items:center;justify-content:center;background:var(--stream-bg)}.grid-card--ad__label{font-size:.6875rem;color:var(--text-muted);margin-top:6px;opacity:.6}.ad-banner{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:16px 0;max-width:800px;min-height:90px}.ad-banner__label{position:absolute;top:4px;right:8px;font-size:.625rem;color:var(--text-muted);opacity:.5}.grid-sentinel{height:1px;grid-column:1 / -1}.grid-empty{display:flex;align-items:center;justify-content:center;min-height:40vh;color:var(--text-muted);font-size:.875rem}.app-footer{padding:8px 24px;border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;font-size:.8125rem;color:var(--footer-text)}.camera-single{padding-top:24px;padding-bottom:24px}.camera-single__player{aspect-ratio:16 / 9;background:var(--player-bg);border-radius:var(--radius);overflow:hidden;max-width:800px}.camera-single__player img{width:100%;height:100%;object-fit:cover}.camera-single__title{font-size:1.5rem;font-weight:700;margin-top:16px}.camera-single__meta{color:var(--text-muted);font-size:.875rem;margin-top:4px}.camera-single__desc{color:var(--text-muted);font-size:.875rem;line-height:1.7;margin-top:16px}.camera-single__back{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.875rem;margin-bottom:16px;transition:color .15s}.camera-single__back:hover{color:var(--text)}.camera-single__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1rem}.about{padding:40px 16px;max-width:640px}.about h1{font-size:1.75rem;font-weight:700;margin-bottom:16px}.about p{color:var(--text-muted);line-height:1.8;margin-bottom:16px}.about a{color:var(--accent)}.dark-popup .leaflet-popup-content-wrapper{background:var(--bg-card);color:var(--text);border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 4px 20px #00000080}.dark-popup .leaflet-popup-tip{background:var(--bg-card);border:1px solid var(--border)}.dark-popup .leaflet-popup-close-button{color:var(--text-muted)}.dark-popup .leaflet-popup-close-button:hover{color:var(--text)}.camera-marker{display:flex;align-items:center;justify-content:center;width:44px!important;height:44px!important;margin-left:-22px!important;margin-top:-22px!important}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.grid-card__favorite{position:absolute;top:6px;right:6px;background:#000000b3;border:none;border-radius:3px;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:2px 5px;line-height:1;transition:color .15s}.grid-card__favorite.active,.grid-card__favorite:hover{color:#facc15}.camera-single__header{display:flex;align-items:center;gap:12px;margin-top:16px}.camera-single__header .camera-single__title{margin-top:0}.favorite-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:.875rem;font-family:var(--font);padding:4px 10px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}.favorite-btn:hover{color:#facc15;border-color:var(--border-hover)}.favorite-btn.active{color:#facc15;border-color:#facc15}.category-tabs::-webkit-scrollbar,.subcategory-pills::-webkit-scrollbar{display:none}.category-tabs,.subcategory-pills{scrollbar-width:none}@media(max-width:900px){.desktop-only{display:none}}@media(max-width:639px){.top-nav{padding:0 8px;gap:4px}.top-nav__brand{margin-right:8px;font-size:1rem}.desktop-only,.search-bar,.view-toggle__label{display:none}.view-toggle__btn{padding:4px 8px}.top-nav__actions{gap:8px}.menu-toggle{display:flex}.category-tabs{padding:8px 12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.category-tabs__tab{white-space:nowrap;flex-shrink:0;padding:7px 12px;font-size:.8125rem}.subcategory-pills{padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.subcategory-pills__pill{white-space:nowrap;flex-shrink:0}.camera-grid{padding:12px;gap:8px}}.sponsor-page{padding:40px 16px;max-width:640px}.sponsor-page__title{font-size:1.75rem;font-weight:700;margin-bottom:16px}.sponsor-page__desc{color:var(--text-muted);line-height:1.8;margin-bottom:32px}.sponsor-page__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.sponsor-page__option{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center}.sponsor-page__option h2{font-size:1.5rem;font-weight:700;margin-bottom:4px}.sponsor-page__option p{color:var(--text-muted);font-size:.875rem;margin-bottom:16px}.sponsor-page__btn{background:var(--border);border:none;border-radius:6px;color:var(--text-muted);font-size:.875rem;font-family:var(--font);padding:8px 20px;cursor:not-allowed}.sponsor-page__note{color:var(--text-muted);font-size:.8125rem;text-align:center}@media(max-width:639px){.sponsor-page__options{grid-template-columns:1fr}}.camera-single__info{margin-top:32px}.camera-single__info h2,.camera-single__tips h2{font-size:1.125rem;font-weight:600;margin-bottom:12px}.camera-single__details{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.camera-single__details>div{display:flex;flex-direction:column;padding:12px 16px;border-bottom:1px solid var(--border)}.camera-single__details>div:nth-last-child(-n+2){border-bottom:none}.camera-single__details dt{font-size:.75rem;color:var(--text-muted);margin-bottom:2px}.camera-single__details dd{font-size:.875rem;color:var(--text)}.camera-single__tips{margin-top:24px}.camera-single__tips ul{padding-left:20px;color:var(--text-muted);font-size:.875rem;line-height:1.7}.camera-single__tips li{margin-bottom:6px}@media(max-width:639px){.camera-single__details{grid-template-columns:1fr}.camera-single__details>div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}.camera-single__details>div:last-child{border-bottom:none}}.route-card{display:block;text-decoration:none}.route-card__img{aspect-ratio:16 / 9;background:var(--stream-bg);border-radius:6px;overflow:hidden;position:relative}.route-card__img img{width:100%;height:100%;object-fit:cover}.route-card__placeholder{width:100%;height:100%}.route-card__name{font-size:.8125rem;font-weight:500;color:var(--text);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.routes__list{display:flex;flex-direction:column;gap:0}.routes__item{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:opacity .15s}.routes__item:first-child{border-top:1px solid var(--border)}.routes__item:hover{opacity:.75}.routes__item-content{flex:1;min-width:0}.routes__item-title{font-size:1.1rem;font-weight:600;margin:0 0 4px;color:var(--text)}.routes__item-subtitle{font-size:.85rem;color:var(--text-muted);margin:0 0 6px}.routes__item-desc{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin:0}.routes__item-count{font-size:.8rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;padding-top:3px}