/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #060d1a; }
body {
  margin: 0;
  padding-top: 64px;
  background: #060d1a;
  color: #cbd5e1;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { content-visibility: auto; }

/* ═══════════════════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════════════════ */
.mb-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ═══════════════════════════════════════════════════════
   CARD SYSTEM
═══════════════════════════════════════════════════════ */
.mb-section { padding: 28px 0 0; }
.mb-widget-card {
  position: relative;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 20px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.mb-widget-card:hover {
  border-color: #1e3a5f;
  box-shadow: 0 16px 48px -10px rgba(0,0,0,0.7);
}
.mb-header {
  padding: 22px 32px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}
.mb-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em; color: #f1f5f9;
  margin: 0 0 4px; text-transform: lowercase;
}
.mb-title::first-letter { text-transform: uppercase; }
.mb-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 2px;
  color: #94a3b8; margin: 0;
}
.mb-body {
  padding: 28px 36px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.75; color: #cbd5e1;
}
.mb-body p { font-family:'Inter',sans-serif; font-size:16px; line-height:1.75; color:#cbd5e1; margin-top:0; }

/* ═══════════════════════════════════════════════════════
   HERO CARD
═══════════════════════════════════════════════════════ */
#mb-hero-card { animation: mb-fadein .7s ease both; }
@keyframes mb-fadein { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
#mb-intro-map{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1;opacity:.15;}
#mb-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px; padding: 40px 44px; align-items: start;
}
@media(max-width:760px) {
  #mb-hero-inner { grid-template-columns:1fr; padding:28px 20px; }
  #mb-hero-badge-col { display:none; }
}
#mb-hero-bio { font-family:'Inter',sans-serif; font-size:16px; line-height:1.75; color:#cbd5e1; }
#mb-hero-bio strong { color:#60a5fa; font-weight:600; }
#mb-hero-bio em { color:#94a3b8; font-style:normal; }
#mb-hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.mb-hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.06em; color:#64748b;
  background:rgba(30,41,59,0.8); border:1px solid #1e3a5f;
  border-radius:6px; padding:5px 10px;
  transition:border-color .2s,color .2s; text-decoration:none;
}
.mb-hero-tag:hover { border-color:#3b82f6; color:#93c5fd; }
.mb-hero-tag svg { width:13px; height:13px; flex-shrink:0; }
#mb-hero-badge-col {
  display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:4px;
}
#mb-hero-call {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(6,182,212,0.06); border:1px solid rgba(6,182,212,0.2);
  border-radius:12px; padding:16px 20px;
}
.mb-call-sign {
  font-family:'JetBrains Mono',monospace; font-size:22px;
  font-weight:700; color:#06b6d4; letter-spacing:4px; line-height:1;
}
.mb-call-class {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:2px; color:rgba(6,182,212,0.6); text-transform:uppercase;
}
.mb-cert-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2);
  border-radius:8px; padding:8px 12px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  font-weight:500; color:#4ade80; letter-spacing:.06em;
  text-decoration:none; transition:border-color .2s,background .2s;
}
.mb-cert-badge:hover { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35); }
.mb-hero-badge-img {
  width:110px; height:110px; object-fit:contain; display:block; border-radius:50%;
  border:1px solid rgba(220,38,38,0.25);
  box-shadow:0 0 18px rgba(220,38,38,0.18);
}

