/*
 * Deadline: отсутствие + роли + твинки.
 * Подключать ПОСЛЕ штатных deadline.css / deadlinee.css.
 *
 * Важно: файл намеренно не содержит :root.
 * Все цвета, шрифты, радиусы и фоны берутся из глобальных переменных форума.
 */

/* =========================================================
   ОТСУТСТВИЕ
========================================================= */

#cf-absence-box,
#cf-absence-box * {
  box-sizing: border-box;
}

#cf-absence-box {
  width: auto;
  max-width: none;
  margin: 20px;
  padding: 24px;
  overflow: hidden;
  position: relative;
  color: rgb(var(--text-primary));
  background:
    linear-gradient(135deg, rgb(var(--canvas-quarternary), .12), transparent 48%),
    rgb(var(--canvas-secondary), .92);
  border: var(--border-1px);
  border-radius: var(--bradius-medium);
  font: var(--fw400) var(--fs12) / 1.45 var(--font-main);
}

#cf-absence-box::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-secondary)));
}

.cf-absence-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(var(--text-primary), .12);
}

.cf-absence-heading h3 {
  margin: 0;
  color: rgb(var(--text-primary));
  font: var(--fw500) var(--fs22) / 1 var(--font-cat-title);
  text-transform: lowercase;
}

.cf-absence-heading p {
  margin: 0;
  color: rgb(var(--text-primary), .55);
  font-size: var(--fs10);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cf-absence-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(2, minmax(150px, 1fr));
  gap: 12px;
}

.cf-absence-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-absence-field > span,
.cf-absence-twinks-head b {
  color: rgb(var(--text-primary), .66);
  font-size: var(--fs10);
  font-weight: var(--fw600);
  text-transform: uppercase;
  letter-spacing: .08em;
}

#cf-absence-box input[type="text"],
#cf-absence-box input[type="date"],
#twinks-admin input,
.twinks-modal-inner input,
.nc-modal input,
.nc-modal select {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-primary), .72);
  border: 1px solid rgb(var(--text-primary), .14);
  border-radius: var(--bradius-minor);
  outline: none;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#cf-absence-box input:focus,
#twinks-admin input:focus,
.twinks-modal-inner input:focus,
.nc-modal input:focus,
.nc-modal select:focus {
  background: rgb(var(--canvas-primary));
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 3px rgb(var(--accent), .12);
}

.cf-absence-twinks {
  margin-top: 18px;
  padding: 14px;
  background: rgb(var(--canvas-primary), .42);
  border: 1px solid rgb(var(--text-primary), .1);
  border-radius: var(--bradius-minor);
}

.cf-absence-twinks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cf-absence-twinks-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#cf-absence-twinks-status {
  color: rgb(var(--text-primary), .5);
  font-size: var(--fs10);
}

.cf-absence-twinks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.cf-absence-twink-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 9px;
  cursor: pointer;
  background: rgb(var(--canvas-secondary), .7);
  border-radius: var(--bradius-minor);
  transition: background var(--anim-hover), transform var(--anim-hover);
}

.cf-absence-twink-item:hover {
  background: rgb(var(--accent), .13);
  transform: translateY(-1px);
}

.cf-absence-twink-item input {
  flex: 0 0 auto;
  accent-color: rgb(var(--accent));
}

.cf-absence-twink-item a {
  overflow: hidden;
  color: rgb(var(--text-primary), .82) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-absence-twink-item a:hover {
  color: rgb(var(--accent-secondary)) !important;
}

.cf-absence-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.cf-absence-btn,
.cf-absence-small-btn,
.roles-actions .nc-btn,
#twinks-admin button,
.twinks-modal-inner button,
.nc-modal-actions .nc-btn {
  appearance: none;
  min-height: 34px;
  margin: 0;
  padding: 7px 14px;
  cursor: pointer;
  color: rgb(var(--canvas-quarternary)) !important;
  background: rgb(var(--accent));
  border: 0;
  border-radius: var(--bradius-minor);
  box-shadow: none;
  font: var(--fw600) var(--fs10) / 1 var(--font-main) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}

.cf-absence-small-btn {
  min-height: 28px;
  padding: 5px 9px;
  color: rgb(var(--text-primary), .72) !important;
  background: rgb(var(--text-primary), .08);
}

.cf-absence-btn:hover,
.cf-absence-small-btn:hover,
.roles-actions .nc-btn:hover,
#twinks-admin button:hover,
.twinks-modal-inner button:hover,
.nc-modal-actions .nc-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cf-absence-btn:disabled,
.cf-absence-small-btn:disabled,
.roles-actions .nc-btn:disabled,
#twinks-admin button:disabled {
  cursor: wait;
  opacity: .55;
  transform: none;
}

