:root{
  --mt-blue:#0284C7;--mt-orange:#F97316;--mt-navy:#0F172A;
  --mt-bg:#F1F5F9;--mt-card:#fff;--mt-line:#E2E8F0;--mt-muted:#64748B;
  --mt-radius:14px;--mt-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --mt-lift:0 6px 20px rgba(0,0,0,.13);--mt-tx:.18s ease;
  --mt-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ── Widget shell ── */
.mt-widget{
  box-sizing:border-box;max-width:480px;margin:0 auto;
  font-family:var(--mt-font);color:var(--mt-navy);font-size:15px;
  background:var(--mt-bg);border-radius:var(--mt-radius);padding:20px;
  line-height:1.5;
}
.mt-widget *{box-sizing:inherit}

/* ── Loading / error ── */
.mt-loading{text-align:center;color:var(--mt-muted);padding:32px 0;font-size:.95rem}
.mt-error-wrap{text-align:center;padding:28px 16px}
.mt-error-icon{font-size:2.4rem;margin-bottom:8px}
.mt-error-msg{color:#b91c1c;font-size:.92rem;margin:0 0 14px}
.mt-retry-btn{padding:9px 20px;border:none;border-radius:8px;background:var(--mt-blue);color:#fff;
  font-family:var(--mt-font);font-size:.88rem;font-weight:700;cursor:pointer;
  transition:background var(--mt-tx)}
.mt-retry-btn:hover{background:#0369a1}

/* ── Header ── */
.mt-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.mt-location{display:flex;flex-direction:column;gap:2px}
.mt-city{font-size:1.35rem;font-weight:800;color:var(--mt-navy);line-height:1.1}
.mt-country{font-size:.8rem;color:var(--mt-muted);font-weight:500}

/* ── 3-dots menu ── */
.mt-dots-wrap{position:relative}
.mt-dots-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--mt-line);
  background:var(--mt-card);color:var(--mt-navy);font-size:1.3rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--mt-tx),border-color var(--mt-tx)}
.mt-dots-btn:hover{background:var(--mt-bg);border-color:var(--mt-blue)}
.mt-units-dropdown{display:none;position:absolute;top:42px;right:0;
  background:#fff;border:1px solid var(--mt-line);border-radius:12px;padding:14px 16px;
  min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:99}
.mt-units-dropdown.mt-open{display:block}
.mt-units-title{font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mt-navy);margin-bottom:10px}
.mt-units-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;
  border-radius:8px;cursor:pointer;transition:background var(--mt-tx);margin-bottom:4px}
.mt-units-row:last-child{margin-bottom:0}
.mt-units-row.mt-units-active{background:#EFF6FF}
.mt-units-radio{margin-top:3px;accent-color:var(--mt-blue);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.mt-units-text{display:flex;flex-direction:column;gap:1px}
.mt-units-main{font-size:.86rem;font-weight:700;color:var(--mt-navy)}
.mt-units-row.mt-units-active .mt-units-main{color:var(--mt-blue)}
.mt-units-sub{font-size:.7rem;color:var(--mt-muted)}
.mt-units-row.mt-units-active .mt-units-sub{color:var(--mt-blue)}

/* ── Hero ── */
.mt-hero{
  background:linear-gradient(135deg,#0EA5E9 0%,#0284C7 100%);
  border-radius:var(--mt-radius);padding:24px 20px 20px;
  color:#fff;text-align:center;margin-bottom:14px;
  box-shadow:var(--mt-lift);
}
.mt-big-icon{font-size:4rem;line-height:1;margin-bottom:4px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.mt-big-temp{font-size:3.6rem;font-weight:900;line-height:1;letter-spacing:-.04em;margin-bottom:4px}
.mt-desc{font-size:1.05rem;font-weight:600;opacity:.92;margin-bottom:4px}
.mt-feels{font-size:.82rem;opacity:.82;margin-bottom:8px}
.mt-datetime{font-size:.75rem;opacity:.75;margin:0;user-select:none}

/* ── Detail grid ── */
.mt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mt-cell{background:var(--mt-card);border:1px solid var(--mt-line);
  border-radius:10px;padding:10px 12px;box-shadow:var(--mt-shadow)}
.mt-cell-label{display:block;font-size:.65rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mt-muted);margin-bottom:3px}
.mt-cell-value{font-size:.88rem;font-weight:700;color:var(--mt-navy)}

/* ── Today min/max banner ── */
.mt-minmax{
  background:var(--mt-card);border:1px solid var(--mt-line);border-radius:10px;
  padding:10px 16px;margin-bottom:14px;font-size:.92rem;font-weight:600;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;box-shadow:var(--mt-shadow);
}
.mt-minmax-label{color:var(--mt-muted);font-weight:500}
.mt-temp-high{color:var(--mt-orange)}
.mt-temp-low{color:var(--mt-blue)}
.mt-temp-sep{color:#cbd5e1;font-weight:400}
.mt-precip{color:var(--mt-muted);font-size:.85rem}

/* ── Section title ── */
.mt-section{font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mt-muted);margin:0 0 8px}

/* ── 7-day forecast ── */
.mt-forecast{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.mt-fc-card{background:var(--mt-card);border:1px solid var(--mt-line);border-radius:10px;
  overflow:hidden;text-align:center;box-shadow:var(--mt-shadow);
  transition:box-shadow var(--mt-tx),transform var(--mt-tx)}
.mt-fc-card:hover{box-shadow:var(--mt-lift);transform:translateY(-2px)}
.mt-fc-day{background:#DBEAFE;color:var(--mt-blue);font-size:.55rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 2px 5px;
  border-bottom:1px solid #BFDBFE}
.mt-fc-icon{font-size:1.5rem;padding:8px 2px 4px;
  background:linear-gradient(180deg,#F0F9FF 0%,#fff 100%);
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.mt-fc-temps{padding:4px 2px 8px;font-size:.72rem;font-weight:700}

/* ── Source ── */
.mt-source{margin-top:4px;font-size:.68rem;color:var(--mt-muted);text-align:right}
.mt-source a{color:var(--mt-blue);text-decoration:none}
.mt-source a:hover{text-decoration:underline}

/* ── Focus styles (a11y) ── */
.mt-widget button:focus-visible,.mt-widget a:focus-visible{
  outline:2px solid var(--mt-blue);outline-offset:3px;border-radius:3px}

/* ── Responsive ── */
@media(max-width:440px){
  .mt-widget{padding:14px}
  .mt-big-temp{font-size:2.8rem}
  .mt-big-icon{font-size:3rem}
  .mt-grid{grid-template-columns:repeat(2,1fr)}
  .mt-forecast{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:340px){
  .mt-forecast{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .mt-fc-card,.mt-retry-btn,.mt-dots-btn{transition:none}
}