:root{--primary-bg: #0a0a1a;--secondary-bg: #12122a;--card-bg: rgba(25, 25, 50, .8);--text-primary: #ffffff;--text-secondary: #a0a0c0;--accent: #4ecca3;--accent-secondary: #00f2fe;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-accent: linear-gradient(135deg, #4ecca3 0%, #00f2fe 100%);--shadow-glow: 0 0 30px rgba(78, 204, 163, .3);--border-radius: 16px}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--primary-bg);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;overflow-x:hidden}.app-container{min-height:100vh;position:relative}.particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.main-header{position:relative;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(10,10,26,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(78,204,163,.2)}.header-left,.header-center,.header-right{display:flex;align-items:center;gap:1rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{color:var(--accent);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.logo h1{font-size:1.75rem;font-weight:700;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.local-time{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--card-bg);border-radius:50px;border:1px solid rgba(78,204,163,.3)}.time-value{font-family:JetBrains Mono,Courier New,monospace;font-size:1.1rem;font-weight:600;letter-spacing:.5px}.format-toggle{padding:.25rem .5rem;background:rgba(78,204,163,.2);border:none;border-radius:4px;color:var(--accent);font-size:.75rem;cursor:pointer;transition:all .2s}.format-toggle:hover{background:var(--accent);color:var(--primary-bg)}.stats-display{display:flex;gap:.75rem}.stat{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;background:var(--card-bg);border-radius:20px;font-size:.9rem;font-weight:600}.stat.streak{background:linear-gradient(135deg,#ff6b6b 0%,#ffa500 100%);color:#fff}.fire-icon{font-size:1rem}.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:50%;color:var(--text-primary);cursor:pointer;transition:all .3s}.icon-btn:hover{background:var(--accent);color:var(--primary-bg);box-shadow:var(--shadow-glow)}.trophy-btn:hover{background:linear-gradient(135deg,#ffd700 0%,#ffaa00 100%)}.toolbar{position:relative;z-index:90;display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:rgba(18,18,42,.9);backdrop-filter:blur(10px);flex-wrap:wrap}.search-container{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:50px;flex:1;max-width:400px}.search-container input{flex:1;background:none;border:none;color:var(--text-primary);font-size:.95rem;outline:none}.search-container input::placeholder{color:var(--text-secondary)}.view-modes{display:flex;background:var(--card-bg);border-radius:50px;padding:.25rem;border:1px solid rgba(78,204,163,.2)}.view-modes button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:none;border:none;color:var(--text-secondary);border-radius:50px;cursor:pointer;transition:all .3s;font-size:.9rem}.view-modes button.active{background:var(--gradient-accent);color:var(--primary-bg);font-weight:600}.view-modes button:hover:not(.active){color:var(--text-primary);background:rgba(78,204,163,.1)}.filter-toggle{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:50px;color:var(--text-primary);cursor:pointer;transition:all .3s}.filter-toggle:hover{border-color:var(--accent)}.filter-toggle .rotated{transform:rotate(180deg)}.filters-panel{padding:1rem 2rem;background:rgba(18,18,42,.95);border-bottom:1px solid rgba(78,204,163,.2);overflow:hidden}.filters-panel select{padding:.6rem 1rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:8px;color:var(--text-primary);font-size:.95rem;cursor:pointer;min-width:200px}.features-bar{display:flex;gap:1rem;padding:1rem 2rem;flex-wrap:wrap}.time-machine{background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:var(--border-radius);overflow:hidden}.time-machine-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:none;border:none;color:var(--text-primary);cursor:pointer;width:100%;font-size:.95rem;transition:all .3s}.time-machine-toggle:hover{background:rgba(78,204,163,.1)}.offset-badge{padding:.2rem .5rem;background:var(--accent);color:var(--primary-bg);border-radius:4px;font-size:.75rem;font-weight:600}.time-machine-controls{padding:1rem;border-top:1px solid rgba(78,204,163,.2)}.time-slider-container{display:flex;align-items:center;gap:.5rem}.time-btn{padding:.5rem;background:rgba(78,204,163,.2);border:none;border-radius:8px;color:var(--accent);cursor:pointer;transition:all .2s}.time-btn:hover{background:var(--accent);color:var(--primary-bg)}.time-slider{flex:1;height:6px;-webkit-appearance:none;background:rgba(78,204,163,.2);border-radius:3px;outline:none}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #4ecca380}.time-display{text-align:center;padding:.5rem 0}.time-label{font-size:1.25rem;font-weight:700;color:var(--accent)}.quick-jumps,.preset-times{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.quick-jumps button,.preset-times button{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;background:rgba(78,204,163,.1);border:1px solid rgba(78,204,163,.2);border-radius:20px;color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .2s}.quick-jumps button:hover,.preset-times button:hover{background:rgba(78,204,163,.2);color:var(--text-primary);border-color:var(--accent)}.quick-jumps button.active{background:var(--accent);color:var(--primary-bg)}.daily-challenge-container{position:relative}.challenge-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;font-size:.95rem;transition:all .3s}.challenge-toggle:hover{border-color:var(--accent);box-shadow:var(--shadow-glow)}.challenge-toggle.completed{background:linear-gradient(135deg,rgba(78,204,163,.2) 0%,rgba(0,242,254,.2) 100%);border-color:var(--accent)}.check-icon{color:var(--accent)}.sparkle-icon{color:gold;animation:sparkle 1s infinite}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.challenge-panel{position:absolute;top:100%;left:0;margin-top:.5rem;padding:1.25rem;background:var(--secondary-bg);border:1px solid rgba(78,204,163,.3);border-radius:var(--border-radius);min-width:320px;z-index:100;box-shadow:0 10px 40px #00000080}.challenge-panel h3{margin-bottom:.5rem;color:var(--text-primary)}.hint{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem}.challenge-input{display:flex;gap:.5rem}.challenge-input input{flex:1;padding:.6rem 1rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.3);border-radius:8px;color:var(--text-primary);font-size:.95rem;outline:none}.challenge-input input:focus{border-color:var(--accent)}.challenge-input button{padding:.6rem 1.25rem;background:var(--gradient-accent);border:none;border-radius:8px;color:var(--primary-bg);font-weight:600;cursor:pointer;transition:all .3s}.challenge-input button:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.result{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;margin-top:.5rem}.result.correct{background:rgba(78,204,163,.2);color:var(--accent)}.result.wrong{background:rgba(255,107,107,.2);color:#ff6b6b;flex-wrap:wrap}.result.wrong button{margin-top:.5rem;width:100%;padding:.5rem;background:rgba(255,107,107,.2);border:1px solid #ff6b6b;border-radius:4px;color:#ff6b6b;cursor:pointer}.challenge-completed{text-align:center;padding:1rem}.challenge-completed svg{color:var(--accent);margin-bottom:.5rem}.main-content{position:relative;z-index:10;padding:2rem;display:flex;gap:2rem;min-height:calc(100vh - 250px)}.globe-section{flex:1;display:flex;justify-content:center;align-items:center}.globe-container{position:relative;width:100%;max-width:500px;aspect-ratio:1;cursor:grab}.globe-container:active{cursor:grabbing}.globe-svg{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(0,242,254,.3))}.city-label{text-shadow:0 0 10px rgba(0,0,0,.8);pointer-events:none}.city-tooltip{position:absolute;bottom:10%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;padding:.75rem 1.5rem;background:var(--card-bg);border:1px solid rgba(78,204,163,.5);border-radius:var(--border-radius);backdrop-filter:blur(10px)}.tooltip-city{font-weight:600;font-size:1.1rem}.tooltip-time{color:var(--accent);font-family:JetBrains Mono,monospace;font-size:1.5rem;font-weight:700}.globe-instructions{position:absolute;bottom:0;left:50%;transform:translate(-50%);color:var(--text-secondary);font-size:.85rem;opacity:.7}.selected-city-panel{width:350px;flex-shrink:0}.cities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;width:100%}.empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary);text-align:center}.empty-state svg{opacity:.5;margin-bottom:1rem}.empty-state h3{color:var(--text-primary);margin-bottom:.5rem}.city-card{padding:1.25rem;border-radius:var(--border-radius);position:relative;overflow:hidden;transition:all .3s}.city-card:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(5px);z-index:0}.city-card>*{position:relative;z-index:1}.city-card:hover{transform:translateY(-4px);box-shadow:0 10px 40px #0006}.city-card.expanded{box-shadow:0 20px 60px #00000080}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.city-title{display:flex;align-items:center;gap:.75rem}.city-flag{font-size:2rem}.city-title h3{font-size:1.25rem;font-weight:700;margin:0}.country-name{color:#ffffffb3;font-size:.9rem}.card-actions{display:flex;gap:.5rem}.favorite-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .3s}.favorite-btn:hover,.favorite-btn.active{background:rgba(255,107,107,.3)}.close-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s}.close-btn:hover{background:rgba(255,255,255,.2)}.time-display{margin-bottom:1rem}.main-time{display:block;font-family:JetBrains Mono,monospace;font-size:2.5rem;font-weight:700;letter-spacing:1px}.date-display{color:#fffc;font-size:.95rem}.time-period{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(0,0,0,.2);border-radius:20px;width:fit-content;margin-bottom:1rem;font-weight:500}.city-details{display:flex;flex-direction:column;gap:.5rem}.detail-row{display:flex;align-items:center;gap:.5rem;color:#fffc;font-size:.9rem}.detail-row svg{opacity:.7}.time-travel-indicator{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem 1rem;background:rgba(78,204,163,.2);border-radius:20px;color:var(--accent);font-size:.85rem}.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200}.achievement-panel{position:fixed;top:0;right:0;width:400px;max-width:90vw;height:100vh;background:var(--secondary-bg);border-left:1px solid rgba(78,204,163,.3);z-index:201;overflow-y:auto;padding:1.5rem}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.panel-header h2{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{display:flex;flex-direction:column;align-items:center;padding:1rem;background:var(--card-bg);border-radius:var(--border-radius);border:1px solid rgba(78,204,163,.2)}.stat-icon{color:var(--accent);margin-bottom:.5rem}.stat-icon.fire{color:#ff6b6b}.stat-value{font-size:1.5rem;font-weight:700}.stat-label{font-size:.8rem;color:var(--text-secondary)}.progress-section{margin-bottom:1.5rem}.progress-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem;color:var(--text-secondary)}.progress-bar{height:8px;background:var(--card-bg);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-accent);border-radius:4px}.achievements-list{display:flex;flex-direction:column;gap:.75rem}.achievement-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg);border-radius:var(--border-radius);border:1px solid transparent;transition:all .3s}.achievement-item.unlocked{border-color:#4ecca380;background:linear-gradient(135deg,rgba(78,204,163,.1) 0%,rgba(0,242,254,.1) 100%)}.achievement-item.locked{opacity:.5}.achievement-icon{font-size:2rem}.achievement-info{flex:1}.achievement-name{display:block;font-weight:600;margin-bottom:.25rem}.achievement-desc{font-size:.85rem;color:var(--text-secondary)}.achievement-check{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--primary-bg);border-radius:50%;font-weight:700}@media (max-width: 1024px){.main-content{flex-direction:column}.selected-city-panel{width:100%;max-width:400px;margin:0 auto}}@media (max-width: 768px){.main-header{flex-direction:column;gap:1rem;padding:1rem}.toolbar{flex-direction:column;align-items:stretch;padding:1rem}.search-container{max-width:none}.view-modes{justify-content:center}.features-bar{flex-direction:column}.main-content{padding:1rem}.cities-grid{grid-template-columns:1fr}.achievement-panel{width:100%}.stats-grid{grid-template-columns:repeat(3,1fr)}}