* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #16243d;
  background: #f4f6f9;
}

.hidden { display: none; }

#status {
  padding: 24px 12px;
  text-align: center;
  color: #55617a;
}

h1 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #16243d;
}

.lead {
  margin: -4px 0 10px;
  font-size: 13px;
  color: #55617a;
}

.whoami {
  margin: 0 0 16px;
  padding: 8px 12px;
  background: #e8edf5;
  border-radius: 6px;
  font-size: 14px;
}

.sec {
  margin-bottom: 20px;
  padding: 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dde3ec;
}

.sec h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #16243d;
}

.opt {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: normal;
  color: #55617a;
  background: #eef1f6;
  border-radius: 3px;
  vertical-align: middle;
}

.opts { display: block; }

.opts label {
  display: block;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 2px solid #dde3ec;
  border-radius: 6px;
  cursor: pointer;
}

.opts label:last-child { margin-bottom: 0; }

.opts label.on {
  border-color: #16243d;
  background: #16243d;
  color: #fff;
}

.opts input { margin-right: 8px; }

textarea {
  width: 100%;
  padding: 10px;
  font-family: inherit;
  font-size: 16px;
  border: 1px solid #dde3ec;
  border-radius: 6px;
  resize: vertical;
}

.send {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #16243d;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.send:disabled { background: #8c98ad; }

.sendmsg {
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  min-height: 20px;
}

.sendmsg.ok { color: #1a7a4c; }
.sendmsg.ng { color: #c0392b; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.grid th,
table.grid td {
  padding: 8px 6px;
  border: 1px solid #dde3ec;
  text-align: left;
  vertical-align: top;
}

table.grid th {
  background: #eef1f6;
  font-weight: bold;
  white-space: nowrap;
}

table.grid tr.me td { background: #fffbe8; }
table.grid td.warn { color: #c0392b; font-weight: bold; }

.elapsed { color: #55617a; font-size: 12px; }
.note { color: #55617a; font-size: 12px; }
.empty { color: #55617a; font-size: 14px; }