* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.5;
}
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
main.wrap { padding-top: 26px; padding-bottom: 46px; }
.muted { opacity: .8; }
hr.sep { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 18px 0; }

.grid {
  display: grid;
  gap: 16px;
}
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid.cols-3 { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255,255,255,.04);
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,.10); }
.btn.primary { font-weight: 700; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: inherit;
  outline: none;
}
label { display: block; margin: 10px 0 6px; opacity: .9; }
.form-row { margin-bottom: 12px; }
.notice {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.notice.ok { }
.notice.err { }