.cf-absence-note {
  color: rgb(var(--text-primary), .5);
  font-size: var(--fs10);
}

.cf-absence-message {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--bradius-minor);
  font-size: var(--fs11);
}

.cf-absence-message[hidden] {
  display: none;
}

.cf-absence-error {
  color: rgb(var(--accent-secondary));
  background: rgb(var(--accent-secondary), .1);
}

.cf-absence-success {
  color: rgb(var(--accent));
  background: rgb(var(--accent), .1);
}

/* =========================================================
   РОЛИ — переопределения штатного deadline.css
========================================================= */

#roleslist,
#roleslist * {
  box-sizing: border-box;
}

#roleslist {
  width: min(100%, 880px);
  margin: 20px auto;
  padding: 28px;
  display: block;
  overflow: visible;
  color: rgb(var(--text-primary));
  background:
    linear-gradient(135deg, rgb(var(--canvas-quarternary), .1), transparent 48%),
    rgb(var(--canvas-secondary), .9);
  border: var(--border-1px);
  border-radius: var(--bradius-medium);
  outline: 0;
  font: var(--fw400) var(--fs11) / 1.5 var(--font-main);
}

#r-desc {
  position: static;
  display: block;
  margin: 0 0 24px;
  padding: 0 0 18px;
  color: rgb(var(--text-primary), .68);
  border-bottom: 1px solid rgb(var(--text-primary), .12);
  text-shadow: none;
}

#r-desc span {
  display: inline-block;
  margin-bottom: 8px;
  color: rgb(var(--text-primary));
}

#roleslist .roles-header {
  width: 100%;
  position: static;
  margin: 0 0 16px;
}

#roleslist .roles-header h2 {
  width: auto;
  margin: 0;
}

#roleslist #roles {
  position: static;
  top: auto;
  padding: 0;
}

#roleslist #roles-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 0;
}

#roleslist .letter-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

#roleslist .letter-block h2 {
  grid-column: 1 / -1;
  width: auto;
  min-height: 46px;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  color: rgb(var(--canvas-quarternary), .86) !important;
  background:
    linear-gradient(90deg, rgb(var(--accent), .92), rgb(var(--accent), .35)),
    var(--catbg) center / cover no-repeat !important;
  border-radius: var(--bradius-minor);
  text-shadow: 0 1px 2px rgb(var(--text-primary), .3);
  font: var(--fw500) var(--fs20) / 1 var(--font-cat-title) !important;
}

#roleslist .fandom {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(var(--canvas-primary), .55);
  border: 1px solid rgb(var(--text-primary), .1);
  border-radius: var(--bradius-minor);
  outline: 0;
}

#roleslist .fandom:hover {
  background: rgb(var(--canvas-primary), .8);
  transform: translateY(-2px);
}

#roleslist .cast-title {
  min-height: 40px;
  height: auto;
  margin: 0;
  padding: 9px 13px;
  color: rgb(var(--text-primary), .86);
  background: rgb(var(--text-primary), .055);
  border-bottom: 1px solid rgb(var(--text-primary), .1);
  border-radius: 0;
  font: var(--fw500) var(--fs13) / 1.2 var(--font-cat-title) !important;
}

#roleslist .names {
  gap: 4px;
  padding: 10px 13px 13px;
}

#roleslist .role-item a {
  color: rgb(var(--text-primary), .76) !important;
  font: var(--fw400) var(--fs11) / 1.35 var(--font-main);
}

#roleslist .role-item a::before {
  color: rgb(var(--accent));
}

#roleslist .role-item a:hover {
  color: rgb(var(--accent-secondary)) !important;
  text-shadow: none;
}

#roleslist .roles-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.edit-btn,
.edit-cast {
  color: rgb(var(--text-primary), .55) !important;
}

.nc-modal-backdrop {
  background: rgb(var(--text-primary), .55);
  backdrop-filter: blur(4px);
}

.nc-modal {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-secondary));
  border: 1px solid rgb(var(--text-primary), .14);
  border-radius: var(--bradius-medium);
  box-shadow: 0 18px 45px rgb(var(--text-primary), .28);
}

