:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}:root{--bg: #0f172a;--bg-elev: #111827;--text: #e5e7eb;--muted: #9ca3af;--primary: #60a5fa;--border: #1f2937;--warn: #f59e0b;--danger: #ef4444}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";background:linear-gradient(180deg,#0e1524,#1a2433);color:var(--text)}html,body{overflow-x:hidden}body.bg-clear{background:radial-gradient(1600px 600px at 50% -200px,rgba(255,255,255,.12),transparent),linear-gradient(180deg,#0b1022,#0f172a 40%,#0a1a3a)}body.bg-clouds{background:radial-gradient(1600px 600px at 50% -200px,rgba(255,255,255,.08),transparent),linear-gradient(180deg,#101827,#111827 40%,#0b1324)}body.bg-rain{background:radial-gradient(1600px 600px at 50% -200px,rgba(96,165,250,.15),transparent),linear-gradient(180deg,#0a162b,#0e1a2f 40%,#0a223f)}body.bg-snow{background:radial-gradient(1600px 600px at 50% -200px,rgba(203,213,225,.25),transparent),linear-gradient(180deg,#0e1527,#101827 40%,#0d192f)}body.bg-fog{background:radial-gradient(1600px 600px at 50% -200px,rgba(148,163,184,.18),transparent),linear-gradient(180deg,#0d1424,#0f172a 40%,#0d172a)}body.bg-thunder{background:radial-gradient(1600px 600px at 50% -200px,rgba(251,191,36,.18),transparent),linear-gradient(180deg,#131317,#1a1a22 40%,#0e0e18)}.app{max-width:1200px;margin:0 auto;padding:24px;position:relative;z-index:1}.app-header{display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:20px}.app-header h1{margin:0 0 6px;font-weight:700}.subtitle{color:var(--muted);margin:0}.bg-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0}.landing{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center}.landing-inner{max-width:720px;width:100%;padding:24px;text-align:center}.landing-title{font-size:42px;font-weight:800;margin-bottom:6px}.landing-sub{color:var(--muted);margin-bottom:12px}.landing-card{background:#111827b3;border:1px solid var(--border);border-radius:16px;padding:16px;margin:10px 0 18px}.upload-row{display:flex;justify-content:center;margin-bottom:12px}.analysis-preview{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:start;margin-top:8px}.analysis-img{width:160px;height:160px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#0f172a}.analysis-scores,.score-grid{display:grid;gap:8px}.score-item{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center}.score-item span{color:var(--muted);font-size:14px}meter{width:100%;height:10px}.score-tags{color:var(--muted);font-size:12px;margin-top:4px}.qs-grid{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 640px){.qs-grid{grid-template-columns:1fr 1fr 1fr}}.qs-field{text-align:left}.qs-field label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}.qs-field select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text)}.qs-save{margin-top:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0b1226;color:var(--text)}.landing-search{max-width:600px;margin:0 auto}.searchbar{position:relative;margin:20px auto;max-width:600px}.search-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);outline:none}.search-status,.search-error{margin-top:8px;font-size:14px;color:var(--muted)}.search-error{color:var(--danger)}.search-results{position:absolute;top:46px;left:0;right:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:6px 0;margin:6px 0 0;list-style:none;max-height:260px;overflow:auto;box-shadow:0 10px 30px #0000004d;z-index:10}.search-result{padding:10px 14px;cursor:pointer}.search-result:hover{background:#0b1226}.status,.error,.hint{text-align:center;margin:10px 0}.error{color:var(--danger)}.hint{color:var(--muted)}.weather-columns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.weather-columns>*{min-width:0}.col-left,.col-right{width:100%}@media (min-width: 1100px){.col-left{width:640px}.col-right{width:420px}}.card{background:#111827cc;border:1px solid var(--border);border-radius:16px;padding:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.card-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.condition{color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.metric{background:#0b1226;border:1px solid var(--border);border-radius:12px;padding:12px}.metric-label{color:var(--muted);font-size:12px}.metric-value{font-weight:700;margin-top:6px}.rec-card h3{margin-bottom:6px}.warnings{border-left:3px solid var(--warn);padding-left:10px}.warning-item{margin:6px 0}.suggestion-item{margin:10px 0}.suggestion-title{font-weight:600}.suggestion-details{color:var(--muted)}.hero{border-radius:24px;padding:24px;background:radial-gradient(1200px 400px at 50% -100px,rgba(255,255,255,.12),transparent),linear-gradient(180deg,#60a5fa33,#111827cc);border:1px solid var(--border);text-align:center}.hero-top{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted)}.hero-location{font-weight:600}.hero-condition{display:flex;gap:8px;align-items:center}.hero-icon{font-size:28px}.hero-temp{font-size:80px;font-weight:700;line-height:1;margin-top:10px}.hero-temp .deg{font-size:.5em;vertical-align:super}.hero-feels{color:var(--muted);margin-top:8px}.hero-range{margin-top:6px;color:var(--muted)}.hero-clear{background:linear-gradient(180deg,#3b82f659,#111827d9)}.hero-clouds{background:linear-gradient(180deg,#94a3b859,#111827d9)}.hero-rain{background:linear-gradient(180deg,#3b82f626,#111827e6)}.hero-snow{background:linear-gradient(180deg,#cbd5e159,#111827d9)}.hero-fog{background:linear-gradient(180deg,#94a3b840,#111827e6)}.hero-thunder{background:linear-gradient(180deg,#fbbf2433,#111827d9)}.hourly{padding:16px}.hourly-title{color:var(--muted);margin-bottom:8px}.hourly-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:80px;gap:10px;overflow-x:auto;padding-bottom:6px}.hourly-item{background:#0b1226;border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}.hourly-time{color:var(--muted);font-size:12px}.hourly-icon{font-size:22px;margin-top:6px}.hourly-temp{font-weight:700;margin-top:6px}.hourly-uv{color:var(--muted);font-size:12px;margin-top:4px}.hourly-pop{color:var(--primary);font-size:12px;margin-top:2px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:#0b1226;border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px}.stat-icon{font-size:20px}.stat-meta{display:grid;gap:4px}.stat-label{color:var(--muted);font-size:12px}.stat-value{font-weight:700}.products h2{margin-top:0}.products-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}@media (min-width: 640px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.products{overflow:hidden}.product{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:#0b1226;color:inherit;text-decoration:none;min-width:0}.product:hover{outline:1px solid var(--primary)}.product-image-wrap{width:72px;height:72px;border-radius:10px;overflow:hidden;background:#0f172a;display:flex;align-items:center;justify-content:center}.product-image{width:100%;height:100%;object-fit:cover}.product-info{display:grid;gap:4px;min-width:0}.product-brand{color:var(--muted);font-size:12px}.product-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.product-cta{color:var(--primary);font-size:12px}.product-tag{display:inline-block;background-color:var(--bg-elev);color:var(--muted);font-size:12px;font-weight:600;padding:2px 6px;border-radius:8px;margin-top:4px;text-transform:capitalize}
