.create-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding-top: 24px; }
.intro h1 { font-size: 26px; line-height: 1.35; margin-bottom: 12px; text-wrap: balance; }
.intro .sub { max-width: 34em; font-size: 15px; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; counter-increment: s; }
.steps li::before {
  content: counter(s); grid-row: span 2;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--sub); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps b { font-size: 14.5px; }
.steps span { color: var(--faint); font-size: 13.5px; }

.slots { display: grid; gap: 8px; }
.slot-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 36px; gap: 8px; }
.slot-row .btn { padding: 0; width: 36px; }

.done-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 8px 0 16px; }
.done-head h1 { font-size: 22px; overflow-wrap: anywhere; }
#done-view > .notice { margin-bottom: 16px; }
.links { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; align-items: start; }
.links > .panel { grid-column: 1; }
.links > .panel.obs { grid-column: 2; grid-row: 1 / span 3; }
.links .panel + .panel { margin-top: 0; }
.links .panel > .sub { margin-bottom: 12px; font-size: 13.5px; }
.links .faint { margin-top: 8px; }
.h-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; color: var(--sub); }
.delay-field { margin-bottom: 14px; max-width: 420px; }
.delay-field input { max-width: 140px; }
.vlink .label { font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.vlink .kind { font-weight: 500; color: var(--faint); font-size: 12px; }
@media (max-width: 960px) {
  .create-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 4px; }
  .steps { margin-top: 18px; }
  .links { grid-template-columns: 1fr; }
  .links > .panel.obs { grid-column: 1; grid-row: auto; }
}
@media (max-width: 480px) {
  .intro h1 { font-size: 22px; }
  .slot-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .slot-row select { grid-column: 1; grid-row: 2; }
  .copyline { flex-wrap: wrap; }
  .copyline .btn { flex: 1; }
}