:root{
  --bg-1:#3A567A;
  --bg-2:#243B57;
  --panel:#142033;
  --panel-2:#0d1a2a;
  --muted:#9fb3c8;
  --text:#eaf1f8;
  --text-weak:#c7d4e2;
  --brand-1:#60a5fa;
  --brand-2:#a78bfa;
  --accent:#19a8ff;
  --danger:#e06d6d;

  --radius-xl:16px;
  --radius-lg:12px;
  --radius-md:10px;
  --radius-sm:8px;

  --shadow-1:0 10px 35px rgba(0,0,0,.35);
  --shadow-2:0 4px 16px rgba(0,0,0,.25);

  --container: min(1160px, 92vw);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1100px 600px at 50% -200px, rgba(255,255,255,.06), transparent),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

/* App layout: footer pinned to bottom */
.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.container{width:var(--container); margin-inline:auto}

/* Header */
.site-header{
  padding:14px 0 10px;
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(180deg, rgba(20,32,51,.85), rgba(20,32,51,.2) 70%, transparent);
  backdrop-filter: blur(6px);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.brand-icon{width:26px; height:26px; display:block}
.brand-word{font-weight:800; letter-spacing:.2px; font-size:18px}

.controls{display:flex; align-items:center; gap:10px}

/* Segmented (°C/°F) */
.segmented{
  display:inline-flex; padding:3px; background:#0f1a2a; border-radius:999px; box-shadow:var(--shadow-2);
}
.seg-item{
  border:0; background:transparent; color:var(--text-weak);
  font-weight:800; font-size:13px; padding:8px 12px; border-radius:999px;
  cursor:pointer;
}
.seg-item.seg-active{ background:var(--accent); color:#052238; }

/* Icon buttons */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; color:var(--text);
  background:#0f1a2a; border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-2); cursor:pointer;
}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn.danger{ background:#2a0f16; color:#ffd2d2; border-color:rgba(255,255,255,.07)}

/* Search */
.search{
  margin-top:12px; display:flex; align-items:center; gap:10px;
  background:#0f1a2a; border:1px solid rgba(255,255,255,.06);
  padding:10px 10px 10px 12px; border-radius:14px; box-shadow:var(--shadow-2);
}
.search-input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-size:14px;
}
.btn-primary{
  border:0; background:var(--accent); color:#06253e; font-weight:900;
  padding:10px 16px; border-radius:12px; cursor:pointer; box-shadow:0 6px 22px rgba(25,168,255,.35);
}
.btn-primary:hover{transform:translateY(-1px)}

/* Main grows; footer sticks to bottom */
.main{padding:32px 0 60px; flex:1}

/* Empty hero */
.empty{ text-align:center; padding:56px 0 12px; }
.hero-icon{ width:64px; height:64px; }
.empty h1{margin:12px 0 6px; font-size:32px; font-weight:900}
.empty p{margin:0; color:var(--text-weak); font-weight:600}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap:18px;
  margin-top:18px;
}

