/* ---------- front: the login button and the waiting modal ---------- */
.hy-tg-login { margin-top: 6px; }
.hy-tg-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #A3A8B5; font-size: 12px; }
.hy-tg-or::before, .hy-tg-or::after { content: ""; flex: 1; height: 1px; background: rgba(30, 28, 38, .1); }
.hy-tg-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px;
	border: 1.5px solid rgba(30, 28, 38, .1); border-radius: 12px; background: #fff; color: #1E1C26; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
	transition: border-color .2s, background-color .2s, transform .12s;
}
.hy-tg-btn svg { width: 20px; height: 20px; color: #2AABEE; }
.hy-tg-btn:hover { border-color: #2AABEE; background: #F2FAFE; }
.hy-tg-btn:active { transform: translateY(1px); }
.hy-tg-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: #8A8F9C; text-align: center; }

.hy-tg-modal { position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 28, 38, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); direction: rtl; }
.hy-tg-modal[hidden] { display: none !important; }
.hy-tg-card { position: relative; width: min(420px, 100%); padding: 34px 28px 28px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 30px 70px -30px rgba(30, 28, 38, .5); }
.hy-tg-close { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #A3A8B5; font-size: 24px; line-height: 1; cursor: pointer; }
.hy-tg-close:hover { background: #F5F6F9; color: #1E1C26; }
.hy-tg-tile { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 18px; background: #EAF6FD; color: #2AABEE; display: flex; align-items: center; justify-content: center; }
.hy-tg-tile svg { width: 32px; height: 32px; }
.hy-tg-title { margin: 0 0 8px !important; font-size: 20px !important; font-weight: 800 !important; color: #1E1C26; }
.hy-tg-sub { margin: 0 0 20px; font-size: 13.5px; line-height: 1.9; color: #6F7480; }
.hy-tg-open { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 12px; background: #2AABEE; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; box-shadow: 0 12px 24px -12px rgba(42, 171, 238, .8); }
.hy-tg-open svg { width: 20px; height: 20px; }
.hy-tg-open:hover { background: #1E9BDB; }
.hy-tg-qr { margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hy-tg-qr canvas { width: 168px; height: 168px; border-radius: 12px; border: 1px solid rgba(30, 28, 38, .08); padding: 8px; background: #fff; }
.hy-tg-qr small { font-size: 12px; color: #8A8F9C; }
.hy-tg-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; font-size: 13px; color: #6F7480; }
.hy-tg-status.is-ok { color: #33A171; font-weight: 700; }
.hy-tg-status.is-err { color: #B8423C; font-weight: 600; }
.hy-tg-status.is-ok .hy-tg-spinner, .hy-tg-status.is-err .hy-tg-spinner { display: none; }
.hy-tg-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(42, 171, 238, .25); border-top-color: #2AABEE; animation: hy-tg-spin .8s linear infinite; }
@keyframes hy-tg-spin { to { transform: rotate(360deg); } }

/* the account-form card */
.hy-tg-linkcard { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(42, 171, 238, .25); background: #F2FAFE; }
.hy-tg-linkcard.is-linked { border-color: rgba(61, 180, 127, .3); background: #EEF8F3; }
.hy-tg-linkcard-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #fff; color: #2AABEE; }
.hy-tg-linkcard.is-linked .hy-tg-linkcard-ico { color: #33A171; }
.hy-tg-linkcard-ico svg { width: 22px; height: 22px; }
.hy-tg-linkcard-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hy-tg-linkcard-text b { font-size: 14px; font-weight: 700; color: #1E1C26; }
.hy-tg-linkcard-text small { font-size: 12px; line-height: 1.7; color: #6F7480; }
.hy-tg-linkcard .hy-tg-btn { width: auto; height: 40px; padding: 0 16px; flex: 0 0 auto; }
@media (max-width: 640px) { .hy-tg-linkcard { flex-wrap: wrap; } .hy-tg-linkcard .hy-tg-btn { width: 100%; } }

/* ---------- admin ---------- */
.hy-hub-ico--tg { background: #EAF6FD; color: #2AABEE; }
.hy-tg-admin textarea { width: 100%; min-height: 84px; padding: 10px 14px; border: 1.5px solid transparent; border-radius: 12px; background: #F5F6F9; font: inherit; font-size: 14px; line-height: 1.9; resize: vertical; box-shadow: none; }
.hy-tg-admin textarea:focus { background: #fff; border-color: #E1E4EC; box-shadow: 0 0 0 4px rgba(30, 28, 38, .05); outline: 0; }
.hy-tg-admin code { direction: ltr; unicode-bidi: isolate; font-size: 11.5px; background: #F5F6F9; padding: 2px 6px; border-radius: 6px; }