.weather-container{display:flex;flex-direction:column;gap:1.5rem;padding:1rem;width:100%;height:100%}.weather-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.weather-header h3{margin:0;font-size:1rem;color:var(--text-secondary, #888);font-weight:500}.refresh-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--card-bg, #1a1a2e);border:1px solid var(--border-color, #333);border-radius:8px;color:var(--text-color, #fff);cursor:pointer;font-size:.875rem;transition:background .2s ease,border-color .2s ease}.refresh-btn:hover{background:var(--hover-bg, #252540);border-color:var(--primary-color, #00d9ff)}.city-search-container{position:relative}.city-search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid var(--border-color, #333);border-radius:8px;background:var(--input-bg, #0d0d1a);color:var(--text-color, #fff);font-size:1rem;transition:border-color .2s ease}.city-search-input:focus{outline:none;border-color:var(--primary-color, #00d9ff)}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary, #888);pointer-events:none}.weather-cards-section{margin-top:1rem}.section-title{font-size:.875rem;color:var(--text-secondary, #888);margin-bottom:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.weather-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.weather-card{background:var(--card-bg, #1a1a2e);border-radius:12px;padding:1.25rem;border:1px solid var(--border-color, #333);transition:transform .2s ease,box-shadow .2s ease,background .3s ease;position:relative;overflow:hidden}.weather-card:before{content:"";position:absolute;inset:0;background:#0003;opacity:0;transition:opacity .2s ease;pointer-events:none}.weather-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0006}.weather-card:hover:before{opacity:1}.weather-card.loading{opacity:.7}.weather-card.user-location{box-shadow:0 0 0 2px #ffffff4d inset}.weather-card.removing{animation:fadeOutScale .2s ease-out forwards}@keyframes fadeOutScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.weather-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.city-info{display:flex;flex-direction:column;gap:.25rem}.city-name{font-size:1.125rem;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}.city-country{font-size:.75rem;color:#fffc;text-shadow:0 1px 2px rgba(0,0,0,.2)}.city-time{font-size:.75rem;color:#ffffffb3;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,Liberation Mono,Menlo,monospace;text-shadow:0 1px 2px rgba(0,0,0,.2)}.weather-main{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.weather-icon{font-size:3rem;line-height:1}.weather-temp{font-size:2.5rem;font-weight:700;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,Liberation Mono,Menlo,monospace;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.weather-description{font-size:.875rem;color:#ffffffe6;margin-bottom:1rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.weather-details{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.2)}.weather-detail{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.detail-label{color:#fffc;text-shadow:0 1px 2px rgba(0,0,0,.2)}.detail-value{color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-remove{background:#0003;border:none;color:#ffffffb3;cursor:pointer;padding:.25rem;border-radius:4px;transition:color .2s ease,background .2s ease}.btn-remove:hover{color:#fff;background:#e74c3c99}.available-cities-section{margin-top:1.5rem;display:flex;flex-direction:column;flex:1;min-height:0}.available-cities-list{display:flex;flex-wrap:wrap;gap:.5rem;flex:1;overflow-y:auto;padding:.5rem;background:var(--input-bg, #0d0d1a);border-radius:8px;border:1px solid var(--border-color, #333);align-content:flex-start}.city-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--card-bg, #1a1a2e);border:1px solid var(--border-color, #333);border-radius:20px;cursor:pointer;transition:background .2s ease,border-color .2s ease;font-size:.875rem;color:var(--text-color, #fff)}.city-chip:hover{background:var(--hover-bg, #252540);border-color:var(--primary-color, #00d9ff)}.city-chip-flag{font-size:1rem}.city-chip-name{font-weight:500}.no-results{text-align:center;padding:2rem;color:var(--text-secondary, #888)}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary, #888);background:var(--card-bg, #1a1a2e);border-radius:12px;border:1px dashed var(--border-color, #333)}.empty-state p{margin:0}@media(max-width:600px){.weather-cards-grid{grid-template-columns:1fr}.weather-header{flex-direction:column;align-items:stretch}.refresh-btn{justify-content:center}.weather-icon{font-size:2.5rem}.weather-temp{font-size:2rem}}