body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.search-bar{display:flex;width:100%;max-width:600px;margin:0 auto 24px;position:relative;border-radius:50px;box-shadow:var(--card-shadow);overflow:hidden;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.search-input-wrapper{display:flex;width:100%;background-color:var(--card-bg);border-radius:50px;border:1px solid var(--border-color);transition:all .3s ease}.search-bar input{flex:1;padding:16px 20px;border:none;outline:none;font-size:1rem;background-color:transparent;border-radius:50px 0 0 50px;color:var(--text-color);width:100%;min-width:0}.search-bar input::placeholder{color:var(--text-secondary);opacity:.7}.search-button{background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;border-radius:0 50px 50px 0;flex-shrink:0}.search-button:hover{background-color:var(--primary-dark)}.search-button:disabled{background-color:var(--border-color);cursor:not-allowed;opacity:.7}.search-bar svg{width:20px;height:20px;min-width:15px}.search-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.search-bar{max-width:100%}}.theme-dark .search-input-wrapper{border-color:var(--border-color)}.theme-dark .search-bar input::placeholder{color:var(--text-secondary);opacity:.8}.city-card{background-color:transparent;border-radius:12px;box-shadow:var(--card-shadow);padding:20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;transition:all .3s ease;text-decoration:none;color:var(--text-color)}.city-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.city-card-content{flex:1}.city-card h3{margin:0 0 8px;font-size:1.2rem;font-weight:600;color:var(--text-color)}.city-temp{font-size:1.8rem;font-weight:700;color:var(--primary-color)}.city-weather-description{font-size:.85rem;font-weight:400;color:var(--text-secondary);margin-top:4px;text-transform:capitalize}.city-card-actions{display:flex;gap:8px}.favorite-btn,.remove-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background-color .2s ease;color:var(--text-secondary)}.favorite-btn:hover{background-color:#ffd7001a}.favorite-btn.favorite-active{color:var(--secondary-color)}.remove-btn:hover{background-color:#ff00001a;color:var(--error-color)}.favorite-btn svg,.remove-btn svg{width:18px;height:18px}.theme-dark .city-card{border:1px solid var(--border-color)}.theme-dark .city-card:hover{box-shadow:0 8px 24px #00000040}.nav-tabs{display:flex;justify-content:space-between;background-color:var(--card-bg);border-radius:8px;padding:4px;margin-bottom:20px;box-shadow:0 2px 8px #00000014}.nav-tab{display:flex;align-items:center;justify-content:center;flex:1;padding:10px 16px;border:none;background:none;border-radius:6px;color:var(--text-secondary);font-weight:600;cursor:pointer;transition:all .2s ease;gap:8px}.nav-tab svg{width:18px;height:18px}.nav-tab:hover{background-color:#0000000a;color:var(--text-color)}.nav-tab.active{background-color:var(--primary-color);color:#fff}.nav-tab.active svg{color:#fff}.theme-dark .nav-tab:hover{background-color:#ffffff1a}@media (max-width: 576px){.nav-tab{flex-direction:column;padding:10px 8px}.nav-tab span{font-size:12px}}.pagination{display:flex;align-items:center;justify-content:center;margin:24px 0;gap:8px}.pagination-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-color);background-color:var(--card-bg);color:var(--text-color);cursor:pointer;transition:all .2s ease}.pagination-button:hover:not(:disabled){background-color:var(--border-color)}.pagination-button:disabled{opacity:.5;cursor:not-allowed}.pagination-button svg{width:18px;height:18px}.pagination-pages{display:flex;align-items:center;gap:6px}.pagination-number{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-color);background-color:var(--card-bg);color:var(--text-color);font-weight:600;cursor:pointer;transition:all .2s ease}.pagination-number:hover:not(:disabled){background-color:var(--border-color)}.pagination-number.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.pagination-ellipsis{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.theme-dark .pagination-button,.theme-dark .pagination-number{background-color:var(--card-bg);border-color:var(--border-color)}.theme-dark .pagination-button:hover:not(:disabled),.theme-dark .pagination-number:hover:not(:disabled){background-color:#ffffff1a}@media (max-width: 576px){.pagination-button,.pagination-number{width:32px;height:32px}.pagination-button svg{width:16px;height:16px}}.notes-overview{width:100%}.notes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.note-card{background-color:var(--card-bg);border-radius:8px;padding:16px;margin-bottom:8px;box-shadow:var(--card-shadow);transition:all .3s ease;text-decoration:none;color:var(--text-color);display:flex;flex-direction:column;border-left:3px solid var(--primary-color)}.note-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.note-card h3{margin:0 0 10px;color:var(--primary-color)}.note-card p{margin:0 0 16px;white-space:pre-line;line-height:1.5;flex-grow:1;color:var(--text-secondary);font-size:.9rem}.view-more{font-size:.8rem;font-weight:600;color:var(--primary-color);margin-top:auto;display:flex;align-items:center;transition:transform .2s ease}.note-card:hover .view-more{transform:translate(4px)}.note-card-actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;flex-wrap:wrap}.view-details-btn{display:flex;align-items:center;font-size:.85rem;color:var(--primary-color);text-decoration:none;padding:6px 10px;border-radius:4px;transition:background-color .2s}.view-details-btn:hover{background-color:#0000000d}.view-details-btn svg{margin-right:6px}.card-action-btns{display:flex;gap:8px}.edit-note-btn,.remove-note-btn{display:flex;align-items:center;padding:6px 10px;font-size:.85rem;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s,color .2s}.edit-note-btn{color:var(--accent-color)}.remove-note-btn{color:var(--error-color, #e53935)}.edit-note-btn:hover{background-color:#0000000d}.remove-note-btn:hover{background-color:#e539351a}.edit-note-btn svg,.remove-note-btn svg{width:14px;height:14px;margin-right:4px}.empty-notes{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;text-align:center;background-color:var(--card-bg);border-radius:8px;box-shadow:var(--card-shadow)}.empty-notes svg{width:64px;height:64px;color:var(--text-secondary);opacity:.5;margin-bottom:16px}.empty-notes h3{margin:0 0 8px;color:var(--text-color)}.empty-notes p{margin:0;color:var(--text-secondary);max-width:400px}.edit-note-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.edit-note-modal{background-color:var(--card-bg);border-radius:8px;padding:24px;width:90%;max-width:500px;box-shadow:0 10px 25px #0003;animation:modal-in .3s ease}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.edit-note-modal h3{margin-top:0;margin-bottom:16px;color:var(--text-color)}.note-text-editor{width:100%;min-height:150px;padding:12px;border:1px solid var(--border-color, #ddd);border-radius:6px;font-family:inherit;font-size:.95rem;color:var(--text-color);background-color:transparent;resize:vertical;margin-bottom:16px;transition:border-color .2s}.note-text-editor:focus{outline:none;border-color:var(--primary-color)}.modal-actions{display:flex;justify-content:flex-end;gap:12px}.save-note-btn,.cancel-btn{padding:8px 16px;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:all .2s}.save-note-btn{background-color:var(--primary-color);color:#fff}.cancel-btn{background-color:transparent;color:var(--text-secondary);border:1px solid var(--border-color, #ddd)}.save-note-btn:hover{background-color:var(--primary-dark, #0069c0)}.cancel-btn:hover{background-color:#0000000d}@media (max-width: 600px){.note-card-actions{flex-direction:column;align-items:flex-start;gap:10px}.card-action-btns{width:100%;justify-content:space-between}}.city-list-container{max-width:800px;margin:0 auto;padding:20px;color:var(--text-color)}.section-title{font-size:1.5rem;font-weight:600;color:var(--text-color);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--border-color)}.city-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}.loading,.no-cities{text-align:center;padding:24px;font-size:1rem;color:var(--text-secondary);background-color:var(--card-bg);border-radius:12px;box-shadow:var(--card-shadow)}.hidden-cities-section{margin-bottom:32px;background-color:var(--card-bg);border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow)}.toggle-hidden-button{width:100%;padding:16px;text-align:center;background-color:var(--card-bg);border:none;color:var(--primary-color);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .3s ease}.toggle-hidden-button:hover{background-color:#00000008}.hidden-cities-container{padding:16px;border-top:1px solid var(--border-color)}.hidden-cities-info{margin:0 0 16px;color:var(--text-secondary);font-size:.9rem;text-align:center}.hidden-cities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.restore-city-button{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background-color:#00000008;border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);font-size:.9rem;cursor:pointer;transition:all .2s ease}.restore-city-button svg{width:16px;height:16px;color:var(--primary-color)}.restore-city-button:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.restore-city-button:hover svg{color:#fff}.sort-options{display:flex;align-items:center;margin-bottom:16px;gap:10px}.sort-options label{font-size:14px;color:var(--text-secondary)}.sort-options select{padding:6px 12px;border-radius:4px;background-color:var(--card-bg);border:1px solid rgba(255,255,255,.2);color:var(--text-color);font-size:14px;cursor:pointer}.sort-options select:focus{outline:none;border-color:#ffffff80}.sort-options select option{background-color:var(--card-bg);color:var(--text-color)}@media (max-width: 768px){.city-list-container{padding:16px}.city-list{display:flex;flex-direction:column}.hidden-cities-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.theme-dark .toggle-hidden-button:hover,.theme-dark .restore-city-button{background-color:#ffffff0d}.offline-notice{position:fixed;top:0;left:0;right:0;background-color:#ff9800;color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:center;z-index:1000;box-shadow:0 2px 4px #0000001a;animation:slideDown .3s ease-in-out}.offline-notice.online-notice{background-color:#4caf50;color:#fff}.offline-notice svg{width:20px;height:20px;margin-right:8px}.offline-notice p{margin:0;font-weight:600;flex-grow:1;text-align:center}.offline-notice-minimized{position:fixed;top:50%;left:0;transform:translateY(-50%);background-color:#ff9800;color:#fff;width:36px;height:36px;border-radius:0 4px 4px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;box-shadow:2px 0 4px #0000001a;animation:slideRight .3s ease-in-out}.offline-notice-minimized svg{width:18px;height:18px}.dismiss-button{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.dismiss-button:hover{background-color:#fff3}.dismiss-button:focus{outline:none;box-shadow:0 0 0 2px #ffffff80}.dismiss-button svg{width:16px;height:16px;margin:0}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideRight{0%{transform:translate(-100%,-50%)}to{transform:translateY(-50%)}}.theme-dark .offline-notice-minimized,.theme-dark .offline-notice:not(.online-notice){background-color:#e65100}.theme-dark .offline-notice.online-notice{background-color:#2e7d32}.theme-toggle{display:flex;align-items:center;gap:8px}.theme-toggle label{display:flex;align-items:center;justify-content:center}.theme-toggle svg{width:18px;height:18px;color:var(--text-color)}.theme-toggle select{background-color:transparent;border:1px solid var(--border-color);border-radius:4px;padding:6px 24px 6px 8px;font-size:14px;color:var(--text-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:12px}.theme-toggle select:focus{outline:none;border-color:var(--primary-color)}.theme-dark .theme-toggle select{background-color:#383838}@media (max-width: 576px){.theme-toggle select{max-width:100px}}.unit-toggle{display:flex;align-items:center;gap:8px;margin-right:16px}.unit-toggle label{display:flex;align-items:center;justify-content:center}.unit-toggle svg{width:18px;height:18px;color:var(--text-color)}.unit-toggle select{background-color:transparent;border:1px solid var(--border-color);border-radius:4px;padding:6px 24px 6px 8px;font-size:14px;color:var(--text-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:12px}.unit-toggle select:focus{outline:none;border-color:var(--primary-color)}.theme-dark .unit-toggle select{background-color:#383838}@media (max-width: 576px){.unit-toggle select{max-width:70px}}.penguin-background{position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:-1;overflow:hidden;opacity:.15;transition:all .5s ease;pointer-events:none}.penguin-background.transitioning{opacity:0}[data-theme=dark] .penguin-background{opacity:.2;filter:brightness(1.2)}[data-theme=light] .penguin-background{opacity:.3;filter:brightness(1.1)}.penguin-background.user-location-weather{opacity:.3}.user-location-indicator{position:absolute;top:10px;right:10px;z-index:10}.location-pin{width:20px;height:20px;background-color:#007affb3;border-radius:50% 50% 50% 0;transform:rotate(-45deg);animation:pinPulse 2s infinite ease-in-out}.location-pin:after{content:"";width:10px;height:10px;border-radius:50%;background-color:#fffc;position:absolute;top:5px;left:5px}@keyframes pinPulse{0%,to{transform:rotate(-45deg) scale(1)}50%{transform:rotate(-45deg) scale(1.2)}}.penguin-container{position:relative;width:100%;height:100%}.penguin-body{position:absolute;bottom:15%;left:50%;transform:translate(-50%);width:60px;height:90px;border-radius:50%/60% 60% 40% 40%;background:#000;transform-origin:bottom center;animation:penguinIdle 3s ease-in-out infinite}[data-theme=dark] .penguin-body{background:#222}.penguin-head{position:absolute;top:-22px;left:50%;transform:translate(-50%);width:45px;height:45px;border-radius:50%;background:#000}[data-theme=dark] .penguin-head{background:#222}.penguin-face{position:relative;width:100%;height:100%}.penguin-belly{position:absolute;top:12px;left:50%;transform:translate(-50%);width:50px;height:70px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:#fff}[data-theme=dark] .penguin-belly{background:#eee}.penguin-eye{position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:#fff}.penguin-eye.left{left:10px}.penguin-eye.right{right:10px}.penguin-beak{position:absolute;top:20px;left:50%;transform:translate(-50%);width:12px;height:6px;background:#f90;border-radius:50%/30% 30% 70% 70%;z-index:1}.penguin-wing{position:absolute;width:15px;height:45px;border-radius:20px;background:#000}[data-theme=dark] .penguin-wing{background:#222}.penguin-wing.left{left:-8px;top:25px;transform:rotate(20deg);transform-origin:top right}.penguin-wing.right{right:-8px;top:25px;transform:rotate(-20deg);transform-origin:top left}.penguin-feet{position:absolute;bottom:-5px;width:15px;height:6px;background:#f90;border-radius:50%}.penguin-feet.left{left:12px}.penguin-feet.right{right:12px}@keyframes penguinIdle{0%,to{transform:rotate(0)}50%{transform:rotate(2deg)}}.penguin-rain .penguin-body{bottom:20%;animation:penguinFloat 2s ease-in-out infinite}@keyframes penguinFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.raindrops{position:absolute;top:0;width:100%;height:100%}.raindrop{position:absolute;width:3px;height:20px;background:#4a87c5;border-radius:0 0 5px 5px;opacity:.9;animation:falling 1s linear infinite;box-shadow:0 0 4px #4a87c5}@keyframes falling{0%{transform:translateY(-100px)}to{transform:translateY(100vh)}}.floating-ice{position:absolute;bottom:15%;left:50%;transform:translate(-50%);width:180px;height:30px;background:#e0f7ff;border-radius:50%;z-index:-1}[data-theme=dark] .floating-ice{background:#b3e0ff}.snow-ground{position:absolute;bottom:0;width:100%;height:20%;background:#f4f4f8;border-radius:50% 50% 0 0/10% 10% 0 0}[data-theme=dark] .snow-ground{background:#e0e0e0}.snowflakes{position:absolute;width:100%;height:100%}.snowflake{position:absolute;width:10px;height:10px;background:gray;border-radius:50%;opacity:.9;animation:snowfall 5s linear infinite,snowMelt 5s ease-in-out infinite;box-shadow:0 0 5px #fff}@keyframes snowfall{0%{transform:translateY(-100px) translate(0) rotate(0)}to{transform:translateY(100vh) translate(20px) rotate(360deg)}}@keyframes snowMelt{0%,80%{border-radius:50%;height:10px}90%{border-radius:40% 40% 60% 60%;height:12px}to{border-radius:30% 30% 70% 70%;height:15px;opacity:.7}}.cloud{position:absolute;background:#ccc;border-radius:50px;box-shadow:0 0 15px #ffffff80}.cloud-1{width:140px;height:70px;top:20%;right:30%;animation:cloudFloat 10s ease-in-out infinite}.cloud-2{width:110px;height:55px;top:30%;right:50%;animation:cloudFloat 13s ease-in-out infinite reverse}.cloud-3{width:170px;height:85px;top:15%;right:10%;animation:cloudFloat 15s ease-in-out infinite}@keyframes cloudFloat{0%,to{transform:translate(0)}50%{transform:translate(-30px)}}.penguin-thinking:after{content:"?";font-size:20px;font-weight:700;color:#000}.sun{position:absolute;top:15%;right:20%;width:80px;height:80px;background:#ffeb3b;border-radius:50%;box-shadow:0 0 40px #ffeb3bcc;animation:sunPulse 3s ease-in-out infinite}@keyframes sunPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.beach{position:absolute;bottom:0;width:100%;height:20%;background:#f7dc6f;border-radius:50% 50% 0 0/10% 10% 0 0}[data-theme=dark] .beach{background:#e5c65b}.palm-tree{position:absolute;bottom:20%;left:30%;width:10px;height:40px;background:#8b4513;border-radius:2px}.palm-tree:before{content:"";position:absolute;top:-25px;left:-15px;width:40px;height:30px;background:linear-gradient(to right,transparent,#2ecc71,transparent);border-radius:50% 50% 0 0;transform:rotate(-15deg);box-shadow:0 0 10px #2ecc714d}.palm-tree:after{content:"";position:absolute;top:-20px;left:-5px;width:40px;height:25px;background:linear-gradient(to left,transparent,#2ecc71,transparent);border-radius:50% 50% 0 0;transform:rotate(25deg);box-shadow:0 0 10px #2ecc714d}.moon{position:absolute;top:15%;right:20%;width:70px;height:70px;background:#fffecd;border-radius:50%;box-shadow:0 0 25px #fffecdb3}[data-theme=dark] .moon{background:#f9f7c0}.stars{position:absolute;width:100%;height:100%}.star{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 4px #fff;animation:twinkle 2s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.2}50%{opacity:1}}.thunder-elements .cloud{position:absolute;background:#555;border-radius:50px;box-shadow:0 0 15px #ffffff4d}.thunder-elements .cloud-1{width:160px;height:70px;top:20%;right:30%;background:#333;opacity:.9}.thunder-elements .cloud-2{width:130px;height:55px;top:15%;right:45%;background:#444;opacity:.8}.thunder-cloud{position:absolute;width:180px;height:80px;top:30%;left:50%;transform:translate(-50%);background:#444;border-radius:50px;box-shadow:0 0 20px #fff6;animation:thunderCloudPulse 4s ease-in-out infinite}.thunder-cloud:before,.thunder-cloud:after{content:"";position:absolute;background:#333;border-radius:50%}.thunder-cloud:before{width:100px;height:70px;top:-30px;left:25px}.thunder-cloud:after{width:120px;height:60px;top:-20px;right:15px}@keyframes thunderCloudPulse{0%,to{background:#444}93%,96%,99%{background:#666}}.lightning{position:absolute;width:100%;height:100%}.lightning-bolt{position:absolute;top:35%;right:30%;width:12px;height:80px;background:#ffffa0;clip-path:polygon(40% 0,0 60%,45% 50%,5% 100%,60% 50%,30% 40%,100% 20%);animation:lightningFlash 4s ease-in-out infinite;opacity:0;box-shadow:0 0 30px #ffffa0cc;filter:blur(.5px)}@keyframes lightningFlash{0%,92%,94%,96%,98%,to{opacity:0}93%,95%,97%,99%{opacity:1;transform:translate(0)}94%,98%{transform:translate(2px)}}.fog-layer{position:absolute;width:200%;height:50px;background:#c8c8c866;border-radius:50%;box-shadow:0 0 15px #ffffff4d}[data-theme=dark] .fog-layer{background:#aaa6}.fog-1{bottom:25%;left:-50%;animation:fogMove 15s linear infinite}.fog-2{bottom:35%;left:-70%;animation:fogMove 18s linear infinite reverse}.fog-3{bottom:15%;left:-30%;animation:fogMove 20s linear infinite}@keyframes fogMove{0%,to{transform:translate(0)}50%{transform:translate(50%)}}.raindrop.left-0,.snowflake.left-0,.star.left-0{left:0%}.raindrop.left-1,.snowflake.left-1,.star.left-1{left:10%}.raindrop.left-2,.snowflake.left-2,.star.left-2{left:20%}.raindrop.left-3,.snowflake.left-3,.star.left-3{left:30%}.raindrop.left-4,.snowflake.left-4,.star.left-4{left:40%}.raindrop.left-5,.snowflake.left-5,.star.left-5{left:50%}.raindrop.left-6,.snowflake.left-6,.star.left-6{left:60%}.raindrop.left-7,.snowflake.left-7,.star.left-7{left:70%}.raindrop.left-8,.snowflake.left-8,.star.left-8{left:80%}.raindrop.left-9,.snowflake.left-9,.star.left-9{left:90%}.raindrop.left-10,.snowflake.left-10,.star.left-10{left:100%}.star.top-0{top:0%}.star.top-1{top:10%}.star.top-2{top:20%}.star.top-3{top:30%}.star.top-4{top:40%}.star.top-5{top:50%}.lightning-bolt.right-2{right:20%}.lightning-bolt.right-3{right:30%}.lightning-bolt.right-4{right:40%}.lightning-bolt.right-5{right:50%}.raindrop.delay-0,.snowflake.delay-0,.star.delay-0,.lightning-bolt.delay-0{animation-delay:0s}.raindrop.delay-1{animation-delay:.1s}.raindrop.delay-2{animation-delay:.2s}.raindrop.delay-3{animation-delay:.3s}.raindrop.delay-4{animation-delay:.4s}.raindrop.delay-5,.snowflake.delay-5,.star.delay-5,.lightning-bolt.delay-5{animation-delay:.5s}.raindrop.delay-6{animation-delay:.6s}.raindrop.delay-7{animation-delay:.7s}.raindrop.delay-8{animation-delay:.8s}.raindrop.delay-9{animation-delay:.9s}.raindrop.delay-10,.snowflake.delay-10,.star.delay-10,.lightning-bolt.delay-10{animation-delay:1s}.raindrop.delay-11{animation-delay:1.1s}.raindrop.delay-12{animation-delay:1.2s}.raindrop.delay-13{animation-delay:1.3s}.raindrop.delay-14{animation-delay:1.4s}.raindrop.delay-15,.snowflake.delay-15,.star.delay-15,.lightning-bolt.delay-15{animation-delay:1.5s}.snowflake.delay-20,.star.delay-20,.lightning-bolt.delay-20{animation-delay:2s}.snowflake.delay-25,.lightning-bolt.delay-25{animation-delay:2.5s}.snowflake.delay-30,.lightning-bolt.delay-30{animation-delay:3s}.snowflake.delay-35,.lightning-bolt.delay-35{animation-delay:3.5s}.snowflake.delay-40,.lightning-bolt.delay-40{animation-delay:4s}.snowflake.delay-45,.lightning-bolt.delay-45{animation-delay:4.5s}.snowflake.delay-50,.lightning-bolt.delay-50{animation-delay:5s}.raindrop.duration-8{animation-duration:.8s}.raindrop.duration-9{animation-duration:.9s}.raindrop.duration-10{animation-duration:1s}.raindrop.duration-11{animation-duration:1.1s}.raindrop.duration-12{animation-duration:1.2s}.raindrop.duration-13{animation-duration:1.3s}.raindrop.duration-14{animation-duration:1.4s}.raindrop.duration-15{animation-duration:1.5s}.raindrop.duration-16{animation-duration:1.6s}.raindrop.duration-17{animation-duration:1.7s}.raindrop.duration-18{animation-duration:1.8s}.snowflake.duration-30{animation-duration:3s}.snowflake.duration-40{animation-duration:4s}.snowflake.duration-50{animation-duration:5s}.snowflake.duration-60{animation-duration:6s}.snowflake.duration-70{animation-duration:7s}.snowflake.size-4{width:4px;height:4px}.snowflake.size-5{width:5px;height:5px}.snowflake.size-6{width:6px;height:6px}.snowflake.size-7{width:7px;height:7px}.snowflake.size-8{width:8px;height:8px}.star.size-1{width:1px;height:1px}.star.size-2{width:2px;height:2px}.star.size-3{width:3px;height:3px}@media (max-width: 768px){.penguin-body{width:80px;height:120px}.penguin-head{width:60px;height:50px;top:-30px}.penguin-belly{width:50px;height:80px}.penguin-eye{width:10px;height:10px}.penguin-eye.left{left:15px}.penguin-eye.right{right:15px}.penguin-beak{width:15px;height:8px}}.home-page{min-height:100vh;background-color:transparent}.app-header{background-color:var(--primary-color);padding:24px 20px 32px;color:#fff;text-align:center;margin-bottom:24px;transition:padding .3s cubic-bezier(.3,0,.2,1),box-shadow .3s cubic-bezier(.3,0,.2,1);position:sticky;top:0;z-index:100;box-shadow:0 2px 10px #0000001a;will-change:padding,box-shadow;transform:translateZ(0);-webkit-font-smoothing:antialiased;backface-visibility:hidden}.app-header.collapsed{padding:5px 10px 0;box-shadow:0 2px 15px #0003;margin-bottom:0}.app-header.collapsed .app-subtitle,.app-header.collapsed .user-location-button span{opacity:0;height:0;margin:0;visibility:hidden;position:absolute;transition:opacity .2s ease-out,height .2s ease-out,margin .2s ease-out,visibility .2s ease-out}.app-subtitle,.user-location-button span{transition:opacity .25s ease-in .05s,height .25s ease-in .05s,margin .25s ease-in .05s,visibility .25s ease-in .05s;opacity:1;height:auto;visibility:visible;position:relative}.app-header.collapsed .user-location{display:flex;justify-content:center;align-items:center;margin:-16px 0 0;padding:0;transform:scale(.9);flex-shrink:0}.app-header.collapsed .user-location-button svg{margin-right:0}.app-header.collapsed .user-location-button{border-radius:50%;padding:10px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.app-header.collapsed .location-status,.app-header.collapsed .location-error{position:absolute;bottom:-36px;left:0;right:0;font-size:.8rem;background-color:var(--primary-color);padding:4px 8px;margin:0;z-index:95;box-shadow:0 2px 8px #00000026}.app-header.collapsed .app-title h1{font-size:1.5rem;margin:8px 0 16px;transform:translateY(0)}.app-header.collapsed .app-header-bottom{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 6px;gap:8px;width:100%;height:56px;overflow:visible}.app-header.collapsed .search-container{flex:1;min-width:0;max-width:calc(100% - 60px);margin:0;padding:0 4px;transform:scale(.95);transform-origin:center left}.app-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 16px;gap:8px;flex-wrap:wrap;transition:margin .3s cubic-bezier(.25,.46,.45,.94)}.app-header.collapsed .app-header-top{margin-bottom:5px}.app-header-bottom{transition:all .3s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;align-items:center;width:100%}.app-title{transition:all .3s ease}.app-title h1{margin:0 0 8px;font-size:2.5rem;font-weight:700;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.app-title p{margin:0 0 24px;font-size:1.1rem;opacity:.9;transition:opacity .3s ease}.search-container{width:100%;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.user-location{display:flex;gap:10px;justify-content:center;margin-top:24px;transition:opacity .3s ease}.user-location-button{display:flex;align-items:center;padding:10px 20px;background-color:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:50px;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease}.user-location-button:hover{background-color:#ffffff40;transform:translateY(-2px)}.user-location-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.user-location-button svg{width:18px;height:18px;margin-right:8px}.refresh-location-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background-color:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;cursor:pointer;transition:all .3s ease;padding:0}.refresh-location-button svg{width:20px;height:20px}.refresh-location-button:hover{background-color:#ffffff40;transform:translateY(-2px)}.refresh-location-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.refresh-location-button.refreshing svg{animation:spin 1s linear infinite}.location-status{margin-top:12px;font-size:.9rem;opacity:.8}.location-error{background-color:#ff3b301a;border-radius:8px;padding:16px;margin:16px 0;text-align:center;border-left:4px solid rgba(255,59,48,.7);color:var(--text-error)}.location-error p{margin-bottom:12px;font-weight:500}.location-retry-button{display:flex;align-items:center;justify-content:center;gap:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;padding:10px 20px;font-size:16px;font-weight:500;cursor:pointer;margin:0 auto;transition:all .2s ease;box-shadow:0 2px 8px #00000026}.location-retry-button:hover{background-color:var(--primary-color-dark);transform:translateY(-1px);box-shadow:0 4px 12px #0003}.location-retry-button:active{transform:translateY(0);box-shadow:0 1px 4px #00000026}.retry-icon{width:18px;height:18px}.location-retry-button:disabled .retry-icon{animation:spin 1s linear infinite}main{padding-bottom:48px}@media (max-width: 768px){.app-header{padding:16px 16px 24px}.app-title h1{font-size:2rem}}@media (max-width: 480px){.app-header.collapsed .search-container{max-width:calc(100% - 50px)}.app-header.collapsed .search-bar input{padding:12px 16px;font-size:.9rem}.app-header.collapsed .search-button{padding:10px 16px}}@media (max-width: 360px){.app-header.collapsed .search-container{transform:scale(.9)}.app-header.collapsed .user-location-button{width:38px;height:38px;padding:8px}.app-header.collapsed .refresh-location-button{width:38px;height:38px}}.city-detail{max-width:800px;margin:0 auto;padding:20px}.city-detail-header{display:flex;justify-content:space-between;margin-bottom:20px}.back-button,.favorite-button{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border-color);border-radius:8px;padding:8px 16px;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--text-color)}.back-button svg,.favorite-button svg{width:18px;height:18px;margin-right:8px}.back-button:hover{background-color:var(--bg-light)}.header-buttons{display:flex;gap:12px}.favorite-button{background-color:var(--bg-light)}.favorite-button:hover{background-color:#ffd7001a}.favorite-button.favorite-active{color:var(--secondary-color)}.location-refresh-button{display:flex;align-items:center;justify-content:center;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:500;cursor:pointer;transition:all .2s ease}.location-refresh-button:hover{opacity:.9}.location-refresh-button:disabled{opacity:.7;cursor:not-allowed}.location-refresh-button svg{width:18px;height:18px;margin-right:8px}.location-refresh-button.refreshing svg{animation:spin 1s linear infinite}.weather-container{background-color:transparent;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:var(--card-shadow)}.location-info{margin-bottom:24px}.location-info h1{margin:0 0 8px;font-size:2rem;font-weight:700}.location-info p{margin:0;font-size:1rem;color:var(--text-secondary)}.data-timestamp{margin-top:8px;font-size:.85rem;color:var(--text-secondary);display:flex;align-items:center;background-color:#0000000d;padding:4px 8px;border-radius:4px;width:fit-content}.weather-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.temperature{display:flex;flex-direction:column}.temp-value{font-size:4rem;font-weight:700;line-height:1;color:var(--primary-color)}.temp-unit{font-size:2rem;font-weight:500;color:var(--primary-color)}.feels-like{font-size:.9rem;color:var(--text-secondary);margin-top:8px}.weather-icon{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.weather-icon img{width:96px;height:96px;transition:all .3s ease}.weather-description{margin:8px 0 0;font-size:1.1rem;text-transform:capitalize}.weather-details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:24px}.detail-item{background-color:var(--bg-light);border-radius:8px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center}.detail-item svg{width:24px;height:24px;margin-bottom:8px;color:var(--primary-color)}.detail-item h3{margin:0 0 8px;font-size:.9rem;font-weight:600}.detail-item p{margin:0;font-weight:500;font-size:1.1rem}.detail-item p+p{margin-top:4px;font-size:.85rem;color:var(--text-secondary)}.notes-section{background-color:var(--surface-color);border-radius:8px;padding:1.5rem;margin-top:2rem;box-shadow:var(--shadow)}.notes-section h2{display:flex;align-items:center;margin-bottom:1.5rem;color:var(--heading-color)}.section-title-icon{margin-right:.5rem}.notes-editor{width:100%}.notes-editor textarea{width:100%;min-height:120px;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--input-bg);color:var(--text-color);resize:vertical;font-family:inherit;margin-bottom:1rem}.notes-actions{display:flex;gap:.75rem;justify-content:flex-end}.save-notes-btn,.cancel-notes-btn,.add-note-btn{padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.save-notes-btn{background-color:var(--primary-color);color:var(--text-color)}.save-notes-btn:hover{background-color:var(--primary-dark)}.save-notes-btn:disabled{background-color:var(--disabled-color);cursor:not-allowed}.cancel-notes-btn{background-color:var(--surface-color);color:var(--text-color);border:1px solid var(--border-color)}.cancel-notes-btn:hover{background-color:var(--hover-color)}.add-note-btn{background-color:var(--accent-color);color:var(--primary-color);margin-top:1rem}.add-note-btn:hover{background-color:var(--accent-dark)}.add-note-btn svg{width:16px;height:16px}.add-note-button-container{display:flex;justify-content:flex-start;margin-top:1rem}.notes-list{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}.note-item{background-color:var(--card-bg);border-radius:6px;padding:1rem;box-shadow:var(--card-shadow);border-left:4px solid var(--accent-color)}.note-text{margin:0;line-height:1.5;color:var(--text-color);white-space:pre-wrap;word-break:break-word}.note-meta{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.5rem;border-top:1px solid var(--border-color);font-size:.85rem;color:var(--text-secondary)}.note-timestamp{font-style:italic}.note-actions{display:flex;gap:.5rem}.edit-note-btn,.remove-note-btn{background:none;border:none;cursor:pointer;padding:.25rem;border-radius:4px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.edit-note-btn:hover{color:var(--primary-color);background-color:var(--hover-color)}.remove-note-btn:hover{color:var(--error-color);background-color:var(--hover-color)}.no-notes{padding:1.5rem;text-align:center;background-color:var(--card-bg);border-radius:6px;color:var(--text-secondary);font-style:italic}.notes-display{line-height:1.6}.notes-display .notes-buttons{display:flex;gap:12px;margin-top:16px}.edit-notes-btn,.remove-notes-btn{background-color:transparent;border:1px solid var(--border-color);border-radius:6px;padding:6px 12px;cursor:pointer;display:flex;align-items:center;font-size:.9rem;color:var(--text-color);transition:all .2s ease}.edit-notes-btn:hover{background-color:var(--bg-light)}.remove-notes-btn{color:var(--error-color)}.remove-notes-btn:hover{background-color:#dc26261a}.notes-display button{margin-top:16px;background-color:transparent;border:1px solid var(--border-color);border-radius:6px;padding:6px 12px;cursor:pointer;display:flex;align-items:center;font-size:.9rem;color:var(--text-color);transition:all .2s ease}.notes-display button:hover{background-color:var(--bg-light)}.no-notes{display:flex;flex-direction:column;align-items:center;color:var(--text-secondary);padding:32px 0}.no-notes p{margin-top:0;margin-bottom:16px}.no-notes button{margin-top:0}.city-detail.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.loading-spinner{border:4px solid rgba(0,0,0,.1);border-top:4px solid var(--primary-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.city-detail.error{text-align:center;padding:40px}.city-detail.error h2{color:var(--error-color)}.city-detail.error button{margin-top:16px;margin-right:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:500;transition:all .2s ease}.city-detail.error button:hover{opacity:.9}.icon-with-margin-right{margin-right:6px;vertical-align:text-bottom}.section-title-icon{vertical-align:middle;margin-right:8px}.offline-icon,.timestamp-icon{margin-right:6px;vertical-align:text-bottom}.weather-icon-style-rain{filter:drop-shadow(0 0 .5rem #4a87c5)}.weather-icon-style-snow{filter:drop-shadow(0 0 .5rem #a8c5e2)}.weather-icon-style-cloud{filter:drop-shadow(0 0 .5rem #94a3b8)}.weather-icon-style-clear{filter:drop-shadow(0 0 .6rem #fde047)}.weather-icon-style-thunder{filter:drop-shadow(0 0 .5rem #7c3aed)}.weather-icon-style-fog{filter:drop-shadow(0 0 .5rem #cbd5e1)}@media (max-width: 600px){.weather-info{flex-direction:column;align-items:center;text-align:center;gap:16px}.weather-details-grid{grid-template-columns:repeat(2,1fr)}.city-detail-header{flex-direction:column;gap:16px}.back-button,.favorite-button{width:100%}}html{scroll-behavior:smooth}.city-page{min-height:100vh;background-color:transparent;padding-top:20px;padding-bottom:48px}.city-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 16px;gap:8px;flex-wrap:wrap}@media (max-width: 768px){.city-page{padding-top:16px}}.not-found-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--light-bg);padding:20px}.not-found-content{background-color:var(--card-bg);border-radius:12px;box-shadow:0 4px 16px #00000014;padding:40px;text-align:center;max-width:500px;width:100%}.not-found-content h1{font-size:6rem;margin:0;line-height:1;color:var(--primary-color)}.not-found-content h2{font-size:2rem;margin:0 0 16px;color:var(--text-color)}.not-found-content p{color:#666;margin-bottom:24px}.weather-icon{margin:24px 0;display:flex;justify-content:center}.weather-icon svg{width:80px;height:80px;color:var(--primary-color);opacity:.7}.home-button{display:inline-block;padding:12px 24px;background-color:var(--primary-color);color:#fff;text-decoration:none;border-radius:50px;font-weight:600;transition:all .3s ease}.home-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}@media (max-width: 576px){.not-found-content{padding:24px}.not-found-content h1{font-size:4rem}.not-found-content h2{font-size:1.5rem}}.footer{margin-top:auto;padding:1rem 0;background-color:var(--background-secondary, #1e1e1e);color:var(--text-primary, #f0f0f0);border-top:1px solid var(--border-color, #333);text-align:center;width:100%}.footer-content{max-width:1200px;margin:0 auto;padding:0 1rem}[data-theme=dark] .footer{background-color:var(--background-secondary, #f5f5f5);color:var(--text-primary, #333);border-top:1px solid var(--border-color, #e0e0e0)}:root{--primary-color: #0078ff;--primary-dark: #0066db;--text-color: #333;--text-secondary: #666;--light-bg: #f5f7fa;--card-bg: #ffffff;--border-color: #f0f0f0;--secondary-color: #ffd700;--error-color: #e74c3c;--success-color: #2ecc71;--card-shadow: 0 4px 16px rgba(0, 0, 0, .08)}.theme-dark{--primary-color: #3a8fff;--primary-dark: #1c7aff;--text-color: #e0e0e0;--text-secondary: #b0b0b0;--light-bg: #1a1a1a;--card-bg: #2d2d2d;--border-color: #3d3d3d;--secondary-color: #ffca28;--error-color: #ff5252;--success-color: #4caf50;--card-shadow: 0 4px 16px rgba(0, 0, 0, .2)}.theme-light{--primary-color: #0078ff;--primary-dark: #0066db;--text-color: #333;--text-secondary: #666;--light-bg: #f5f7fa;--card-bg: #ffffff;--border-color: #f0f0f0;--secondary-color: #ffd700;--error-color: #e74c3c;--success-color: #2ecc71;--card-shadow: 0 4px 16px rgba(0, 0, 0, .08)}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-color);background-color:var(--light-bg);transition:background-color .3s ease,color .3s ease}.App{min-height:100vh;display:flex;flex-direction:column}a{color:var(--primary-color);text-decoration:none}button{font-family:inherit}@media (max-width: 576px){h1{font-size:1.75rem}h2{font-size:1.5rem}}