:root{--background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);--text-color: #2c3e50;--icon-color: #2c3e50;--background-hover: rgb(83 83 83 / 10%);--container-background: rgb(255 255 255 / 20%);--container-shadow: rgb(31 32 46 / 35%);--detail-background: rgb(255 255 255 / 10%);--modal-overlay: rgb(0 0 0 / 50%);--modal-background: #fff;--modal-title-color: #000;--modal-button-background: #007bff;--modal-button-background-light: rgb(0 123 255 / 10%);--modal-button-text: #fff;--modal-button-hover: #0056b3;--modal-input-border: #ccc;--modal-suggestion-background: #fff;--modal-suggestion-text: #000;--modal-suggestion-border: #ccc;--modal-suggestion-hover: #f4f4f4;--modal-suggestion-scrollbar-track: #f1f1f1;--modal-suggestion-scrollbar-thumb: #888;--modal-suggestion-scrollbar-thumb-hover: #555}[data-theme=night]{--background: linear-gradient(120deg, #0f2027 0%, #203a43 50%, #2c5364 100%);--text-color: #ecf0f1;--icon-color: #f3f3f3;--background-hover: rgb(255 255 255 / 10%)}*{box-sizing:border-box;font-family:Poppins,sans-serif}body{background:var(--background);color:var(--text-color);margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center;transition:background .3s ease,color .3s ease}.refresh-button svg,.pin-button svg{fill:var(--icon-color);transition:fill .3s ease}.refresh-button:hover,.pin-button:hover{background:var(--background-hover);transition:background .2s ease}.container{background:var(--container-background);border-radius:20px;box-shadow:0 8px 32px var(--container-shadow);width:100%;max-width:400px;display:flex;flex-direction:column;text-align:center}.header{display:flex;justify-content:space-between;padding:1rem;align-items:center;text-align:center}.refresh-button,.pin-button{background:transparent;border:none;cursor:pointer;font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease;border-radius:50%;min-width:40px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.refresh-button.updating{animation:spin 1s linear infinite;pointer-events:none}.weather-icon{font-size:4rem}.location{font-size:1.5rem;font-weight:600}.temperature{font-size:3rem;font-weight:300;margin:1rem 0}.description{font-size:1.2rem;margin-bottom:1rem}.details{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem;padding:1rem}.detail-item{padding:.5rem;background:var(--detail-background);border-radius:10px;box-shadow:1px 1px #0000000a}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--modal-overlay);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{background:var(--modal-background);padding:1.5rem;border-radius:10px;opacity:1;box-shadow:0 5px 15px #0003}.modal-title{color:var(--modal-title-color);font-size:1.5em;font-weight:600;margin-bottom:1rem;display:block;text-align:center}.modal label{color:var(--modal-title-color)}.modal input[type=text]{width:100%;padding:10px;margin-bottom:1rem;border:1px solid var(--modal-input-border);border-radius:5px}.search-container{position:relative}.suggestions{position:absolute;background:var(--modal-suggestion-background);border:1px solid var(--modal-suggestion-border);border-radius:5px;width:100%;max-height:225px;overflow-y:auto;z-index:1;margin-top:-10px;color:var(--modal-suggestion-text);display:none}.suggestion{padding:10px;cursor:pointer;display:flex;gap:10px}.suggestion:hover{background-color:var(--modal-suggestion-hover)}span.suggestion-location{flex-grow:1;pointer-events:none}.suggestions::-webkit-scrollbar{width:8px}.suggestions::-webkit-scrollbar-track{background:var(--modal-suggestion-scrollbar-track)}.suggestions::-webkit-scrollbar-thumb{background:var(--modal-suggestion-scrollbar-thumb);border-radius:8px}.suggestions::-webkit-scrollbar-thumb:hover{background:var(--modal-suggestion-scrollbar-thumb-hover)}.suggestions .loading{display:flex;justify-content:center;padding:1rem;pointer-events:none}.suggestions .spinner{fill:#000;animation:spin 1s linear infinite;pointer-events:none}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}@media (max-width: 560px){.modal-actions{flex-direction:column}}.btn{padding:6px 10px;font-size:16px;border:1px solid transparent;border-radius:5px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}.btn-primary{background-color:var(--modal-button-background);color:var(--modal-button-text);border-color:var(--modal-button-background)}.btn-primary:hover{background-color:var(--modal-button-hover);border-color:var(--modal-button-hover)}.btn-secondary{background-color:transparent;color:var(--modal-button-background);border-color:var(--modal-button-background)}.btn-secondary:hover{background-color:var(--modal-button-background-light);border-color:var(--modal-button-background)}