.nc-field label {
  color: rgb(var(--text-primary), .65);
  font: var(--fw600) var(--fs10) / 1 var(--font-main);
}

.nc-modal-actions .warn,
.twinks-modal-inner .danger {
  background: rgb(var(--accent-secondary));
}

/* =========================================================
   ТВИНКИ — замена сломанных переменных deadlinee.css
========================================================= */

.theme.roles,
.theme.roles * {
  box-sizing: border-box;
}

.theme.roles {
  width: min(100%, 880px);
  max-width: 880px;
  margin: 20px auto;
  padding: 34px 28px 28px;
  align-items: stretch;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-secondary), .92);
  border: var(--border-1px);
  border-radius: var(--bradius-medium);
  font-family: var(--font-main);
}

.theme.roles theme_title {
  color: rgb(var(--text-primary));
  font: var(--fw500) var(--fs22) / 1 var(--font-cat-title);
}

.theme.roles theme_text {
  display: block;
  margin: 8px 0 20px;
  padding-bottom: 0 !important;
  color: rgb(var(--text-primary), .58);
  font-size: var(--fs11);
}

#twinks-admin {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 0 0;
  color: rgb(var(--text-primary));
  background: transparent;
  border-top: 1px solid rgb(var(--text-primary), .12);
  border-radius: 0;
  font: var(--fw400) var(--fs12) / 1.5 var(--font-main);
}

#twinks-admin > h2,
#twinks-admin > p {
  margin: 0;
}

.twinks-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, auto);
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

#twinks-admin .search-input {
  min-width: 0;
}

.twinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.main-block {
  width: auto;
  max-height: 380px;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-primary), .58);
  border: 1px solid rgb(var(--text-primary), .1);
  border-radius: var(--bradius-minor);
  scrollbar-color: rgb(var(--accent), .45) transparent;
}

.main-block:hover {
  background: rgb(var(--canvas-primary), .82);
}

.main-header {
  min-height: 42px;
  margin: 0;
  padding: 9px 13px !important;
  color: rgb(var(--text-primary));
  background: rgb(var(--text-primary), .055);
  border-bottom: 1px solid rgb(var(--text-primary), .1);
  border-radius: 0;
  font: var(--fw500) var(--fs14) / 1.2 var(--font-cat-title);
}

.main-name {
  display: flex;
  align-items: center;
  min-width: 0;
}

.main-name a {
  overflow: hidden;
  color: rgb(var(--text-primary), .86) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-name a:hover,
.twinks-list a:hover {
  color: rgb(var(--accent-secondary)) !important;
  text-decoration: none;
}

.twinks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 13px 13px;
  font-size: var(--fs11);
}

.twinks-list a {
  position: relative;
  padding-left: 12px;
  color: rgb(var(--text-primary), .7) !important;
}

.twinks-list a::before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  left: 1px;
  top: .58em;
  background: rgb(var(--accent));
  border-radius: 50%;
}

.main-block.highlight {
  background: rgb(var(--accent), .12);
  outline: 2px solid rgb(var(--accent));
}

.twinks-backdrop,
#twinks-modal,
#add-main-modal {
  background: rgb(var(--text-primary), .55);
  backdrop-filter: blur(4px);
}

.twinks-modal-inner {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 22px;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-secondary));
  border: 1px solid rgb(var(--text-primary), .14);
  border-radius: var(--bradius-medium);
  box-shadow: 0 18px 45px rgb(var(--text-primary), .28);
}

.twink-row,
.twink-input-wrap {
  min-width: 0;
}

.twink-name {
  color: rgb(var(--text-primary), .6);
}

.twink-hint {
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-secondary));
  border: 1px solid rgb(var(--text-primary), .15);
}

.twink-hint div:hover {
  background: rgb(var(--accent), .12);
}

/* =========================================================
   ПРОВЕРКА АКТИВНОСТИ РОЛЕЙ (gameposts.js)
   В скрипте есть встроенный CSS, поэтому здесь нужны !important.
========================================================= */

#dr-ui-box {
  width: min(320px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 9000 !important;
  gap: 7px !important;
  padding: 10px !important;
  background: rgb(var(--canvas-secondary), .9) !important;
  border: 1px solid rgb(var(--text-primary), .14) !important;
  border-radius: var(--bradius-medium) !important;
  box-shadow: 0 12px 32px rgb(var(--text-primary), .25) !important;
  backdrop-filter: blur(8px);
}

