:root {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic","Segoe UI",sans-serif;
  color-scheme:light dark;
  font-size:15px;
}
* { box-sizing:border-box; }
body { margin:0; background:#f7f7f8; color:#171717; }
main { max-width:620px; margin:0 auto; padding:16px 14px 40px; }

.page-topbar {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.page-title {
  margin:0;
  font-size:20px;
  line-height:1.25;
}
.back {
  width:32px;
  height:32px;
  margin-left:-7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  text-decoration:none;
}
.back svg {
  width:22px;
  height:22px;
  display:block;
  transform:rotate(180deg);
}

.group-title {
  margin:14px 2px 6px;
  color:#737373;
  font-size:11.5px;
  font-weight:650;
}
.card {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
}
.muted {
  color:#737373;
  font-size:11.5px;
  line-height:1.45;
}

button {
  appearance:none;
  border:0;
  border-radius:8px;
  padding:8px 10px;
  font:inherit;
  font-size:13px;
  line-height:1.2;
  font-weight:650;
  background:#171717;
  color:#fff;
}
button.secondary { background:#ececef; color:#171717; }
button.tertiary {
  background:transparent;
  color:#5d5d63;
  padding:4px 0;
  font-weight:600;
}
button.danger { background:#b42318; color:#fff; }
button:disabled { opacity:.45; }

#loading {
  color:#737373;
  font-size:13px;
  padding:10px 1px;
}

@media (prefers-color-scheme:dark) {
  body { background:#111; color:#f5f5f7; }
  .card { background:#1c1c1e; border-color:rgba(255,255,255,.08); }
  .group-title,.muted { color:#a1a1a6; }
  button { background:#f5f5f7; color:#111; }
  button.secondary { background:#2c2c2e; color:#f5f5f7; }
  button.tertiary { background:transparent; color:#a1a1a6; }
  button.danger { background:#ff453a; color:#fff; }
}