:root{--color-bg: #f5f5f4;--color-surface: #ffffff;--color-border: #e7e5e4;--color-text-primary: #1c1917;--color-text-secondary: #78716c;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-danger: #ef4444;--radius: 12px;--shadow: 0 1px 4px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);--font: "Inter", system-ui, -apple-system, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);font-family:var(--font);color:var(--color-text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none}.add-tile{position:relative;width:min(380px,100%)}.add-tile__label{display:none}.add-tile__input-row{position:relative;display:flex;align-items:center}.add-tile__input{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:1.5px solid var(--color-border);border-radius:10px;font-size:1rem;color:var(--color-text-primary);background:var(--color-surface);box-shadow:var(--shadow);outline:none;transition:border-color .15s,box-shadow .15s}.add-tile__input:focus{border-color:var(--color-accent);background:#fff;box-shadow:0 0 0 3px #3b82f61f,var(--shadow)}.add-tile__input::placeholder{color:#a8a29e}.add-tile__spinner{position:absolute;right:.6rem;width:16px;height:16px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.add-tile__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:10px;box-shadow:0 4px 20px #0000001a;list-style:none;z-index:100;overflow:hidden}.add-tile__result{display:flex;flex-direction:column;gap:2px;padding:.65rem .875rem;cursor:pointer;transition:background .1s}.add-tile__result:not(:last-child){border-bottom:1px solid var(--color-border)}.add-tile__result:hover{background:var(--color-bg)}.result-name{font-size:.9375rem;font-weight:500;color:var(--color-text-primary)}.result-sub{font-size:.8125rem;color:var(--color-text-secondary)}.add-tile__message{padding:.75rem .875rem;font-size:.875rem;color:var(--color-text-secondary)}.add-tile__message--error{color:var(--color-danger)}.weather-tile{position:relative;background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;cursor:grab;transition:opacity .15s,box-shadow .15s}.weather-tile:active{cursor:grabbing}.weather-tile[draggable]:drag{opacity:.5}.tile-remove{position:absolute;top:.75rem;right:.75rem;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1;color:var(--color-text-secondary);transition:background .15s,color .15s}.tile-remove:hover{background:#fee2e2;color:var(--color-danger)}.tile-header{padding-right:1.5rem}.tile-header-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0}.tile-header-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.tile-city{font-size:1.25rem;font-weight:600;line-height:1.2;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.tile-refresh{font-size:1rem;color:var(--color-text-secondary);padding:.1rem .25rem;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0;line-height:1}.tile-refresh:hover:not(:disabled){color:var(--color-accent);background:#3b82f614}.tile-refresh:disabled{opacity:.4;cursor:default}.tile-region{font-size:.8125rem;color:var(--color-text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-updated{font-size:.7rem;color:var(--color-text-secondary);opacity:.7;margin-top:3px}.tile-local-time{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--color-text-secondary);white-space:nowrap}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skel{background:linear-gradient(90deg,#f0efed 25%,#e6e4e1,#f0efed 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:5px}.tile-skeleton{display:flex;flex-direction:column;gap:.625rem}.skel-temp{height:48px;width:55%}.skel-desc{height:14px;width:45%}.skel-meta{height:12px;width:80%}.skel-forecast-row{display:flex;gap:4px;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--color-border)}.skel-fc{flex:1;height:64px;border-radius:6px}.tile-error{font-size:.875rem;color:var(--color-danger);padding:.5rem 0}.tile-current{display:flex;flex-direction:column;gap:.375rem}.tile-current-main{display:flex;align-items:center;gap:.5rem}.tile-symbol{font-size:2.25rem;line-height:1}.tile-temp{font-size:2.5rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--color-text-primary)}.tile-desc{font-size:.9375rem;color:var(--color-text-secondary);font-weight:500}.tile-meta{display:flex;flex-wrap:wrap;gap:.25rem .875rem;margin-top:.25rem}.tile-meta span{font-size:.8125rem;color:var(--color-text-secondary)}.tile-controls{display:flex;gap:.5rem;align-items:center}.tile-view-toggle{display:flex;gap:0;border:1.5px solid var(--color-border);border-radius:7px;overflow:hidden;width:fit-content}.tile-view-toggle .unit-btn:first-child{border-right:1.5px solid var(--color-border)}.tile-unit-toggle{display:flex;gap:0;border:1.5px solid var(--color-border);border-radius:7px;overflow:hidden;width:fit-content}.unit-btn{padding:.3rem .75rem;font-size:.8125rem;font-weight:500;color:var(--color-text-secondary);background:transparent;transition:background .12s,color .12s}.unit-btn:first-child{border-right:1.5px solid var(--color-border)}.unit-btn.active{background:var(--color-accent);color:#fff}.unit-btn:not(.active):hover{background:var(--color-bg)}.forecast-strip{display:flex;gap:0;border-top:1px solid var(--color-border);padding-top:.875rem;justify-content:space-between}.forecast-day{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1}.forecast-day:not(:last-child){border-right:1px solid var(--color-border);margin-right:0;padding-right:0}.fc-day{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.fc-symbol{font-size:1.25rem;line-height:1}.fc-high{font-size:.8125rem;font-weight:600;color:var(--color-text-primary)}.fc-low{font-size:.75rem;color:var(--color-text-secondary)}.fc-precip{font-size:.7rem;color:#60a5fa;font-weight:500}.hourly-strip{display:flex;gap:0;border-top:1px solid var(--color-border);padding-top:.875rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.hourly-strip::-webkit-scrollbar{display:none}.hourly-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:0 0 52px;padding:0 4px}.hourly-item:not(:last-child){border-right:1px solid var(--color-border)}.hr-time{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-secondary);white-space:nowrap}.hr-symbol{font-size:1.1rem;line-height:1}.hr-temp{font-size:.8125rem;font-weight:600;color:var(--color-text-primary)}.hr-precip{font-size:.7rem;color:#60a5fa;font-weight:500}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2.5rem 1.5rem 1.5rem}.app-header__top{display:flex;align-items:center;gap:.75rem}.app-title{font-size:1rem;font-weight:600;color:var(--color-text-secondary);letter-spacing:.08em;text-transform:uppercase}.share-btn{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;border:1px solid var(--color-text-secondary);background:transparent;color:var(--color-text-secondary);cursor:pointer;opacity:.7;transition:opacity .15s}.share-btn:hover{opacity:1}.tile-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1.25rem;padding:.75rem 1.5rem 2rem}.tile-grid>*{width:min(300px,100%);flex-shrink:0}@media(max-width:400px){.app-header{padding:1.5rem 1rem 1rem}.tile-grid{padding:.5rem 1rem 1.5rem;gap:1rem}}