#logo-container{position:absolute;top:35px;right:35px;z-index:1001;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--button-stepper-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--panel-border-color);border-radius:4px;color:var(--button-text-color-action);box-shadow:var(--button-stepper-shadow);transition:background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;cursor:pointer}#logo-container:hover{background:var(--button-stepper-hover-bg);box-shadow:var(--button-stepper-hover-shadow)}#logo-container svg{stroke:var(--button-text-color-action)}#about-popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2900;display:none}#about-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3000;width:80%;max-width:400px;padding:20px;background-color:#add8e680;border:1px solid var(--panel-border-color);border-radius:15px;box-shadow:0 8px 32px #0000005e;color:var(--text-color-primary);display:none}#about-popup h2{margin-top:0;font-size:1.5em}#about-popup p{line-height:1.6}#close-about-popup{margin-top:15px;padding:8px 15px;border:none;background-color:var(--button-stepper-bg);color:var(--button-text-color-action);border-radius:5px;cursor:pointer;transition:background-color .2s ease;font-weight:700}#close-about-popup:hover{background-color:var(--button-stepper-hover-bg)}body.view-2d-active #about-popup{color:#333}body.view-2d-active #close-about-popup{color:#007bff}:root{--panel-shadow: 0 8px 32px 0 rgba(0, 0, 0, .2);--button-stepper-bg: rgba(255, 255, 255, .15);--button-stepper-hover-bg: rgba(255, 255, 255, .25);--button-stepper-active-bg: rgba(255, 255, 255, .35);--button-stepper-shadow: 0 1px 3px rgba(0,0,0,.1);--button-stepper-hover-shadow: 0 1px 5px rgba(0,0,0,.15);--button-stepper-active-shadow: inset 0 1px 2px rgba(0,0,0,.2);--button-subtle-bg: rgba(255, 255, 255, .1);--button-subtle-hover-bg: rgba(255, 255, 255, .2);--text-color-secondary: #555;--text-color-tertiary: #666;--text-color-info-label: #4a5568;--text-color-info-value: #111;--border-color-divider: #ccc;--border-color-input: #ddd;--accent-color-sun: #e67e22;--accent-color-moon: #3498db;--panel-bg-day: rgba(173, 216, 230, .2);--panel-border-color-day: rgba(255, 255, 255, .3);--body-bg-gradient-start-day: #A7C7E7;--body-bg-gradient-end-day: #FFD1DC;--body-grid-line-color-day: rgba(0,0,0,.1);--text-color-slider-label-day: #555;--text-color-primary-day: #333;--button-text-color-action-day: #007bff;--accent-color-sun-dark-day: #994d00;--accent-color-moon-dark-day: #1a5a8a;--time-indicator-color-day: #111;--text-color-config-label-day: #666;--panel-bg-night: rgba(255, 255, 255, .1);--panel-border-color-night: rgba(255, 255, 255, .2);--body-bg-gradient-start-night: #0b1a3d;--body-bg-gradient-end-night: #4a2a4d;--body-grid-line-color-night: rgba(255,255,255,.1);--text-color-slider-label-night: #ccc;--text-color-primary-night: #eee;--button-text-color-action-night: #58a6ff;--accent-color-sun-dark-night: #ffcc80;--accent-color-moon-dark-night: #80bfff;--time-indicator-color-night: #eee;--text-color-config-label-night: #ccc;--panel-bg: var(--panel-bg-day);--panel-border-color: var(--panel-border-color-day);--body-bg-gradient-start: var(--body-bg-gradient-start-day);--body-bg-gradient-end: var(--body-bg-gradient-end-day);--body-grid-line-color: var(--body-grid-line-color-day);--text-color-slider-label: var(--text-color-slider-label-day);--text-color-primary: var(--text-color-primary-day);--button-text-color-action: var(--button-text-color-action-day);--accent-color-sun-dark: var(--accent-color-sun-dark-day);--accent-color-moon-dark: var(--accent-color-moon-dark-day);--time-indicator-color: var(--time-indicator-color-day);--text-color-config-label: var(--text-color-config-label-day)}body.night-theme{--panel-bg: var(--panel-bg-night);--panel-border-color: var(--panel-border-color-night);--body-bg-gradient-start: var(--body-bg-gradient-start-night);--body-bg-gradient-end: var(--body-bg-gradient-end-night);--body-grid-line-color: var(--body-grid-line-color-night);--text-color-slider-label: var(--text-color-slider-label-night);--text-color-primary: var(--text-color-primary-night);--button-text-color-action: var(--button-text-color-action-night);--accent-color-sun-dark: var(--accent-color-sun-dark-night);--accent-color-moon-dark: var(--accent-color-moon-dark-night);--time-indicator-color: var(--time-indicator-color-night);--text-color-config-label: var(--text-color-config-label-night)}body{font-family:sans-serif;display:flex;flex-direction:column;height:100vh;margin:0;overflow:hidden;transition:background-color 1s ease;background-color:var(--body-bg-gradient-start);background-image:linear-gradient(to right,var(--body-grid-line-color) 1px,transparent 1px),linear-gradient(to bottom,var(--body-grid-line-color) 1px,transparent 1px),linear-gradient(to right,var(--body-bg-gradient-start),var(--body-bg-gradient-end));background-size:20px 20px,20px 20px,100% 100%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#top-bar{padding:0;background:#f0f0f0;height:0}#slider-bottom-bar{padding:8px;flex-shrink:0;background:var(--panel-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--panel-border-color);box-shadow:var(--panel-shadow)}#main-container{flex-grow:1;position:relative;overflow:hidden}#map-container,#scene-container{height:100%;width:100%}#map-container svg{pointer-events:none}#map{height:100%;width:100%}#loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2000;background:#000000b3;color:#fff;padding:15px;border-radius:8px}#bottom-panel{padding:10px;background:transparent;display:grid;gap:10px;align-items:stretch;flex-shrink:0;font-size:12px;max-height:40%;overflow-y:auto;grid-template-columns:1fr}@media(min-width:410px){#bottom-panel{grid-template-columns:repeat(2,1fr)}}@media(min-width:770px){#bottom-panel{grid-template-columns:repeat(4,1fr)}}.card{background:var(--panel-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:15px;border:1px solid var(--panel-border-color);box-shadow:var(--panel-shadow);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:140px}.card-title{font-size:1.1em;font-weight:700;color:var(--text-color-primary);display:flex;align-items:center;gap:6px;width:100%}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;flex-grow:1}.info-grid>div{border-bottom:1px solid var(--border-color-divider)}.info-grid>div:last-child,.info-grid>div:nth-last-child(2){border-bottom:none}.info-grid>div>span:first-child{font-size:.8em;color:var(--text-color-info-label);display:block;font-weight:700}.info-grid>div:nth-child(odd){text-align:right}.sun-card .info-grid>div>span:first-child{color:var(--accent-color-sun)}.moon-card .info-grid>div>span:first-child{color:var(--accent-color-moon)}.info-grid>div>span:last-child{font-size:1.05em;font-weight:500;color:var(--text-color-info-value)}.sun-card .info-grid>div>span:last-child{color:var(--accent-color-sun-dark)}.moon-card .info-grid>div>span:last-child{color:var(--accent-color-moon-dark)}.config-item{display:flex;flex-direction:column;gap:4px}.config-item input{width:100%;padding:6px;border:1px solid var(--border-color-input);border-radius:5px;box-sizing:border-box}.date-label-row{display:flex;align-items:center;gap:5px;width:100%}.date-label-row label{display:flex;align-items:center;gap:5px;flex-shrink:0;color:var(--text-color-config-label)}.date-control-group,.timezone-control-group{display:flex;align-items:center;gap:5px}.date-control-group input,.timezone-control-group input{flex-grow:1;text-align:center}.stepper-btn{appearance:none;outline:none;width:24px;height:24px;padding:0;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--button-stepper-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--panel-border-color);border-radius:4px;color:var(--button-text-color-action);transition:background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;box-shadow:var(--button-stepper-shadow)}.stepper-btn:hover{background:var(--button-stepper-hover-bg);box-shadow:var(--button-stepper-hover-shadow)}.stepper-btn:active{background:var(--button-stepper-active-bg);box-shadow:var(--button-stepper-active-shadow)}#slider-container{display:flex;align-items:center;width:100%}.slider-wrapper{flex-grow:1}#time-slider{width:100%}#slider-labels{position:relative;width:100%;height:20px;font-size:11px;color:var(--text-color-slider-label);margin-top:2px}#slider-labels span{position:absolute;top:0;transform:translate(-50%)}#slider-labels span:nth-child(1){left:0%;transform:translate(0)}#slider-labels span:nth-child(2){left:12.5%}#slider-labels span:nth-child(3){left:25%}#slider-labels span:nth-child(4){left:37.5%}#slider-labels span:nth-child(5){left:50%}#slider-labels span:nth-child(6){left:62.5%}#slider-labels span:nth-child(7){left:75%}#slider-labels span:nth-child(8){left:87.5%}#slider-labels span:nth-child(9){left:100%;transform:translate(-100%)}#time-indicator{font-weight:700;white-space:nowrap;color:var(--time-indicator-color)}#locate-btn{position:absolute;bottom:35px;left:10px;z-index:1000;background-color:#fff;border:2px solid rgba(0,0,0,.2);border-radius:50%;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px #000000a6}#locate-btn:hover{background-color:#f4f4f4}#locate-btn svg{stroke:#333}.focal-length-controls{display:flex;align-items:center;gap:8px}.focal-length-controls input[type=range]{flex-grow:1;padding-left:0;padding-right:0}.focal-length-controls input[type=text]{width:50px;background-color:#333;color:#fff;border:1px solid #555;text-align:center}.focus-btn{background:none;border:none;padding:2px;margin:0;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.focus-btn:hover{background:#0000001a}.focus-btn.active{background:#b0b0b0;color:#fff}#focus-sun-btn{color:var(--accent-color-sun)}#focus-moon-btn{color:var(--accent-color-moon)}.subtle-btn{background:var(--button-subtle-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--panel-border-color);border-radius:4px;padding:0 5px;cursor:pointer;font-size:10px;color:var(--button-text-color-action);transition:background .2s ease,border-color .2s ease,color .2s ease}.subtle-btn:hover{background:var(--button-subtle-hover-bg);text-decoration:none}.pill-toggle{display:flex;flex-direction:column;border:1px solid var(--panel-border-color);border-radius:7px;overflow:hidden;margin-left:5px;margin-right:8px}.pill-option{background:transparent;border:none;padding:3px 8px;cursor:pointer;color:var(--button-text-color-action);font-size:10px;transition:background-color .2s ease,color .2s ease}.pill-option.active{background:var(--button-text-color-action);color:#fff}.day-indicator{font-size:.75em;vertical-align:top;margin-left:2px}@media(max-width:770px){#slider-labels span{font-size:8px}}.leaflet-bottom.leaflet-left .leaflet-control-zoom{margin-bottom:73px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font-size:0;text-indent:-9999px;background-size:50% 50%;background-position:center;background-repeat:no-repeat}.leaflet-control-zoom-in{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23333'%3E%3Cpath d='M30 14h-12v-12h-4v12h-12v4h12v12h4v-12h12z'/%3E%3C/svg%3E")}.leaflet-control-zoom-out{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23333'%3E%3Cpath d='M2 14h28v4h-28z'/%3E%3C/svg%3E")}#bottom-right-panels{position:absolute;bottom:35px;right:35px;display:flex;align-items:flex-end;gap:10px;z-index:3}#top-right-config-panel #camera-info p{margin:4px 0}#viewfinder-panel{background:var(--panel-bg);color:#fff;padding:10px;border-radius:5px;width:220px;box-sizing:border-box;font-size:12px;border:1px solid var(--panel-border-color);box-shadow:var(--panel-shadow)}#moon-phase-icon svg{width:24px;height:24px}.preview-wrapper{display:flex;flex-direction:column;gap:3px;align-items:center;flex-grow:1}.preview-wrapper>label{font-size:13px;font-weight:700;color:#555}#view-switcher-preview{position:relative;width:150px;height:100px;border:1px solid #ddd;border-radius:8px;background:#fff;box-shadow:0 2px 8px #0000001a;flex-shrink:0;overflow:hidden}#preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}#preview-2d{width:100%;height:100%;overflow:hidden;position:relative}#preview-image{position:absolute}#preview-3d{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;background-size:cover;background-position:center}#preview-camera-indicator{position:absolute;width:24px;height:24px;z-index:3;transform-origin:center center;transform:translate(-50%,-50%)}.scene-panel-title{color:#fff;font-size:1.1em;font-weight:700;margin:4px 0}.slider-label{color:#fff;font-size:1em;font-weight:700;margin-bottom:2px}.scene-config-stack{display:flex;flex-direction:column;gap:4px}.scene-config-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:0}.custom-checkbox-label{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;font-size:14px;font-weight:400;color:#ff0;padding:4px 0}.custom-checkbox-label input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.checkmark{position:relative;height:18px;width:18px;background-color:transparent;border:1px solid #fff;border-radius:3px;flex-shrink:0;margin-left:8px}.custom-checkbox-label input:checked~.checkmark{background-color:#eee}.checkmark:after{content:"";position:absolute;display:none}.custom-checkbox-label input:checked~.checkmark:after{display:block;background-color:var(--accent-color-moon);border-radius:50%;width:12px;height:12px;left:3px;top:3px}#top-right-config-panel{position:absolute;top:73px;right:35px;z-index:4}#top-right-config-panel #camera-info{padding:35px 8px 8px;width:120px;background:var(--panel-bg);color:#fff;border-radius:5px;font-size:12px;border:1px solid var(--panel-border-color);box-shadow:var(--panel-shadow)}#config-expand-btn,#config-collapse-btn{position:absolute;top:0;right:0;width:28px;height:28px;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;background:var(--button-stepper-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--panel-border-color);border-radius:4px;color:var(--button-text-color-action);box-shadow:var(--button-stepper-shadow);transition:background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease}#config-collapse-btn{font-size:20px}#config-expand-btn:hover,#config-collapse-btn:hover{background:var(--button-stepper-hover-bg);box-shadow:var(--button-stepper-hover-shadow)}#config-expand-btn svg{stroke:var(--button-text-color-action)}#app-title-hud{position:absolute;top:0;left:0;font-size:10px;z-index:1001;pointer-events:none;color:#333;text-shadow:0 0 3px rgba(255,255,255,.5);font-weight:700}body.view-3d-active #app-title-hud{color:#fff;text-shadow:0 0 3px rgba(0,0,0,.8)}#hud-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.hud-label{position:absolute;font-family:Courier New,Courier,monospace;font-size:12px;font-weight:700;text-shadow:0 0 4px rgba(0,0,0,.8);white-space:nowrap;opacity:0;transition:opacity .1s}.azimuth-label,.azimuth-label-top,.azimuth-label-left,.azimuth-label-right{color:#0fc}.azimuth-label{transform:translate(-50%);bottom:10px;border-bottom:1px solid #00ffcc;padding-bottom:0}.azimuth-label-top{transform:translate(-50%);top:10px;border-top:1px solid #00ffcc;padding-top:0}.azimuth-label-left{transform:translateY(-50%);left:10px;writing-mode:vertical-rl;text-orientation:mixed;border-left:1px solid #00ffcc;padding-left:1px}.azimuth-label-right{transform:translateY(-50%);right:10px;writing-mode:vertical-rl;text-orientation:mixed;border-right:1px solid #00ffcc;padding-right:1px}.altitude-label,.altitude-label-top,.altitude-label-left,.altitude-label-bottom{color:#ff0}.altitude-label{transform:translateY(-50%);right:25px;border-right:1px solid #FFFF00;padding-right:1px;text-align:right;writing-mode:vertical-rl;text-orientation:mixed}.altitude-label-left{transform:translateY(-50%);left:25px;border-left:1px solid #FFFF00;padding-left:1px;writing-mode:vertical-rl;text-orientation:mixed}.altitude-label-bottom,.altitude-label-top{transform:translate(-50%);font-size:11px}.altitude-label-bottom{bottom:25px;border-bottom:1px solid #FFFF00;padding-bottom:0}.altitude-label-top{top:25px;border-top:1px solid #FFFF00;padding-top:0}#camera-hud-display{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:5px;background:none;color:#fff;padding:0 5px;border-radius:0;font-size:10px;z-index:2;text-shadow:0 0 3px rgba(0,0,0,.8)}.hud-item{margin:0;white-space:nowrap}#map-hud-display{position:absolute;bottom:0;left:0;display:flex;align-items:center;gap:15px;background:none;color:#333;padding:0 5px;border-radius:0;font-size:10px;z-index:1000;text-shadow:0 0 3px rgba(255,255,255,.5);pointer-events:none}body.view-3d-active #map-hud-display{display:none}