/* The sign-in pages (admin and reseller), after the TBX platform's: a dark panel with gradients, and the form. */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  background: var(--panel); }

.signin-brand { position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; gap: 2rem; padding: 3rem; color: #fff;
  background:
    radial-gradient(760px 560px at 0% 100%, rgba(47, 198, 204, 0.34), transparent 62%),
    radial-gradient(620px 480px at 100% 0%, rgba(110, 118, 255, 0.26), transparent 60%),
    radial-gradient(420px 320px at 60% 55%, rgba(47, 198, 204, 0.10), transparent 70%),
    linear-gradient(160deg, #222a33 0%, #161b21 100%); }
.signin-brand > * { position: relative; }
.signin-brand .watermark { position: absolute; right: -4rem; bottom: -3rem; height: 78%; width: auto;
  fill: #fff; opacity: 0.045; }
.signin-logo { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 20px; font-weight: 500; }
.signin-place { margin: 0 0 1rem; font-size: 40px; line-height: 1.1; font-weight: 600; overflow-wrap: anywhere; }
.signin-text { max-width: 36ch; margin: 0 0 1.5rem; font-size: 17px; line-height: 1.55; color: #cfd6de; }
.signin-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem;
  color: #e6eaee; font-size: 16px; }
.signin-points li { display: flex; align-items: baseline; gap: 0.75rem; }
.signin-points li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(47, 198, 204, 0.18); color: var(--brand); font-size: 13px; font-weight: 700; }
.signin-foot { margin: 0; color: #8d98a5; font-size: 13px; letter-spacing: 0.04em; }

.signin-main { display: grid; place-items: center; padding: 2rem 1.5rem;
  background: radial-gradient(760px 420px at 100% 0%, rgba(47, 198, 204, 0.10), transparent 62%), var(--panel); }
.signin-form { width: min(360px, 100%); }
.signin-form h1 { margin-bottom: 1.25rem; font-size: 28px; }
.signin-hint { margin: 1.25rem 0 0; font-size: 14px; color: var(--muted); }

.pw { position: relative; }
.pw input { padding-right: 4.5rem; }
.pw-toggle { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); min-height: 32px;
  padding: 0 0.6rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { background: var(--pill); color: var(--text); }

@media (max-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .signin-brand { gap: 0.6rem; padding: 1.1rem 1.5rem 1.4rem; }
  .signin-brand .watermark, .signin-text, .signin-points, .signin-foot { display: none; }
  .signin-place { margin: 0; font-size: 28px; }
  .signin-main { place-items: start center; padding-top: 2rem; }
}