#dr-ui-box .deadroles-btn,
.dr-btn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  color: rgb(var(--canvas-quarternary)) !important;
  background: rgb(var(--accent)) !important;
  border: 0 !important;
  border-radius: var(--bradius-minor) !important;
  font: var(--fw600) var(--fs10) / 1 var(--font-main) !important;
  letter-spacing: .06em !important;
}

.dr-progress-wrap {
  background: rgb(var(--text-primary), .09) !important;
}

.dr-progress-bar {
  background: rgb(var(--accent)) !important;
}

.deadroles-flag {
  padding: 1px 4px;
  border-radius: var(--bradius-minor);
  transition: background .2s ease;
}

.deadroles-green {
  background: rgb(var(--accent), .14) !important;
}

.deadroles-red {
  background: rgb(var(--accent-secondary), .24) !important;
}

.deadroles-orange {
  background: rgb(var(--link-text), .28) !important;
}

.deadroles-blue {
  background: rgb(var(--bg-navlinks), .24) !important;
}

.deadroles-badge {
  margin-left: 6px;
  padding: 2px 5px;
  color: rgb(var(--canvas-quarternary));
  background: rgb(var(--accent-secondary));
  border-radius: var(--bradius-minor);
  font-size: var(--fs9);
  white-space: nowrap;
}

.dr-modal-backdrop {
  background: rgb(var(--text-primary), .55) !important;
  backdrop-filter: blur(4px) !important;
  font-family: var(--font-main) !important;
}

.dr-modal {
  width: min(650px, calc(100vw - 32px)) !important;
  color: rgb(var(--text-primary)) !important;
  background: rgb(var(--canvas-secondary)) !important;
  border: 1px solid rgb(var(--text-primary), .14) !important;
  border-radius: var(--bradius-medium) !important;
  box-shadow: 0 18px 45px rgb(var(--text-primary), .3) !important;
}

.dr-modal-header,
.dr-modal-actions {
  border-color: rgb(var(--text-primary), .12) !important;
}

.dr-modal-controls,
.dr-modal-list {
  color: rgb(var(--text-primary), .78) !important;
  background: rgb(var(--canvas-primary), .7) !important;
  border-color: rgb(var(--text-primary), .12) !important;
  border-radius: var(--bradius-minor) !important;
}

.dr-modal-close {
  color: rgb(var(--accent-secondary)) !important;
}

/* =========================================================
   АДАПТИВ
========================================================= */

@media (max-width: 760px) {
  #cf-absence-box,
  #roleslist,
  .theme.roles {
    padding: 20px 16px;
  }

  .cf-absence-heading,
  .cf-absence-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cf-absence-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cf-absence-field-name {
    grid-column: 1 / -1;
  }

  .twinks-header {
    grid-template-columns: 1fr 1fr;
  }

  #twinks-admin .search-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .cf-absence-grid,
  .cf-absence-twinks-list,
  #roleslist .letter-block,
  .twinks-grid,
  .twinks-header {
    grid-template-columns: 1fr;
  }

  .cf-absence-field-name,
  #twinks-admin .search-input {
    grid-column: auto;
  }

  .cf-absence-twinks-head,
  .cf-absence-twinks-head > div,
  .nc-modal-actions,
  .twinks-modal-btns {
    align-items: stretch;
    flex-direction: column;
  }
}

/* =========================================================
   ГОСТЕВАЯ — БРОНИРОВАНИЕ РОЛЕЙ
========================================================= */

#cf-guestbook-box,
#cf-guestbook-box * {
  box-sizing: border-box;
}

#cf-guestbook-box {
  width: auto;
  max-width: none;
  margin: 20px;
  padding: 24px;
  overflow: visible;
  position: relative;
  color: rgb(var(--text-primary));
  background:
    linear-gradient(135deg, rgb(var(--canvas-quarternary), .12), transparent 48%),
    rgb(var(--canvas-secondary), .92);
  border: var(--border-1px);
  border-radius: var(--bradius-medium);
  font: var(--fw400) var(--fs12) / 1.45 var(--font-main);
}

#cf-guestbook-box::before {
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-secondary)));
  border-radius: var(--bradius-medium) var(--bradius-medium) 0 0;
}

.cf-guestbook-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(var(--text-primary), .12);
}

.cf-guestbook-heading h3 {
  margin: 0;
  color: rgb(var(--text-primary));
  font: var(--fw500) var(--fs22) / 1 var(--font-cat-title);
  text-transform: lowercase;
}

