:root{--primary-color:#2563eb;--text-dark:#1e293b;--text-medium:#64748b;--text-light:#94a3b8;--bg-color:#e2e8f0;--card-bg:#ffffffbf;--stat-box-bg:#f1f5f980;--border-color:#e2e8f099;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--radius-lg:1rem;--radius-xl:1.5rem}:root.dark{--primary-color:#3b82f6;--text-dark:#f8fafc;--text-medium:#cbd5e1;--text-light:#94a3b8;--bg-color:#0f172a;--card-bg:#1e293bb3;--stat-box-bg:#0f172a80;--border-color:#33415599;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0000004d,0 2px 4px -2px #0000004d}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--card-bg);border-radius:var(--radius-xl);width:90%;max-width:500px;box-shadow:var(--shadow-md);border:1px solid var(--border-color);padding:2rem;animation:.2s ease-out slideIn}.modal-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.modal-header h2{color:var(--text-dark);margin:0;font-size:1.5rem}.close-button{color:var(--text-medium);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.close-button:hover{background:var(--bg-color);color:var(--text-dark)}.settings-section{flex-direction:column;gap:1.5rem;display:flex}.setting-item{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding-bottom:1.5rem;display:flex}.setting-item:last-child{border-bottom:none;padding-bottom:0}.setting-info{flex-direction:column;gap:.25rem;display:flex}.setting-label{color:var(--text-dark);font-weight:600}.setting-desc{color:var(--text-medium);font-size:.875rem}.toggle-button{border-radius:var(--radius-lg);border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-dark);cursor:pointer;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-weight:500;transition:all .2s;display:flex}.toggle-button:hover{border-color:var(--primary-color)}.toggle-button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}body{background-color:var(--bg-color);color:var(--text-dark);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;font-family:Inter,system-ui,sans-serif}.app-container{flex-direction:column;min-height:100vh;display:flex}.main-header{background:var(--card-bg);border-bottom:1px solid var(--border-color);margin-bottom:2rem;padding:1rem 0}.header-content{max-width:64rem;color:var(--primary-color);align-items:center;gap:.5rem;margin:0 auto;padding:0 1rem;display:flex}.header-title{text-transform:uppercase;letter-spacing:-.025em;margin:0;font-size:1.25rem;font-weight:800}.main-content{box-sizing:border-box;flex-direction:column;flex:1;align-items:center;gap:2rem;width:100%;max-width:48rem;margin:0 auto;padding:0 1rem;display:flex}.search-container{width:100%;margin-bottom:1rem;position:relative}.search-wrapper{position:relative}.search-icon{color:var(--text-light);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-sm);box-sizing:border-box;outline:none;padding:1rem 1rem 1rem 3rem;font-size:1.125rem;transition:all .2s}.search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.search-results{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color);z-index:50;margin-top:.5rem;position:absolute;top:100%;left:0;right:0;overflow:hidden}.search-result-item{text-align:left;border:none;border-bottom:1px solid var(--bg-color);cursor:pointer;background:0 0;flex-direction:column;width:100%;padding:1rem 1.5rem;display:flex}.search-result-item:hover{background-color:#eff6ff}.city-name{color:var(--text-dark);font-weight:700}.city-detail{color:var(--text-medium);font-size:.875rem}.weather-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);box-sizing:border-box;width:100%;padding:2rem}.weather-header{justify-content:space-between;align-items:flex-start;margin-bottom:2rem;display:flex}.location-title{margin:0;font-size:2rem;font-weight:700;line-height:1.2}.date-text{color:var(--text-medium);margin-top:.25rem;font-size:1rem}.main-temp-container{flex-direction:column;gap:2rem;display:flex}@media (min-width:768px){.main-temp-container{flex-direction:row;justify-content:space-between;align-items:center}}.temp-display{align-items:center;gap:1rem;display:flex}.temp-value{font-size:4.5rem;font-weight:800;line-height:1}.feels-like{color:var(--text-medium);align-items:center;gap:.25rem;font-size:.875rem;display:flex}.stats-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.stat-box{border-radius:var(--radius-lg);text-align:center;background-color:var(--stat-box-bg);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.5rem 1rem;transition:transform .2s,border-color .2s;display:flex}.weather-content-layout{flex-direction:column;gap:2rem;display:flex}@media (min-width:768px){.weather-content-layout{grid-template-columns:1fr 1fr;align-items:start;gap:2rem;display:grid}}.left-column{flex-direction:column;gap:2rem;display:flex}.outfit-card.minimal{box-shadow:none;background:0 0;border:none;margin:0;padding:0}.outfit-card.minimal .layer-row{border-bottom:1px solid #0000000d}:root.dark .outfit-card.minimal .layer-row{border-bottom:1px solid #ffffff0d}.stat-box:hover{border-color:var(--primary-color);transform:translateY(-2px)}.stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-medium);word-wrap:break-word;width:100%;margin-bottom:.25rem;font-size:.75rem;font-weight:700;line-height:1.4}.stat-value{color:var(--text-dark);font-size:1.5rem;font-weight:800}.text-blue{color:var(--primary-color)}.text-gray{color:var(--text-medium)}.forecast-container{width:100%;margin-top:1rem}.forecast-title{margin-bottom:1rem;padding-left:.5rem;font-size:1.25rem;font-weight:700}.forecast-list{flex-direction:column;gap:.75rem;display:flex}.forecast-item{background-color:var(--stat-box-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);border:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem 1.5rem;transition:transform .2s,border-color .2s;display:flex}.forecast-item:hover{border-color:var(--primary-color);transform:translateY(-2px)}.day-name{width:6rem;font-weight:500}.forecast-icon-wrapper{align-items:center;gap:.75rem;display:flex}.forecast-desc{color:var(--text-medium);font-size:.875rem;display:none}@media (min-width:640px){.forecast-desc{display:block}}.temp-range{justify-content:flex-end;gap:1rem;min-width:5rem;display:flex}.temp-high{font-weight:700}.temp-low{color:var(--text-light)}.rain-chance{color:var(--primary-color);background-color:var(--stat-box-bg);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:.25rem;margin-left:.5rem;padding:.25rem .5rem;font-size:.75rem;font-weight:600;display:flex}.outfit-card{background:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);box-sizing:border-box;width:100%;margin-top:2rem;padding:2rem}.outfit-header{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.outfit-icon-bg{border-radius:var(--radius-lg);background-color:#e0e7ff;justify-content:center;align-items:center;padding:.75rem;display:flex}.outfit-icon{color:#4f46e5}.outfit-title{color:var(--text-dark);margin:0;font-size:1.25rem;font-weight:700}.outfit-subtitle{color:var(--text-medium);margin:0;font-size:.875rem}.layer-list{flex-direction:column;display:flex}.layer-row{border-bottom:1px solid var(--bg-color);justify-content:space-between;align-items:center;padding:.75rem 0;display:flex}.layer-row:last-child{border-bottom:none}.layer-label{color:var(--text-light);width:6rem;font-size:.875rem;font-weight:500}.layer-value{color:var(--text-dark);text-align:right;font-weight:600}.accessories-section{border-top:2px dashed var(--bg-color);margin-top:1.5rem;padding-top:1rem}.accessories-title{text-transform:uppercase;color:var(--text-light);letter-spacing:.05em;margin-bottom:.75rem;font-size:.75rem;font-weight:700}.accessories-grid{flex-wrap:wrap;gap:.5rem;display:flex}.accessory-tag{color:#4338ca;background-color:#e0e7ff;border:1px solid #c7d2fe;border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.875rem;font-weight:500;display:inline-flex}.loading-spinner{border:4px solid #e2e8f0;border-top-color:var(--primary-color);border-radius:50%;width:3rem;height:3rem;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-box{color:#991b1b;border-radius:var(--radius-lg);background:#fef2f2;border:1px solid #fee2e2;width:100%;padding:1rem 1.5rem}footer{text-align:center;color:var(--text-light);margin-top:5rem;padding-bottom:2rem;font-size:.875rem}.weather-summary-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);box-sizing:border-box;text-align:center;cursor:pointer;width:100%;padding:3rem 2rem;transition:transform .2s,box-shadow .2s}.weather-summary-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color);transform:translateY(-2px)}.details-container{width:100%}.back-button{color:var(--text-medium);cursor:pointer;background:0 0;border:none;align-items:center;margin-bottom:1rem;padding:0;font-size:.9rem;display:inline-flex}.back-button:hover{color:var(--primary-color);text-decoration:underline}.tabs{border-bottom:2px solid var(--border-color);gap:1rem;margin-bottom:1.5rem;padding-bottom:.5rem;display:flex}.tab-button{color:var(--text-medium);cursor:pointer;border-radius:var(--radius-lg);background:0 0;border:none;padding:.5rem 1rem;font-size:1rem;font-weight:500;transition:all .2s}.tab-button.active{color:var(--primary-color);background:#eff6ff;font-weight:700}.tab-button:hover:not(.active){background:#f1f5f9}.slide-in{animation:.3s ease-out slideIn}.fade-in{animation:.3s ease-in fadeIn}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.cloud-container{z-index:0;opacity:.8;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.cloud{filter:blur(20px);opacity:.8;background:#fff;border-radius:50%;animation:linear infinite drift;position:absolute}@keyframes drift{0%{transform:translate(-100%)}to{transform:translate(100vw)}}.celestial-body{filter:blur(40px);z-index:0;pointer-events:none;border-radius:50%;transition:all 1s;position:absolute}.sun{background:radial-gradient(circle,#fde04766 0%,#fde04700 70%);width:40vw;height:40vw;top:-10%;right:-10%}.moon{filter:blur(10px);background:radial-gradient(circle,#fffc 0%,#fff0 70%);width:150px;height:150px;top:5%;right:10%}.star{background:#fff;border-radius:50%;animation:3s ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}