:root{--app-bg: rgba(20, 20, 20, .95);--title-bg: #5b2c34;--text-main: #ffffff;--text-muted: #aaaaaa;--panel-bg: #1a1a1a;--panel-border: #444444;--highlight-bg: #2a2a2a;--kofi-color: #80ff80;--rare-color: #ffd700;--link-color: #41D1FF;--map-bg: #000000;--map-inner-bg: #050505;background-color:transparent;color:var(--text-main);font-family:sans-serif;font-size:13px}[data-theme=light]{--app-bg: rgba(245, 245, 245, .95);--title-bg: #e5e5e5;--text-main: #222222;--text-muted: #666666;--panel-bg: #ffffff;--panel-border: #cccccc;--highlight-bg: #f0f0f0;--kofi-color: #006600;--rare-color: #50007e;--link-color: #0056b3;--map-bg: #e5e5e5;--map-inner-bg: #ffffff}a{color:var(--link-color);text-decoration:none}body{margin:0;padding:0;overflow:hidden;background:transparent}#app{display:flex;flex-direction:column;height:100vh;background-color:var(--app-bg)}#titlebar{background-color:var(--title-bg);color:var(--text-main);display:flex;justify-content:space-between;align-items:center;padding:4px 8px}.drag-region{-webkit-app-region:drag;-webkit-user-select:none;user-select:none;font-weight:700}.window-controls span{margin-left:12px;cursor:pointer;font-size:14px}.window-controls{-webkit-app-region:no-drag}.hidden{display:none!important}.no-results{color:var(--text-muted);font-style:italic;padding:8px 0}#tabs{display:flex;background-color:var(--panel-bg);padding:4px 8px 0;gap:2px}#tabs button{background-color:transparent;color:var(--text-muted);border:1px solid transparent;border-bottom:none;padding:6px 12px;cursor:pointer;border-top-left-radius:4px;border-top-right-radius:4px}#tabs button.active{background-color:var(--highlight-bg);color:var(--text-main);border:1px solid var(--panel-border);border-bottom:none}#search-row{display:flex;padding:6px 8px;gap:6px;background-color:var(--highlight-bg)}#search-input{flex-grow:1;background-color:var(--panel-bg);border:1px solid var(--panel-border);color:var(--text-main);padding:4px 8px;border-radius:3px}#search-row button{background-color:var(--panel-border);color:var(--text-main);border:none;padding:4px 10px;cursor:pointer;border-radius:3px}#results-container{flex-grow:1;padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.result-row{display:flex;justify-content:space-between}.result-name{font-weight:700}.result-loc{color:var(--text-muted)}#status-bar{padding:4px 8px;background-color:var(--highlight-bg);color:var(--text-muted);border-top:1px solid var(--panel-border)}#btn-shade{display:inline-block;transition:transform .2s ease}#btn-shade.shaded{transform:rotate(-90deg)}#opacity-menu{position:absolute;top:30px;left:10px;background-color:#2a2a2a;border:1px solid #444;padding:10px;border-radius:4px;z-index:100;display:flex;align-items:center;gap:8px}#opacity-menu.hidden{display:none}#split-container{display:flex;flex-grow:1;overflow:hidden}#left-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--panel-border)}#right-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--map-bg);align-items:center;justify-content:center}.map-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--map-inner-bg);overflow:hidden}.map-bounds-container{position:relative;display:inline-block;max-width:100%;max-height:100%;aspect-ratio:1 / 1}#zone-map-img{max-width:100%;max-height:100%;display:block}#map-flag{position:absolute;font-size:24px;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.8));z-index:5}#slide-panel{position:absolute;top:32px;right:-350px;width:300px;background-color:var(--panel-bg);border-left:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);transition:right .2s ease-in-out;z-index:2000;padding:15px;box-shadow:-4px 4px 10px #00000080}#slide-panel.show{right:0}#app-promo-icon{display:inline-block;margin:0 8px}#app-promo-icon img{width:24px;height:24px}#app-promo-icon.pulse{animation:pulse 2s infinite ease-in-out}#app-promo-icon.shake img{animation:shake .5s ease-in-out}@keyframes pulse{50%{transform:scale(1.1)}}@keyframes shake{25%{transform:translate(-3px) rotate(-5deg)}50%{transform:translate(3px) rotate(5deg)}75%{transform:translate(-3px) rotate(-5deg)}}