/* ═══════════════════════════════════════════════════════
   WHY WORK WITH ME
═══════════════════════════════════════════════════════ */
.mb-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:760px) { .mb-why-grid { grid-template-columns:1fr; } }
.mb-why-item { padding:24px; background:rgba(30,41,59,0.4); border-radius:14px; border:1px solid #1e293b; }
.mb-icon-box {
  width:44px; height:44px; border-radius:10px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.mb-icon-box svg { width:22px; height:22px; fill:#4ade80; }
.mb-item-title { font-family:'Inter',sans-serif; font-size:17px; font-weight:700; color:#fff; line-height:1.4; margin:0 0 10px; }
.mb-item-desc  { font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:#cbd5e1; margin:0; }

/* ═══════════════════════════════════════════════════════
   CONTRIBUTIONS — INFINITE REEL
═══════════════════════════════════════════════════════ */
.mb-contrib-desc{font-size:15px;color:#94a3b8;margin:0 0 20px;}
.mb-reel-wrap{
  overflow:hidden;position:relative;cursor:grab;user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  padding:4px 0 6px;
}
.mb-reel-wrap:active{cursor:grabbing;}
.mb-reel-track{display:flex;gap:12px;width:max-content;will-change:transform;}
.mb-reel-item{
  flex-shrink:0;width:230px;height:168px;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(30,58,95,0.6);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  position:relative;
}
.mb-reel-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.mb-reel-item:hover img{transform:scale(1.06);}
.mb-reel-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,6,23,.88) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;
  display:flex;align-items:flex-end;padding:10px 12px;
}
.mb-reel-item:hover .mb-reel-overlay{opacity:1;}
.mb-reel-caption{
  color:#f1f5f9;font-size:.68rem;font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;line-height:1.3;
}
.mb-photo-count{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:#64748b;margin-top:14px;letter-spacing:.06em;
}
.mb-photo-count span{color:#3b82f6;font-weight:700;}
/* lightbox */
#mb-lb{display:none;position:fixed;inset:0;z-index:100001;background:rgba(2,6,23,.96);align-items:center;justify-content:center;flex-direction:column;}
#mb-lb.open{display:flex;}
#mb-lb-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#94a3b8;font-size:2rem;cursor:pointer;line-height:1;padding:4px 8px;}
#mb-lb-close:hover{color:#f1f5f9;}
#mb-lb-prev,#mb-lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(9,17,32,.85);border:1px solid rgba(30,58,95,.8);color:#94a3b8;font-size:1.3rem;cursor:pointer;padding:10px 16px;border-radius:10px;transition:background .2s,color .2s;}
#mb-lb-prev{left:16px;}#mb-lb-next{right:16px;}
#mb-lb-prev:hover,#mb-lb-next:hover{background:rgba(30,64,175,.7);color:#f1f5f9;}
#mb-lb-img{max-width:90vw;max-height:82vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.8);object-fit:contain;}
#mb-lb-counter{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#475569;letter-spacing:.06em;}

/* ── Skeleton loaders ── */
@keyframes mb-skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.mb-reel-skel{
  flex-shrink:0;width:230px;height:168px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:mb-skel-shimmer 1.5s infinite;
}
.mb-book-reel-skel{
  flex-shrink:0;width:92px;height:180px;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:mb-skel-shimmer 1.5s infinite;
}
.mb-wos-skel{
  height:72px;border-radius:8px;
  background:linear-gradient(90deg,rgba(185,28,28,.08) 25%,rgba(185,28,28,.18) 50%,rgba(185,28,28,.08) 75%);
  background-size:200% 100%;animation:mb-skel-shimmer 1.5s infinite;
}

/*/* ═══════════════════════════════════════════════════════
   READING / BOOKS
═══════════════════════════════════════════════════════ */
.mb-reading-intro { font-size:15px; color:#94a3b8; margin:0 0 20px; }
.mb-count-badge {
  display:inline-block; margin-bottom:20px;
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:#4ade80; padding:8px 16px; border-radius:50px;
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25);
}
.mb-count-badge strong { color:#fff; font-weight:800; }
/* ── Book reel ── */
.mb-book-reel-wrap{
  overflow:hidden;position:relative;cursor:grab;user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  padding:4px 0 6px;
}
.mb-book-reel-wrap:active{cursor:grabbing;}
.mb-book-reel-track{display:flex;gap:10px;width:max-content;will-change:transform;}
.mb-book-reel-item{
  flex-shrink:0;width:92px;display:flex;flex-direction:column;
  border-radius:8px;overflow:hidden;
  background:#0b1121;border:1px solid rgba(30,58,95,0.55);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.mb-book-reel-cover{
  width:92px;height:138px;overflow:hidden;flex-shrink:0;
  background:#111827;display:flex;align-items:center;justify-content:center;
}
.mb-book-reel-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.mb-book-reel-item:hover .mb-book-reel-cover img{transform:scale(1.07);}
.mb-book-reel-nocover{color:#475569;font-size:10px;text-align:center;padding:4px;}
.mb-book-reel-meta{padding:6px 6px 7px;flex:1;}
.mb-book-reel-title{
  font-weight:700;font-size:.62rem;line-height:1.3;color:#e2e8f0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:3px;
}
.mb-book-reel-author{color:#64748b;font-size:.55rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* ═══════════════════════════════════════════════════════
   CONTACT CARD  (mc-* scoped layout)
═══════════════════════════════════════════════════════ */
.mc-grid {
  display:grid; grid-template-columns:190px 1fr; gap:40px; align-items:start;
}
@media(max-width:680px) { .mc-grid { grid-template-columns:1fr; } }
.mc-photo-wrap { border-radius:14px; overflow:hidden; border:1px solid #1e293b; line-height:0; }
.mc-photo { width:100%; height:auto; display:block; object-fit:cover; }
.mc-available {
  display:flex; align-items:center; gap:6px; margin-top:12px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.04em; color:#64748b;
}
.mc-dot {
  width:7px; height:7px; background:#22c55e; border-radius:50%;
  box-shadow:0 0 8px rgba(34,197,94,.55); flex-shrink:0;
}
.mc-name { font-family:'Inter',sans-serif; font-size:22px; font-weight:700; color:#fff; line-height:1.2; margin:0 0 7px; }
.mc-role {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; color:#38bdf8;
  display:block; margin-bottom:20px;
}
.mc-bio { font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:#cbd5e1; margin:0 0 24px; }
.mc-metrics {
  display:flex; border:1px solid #1e293b; border-radius:10px;
  overflow:hidden; margin-bottom:28px;
}
.mc-metric { flex:1; padding:12px 16px; }
.mc-metric + .mc-metric { border-left:1px solid #1e293b; }
.mc-metric-val { font-family:'Inter',sans-serif; font-size:15px; font-weight:700; color:#fff; margin-bottom:3px; }
.mc-metric-label { font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#475569; }
.mc-actions { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; align-items:center; }
.mc-btn-primary, .mc-btn-ghost {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  text-decoration:none; transition:all .2s; line-height:1;
}
.mc-btn-primary { background:#3b82f6; color:#fff; border:1px solid transparent; }
.mc-btn-primary:hover { background:#2563eb; }
.mc-btn-ghost { background:transparent; color:#94a3b8; border:1px solid #334155; }
.mc-btn-ghost:hover { border-color:#64748b; color:#f1f5f9; }
.mc-social { display:flex; gap:8px; padding-top:20px; border-top:1px solid #1e293b; align-items:center; }
.mc-social-lbl { font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#475569; margin-right:4px; }
.mc-icon-link {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; background:#1e293b;
  border:1px solid #334155; border-radius:7px;
  transition:all .2s; text-decoration:none;
}
.mc-icon-link svg { width:15px; height:15px; fill:#64748b; transition:fill .2s; }
.mc-icon-link:hover { background:#1e3a5f; border-color:#3b82f6; }
.mc-icon-link:hover svg { fill:#60a5fa; }

/* ── Digital War Map card ── */
.mc-war-card{position:relative;overflow:hidden;background:#04090f!important;
  border-color:rgba(6,182,212,.25)!important;}
.mc-warmap-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.mc-warmap-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 110% 80% at 50% 50%,transparent 30%,rgba(4,9,15,.72) 100%);}
.mc-war-content{position:relative;z-index:1;}
.mc-photo-frame{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(6,182,212,.35);
  box-shadow:0 0 18px rgba(6,182,212,.12),0 0 50px rgba(59,130,246,.08);}
.mc-atk-badge{position:absolute;top:8px;left:8px;z-index:2;
  background:rgba(4,9,15,.88);border:1px solid rgba(239,68,68,.45);border-radius:6px;
  padding:3px 8px;font:700 9px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#ef4444;}
.mc-info-glass{background:rgba(6,13,26,.72);backdrop-filter:blur(10px);
  border-radius:14px;padding:24px 22px;border:1px solid rgba(30,58,95,.55);}

/* ═══════════════════════════════════════════════════════
   KUWAIT WEATHER
═══════════════════════════════════════════════════════ */
.kw-card{
  background:linear-gradient(145deg,#0d1b2e 0%,#0a1628 60%,#050d1a 100%);
  border:1px solid rgba(30,58,95,.8);border-radius:20px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(59,130,246,.1);
}
.kw-main{padding:20px 24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid rgba(30,58,95,.5);}
.kw-temp-block{flex:1;}
.kw-label{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:#475569;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
.kw-temp{font-size:clamp(3rem,8vw,4.5rem);font-weight:900;line-height:1;color:#f8fafc;letter-spacing:-.04em;}
.kw-temp sup{font-size:40%;vertical-align:super;color:#94a3b8;}
.kw-range{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#64748b;margin-top:6px;}
.kw-range strong{color:#94a3b8;}
.kw-cond{font-size:.9rem;color:#cbd5e1;margin-top:8px;line-height:1.4;max-width:220px;}
.kw-icon-block{flex-shrink:0;text-align:center;}
.kw-icon-circle{
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle at 35% 25%,rgba(56,189,248,.35),rgba(29,78,216,.25) 55%,rgba(5,13,26,.6) 100%);
  border:1px solid rgba(56,189,248,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;
  box-shadow:0 0 30px rgba(56,189,248,.15);
}
.kw-meta{display:flex;flex-wrap:wrap;gap:6px 16px;padding:14px 24px;border-bottom:1px solid rgba(30,58,95,.5);}
.kw-meta-item{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#64748b;}
.kw-meta-item strong{color:#94a3b8;}
.kw-days{display:flex;gap:8px;padding:16px 24px 20px;overflow-x:auto;scrollbar-width:none;}
.kw-days::-webkit-scrollbar{display:none;}
.kw-day{
  flex:1 0 90px;min-width:90px;max-width:130px;
  background:linear-gradient(160deg,rgba(15,32,60,.8),rgba(5,13,26,.9));
  border:1px solid rgba(30,58,95,.6);border-radius:14px;
  padding:12px 10px;box-sizing:border-box;text-align:center;
  transition:border-color .2s,transform .2s;
}
.kw-day:hover{border-color:rgba(59,130,246,.5);transform:translateY(-2px);}
.kw-day-name{font-family:'Inter',sans-serif;font-weight:700;font-size:.75rem;color:#94a3b8;letter-spacing:.03em;}
.kw-day-date{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:#334155;margin:2px 0 8px;}
.kw-day-icon{font-size:1.5rem;line-height:1;margin-bottom:6px;}
.kw-day-max{font-size:1.1rem;font-weight:800;color:#f1f5f9;}
.kw-day-min{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#475569;margin-top:2px;}
.kw-footer{padding:10px 24px;display:flex;align-items:center;justify-content:space-between;}
.kw-source{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:#1e3a5f;letter-spacing:.06em;}
.kw-source a{color:inherit;text-decoration:none;}
.kw-warning{
  margin:0 24px 0;padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(234,179,8,.08),rgba(15,23,42,.7));
  border:1px solid rgba(234,179,8,.25);
  display:flex;gap:10px;align-items:flex-start;
}
.kw-warning--hidden{display:none;}
.kw-warn-pill{
  padding:3px 9px;border-radius:999px;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#0b1120;background:#facc15;white-space:nowrap;flex-shrink:0;
}
.kw-warn-pill--danger{background:#ef4444;color:#fef2f2;}
.kw-warn-text{font-size:.78rem;color:#cbd5e1;}
.kw-warn-title{font-weight:600;margin-bottom:2px;}
.kw-warn-meta{font-size:.7rem;color:#64748b;}
/* skeleton */
.kw-skel{animation:kw-pulse 1.6s ease-in-out infinite;}
@keyframes kw-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.kw-skel-row{height:14px;border-radius:6px;background:rgba(30,64,175,.35);margin-bottom:10px;}
.kw-skel-row.w60{width:60%;}
.kw-skel-row.w40{width:40%;}
.kw-skel-day{height:110px;border-radius:14px;background:rgba(30,64,175,.2);}

/* ── HF propagation strip ── */
.kw-space{
  display:flex;flex-wrap:wrap;gap:0;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#000c1e 0%,#000a18 50%,#000c1e 100%);
  border-top:2px solid rgba(250,204,21,.35);
  border-radius:0 0 20px 20px;
}
.kw-space>*{position:relative;z-index:1;}
#kw-space-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.kw-space-hdr{
  width:100%;padding:8px 24px 0;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(250,204,21,.55);
}
.kw-space-item{
  flex:1;min-width:70px;padding:10px 12px 12px;text-align:center;
  border-right:1px solid rgba(250,204,21,.12);
}
.kw-space-item:last-child{border-right:none;}
.kw-space-val{
  font-family:'JetBrains Mono',monospace;font-size:1.35rem;
  font-weight:800;color:#facc15;line-height:1;
  transition:color .4s ease;
}
.kw-space-val small{font-size:.45em;color:rgba(250,204,21,.45);margin-left:1px;font-weight:400;}
.kw-space-label{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;
  color:rgba(250,204,21,.45);letter-spacing:.1em;text-transform:uppercase;margin-top:5px;
}
.kw-space-cond{
  display:inline-block;font-size:.78rem;font-weight:700;
  padding:3px 10px;border-radius:20px;
  background:rgba(250,204,21,.12);color:#facc15;
  transition:background .4s,color .4s;
}

/* ── Weather card dynamic backgrounds ── */
.kw-card{position:relative;}
.kw-card::before,.kw-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  transition:opacity .8s ease;
}
.kw-card>*{position:relative;z-index:1;}

.kw-bg-sunny    {background:linear-gradient(145deg,#181200 0%,#110d03 55%,#040c1a 100%)!important;}
.kw-bg-partly   {background:linear-gradient(145deg,#0e1b2c 0%,#0b1728 55%,#050d1a 100%)!important;}
.kw-bg-cloudy   {background:linear-gradient(145deg,#0c1420 0%,#0a1220 55%,#060c18 100%)!important;}
.kw-bg-overcast {background:linear-gradient(145deg,#09101a 0%,#080e18 55%,#050a12 100%)!important;}
.kw-bg-rain     {background:linear-gradient(145deg,#030f1e 0%,#030c18 55%,#02080e 100%)!important;}
.kw-bg-heavy-rain{background:linear-gradient(145deg,#020c18 0%,#020a14 55%,#01060c 100%)!important;}
.kw-bg-thunder  {background:linear-gradient(145deg,#06061a 0%,#050514 55%,#03030e 100%)!important;}
.kw-bg-dust     {background:linear-gradient(145deg,#181200 0%,#110d03 55%,#04091a 100%)!important;}
.kw-bg-sandstorm{background:linear-gradient(145deg,#160d02 0%,#0e0901 55%,#040816 100%)!important;}
.kw-bg-fog      {background:linear-gradient(145deg,#0d1622 0%,#0b1420 55%,#060f1c 100%)!important;}
.kw-bg-windy    {background:linear-gradient(145deg,#0d1a2c 0%,#0a1628 55%,#050c1a 100%)!important;}

/* Sunny */
@keyframes kw-sun-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
@keyframes kw-sun-ray{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.kw-bg-sunny::before{
  background:radial-gradient(circle at 82% 22%,rgba(255,200,50,.52) 0%,rgba(255,140,0,.22) 28%,transparent 58%);
  animation:kw-sun-pulse 5s ease-in-out infinite;
}
.kw-bg-sunny::after{
  background:conic-gradient(from 0deg at 82% 22%,
    transparent 0deg,rgba(255,185,30,.05) 8deg,transparent 16deg,rgba(255,185,30,.05) 24deg,
    transparent 32deg,rgba(255,185,30,.06) 40deg,transparent 48deg,rgba(255,185,30,.05) 56deg,
    transparent 64deg,rgba(255,185,30,.06) 72deg,transparent 80deg,rgba(255,185,30,.05) 88deg,
    transparent 96deg,rgba(255,185,30,.06) 104deg,transparent 112deg,rgba(255,185,30,.05) 120deg,
    transparent 128deg,rgba(255,185,30,.06) 136deg,transparent 144deg,rgba(255,185,30,.05) 152deg,
    transparent 160deg,rgba(255,185,30,.06) 168deg,transparent 176deg,rgba(255,185,30,.05) 184deg,
    transparent 192deg,rgba(255,185,30,.06) 200deg,transparent 208deg,rgba(255,185,30,.05) 216deg,
    transparent 224deg,rgba(255,185,30,.06) 232deg,transparent 240deg,rgba(255,185,30,.05) 248deg,
    transparent 256deg,rgba(255,185,30,.06) 264deg,transparent 272deg,rgba(255,185,30,.05) 280deg,
    transparent 288deg,rgba(255,185,30,.06) 296deg,transparent 304deg,rgba(255,185,30,.05) 312deg,
    transparent 320deg,rgba(255,185,30,.06) 328deg,transparent 336deg,rgba(255,185,30,.05) 344deg,transparent 360deg);
  animation:kw-sun-ray 60s linear infinite;
}

/* Partly cloudy */
@keyframes kw-cloud-drift{0%{transform:translateX(-5%)}50%{transform:translateX(5%)}100%{transform:translateX(-5%)}}
.kw-bg-partly::before{
  background:
    radial-gradient(ellipse 50% 30% at 22% 38%,rgba(200,220,255,.15) 0%,transparent 100%),
    radial-gradient(ellipse 38% 24% at 68% 58%,rgba(200,220,255,.10) 0%,transparent 100%),
    radial-gradient(circle at 78% 20%,rgba(255,185,40,.22) 0%,transparent 48%);
  animation:kw-cloud-drift 20s ease-in-out infinite;
}
.kw-bg-partly::after{
  background:
    radial-gradient(ellipse 40% 22% at 52% 44%,rgba(200,220,255,.08) 0%,transparent 100%),
    radial-gradient(ellipse 30% 18% at 34% 66%,rgba(200,220,255,.07) 0%,transparent 100%);
  animation:kw-cloud-drift 28s ease-in-out infinite reverse;
}

/* Cloudy */
.kw-bg-cloudy::before{
  background:
    radial-gradient(ellipse 60% 36% at 18% 42%,rgba(148,163,184,.18) 0%,transparent 100%),
    radial-gradient(ellipse 50% 30% at 72% 58%,rgba(148,163,184,.13) 0%,transparent 100%),
    radial-gradient(ellipse 44% 26% at 50% 24%,rgba(148,163,184,.15) 0%,transparent 100%);
  animation:kw-cloud-drift 24s ease-in-out infinite;
}
.kw-bg-cloudy::after{
  background:
    radial-gradient(ellipse 55% 30% at 40% 72%,rgba(148,163,184,.10) 0%,transparent 100%),
    radial-gradient(ellipse 40% 24% at 80% 32%,rgba(148,163,184,.09) 0%,transparent 100%);
  animation:kw-cloud-drift 32s ease-in-out infinite reverse;
}

/* Overcast */
.kw-bg-overcast::before{
  background:
    radial-gradient(ellipse 80% 45% at 28% 48%,rgba(100,115,130,.22) 0%,transparent 100%),
    radial-gradient(ellipse 65% 38% at 78% 45%,rgba(100,115,130,.16) 0%,transparent 100%);
  animation:kw-cloud-drift 35s ease-in-out infinite;
}

/* Rain */
@keyframes kw-rain-fall{to{background-position:60px 120px}}
.kw-bg-rain::before{
  background:repeating-linear-gradient(162deg,transparent 0,transparent 7px,rgba(120,195,255,.10) 7px,rgba(120,195,255,.10) 8px);
  animation:kw-rain-fall .35s linear infinite;
}
.kw-bg-rain::after{background:radial-gradient(ellipse at 50% 100%,rgba(30,90,200,.28) 0%,transparent 65%);}

/* Heavy rain */
@keyframes kw-heavy-rain-fall{to{background-position:45px 90px}}
.kw-bg-heavy-rain::before{
  background:repeating-linear-gradient(162deg,transparent 0,transparent 5px,rgba(100,180,255,.13) 5px,rgba(100,180,255,.13) 6px);
  animation:kw-heavy-rain-fall .22s linear infinite;
}
.kw-bg-heavy-rain::after{background:radial-gradient(ellipse at 50% 100%,rgba(20,70,190,.35) 0%,transparent 60%);}

/* Thunder */
@keyframes kw-thunder-fall{to{background-position:40px 80px}}
@keyframes kw-lightning{0%,82%,100%{opacity:0}84%,90%{opacity:1}87%{opacity:.15}}
.kw-bg-thunder::before{
  background:repeating-linear-gradient(162deg,transparent 0,transparent 5px,rgba(100,160,255,.12) 5px,rgba(100,160,255,.12) 6px);
  animation:kw-thunder-fall .2s linear infinite;
}
.kw-bg-thunder::after{
  background:linear-gradient(170deg,rgba(200,130,255,.8) 0%,rgba(255,255,255,.55) 12%,transparent 45%);
  animation:kw-lightning 8s ease-in-out infinite;animation-delay:1.5s;
}

/* Dust / Hazy */
@keyframes kw-dust-wave{
  0%  {opacity:.65;transform:translateX(-8%) scaleY(1.00)}
  33% {opacity:1.00;transform:translateX( 5%) scaleY(1.06)}
  66% {opacity:.75;transform:translateX(-2%) scaleY(.96)}
  100%{opacity:.65;transform:translateX(-8%) scaleY(1.00)}
}
.kw-bg-dust::before{
  background:
    radial-gradient(ellipse 90% 55% at 50% 62%,rgba(210,163,65,.32) 0%,transparent 100%),
    radial-gradient(ellipse 75% 42% at 18% 38%,rgba(195,148,52,.22) 0%,transparent 100%),
    radial-gradient(ellipse 65% 38% at 82% 32%,rgba(205,158,58,.20) 0%,transparent 100%);
  animation:kw-dust-wave 11s ease-in-out infinite;
}
.kw-bg-dust::after{
  background:
    radial-gradient(ellipse 80% 40% at 32% 72%,rgba(200,153,56,.16) 0%,transparent 100%),
    radial-gradient(ellipse 65% 32% at 72% 24%,rgba(210,165,62,.13) 0%,transparent 100%);
  animation:kw-dust-wave 16s ease-in-out infinite reverse;
}

/* Sandstorm */
@keyframes kw-sand-sweep{
  0%  {transform:translateX(-18%) rotate(-1.5deg);opacity:.55}
  50% {transform:translateX( 12%) rotate( 1.5deg);opacity:.95}
  100%{transform:translateX(-18%) rotate(-1.5deg);opacity:.55}
}
.kw-bg-sandstorm::before{
  background:
    radial-gradient(ellipse 130% 65% at 45% 55%,rgba(220,158,45,.42) 0%,transparent 100%),
    radial-gradient(ellipse 90% 45% at 82% 72%,rgba(200,138,38,.28) 0%,transparent 100%);
  animation:kw-sand-sweep 7s ease-in-out infinite;
}
.kw-bg-sandstorm::after{
  background:radial-gradient(ellipse 110% 55% at 28% 32%,rgba(215,150,40,.24) 0%,transparent 100%);
  animation:kw-sand-sweep 10s ease-in-out infinite reverse;
}

/* Fog */
@keyframes kw-fog-drift{0%{transform:translateX(-7%);opacity:.7}50%{transform:translateX(7%);opacity:1}100%{transform:translateX(-7%);opacity:.7}}
.kw-bg-fog::before{
  background:
    radial-gradient(ellipse 110% 32% at 50% 38%,rgba(190,210,232,.20) 0%,transparent 100%),
    radial-gradient(ellipse 90% 25% at 18% 62%,rgba(185,205,228,.15) 0%,transparent 100%),
    radial-gradient(ellipse 80% 22% at 82% 24%,rgba(190,208,230,.13) 0%,transparent 100%);
  animation:kw-fog-drift 22s ease-in-out infinite;
}
.kw-bg-fog::after{
  background:
    radial-gradient(ellipse 100% 28% at 60% 56%,rgba(188,208,230,.12) 0%,transparent 100%),
    radial-gradient(ellipse 75% 22% at 32% 28%,rgba(192,210,232,.10) 0%,transparent 100%);
  animation:kw-fog-drift 30s ease-in-out infinite reverse;
}

/* Windy */
@keyframes kw-wind-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.kw-bg-windy::before{
  background:repeating-linear-gradient(178deg,
    transparent 0,transparent 20px,rgba(148,163,184,.07) 20px,rgba(148,163,184,.07) 24px,
    transparent 24px,transparent 44px,rgba(148,163,184,.05) 44px,rgba(148,163,184,.05) 47px);
  background-size:400% 100%;
  animation:kw-wind-flow 3.5s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   RADAR BACKGROUND
═══════════════════════════════════════════════════════ */
#mb-radar-bg{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.13;
}
.mb-page,.mb-widget-card,#mb-lb{position:relative;z-index:1;}

/* ═══════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════ */
#mb-lb {
  display:none; position:fixed; inset:0; z-index:200000;
  background:rgba(2,6,23,.95); align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
}
#mb-lb.open { display:flex; }
#mb-lb img { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:8px; box-shadow:0 0 60px rgba(0,0,0,.8); }
#mb-lb-close,#mb-lb-prev,#mb-lb-next {
  position:fixed; background:rgba(10,22,40,.85); border:1px solid #1e3a5f;
  color:#f8fafc; width:40px; height:40px; border-radius:50%; font-size:1.2rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
#mb-lb-close:hover,#mb-lb-prev:hover,#mb-lb-next:hover { background:#1e3a5f; }
#mb-lb-close { top:16px; right:16px; }
#mb-lb-prev  { left:16px; top:50%; transform:translateY(-50%); }
#mb-lb-next  { right:16px; top:50%; transform:translateY(-50%); }
#mb-lb-counter { color:#94a3b8; font-family:'JetBrains Mono',monospace; font-size:.8rem; }

/* ── Night backgrounds ── */
@keyframes kw-moon-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.80;transform:scale(1.07)}}
@keyframes kw-star-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.kw-bg-night{background:linear-gradient(145deg,#010510 0%,#010408 55%,#00020c 100%)!important;}
.kw-bg-night::before{
  background:radial-gradient(circle at 80% 20%,rgba(210,230,255,.38) 0%,rgba(170,200,255,.16) 12%,transparent 36%);
  animation:kw-moon-glow 9s ease-in-out infinite;
}
.kw-bg-night::after{
  background:
    radial-gradient(circle at 15% 22%,rgba(255,255,255,.55) 0.5px,transparent 1px),
    radial-gradient(circle at 38% 14%,rgba(255,255,255,.45) 0.5px,transparent 1px),
    radial-gradient(circle at 57% 28%,rgba(255,255,255,.35) 0.5px,transparent 1px),
    radial-gradient(circle at 72% 10%,rgba(255,255,255,.60) 0.5px,transparent 1px),
    radial-gradient(circle at 90% 42%,rgba(255,255,255,.30) 0.5px,transparent 1px),
    radial-gradient(circle at 22% 58%,rgba(255,255,255,.40) 0.5px,transparent 1px),
    radial-gradient(circle at 44% 72%,rgba(255,255,255,.45) 0.5px,transparent 1px),
    radial-gradient(circle at 62% 50%,rgba(255,255,255,.30) 0.5px,transparent 1px),
    radial-gradient(circle at 82% 68%,rgba(255,255,255,.38) 0.5px,transparent 1px),
    radial-gradient(circle at 8%  80%,rgba(255,255,255,.50) 0.5px,transparent 1px),
    radial-gradient(circle at 93% 82%,rgba(255,255,255,.28) 0.5px,transparent 1px),
    radial-gradient(circle at 30% 90%,rgba(255,255,255,.38) 0.5px,transparent 1px);
  animation:kw-star-twinkle 5s ease-in-out infinite;
}
.kw-bg-night-partly{background:linear-gradient(145deg,#020812 0%,#020610 55%,#010408 100%)!important;}
.kw-bg-night-partly::before{
  background:
    radial-gradient(circle at 80% 20%,rgba(200,220,255,.28) 0%,rgba(160,190,255,.12) 14%,transparent 36%),
    radial-gradient(ellipse 55% 32% at 28% 44%,rgba(110,140,170,.18) 0%,transparent 100%);
  animation:kw-moon-glow 9s ease-in-out infinite;
}
.kw-bg-night-partly::after{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.50) 0.5px,transparent 1px),
    radial-gradient(circle at 72% 10%,rgba(255,255,255,.45) 0.5px,transparent 1px),
    radial-gradient(circle at 90% 42%,rgba(255,255,255,.28) 0.5px,transparent 1px),
    radial-gradient(ellipse 45% 25% at 42% 55%,rgba(100,130,160,.12) 0%,transparent 100%),
    radial-gradient(circle at 8%  78%,rgba(255,255,255,.40) 0.5px,transparent 1px);
  animation:kw-cloud-drift 25s ease-in-out infinite;
}

/* ── Feels-like row + icon animation ── */
.kw-feels-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:5px 0 7px;}
.kw-feels{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#60a5fa;background:rgba(59,130,246,.1);padding:2px 8px;border-radius:20px;border:1px solid rgba(59,130,246,.2);}
@keyframes kw-icon-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.kw-icon-emoji{font-size:2.8rem;line-height:1;display:block;animation:kw-icon-pulse 4s ease-in-out infinite;}
.kw-icon-day  {background:radial-gradient(circle at 35% 25%,rgba(255,200,50,.38),rgba(200,120,0,.22) 55%,rgba(5,13,26,.6) 100%)!important;border-color:rgba(255,185,30,.25)!important;box-shadow:0 0 32px rgba(255,185,30,.2)!important;}
.kw-icon-night{background:radial-gradient(circle at 35% 25%,rgba(150,180,255,.32),rgba(30,60,140,.22) 55%,rgba(5,13,26,.6) 100%)!important;border-color:rgba(150,180,255,.2)!important;box-shadow:0 0 32px rgba(150,180,255,.18)!important;}

/* ── Forecast day extras ── */
.kw-day-uv  {font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;margin-top:4px;}
.kw-day-rain{font-size:.62rem;color:#60a5fa;margin-top:2px;}
.kw-mi      {font-size:.85rem;}