html.tkh-gate-active,
body.tkh-gate-locked {
overflow: hidden !important;
}
.tkh-hub-gate[hidden] {
display: none !important;
}
.tkh-hub-gate {
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.tkh-hub-gate__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 12, 16, .78);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.tkh-hub-gate__dialog {
position: relative;
z-index: 1;
width: min(620px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
box-sizing: border-box;
padding: 30px;
border-radius: 18px;
background: #fff;
color: #202124;
box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}
.tkh-hub-gate__emoji {
font-size: 34px;
line-height: 1;
margin-bottom: 10px;
}
.tkh-hub-gate__title {
margin: 0 0 14px;
font-size: 27px;
line-height: 1.2;
}
.tkh-hub-gate__text {
font-size: 16px;
line-height: 1.62;
}
.tkh-hub-gate__text p:first-child { margin-top: 0; }
.tkh-hub-gate__text p:last-child { margin-bottom: 0; }
.tkh-hub-gate__privacy {
margin: 14px 0 0;
}
.tkh-hub-gate__link {
appearance: none;
border: 0;
background: transparent;
padding: 0;
color: #1367d1;
text-decoration: underline;
cursor: pointer;
font: inherit;
}
.tkh-hub-gate__status {
min-height: 44px;
margin: 18px 0;
padding: 11px 13px;
border-radius: 10px;
background: #f3f4f6;
font-size: 14px;
line-height: 1.45;
}
.tkh-hub-gate__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tkh-hub-gate__primary,
.tkh-hub-gate__secondary {
min-height: 46px;
padding: 11px 18px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 700;
cursor: pointer;
}
.tkh-hub-gate__primary {
background: #111827;
color: #fff;
}
.tkh-hub-gate__secondary {
background: #fff;
color: #30343a;
border-color: #cfd3d8;
}
.tkh-hub-gate__primary:focus-visible,
.tkh-hub-gate__secondary:focus-visible,
.tkh-hub-gate__link:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.tkh-hub-gate__note {
margin: 16px 0 0;
font-size: 13px;
line-height: 1.5;
color: #626970;
}
@media (max-width: 640px) {
.tkh-hub-gate { padding: 12px; align-items: flex-end; }
.tkh-hub-gate__dialog {
width: 100%;
max-height: calc(100dvh - 24px);
padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
border-radius: 18px 18px 10px 10px;
}
.tkh-hub-gate__title { font-size: 23px; }
.tkh-hub-gate__text { font-size: 15px; }
.tkh-hub-gate__actions { flex-direction: column; }
.tkh-hub-gate__primary,
.tkh-hub-gate__secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tkh-hub-gate * { scroll-behavior: auto !important; }
}
.tkh-hub-gate[data-state="checking"] .tkh-hub-gate__dialog {
display: none;
}
.tkh-hub-gate[data-state="blocked"] .tkh-hub-gate__checking {
display: none;
}
.tkh-hub-gate__checking {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 999px;
background: #fff;
color: #202124;
box-shadow: 0 12px 40px rgba(0,0,0,.28);
font-weight: 700;
}
.tkh-hub-gate__spinner {
width: 18px;
height: 18px;
border: 2px solid #d5d8dd;
border-top-color: #111827;
border-radius: 50%;
animation: tkh-gate-spin .75s linear infinite;
}
@keyframes tkh-gate-spin { to { transform: rotate(360deg); } }