/* Card */
.wx-card{
  background:linear-gradient(180deg, #0f1725, #0b1422);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:16px; box-shadow:var(--shadow-1);
}
.wx-card__header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.wx-card__title{display:flex; flex-direction:column; gap:4px}
.wx-card__title strong{font-size:16px}
.wx-card__subtitle{color:var(--muted); font-weight:600; font-size:13px}
.wx-close{
  border:0; width:28px; height:28px; border-radius:10px; cursor:pointer;
  background:#101a2a; color:var(--text);
  border:1px solid rgba(255,255,255,.06);
}

.wx-card__main{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px}
.wx-card__icon svg{width:56px; height:56px; display:block}
.wx-card__temp{font-weight:900; font-size:30px}

/* Stats */
.wx-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:6px;
}
.wx-stat{background:#0f1a2a; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px}
.wx-stat__label{color:var(--muted); font-size:12px; margin-bottom:6px}
.wx-stat__value{font-weight:800}

/* Next 3 days */
.wx-days{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.wx-mini{background:#0f1a2a; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px; text-align:center}
.wx-mini__name{color:var(--muted); font-size:12px; margin-bottom:6px}
.wx-mini__icon svg{width:28px; height:28px}
.wx-mini__temp{font-weight:800; font-size:13px}
.wx-mini .lo{opacity:.7; margin-left:6px}

/* Card foot */
.wx-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:var(--muted); font-size:12px}

/* Footer */
.site-footer{ padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.06) }
.foot-row{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; line-height:1 }
.foot-note{ color:var(--text-weak); font-weight:700; font-size:12px; display:inline-flex; align-items:center; line-height:1 }
.foot-links{ display:flex; align-items:center; gap:20px }
.foot-link{
  color:var(--text-weak);
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  display:inline-flex;
  align-items:center;          /* icon + label share a baseline */
  gap:8px;
  line-height:1;
}
.foot-link:hover{ color:var(--text) }

/* Footer icons via CSS masks: crisp, aligned, color = currentColor */
.icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:block;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
          mask-repeat:no-repeat;
          mask-position:center;
          mask-size:contain;
}

/* GitHub mark */
.icon-gh{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M12 .296c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.084-.729.084-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.492.998.108-.776.418-1.305.76-1.605-2.665-.3-5.467-1.334-5.467-5.93 0-1.31.468-2.381 1.236-3.221-.124-.303-.536-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.984-.399 3.003-.404 1.019.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.655 1.653.243 2.873.118 3.176.77.84 1.234 1.911 1.234 3.221 0 4.609-2.807 5.625-5.479 5.921.43.372.814 1.103.814 2.222 0 1.606-.014 2.898-.014 3.293 0 .319.216.694.825.576C20.565 22.092 24 17.592 24 12.296 24 5.67 18.627.296 12 .296z'/>\
  </svg>");
          mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M12 .296c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.084-.729.084-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.492.998.108-.776.418-1.305.76-1.605-2.665-.3-5.467-1.334-5.467-5.93 0-1.31.468-2.381 1.236-3.221-.124-.303-.536-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.984-.399 3.003-.404 1.019.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.655 1.653.243 2.873.118 3.176.77.84 1.234 1.911 1.234 3.221 0 4.609-2.807 5.625-5.479 5.921.43.372.814 1.103.814 2.222 0 1.606-.014 2.898-.014 3.293 0 .319.216.694.825.576C20.565 22.092 24 17.592 24 12.296 24 5.67 18.627.296 12 .296z'/>\
  </svg>");
}

/* LinkedIn mark */
.icon-ln{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.454C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.225 0zM7.117 20.452H3.56V9h3.557v11.452zM5.337 7.433a2.067 2.067 0 1 1 0-4.135 2.067 2.067 0 0 1 0 4.135zM20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.447-2.136 2.942v5.664H9.351V9h3.414v1.561h.049c.476-.9 1.637-1.852 3.37-1.852 3.602 0 4.268 2.37 4.268 5.455v6.288z'/>\
  </svg>");
          mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.454C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.225 0zM7.117 20.452H3.56V9h3.557v11.452zM5.337 7.433a2.067 2.067 0 1 1 0-4.135 2.067 2.067 0 0 1 0 4.135zM20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.447-2.136 2.942v5.664H9.351V9h3.414v1.561h.049c.476-.9 1.637-1.852 3.37-1.852 3.602 0 4.268 2.37 4.268 5.455v6.288z'/>\
  </svg>");
}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px;
  background:#0f1a2a; color:var(--text); padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-2); display:none; z-index:60;
}

/* Small screens */
@media (max-width: 640px){
  .header-row{ gap:12px }
  .controls{ gap:8px }
  .seg-item{ padding:7px 10px; font-size:12px }
  .icon-btn{ width:32px; height:32px }
  .btn-primary{ padding:9px 14px }
  .empty h1{ font-size:24px }
}

/* Optional tidy on very small screens */
@media (max-width: 600px){
  .site-footer .foot-row{ gap:16px; flex-direction:column; }
}