:root{
  --bg:#0b0f14;
  --panel:#0f1720;
  --muted:#9aa6b2;
  --accent:#6ee7b7;
  --glass: rgba(255,255,255,0.03);
  --card:#0f1726;
}
*{box-sizing:border-box}
html,body,#root{height:100%;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(110,231,183,0.06), transparent), linear-gradient(180deg,#071016 0%, #0b1116 100%);
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

.app{display:flex;gap:18px;min-height:100vh;max-width:1200px;margin:0 auto}
.sidebar{width:300px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px}
.brand{font-weight:800;font-size:1.4rem;color:var(--accent);margin:0 0 8px}
.subtitle{margin-top:6px;color:var(--muted)}
.meta{color:var(--muted);font-size:0.9rem}

.main{flex:1;min-height:60vh;padding:18px;display:flex;flex-direction:column;gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:18px;color:var(--muted);box-shadow:0 6px 30px rgba(2,6,23,0.6);position:relative;overflow:hidden}
.card.center{display:flex;align-items:center;justify-content:center;padding:42px}
.card.current{padding:20px}

.grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.forecast{margin-top:12px}}

.row{display:flex;align-items:center;justify-content:space-between}
.big-temp{font-size:clamp(36px, 10vw, 88px);font-weight:800;line-height:1;color:#fff}
.icon{text-align:right}
.icon-inline{font-size:clamp(48px, 12vw, 160px);line-height:1}
.icon .emoji{font-size:inherit}
.desc{font-size:0.95rem;color:var(--muted)}

/* new card main layout (left temp, center icon, right details) */
.card-main{display:flex;align-items:center;justify-content:space-between;gap:18px}
.temp-column{flex:0 0 34%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.icon-column{flex:0 0 32%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.info-column{flex:1;display:flex;flex-direction:column;gap:8px}
.info-column .place h2{margin:0;font-size:1.1rem;color:#fff}
.info-column #date{color:var(--muted);font-size:0.9rem}

.temp-range{color:var(--muted);margin-top:8px}

@media(max-width:900px){
  .card-main{flex-direction:column;align-items:center;text-align:center}
  .temp-column{flex:unset;order:0}
  .icon-column{order:1}
  .info-column{order:2;width:100%}
  .info-column .details{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
}

.details{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px;color:var(--muted)}
.muted{color:var(--muted);font-size:0.92rem}
.coords{font-size:0.85rem}

.forecast h3{margin:0 0 12px 0;color:#e6eef6}
.forecast-row{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.hour-card{min-width:96px;background:var(--glass);padding:10px;border-radius:10px;text-align:center;color:#dcebf0}
.hour{font-size:0.82rem;color:var(--muted)}
.hour-emoji{font-size:clamp(18px,4.5vw,36px);margin:6px 0}
.hour-temp{font-weight:700}

.foot{margin-top:18px;text-align:center;color:var(--muted);font-size:0.85rem}

.loading{font-size:1.05rem;color:var(--muted)}
.error{background:linear-gradient(180deg, rgba(255,50,50,0.06), rgba(255,0,0,0.03));color:#ffd1d1}

/* small utilities */
.hidden{display:none}

/* mobile polish */
@media(max-width:900px){
  .app{flex-direction:column;padding:12px}
  .sidebar{width:100%;order:0}
  .main{order:1;padding:12px}
  .icon-inline{font-size:clamp(40px, 18vw, 120px)}
}

@media(max-width:480px){
  .big-temp{font-size:48px}
  .grid{gap:12px}
  body{padding:12px}
  .hour-card{min-width:84px}
}

/* Card themes based on temperature */
.card.cold{background:linear-gradient(180deg,#031224 0%, #071233 100%);border:1px solid rgba(120,200,255,0.06);box-shadow:0 8px 40px rgba(6,30,60,0.6)}
.card.cool{background:linear-gradient(180deg,#071527 0%, #0b2230 100%);border:1px solid rgba(96,165,250,0.06);box-shadow:0 8px 40px rgba(6,30,60,0.55)}
.card.warm{background:linear-gradient(180deg,#2b1808 0%, #4b2610 100%);border:1px solid rgba(255,184,105,0.08);box-shadow:0 10px 50px rgba(80,30,0,0.45)}
.card.hot{background:linear-gradient(180deg,#4a1a00 0%, #8a2e00 100%);border:1px solid rgba(255,112,84,0.12);box-shadow:0 12px 60px rgba(120,40,0,0.5)}

/* Rain effect shown only when drops are present */
.rain{position:absolute;left:12px;right:12px;bottom:6px;height:120px;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;opacity:1}
.rain.hidden{display:none}
.rain .drop{width:3px;height:18px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.25));border-radius:2px;opacity:0;transform:translateY(-10px);animation:rainFall 900ms linear infinite}
.rain .drop:nth-child(1){animation-delay:0ms}
.rain .drop:nth-child(2){animation-delay:120ms}
.rain .drop:nth-child(3){animation-delay:240ms}
.rain .drop:nth-child(4){animation-delay:360ms}
.rain .drop:nth-child(5){animation-delay:480ms}
.rain .drop:nth-child(6){animation-delay:600ms}

@keyframes rainFall{
  0%{opacity:0;transform:translateY(-20px)}
  10%{opacity:1}
  100%{opacity:0;transform:translateY(120px)}
}

/* subtle cloud overlay when raining (optional) */
.card.raining::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));pointer-events:none}