.cf-guestbook-heading p {
  margin: 0;
  color: rgb(var(--text-primary), .55);
  font-size: var(--fs10);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cf-guestbook-description {
  margin-bottom: 18px;
  color: rgb(var(--text-primary), .58);
  font-size: var(--fs11);
}

.cf-guestbook-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cf-guestbook-row {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1fr) minmax(180px, 1fr) 30px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  background: rgb(var(--canvas-primary), .42);
  border: 1px solid rgb(var(--text-primary), .1);
  border-radius: var(--bradius-minor);
}

.cf-guestbook-row-number {
  width: 28px;
  height: 36px;
  display: grid;
  place-items: center;
  color: rgb(var(--text-primary), .48);
  font-weight: var(--fw600);
}

.cf-guestbook-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-guestbook-field > span {
  color: rgb(var(--text-primary), .66);
  font-size: var(--fs10);
  font-weight: var(--fw600);
  text-transform: uppercase;
  letter-spacing: .08em;
}

#cf-guestbook-box input,
#cf-guestbook-box select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  color: rgb(var(--text-primary));
  background: rgb(var(--canvas-primary), .72);
  border: 1px solid rgb(var(--text-primary), .14);
  border-radius: var(--bradius-minor);
  outline: none;
  font: inherit;
  transition: border-color .2s ease, background .2s ease;
}

#cf-guestbook-box input:focus,
#cf-guestbook-box select:focus {
  background: rgb(var(--canvas-primary));
  border-color: rgb(var(--accent));
}

.cf-guestbook-remove {
  width: 30px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  color: rgb(var(--text-primary), .48);
  background: transparent;
  border: 0;
  border-radius: var(--bradius-minor);
  font: var(--fw400) var(--fs20) / 1 var(--font-main);
  transition: color .2s ease, background .2s ease;
}

.cf-guestbook-remove:hover {
  color: rgb(var(--accent-secondary));
  background: rgb(var(--accent-secondary), .1);
}

.cf-guestbook-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}

.cf-guestbook-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--text-primary), .12);
}

.cf-guestbook-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.cf-guestbook-btn {
  appearance: none;
  min-height: 34px;
  margin: 0;
  padding: 7px 14px;
  cursor: pointer;
  color: rgb(var(--canvas-quarternary)) !important;
  background: rgb(var(--accent));
  border: 0;
  border-radius: var(--bradius-minor);
  font: var(--fw600) var(--fs10) / 1 var(--font-main) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}

.cf-guestbook-btn-soft {
  min-height: 30px;
  color: rgb(var(--text-primary), .7) !important;
  background: rgb(var(--text-primary), .08);
}

.cf-guestbook-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cf-guestbook-btn:disabled {
  cursor: wait;
  opacity: .52;
  filter: none;
  transform: none;
}

.cf-guestbook-note {
  color: rgb(var(--text-primary), .5);
  font-size: var(--fs10);
}

.cf-guestbook-status,
.cf-guestbook-message {
  margin-top: 12px;
  padding: 8px 10px;
  color: rgb(var(--text-primary), .64);
  background: rgb(var(--text-primary), .045);
  border: 1px solid rgb(var(--text-primary), .09);
  border-radius: var(--bradius-minor);
  font-size: var(--fs11);
}

.cf-guestbook-status[data-type="success"],
.cf-guestbook-success {
  color: rgb(var(--accent));
  background: rgb(var(--accent), .1);
  border-color: rgb(var(--accent), .2);
}

.cf-guestbook-status[data-type="error"],
.cf-guestbook-error {
  color: rgb(var(--accent-secondary));
  background: rgb(var(--accent-secondary), .09);
  border-color: rgb(var(--accent-secondary), .2);
}

.cf-guestbook-message[hidden] {
  display: none;
}

@media (max-width: 760px) {
  #cf-guestbook-box {
    margin: 14px;
    padding: 20px 16px;
  }

  .cf-guestbook-heading,
  .cf-guestbook-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cf-guestbook-row {
    grid-template-columns: 24px 1fr 30px;
  }

  .cf-guestbook-row .cf-guestbook-field:first-of-type,
  .cf-guestbook-row .cf-guestbook-field:nth-of-type(2) {
    grid-column: 2 / 3;
  }

  .cf-guestbook-row-number {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .cf-guestbook-remove {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
}

@media (max-width: 480px) {
  .cf-guestbook-meta {
    grid-template-columns: 1fr;
  }
}