/* Cổng đăng nhập, cam kết, màn tải; thẻ người xem trên thanh trên cùng; chặn in. Dùng chung biến màu của deck.css. */
body.gating{min-height:100vh;margin:0}
.boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:18px}
.boot img{height:34px;opacity:.9}
.boot i,.gate .bar{display:block;width:160px;height:3px;border-radius:2px;background:rgba(150,170,255,.15);overflow:hidden;position:relative}
.boot i::after{content:"";position:absolute;inset:0;width:40%;background:var(--spectrum);animation:bootbar 1.1s ease-in-out infinite}
@keyframes bootbar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.gate{min-height:100vh;display:grid;place-items:center;padding:32px 16px;position:relative;overflow:hidden}
.gate-bg{position:absolute;inset:0;background:radial-gradient(900px 520px at 80% 10%,rgba(148,83,255,.22),transparent 60%),radial-gradient(800px 520px at 10% 90%,rgba(68,141,255,.18),transparent 60%),radial-gradient(600px 400px at 50% 50%,rgba(86,252,227,.06),transparent 70%),var(--bg)}
.gate-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(150,170,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,170,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 70%)}
.gate-card{position:relative;width:min(520px,100%);background:rgba(12,18,52,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:22px;padding:34px 32px;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.gate-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:var(--spectrum)}
.gate.consent .gate-card{width:min(680px,100%)}
.gate-card.slim{width:min(420px,100%);text-align:center;display:grid;justify-items:center;gap:12px}
.gate-logos{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.gate-logos img{height:26px;width:auto}
.gate-logos span{font-family:var(--f-mono);font-size:.7rem;color:var(--dim)}
.gate-kicker{font-family:var(--f-mono);font-size:var(--s6);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.gate h1{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;margin-top:10px}
.gate-sub{color:var(--mut);margin-top:10px;font-size:var(--s5)}
.gate-form{display:grid;gap:12px;margin-top:24px}
.gate-form label{font-size:var(--s5);color:var(--mut)}
.gate-form input[type=email]{height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--fg);padding:0 14px;font:inherit;font-size:1rem}
.gate-form input:focus{outline:2px solid rgba(86,252,227,.45);border-color:var(--cyan)}
.otp-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp{height:56px;text-align:center;font-family:var(--f-mono);font-size:1.4rem;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--fg);min-width:0}
.btn{height:48px;border:0;border-radius:12px;background:var(--spectrum);color:#071026;font:700 1rem var(--f-body);cursor:pointer}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{border:0;background:none;color:var(--cyan);font:600 var(--s5) var(--f-body);cursor:pointer;padding:4px 0;justify-self:start}
.link[disabled]{color:var(--dim);cursor:default}
.row-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.err{color:#FF9AA4;font-size:var(--s5);min-height:1.2em}
.consent h3{font-size:1rem;margin-top:6px}
.consent ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--s5);color:var(--fg)}
.consent ul.small{font-size:var(--s6);color:var(--mut)}
.agree{display:flex;gap:10px;align-items:flex-start;color:var(--fg)!important;margin-top:6px}
.agree input{margin-top:4px;width:18px;height:18px;accent-color:var(--cyan)}
.gate .bar i{display:block;height:100%;width:0;background:var(--spectrum);transition:width .25s}
.nojs{color:var(--fg);text-align:center;padding:40px}
/* thanh trên cùng: người xem và mã phiên */
.top .whoami{display:flex;flex-direction:column;line-height:1.15;font-size:.74rem;text-align:right;min-width:0}
.top .whoami b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.top .whoami span{font-family:var(--f-mono);font-size:.64rem;color:var(--mut);white-space:nowrap}
.top a.tbtn{color:var(--fg);text-decoration:none}
@media (max-width:900px){.top .whoami{display:none}}
/* chặn bôi đen ngoài ô nhập; chặn in */
body:not(.gating){-webkit-user-select:none;user-select:none}
.print-block{display:none}
@media print{body>*:not(.print-block){display:none!important}.print-block{display:block!important;font:16px/1.6 var(--f-body);color:#000;padding:40px}}
/* thanh trên có thêm nút quản trị, thoát: thu gọn nhãn sớm hơn */
@media (max-width:1180px){.top a.tbtn .lb,.top .tbtn.out .lb{display:none}}
@media (max-width:900px){.top .tbtn .lb,.top .tbtn kbd{display:none}.top .ttl span{display:none}}