:root{--bg-unisex:#f5f7fa;--bg-male:#e8f0ff;--bg-female:#fff0f6;--bg-nb:#f8fff4;--card:#ffffff;--muted:#6b7280}*{box-sizing:border-box}body,html,#root{height:100%;margin:0}.app{height:100dvh;min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#111}.bg-unisex{background:linear-gradient(180deg,#f5f7fa,#fff)}.bg-male{background:linear-gradient(180deg,#dfeeff,#f8fbff)}.bg-female{background:linear-gradient(180deg,#fff0f6,snow)}.bg-nb{background:linear-gradient(180deg,#f0fff4,#fbfff9)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}.topbar h1{margin:0;font-size:20px}.controls{display:flex;gap:8px;align-items:center}.controls input{padding:8px 12px;border-radius:8px;border:1px solid #e6e9ef}.controls select{padding:8px 10px;border-radius:8px;border:1px solid #e6e9ef}.controls button{padding:8px 12px;border-radius:8px;border:0;background:#111;color:#fff}main.tile-column{flex:1;min-height:0;padding:20px 28px;display:flex;justify-content:center;overflow:auto}.app-content{flex:1;min-height:0;padding:20px 28px;display:flex;gap:20px;justify-content:center;align-items:stretch;overflow:hidden}.weather-column{width:320px;min-height:0;height:100%;overflow:auto}.weather-column{display:flex}.weather-column .weather-card{width:100%;height:100%;min-height:100%;margin-bottom:0;align-items:stretch}.weather-column .weather-left,.weather-column .weather-right{justify-content:center;height:100%}.app-content .tile-column{width:440px;padding:0;display:flex;justify-content:center;height:100%;min-height:0;overflow:auto}.tiles-vertical{display:flex;flex-direction:column;gap:16px;max-width:420px;width:100%}.tile{display:flex;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px #1018280f}.tile-media{min-width:120px;height:120px;flex:0 0 120px;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#f8fafc;padding:6px}.tile-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f8fbff,#eef3fb)}.tile-fallback-icon{display:flex;align-items:center;justify-content:center;color:#5b6474}.tile-body{padding:12px 14px;display:flex;flex-direction:column;justify-content:center}.tile-slot{font-size:11px;color:var(--muted);letter-spacing:1px}.tile-name{font-weight:700;margin-top:6px}.tile-reason{color:var(--muted);font-size:13px;margin-top:6px}.tile-buy{margin-top:8px;color:#0b5fff;text-decoration:none;font-weight:600}.affiliate-panel{width:220px;min-height:0;height:100%;overflow:auto;background:#ffffffeb;border:1px solid #e6e9ef;border-radius:12px;box-shadow:0 6px 18px #1018280f;padding:14px}.affiliate-panel-title{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:#6b7280;margin-bottom:10px}.affiliate-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #eef2f7}.affiliate-main{display:flex;align-items:center;gap:10px}.affiliate-item span{font-weight:700}.affiliate-refresh{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid #dbe3ee;background:#f8fbff;color:#1f2a37;cursor:pointer}.affiliate-refresh:hover{background:#eef4ff}.affiliate-refresh:disabled{opacity:.7;cursor:default}.affiliate-refresh--loading{background:#eef4ff}.spin{animation:spin .8s linear infinite}.affiliate-empty{font-size:13px;color:#6b7280}.weather-summary{margin-bottom:12px;text-align:center;color:#333}.empty{color:var(--muted)}.user-page{max-width:540px;width:100%;background:#ffffffe6;padding:16px;border-radius:12px;box-shadow:0 6px 18px #1018280f}.user-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.auth-box input,.profile-box select{display:block;width:100%;padding:8px;margin:6px 0;border-radius:8px;border:1px solid #e6e9ef}.user-header button{margin-left:8px;padding:6px 10px;border-radius:8px;border:0;background:#111;color:#fff}.auth-box button,.profile-box button{padding:8px 10px;border-radius:8px;border:0;background:#0b5fff;color:#fff}.profile-box .avatar-picker button{padding:6px;background:#fff;border-radius:8px}.weather-card{display:flex;justify-content:space-between;align-items:center;background:#fffc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:12px;border-radius:12px;margin-bottom:16px;box-shadow:0 6px 18px #1018280f}.weather-card{position:relative;overflow:hidden}.weather-left{display:flex;flex-direction:column;align-items:flex-start}.weather-temp{font-size:48px;font-weight:800;line-height:1}.weather-cond{font-size:16px;margin-top:6px;text-transform:capitalize}.weather-meta{color:var(--muted);font-size:13px;margin-top:6px}.weather-right{display:flex;flex-direction:column;align-items:flex-end}.weather-icon{width:64px;height:64px}.weather-location{font-weight:700}.weather-stamp{font-size:12px;color:var(--muted)}.weather-stats{font-size:13px;color:var(--muted);margin-top:6px;display:flex;gap:8px}.weather-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.weather-card>:not(.weather-bg){position:relative;z-index:1}.weather-bg--clear .sun{position:absolute;right:16px;top:8px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8c6 0%,#ffd66b 30%,#ffb84d 60%,transparent 61%)}.weather-bg--clear .sun:after{content:"";position:absolute;top:-30px;right:-30px;bottom:-30px;left:-30px;border-radius:50%;box-shadow:0 0 40px 12px #ffb84d40;animation:sunPulse 5s ease-in-out infinite}.weather-bg--clear .sun{animation:sunFloat 6s ease-in-out infinite}.cloud{position:absolute;background:#fff;border-radius:999px;box-shadow:0 6px 18px #10182814;opacity:.95}.cloud--one{width:220px;height:64px;left:-40px;top:10px}.cloud--two{width:160px;height:48px;left:-100px;top:40px}.weather-bg--clouds .cloud{animation:cloudMove 18s linear infinite}.weather-bg--clouds .cloud--two{animation-duration:23s}@keyframes cloudMove{0%{transform:translate(-10%)}50%{transform:translate(30%)}to{transform:translate(-10%)}}@keyframes sunPulse{0%{transform:scale(1);opacity:.65}50%{transform:scale(1.08);opacity:.9}to{transform:scale(1);opacity:.65}}@keyframes sunFloat{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.rain{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.drop{position:absolute;top:-10%;width:2px;height:18px;background:linear-gradient(#9fd8ff,#6fb3ff);opacity:.85;border-radius:2px}.drop--0{animation:fall 1s linear infinite 0s}.drop--1{animation:fall 1.1s linear infinite .2s}.drop--2{animation:fall .9s linear infinite .1s}.drop--3{animation:fall 1.2s linear infinite .3s}.drop--0{height:16px}.drop--1{height:20px}.drop--2{height:14px}.drop--3{height:18px}@keyframes fall{0%{transform:translateY(-10%) translate(0);opacity:0}50%{opacity:1}to{transform:translateY(120%) translate(10px);opacity:0}}.snow{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.flake{position:absolute;top:-5%;width:8px;height:8px;background:#ffffffe6;border-radius:50%;box-shadow:0 0 8px #fff9;animation:snowFall 6s linear infinite}.flake:nth-child(2n){animation-duration:7s}.flake:nth-child(3n){animation-duration:5.5s}.flake:nth-child(4n){animation-duration:8s}@keyframes snowFall{0%{transform:translateY(-10%) translate(0) rotate(0)}to{transform:translateY(110%) translate(20px) rotate(360deg)}}.weather-bg--thunder{background:linear-gradient(180deg,#68728a47,#545e7866)}.thunder{position:absolute;top:0;right:0;bottom:0;left:0}.storm-cloud{position:absolute;top:10px;left:-40px;width:250px;height:70px;background:#d4dceed9;border-radius:999px;box-shadow:0 10px 24px #191f2e33;animation:cloudMove 16s linear infinite}.storm-cloud--two{top:36px;left:-110px;width:190px;height:56px;opacity:.9;animation-duration:20s}.bolt{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:24px solid #ffe08a;filter:drop-shadow(0 0 8px rgba(255,224,138,.8));opacity:0}.bolt--one{left:60%;top:40%;animation:lightning 3s ease-in-out infinite}.bolt--two{left:72%;top:46%;animation:lightning 3s ease-in-out infinite 1.4s}@keyframes lightning{0%,72%,to{opacity:0;transform:translateY(0)}76%{opacity:1;transform:translateY(2px)}80%{opacity:.2}84%{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.weather-bg .cloud,.weather-bg .drop,.weather-bg .flake,.weather-bg .sun{animation:none}}@media (max-width: 920px){.app{height:auto;min-height:100vh}.app-content{flex-direction:column;align-items:center;overflow:visible}.weather-column{width:100%;max-width:420px;height:auto;overflow:visible}.weather-column .weather-card{height:auto;min-height:unset}.affiliate-panel{width:100%;max-width:420px}.app-content .tile-column{width:100%;max-width:420px;height:auto;overflow:visible}.affiliate-panel{height:auto;overflow:visible}}