/* ---- Base layout -------------------------------------------------------- */
:root{
  --glass:#0b1220;
  --glass-2:#121a2a;
  --ink:#e5eefc;
  --muted:#9fb2cc;

  --ok: #22c55e;        /* green band */
  --mid:#eab308;        /* yellow band */
  --bad:#ef4444;        /* red band */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:#0b1324; /* fallback under vanta */
}

/* ---- Vanta background host --------------------------------------------- */
#vanta-bg{
  position:fixed; inset:0;
  z-index:-1;
}

/* ---- Page container ----------------------------------------------------- */
.container{
  max-width:1000px;
  margin:0 auto;
  padding:24px 16px 40px;
  text-align:center;
}
h1{margin:8px 0 16px; font-size:42px}

/* ---- Controls row ------------------------------------------------------- */
.controls{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:center;
}
#timezone-input{
  width:min(640px,92vw);
  padding:.7rem .8rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--glass);
  color:var(--ink);
}
.btn-primary,.btn-secondary{
  border-radius:10px;
  padding:.65rem 1rem;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
}
.btn-primary{
  position:relative;
  background:#12181f; color:var(--ink);
}
.btn-primary::before{
  content:""; position:absolute; left:0; top:6%; bottom:6%; width:2px;
  background:linear-gradient(#fff,rgba(255,255,255,.6)); border-radius:2px;
}
.btn-primary::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:3px;
  background:linear-gradient(90deg,#22d3ee,#34d399); border-radius:2px;
}
.btn-primary:hover{background:#10161e}

.btn-secondary{
  background:transparent; color:var(--ink);
  border-color:rgba(255,255,255,.25);
}
.btn-secondary:hover{background:rgba(255,255,255,.06)}

.sort{
  margin:10px 0 4px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
#sort-select{
  background:var(--glass); color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:.45rem .6rem;
}

.share{margin:4px 0 12px; opacity:.9}

/* ---- Timezone rows ------------------------------------------------------ */
#timezones{margin-top:6px}

.tz-row{
  display:grid;
  grid-template-columns: 24px 1fr auto 40px 38px;
  gap:12px;
  align-items:center;
  background:#0f1523d0; backdrop-filter: blur(2px);
  border:1px solid rgba(255,255,255,.07);
  padding:12px 14px;
  margin:12px 0;
  border-radius:14px;
}
.tz-row.good{ box-shadow: inset 0 -3px 0 var(--ok) }
.tz-row.mid{  box-shadow: inset 0 -3px 0 var(--mid) }
.tz-row.bad{  box-shadow: inset 0 -3px 0 var(--bad) }

.drag{ opacity:.6 }
.city-wrap{ text-align:left }
.city{
  font-weight:900; text-decoration:underline; color:#e6f0ff; cursor:pointer;
}
.meta{ display:block; font-size:.85rem; color:var(--muted); margin-top:2px }

.timebox{
  font-weight:900; font-size:1.3rem;
  border-radius:10px; padding:.35rem .6rem;
  border:1px solid rgba(255