.sup-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}
.sup-btn-nav svg { width: 21px; height: 21px; }
.sup-btn-nav { margin-inline-end: 10px; }
.sup-btn-nav:hover { color: #fff; }

.sup-back {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 6, 12, .62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.sup-back[hidden] { display: none; }
body.sup-open { overflow: hidden; }

.sup-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(18, 22, 32, .96), rgba(11, 13, 18, .97));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
  color: #eef3fa;
  font-family: inherit;
}

.sup-x {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  color: #c7d3e2;
  cursor: pointer;
}
.sup-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sup-x svg { width: 17px; height: 17px; }

.sup-head { display: flex; gap: 12px; align-items: center; margin: 2px 0 16px; }
.sup-head h2 { margin: 0; font-size: 1.06rem; }
.sup-head p { margin: 3px 0 0; font-size: .82rem; color: #a99fbd; }
.sup-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(94, 159, 232, .16);
  color: #c3b0ff;
}
.sup-ic svg { width: 24px; height: 24px; }

.sup-tg {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 16px;
  border: 1px solid rgba(42, 171, 238, .3);
  background: rgba(42, 171, 238, .12);
  color: #eaf6ff;
  text-decoration: none;
}
.sup-tg:hover { background: rgba(42, 171, 238, .2); }
.sup-tg-ic { width: 30px; height: 30px; color: #2aabee; }
.sup-tg-ic svg { width: 30px; height: 30px; }
.sup-tg-tx { display: flex; flex-direction: column; }
.sup-tg-tx b { font-size: .92rem; }
.sup-tg-tx i { font-style: normal; font-size: .76rem; color: #a8c6d8; }

.sup-tg { margin-bottom: 10px; }

.sup-faq {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 16px;
  border: 1px solid rgba(94, 159, 232, .32);
  background: rgba(94, 159, 232, .12);
  color: #eaf2ff;
  text-decoration: none;
}
.sup-faq:hover { background: rgba(94, 159, 232, .22); }
.sup-faq-ic { width: 30px; height: 30px; color: #5E9FE8; }
.sup-faq-ic svg { width: 26px; height: 26px; }
.sup-faq-tx { display: flex; flex-direction: column; }
.sup-faq-tx b { font-size: .92rem; }
.sup-faq-tx i { font-style: normal; font-size: .76rem; color: #a9c2e4; }

.home-foot {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 3;
  padding: 10px 14px;
  text-align: center;
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
}
.home-foot a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
}
.home-foot a:hover { color: #fff; }
.home-foot .sep { margin: 0 7px; opacity: .35; }
@media (max-width: 560px) {
  .home-foot { position: static; line-height: 2.1; }
  .home-foot .sep { margin: 0 5px; }
}

.sup-guest { text-align: center; padding: 6px 0 2px; }
.sup-guest p { margin: 0 0 12px; font-size: .88rem; color: #bfb5d2; }

.sup-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}
.sup-tab {
  padding: 9px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b7aecb;
  font-family: inherit;
  font-size: .87rem;
  cursor: pointer;
}
.sup-tab.on { background: rgba(94, 159, 232, .28); color: #fff; }

.sup-field { margin-bottom: 12px; }
.sup-field label {
  display: block;
  margin-bottom: 5px;
  font-size: .8rem;
  color: #b0a6c5;
}
.sup-field input,
.sup-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 9, 18, .6);
  color: #f2eefb;
  font-family: inherit;
  font-size: .9rem;
  resize: vertical;
}
.sup-field input:focus,
.sup-field textarea:focus {
  outline: none;
  border-color: rgba(94, 159, 232, .55);
}
.sup-row { display: flex; gap: 8px; }
.sup-row input { flex: 1; }

.sup-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: inherit;
  font-size: .89rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.sup-btn:hover { filter: brightness(1.08); }
.sup-btn:disabled { opacity: .6; cursor: default; }
.sup-btn.full { width: 100%; }
.sup-btn.ghost {
  background: rgba(255, 255, 255, .09);
  color: #ded6ef;
}

.sup-note { margin: 6px 0 10px; font-size: .8rem; color: #ff9b9b; }
.sup-done { text-align: center; }
.sup-done p { font-size: .88rem; color: #c9c0dc; }
.sup-done .sup-note { color: #93a1b4; }
.sup-code {
  margin: 10px auto;
  padding: 10px 14px;
  display: inline-block;
  border-radius: 12px;
  border: 1px dashed rgba(94, 159, 232, .5);
  background: rgba(94, 159, 232, .12);
  font-size: 1.1rem;
  letter-spacing: .06em;
  direction: ltr;
}

.sup-recent { margin-top: 18px; }
.sup-recent h3 { margin: 0 0 8px; font-size: .87rem; color: #b7aecb; }

.sup-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.sup-table th,
.sup-table td {
  padding: 8px 6px;
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sup-table th { color: #93a1b4; font-weight: 500; }
.sup-link {
  border: 0;
  background: none;
  padding: 0;
  color: #c3b0ff;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
  direction: ltr;
}
.sup-link:hover { text-decoration: underline; }

.sup-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  background: rgba(255, 255, 255, .1);
  color: #ded6ef;
}
.sup-badge.open { background: rgba(255, 190, 80, .18); color: #ffce8a; }
.sup-badge.pending { background: rgba(90, 170, 255, .18); color: #9fd0ff; }
.sup-badge.closed { background: rgba(140, 140, 160, .18); color: #b4bdc9; }

.sup-thread {
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}
.sup-thead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sup-thead b { font-size: .9rem; }

.sup-msg {
  padding: 9px 11px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.sup-msg.admin { background: rgba(94, 159, 232, .14); }
.sup-msg p { margin: 4px 0; font-size: .85rem; line-height: 1.7; }
.sup-who { font-size: .74rem; color: #a99fbd; }
.sup-when { font-size: .7rem; color: #8d9aad; }

@media (max-width: 480px) {
  .sup-modal { padding: 18px 14px; border-radius: 18px; }
  .sup-table th:nth-child(4),
  .sup-table td:nth-child(4) { display: none; }
}

.sup-modal::-webkit-scrollbar { width: 0; height: 0; }
.sup-thread::-webkit-scrollbar { width: 0; height: 0; }
.sup-thread { scrollbar-width: none; -ms-overflow-style: none; }