.siw-page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;max-width:1080px;margin:20px auto;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #eee;color:#111}
.siw-page-header{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:22px}
.siw-page-location{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.siw-page-city{padding:8px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#111}
.siw-page-updated{color:#6b7280;font-size:.92rem}
.siw-page-main{display:flex;align-items:flex-start;gap:20px}
.siw-page-icon{width:72px;height:72px}
.siw-page-temp-wrap{display:flex;flex-direction:column}
.siw-page-temp{font-size:72px;font-weight:800;line-height:1}
.siw-page-feels{color:#374151;font-size:1rem}
.siw-page-desc{text-transform:capitalize;margin-top:4px;color:#111}
.siw-page-right{display:flex;align-items:center}
.siw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.siw-stat{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.siw-stat-label{font-size:.85rem;color:#6b7280}
.siw-stat-value{font-size:1.05rem;font-weight:700;color:#111}

.siw-tabs{display:flex;gap:8px;padding:10px 16px;background:transparent}
.siw-tab{background:#fff;color:#111;border:1px solid #e5e7eb;padding:8px 12px;border-radius:999px;font-size:.95rem;cursor:pointer}
.siw-tab.active{background:#111;color:#fff;border-color:#111}

.siw-chart-wrap{background:#fff;padding:10px 16px;border-top:1px solid #f1f5f9}
#siwChart{width:100%;height:220px}

.siw-daily{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:14px 16px;background:#fff;color:#111;border-top:1px solid #f1f5f9}
.siw-dcard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;text-align:center}
.siw-dname{color:#374151;font-size:.95rem;margin-bottom:6px}
.siw-dicon{width:38px;height:38px;margin:0 auto 6px auto;display:block}
.siw-dtemp{font-weight:700;color:#111}

@media (max-width:900px){
  .siw-page-header{grid-template-columns:1fr}
  .siw-daily{grid-template-columns:repeat(3,1fr)}
  #siwChart{height:180px}
}

@media (max-width: 640px){
  .siw-tabs{display:flex;flex-direction:column;gap:8px;padding:12px}
  .siw-tab{display:block;width:100%;border-radius:12px;text-align:left}
}