.cemoji { display: inline-block; flex: none; width: 22px; height: 22px; margin: -1px 1px; vertical-align: -5px; }
.cemoji img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cemoji img:not([src]) { visibility: hidden; }
.cemoji.gone img { visibility: hidden; }
.cemoji.gone { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule); }
.cemoji.jumbo { width: 44px; height: 44px; margin: 2px 2px 2px 0; vertical-align: bottom; }
.uemoji.jumbo { font-size: 38px; line-height: 48px; vertical-align: bottom; }
.cemoji.big { width: 32px; height: 32px; margin: 0; vertical-align: middle; }
.cemoji-text { font: 500 var(--fs-small)/1 var(--font); white-space: nowrap; }
.rx-e:has(.cemoji-text) { max-width: 160px; text-overflow: ellipsis; }
.rx-e .cemoji { width: 16px; height: 16px; margin: 0; vertical-align: top; }
.rx-tip-e .cemoji { width: 24px; height: 24px; margin: 0; vertical-align: middle; }

img.emo { display: inline-block; width: 1.375em; height: 1.375em; margin: 0 1px; vertical-align: bottom; object-fit: contain; }
img.emo:not([src]) { visibility: hidden; }
img.emo.jumbo { width: 44px; height: 44px; margin: 2px 2px 2px 0; vertical-align: bottom; }
.m-reply-text img.emo { width: 16px; height: 16px; margin: 0 1px; }
.rx-e img.emo { display: block; width: 16px; height: 16px; margin: 0; }
.rx-tip-e img.emo { display: block; width: 24px; height: 24px; margin: 0; }
.rxp-e img.emo { display: block; width: 28px; height: 28px; margin: 0; }
.rxp-g img.emo, .rxp-tone img.emo { width: 18px; height: 18px; }
.rxp-tone > span { display: grid; place-items: center; }
.emoji-ta-e img.emo { display: block; width: 22px; height: 22px; margin: 0; }
.rxp-sheet .rxp-row .rxp-e img.emo, .rxp-sheet .rxp-quick .rxp-e img.emo { width: 32px; height: 32px; }
.rxp-sheet .rxp-g img.emo, .rxp-sheet .rxp-tone img.emo { width: 22px; height: 22px; }

.ce-tip {
  position: fixed; z-index: 30; display: flex; align-items: center; gap: var(--s2); max-width: 280px; padding: var(--s2) var(--s3); border-radius: var(--radius-small);
  background: var(--surface); color: var(--text); font: 500 var(--fs-small)/var(--lh-small) var(--font); pointer-events: none;
  box-shadow: var(--shadow-float);
}
.ce-tip[hidden] { display: none; }
.ce-tip-e { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.ce-tip-t { display: grid; min-width: 0; }
.ce-tip-t b { font-weight: 600; overflow-wrap: anywhere; }
.ce-tip-t span { color: var(--muted); font-weight: 400; }
:root[data-theme="light"] .ce-tip { box-shadow: var(--shadow-float), 0 0 0 1px var(--rule); }

.rxp-e .cemoji { width: 28px; height: 28px; margin: 0; vertical-align: middle; }
.rxp-g .cemoji { width: 18px; height: 18px; margin: 0; }
.rxp-nav.srv { grid-template-columns: repeat(10, 1fr); }
.rxp-nav.srv .rxp-g { width: 100%; }

.emoji-ta .ta-opt { gap: var(--s2); min-height: 36px; padding: 6px var(--s2); }
.emoji-ta-e { display: grid; flex: none; place-items: center; width: 24px; height: 24px; font: 400 20px/1 var(--font); }
.emoji-ta-e .cemoji { width: 24px; height: 24px; margin: 0; }
.emoji-ta .ta-txt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.emoji-ta .ta-name { min-width: 0; }
.emoji-ta-s { flex: none; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (max-width: 760px), (pointer: coarse) {
  .emoji-ta .ta-opt { min-height: 0; padding: 0 var(--s3) 0 var(--s2); }
  .emoji-ta .ta-txt { display: grid; justify-content: start; gap: 0; }
}

.emj-up { display: grid; grid-template-columns: minmax(0, 320px) auto; align-items: end; justify-content: start; gap: var(--s2) var(--s4); padding-bottom: var(--s4); }
.emj-up .fld { margin: 0; }
.emj-in { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.emj-in .inp { flex: 1 1 auto; min-width: 0; }
.emj-colon { flex: none; color: var(--faint); }
.emj-rules { grid-column: 1 / -1; color: var(--muted); }
.emj-up .form-err { grid-column: 1 / -1; min-height: var(--lh-body); margin: 0; }
.emj-count { margin: 0 0 var(--s3); color: var(--muted); font-variant-numeric: tabular-nums; }
.emj-count .fig { color: var(--text); font-weight: 500; }
.set-panel .emj-reg .c-img, .set-panel .emj .reg-h .c-img { flex: none; display: grid; place-items: center start; width: 48px; }
.set-panel .emj-reg > li { min-height: 56px; }
.set-panel .emj-reg .c-main, .set-panel .emj .reg-h .c-main { flex: 1 1 0; min-width: 136px; flex-wrap: wrap; white-space: normal; }
.set-panel .emj-reg .c-by, .set-panel .emj .reg-h .c-by { flex: 0 1 160px; min-width: 0; }
.emj-rename { flex: 1 1 auto; max-width: 320px; min-width: 120px; min-height: 32px; height: 32px; margin-left: calc(-1 * var(--s3) - 1px); }
.emj-rename:not(:hover):not(:focus):not(:disabled) { border-color: transparent; background: transparent; }
.emj-row-err { flex: 1 1 100%; color: var(--pill-negative-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.emj-row-err:empty { display: none; }
#emoji { --acts: 96px; }
@media (max-width: 960px) {
  .set-panel .emj-reg > li { flex-wrap: nowrap; }
  .set-panel .emj-reg .c-by { order: 0; flex: 0 1 140px; }
  .set-panel .emj-reg .row-acts { order: 0; min-width: 0; }
}
@media (max-width: 760px) {
  .emj-up { grid-template-columns: minmax(0, 1fr); }
  .emj-go .btn { width: 100%; }
  .set-panel .emj-reg .c-by { display: none; }
  .set-panel .emj .reg-h .c-by { display: none; }
}