/* UX+ Styles: 4 columns, light/dark/auto, controls, skeletons */
:root{
  --ml16-bg: #f7f8fb;
  --ml16-card: #ffffff;
  --ml16-border: #e7edf5;
  --ml16-shadow: 0 8px 22px rgba(10, 22, 50, .06);
  --ml16-txt: #0f172a;
  --ml16-sub: #475569;
  --ml16-chip: #eef2f7;
  --ml16-radius: 1rem;
}
.ml16{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif; color: var(--ml16-txt); }
.ml16--border{ border:1px solid var(--ml16-border); }
.ml16--shadow{ box-shadow: var(--ml16-shadow); }
[class*="ml16--rounded-"]{ border-radius: var(--ml16-radius); }
.ml16--theme-light{ background: var(--ml16-bg); }
.ml16--theme-dark{ background:#0b1220; --ml16-card:#0f172a; --ml16-border:#182132; --ml16-txt:#e5e7eb; --ml16-sub:#cbd5e1; --ml16-chip:#131b2a; }
@media (prefers-color-scheme: dark){
  .ml16--theme-auto{ background:#0b1220; --ml16-card:#0f172a; --ml16-border:#182132; --ml16-txt:#e5e7eb; --ml16-sub:#cbd5e1; --ml16-chip:#131b2a; }
}
@media (prefers-color-scheme: light){
  .ml16--theme-auto{ background:var(--ml16-bg); }
}

.ml16__header{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: .8rem 1rem .4rem; gap:.75rem; flex-wrap:wrap;
}
.ml16__title{ font-weight:800; letter-spacing:.2px; }
.ml16__meta{ color: var(--ml16-sub); font-size:.95rem; }

.ml16__controls{
  display:flex; gap:.5rem; padding: 0 1rem .2rem; flex-wrap:wrap;
}
.ml16__ctrl{
  background: var(--ml16-card); color: var(--ml16-txt);
  border:1px solid var(--ml16-border); border-radius:.6rem;
  padding:.4rem .6rem; cursor:pointer;
}
.ml16__ctrl:hover{ filter: brightness(1.03); }

/* Grid 4 columns strict */
.ml16__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 1rem;
  padding: .6rem 1rem 1rem;
  align-items:start;
}
@media (max-width: 1200px){
  .ml16__grid{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 900px){
  .ml16__grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 560px){
  .ml16__grid{ grid-template-columns: 1fr; }
}

.ml16__card{
  position:relative;
  background: var(--ml16-card);
  border:1px solid var(--ml16-border);
  border-radius: .95rem;
  padding: 1rem 1.05rem 1.05rem;
  display:flex; flex-direction:column; gap:.6rem;
  min-height: 190px;
  overflow:hidden;
  transition: box-shadow .12s ease;
}
.ml16__card:hover{ box-shadow: 0 10px 24px rgba(10,22,50,.14); }

.ml16__bar{ position:absolute; left:0; top:0; bottom:0; width:6px; background: hsl(var(--ml16-hue, 210) 80% 45% / .9); }

.ml16__day{ font-weight:800; font-size:1.05rem; }
.ml16__icon{ font-size:1.8rem; line-height:1; }
.ml16__temps{ display:flex; gap:.7rem; align-items:baseline; font-feature-settings:"tnum"; }
.ml16__tmax{ font-weight:800; font-size:1.25rem; color: hsl(var(--ml16-hue, 210) 80% 45%); }
.ml16__tmin{ font-weight:700; font-size:1.05rem; color: hsl(calc(var(--ml16-hue, 210) + 40) 70% 45% / .9); }

.ml16__precip, .ml16__wind{
  display:inline-flex; align-items:center; gap:.35rem; color: var(--ml16-sub); font-size:.95rem;
  background: var(--ml16-chip); border-radius:.55rem; padding:.25rem .55rem; width:max-content; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ml16__extra{ display:flex; gap:.5rem; align-items:center; color: var(--ml16-sub); font-size:.92rem; flex-wrap:wrap; }

.ml16--error{ background:#fff3f3; border:1px solid #ffd2d2; padding:.9rem 1rem; border-radius:.9rem; color:#7f1d1d; }

/* Skeletons */
.ml16__skeleton{ display:grid; grid-template-columns: repeat(4, minmax(260px,1fr)); gap:1rem; padding: .6rem 1rem 1rem; }
.ml16__sk-card{ height:190px; border-radius:.95rem; background: linear-gradient(90deg, #eef2f7 25%, #f3f6fb 37%, #eef2f7 63%); background-size: 400% 100%; animation: ml16-shimmer 1.2s infinite; }
.ml16--theme-dark .ml16__sk-card{ background: linear-gradient(90deg, #131b2a 25%, #172036 37%, #131b2a 63%); }
@keyframes ml16-shimmer{ 0%{background-position: 100% 0} 100%{background-position: -100% 0} }