/* Trang riêng ngoài app: cổng đăng nhập, trang tham gia nhóm (chưa redesign theo Figma) */
/* Cổng đăng nhập (Figma: Log IN). Phủ kín để không ai thấy hay chạm được
   vào app khi chưa có phiên — và để lúc đang kiểm tra phiên không bị nháy
   nội dung. Nền đen cố định, không đổi theo theme. */
.gate{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(var(--spacing-96) + env(safe-area-inset-top)) var(--spacing-32) calc(var(--spacing-24) + env(safe-area-inset-bottom));
  background:var(--neutral-1000);
  overflow-y:auto;
}
.gate[hidden]{display:none}
.gate-main{width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:var(--spacing-32)}
/* Video 200×200 bo 40. Bọc ngoài để bo góc (Safari không cắt góc <video>).
   Không nhận chuột/chạm: không có menu "Lưu video", không kéo ra ngoài. */
.gate-video{
  width:200px; height:200px; flex:0 0 auto;
  border-radius:var(--radius-40); overflow:hidden; transform:translateZ(0);
  pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.gate-video video{display:block; width:100%; height:100%; object-fit:cover}
.gate-content{width:100%; display:flex; flex-direction:column; gap:var(--spacing-8); text-align:center; color:var(--neutral-0)}
.gate-title{font:var(--text-title-1); letter-spacing:var(--tracking-title-1); margin:0}
.gate-sub{font:var(--text-body); letter-spacing:var(--tracking-body); margin:0}
/* Figma: Continue with Google — nhận diện của Google: Roboto Medium 16, chữ đen 54% */
.gbtn{
  width:300px; max-width:100%;
  display:flex; align-items:center; justify-content:center; gap:var(--spacing-12);
  padding:calc(var(--spacing-16) - 1px);       /* Figma vẽ viền vào trong: cao đúng 56 */
  background:var(--neutral-0); border:1px solid var(--color-border-subtle); border-radius:var(--radius-pill);
  filter:drop-shadow(0 .5px .5px rgba(0,0,0,.08));
  font:500 16px/normal Roboto, var(--font-sans); color:rgba(0,0,0,.54);
  transition:background .12s ease;
}
.gbtn__logo{width:24px; height:24px; display:grid; place-items:center; background:var(--neutral-0)}
.gbtn__logo svg{display:block}
.gbtn:active{transform:scale(.985)}
@media (hover:hover){.gbtn:hover{background:#f7f7f7}}
.gate-foot{
  font:var(--text-body); letter-spacing:var(--tracking-body);
  margin:var(--spacing-32) 0 0; width:100%; text-align:center; color:var(--neutral-500);
}
/* lời mời, lỗi: nằm dưới nút, trên nền đen */
.gate-inv, .gate-err{
  font:var(--text-compact); letter-spacing:var(--tracking-compact);
  width:300px; max-width:100%; margin:calc(-1 * var(--spacing-16)) 0 0; padding:11px 14px;
  border-radius:var(--radius-12); background:rgba(255,255,255,.12); text-align:center;
}
.gate-inv{color:var(--neutral-0)}
.gate-err{color:#ff6961}
.gate-inv[hidden], .gate-err[hidden]{display:none}
/* confirm */
.page{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column;
  background:var(--color-background-primary);
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.page[hidden]{display:none}
.page-top{
  flex:0 0 auto; display:flex; justify-content:flex-end;
  padding:14px 18px 0;
}
.linkbtn{
  font:var(--text-button-small); letter-spacing:var(--tracking-button-small);
  background:none; min-height:40px; padding:0 4px;
  color:var(--color-accent-primary);
}
.page-body{flex:1 1 auto; overflow-y:auto; padding:10px 22px 20px; max-width:var(--page-w); width:100%; margin:0 auto}
.page-body h2{
  font:var(--text-title-2); letter-spacing:var(--tracking-title-2);
  margin:0 0 10px; }
.page-foot{
  flex:0 0 auto; padding:14px 22px 22px; max-width:var(--page-w); width:100%; margin:0 auto;
}
.page-foot .page-btn{width:100%}
.page-btn{font:var(--text-button-small); letter-spacing:var(--tracking-button-small); flex:1 1 0;min-height:50px;padding:13px;border-radius:var(--radius-12);text-align:center}
.page-btn.ok{background:var(--color-accent-primary);color:#fff}
/* ---- members ---- */
.sheet-note{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); margin:-8px 0 16px;color:var(--color-text-secondary);}
.sheet-note b{color:var(--color-text-primary);font-weight:600}
.sheet-sec{
  font:var(--text-all-cap); letter-spacing:var(--tracking-all-cap);
  margin:0 0 10px;color:var(--color-text-tertiary);text-transform:uppercase;}
/* Figma: Member section — nhóm nền background/tertiary bo 8 chứa tiêu đề, danh sách, ô thêm */
.mem-list{list-style:none;margin:0 0 14px;padding:0}
.slot{width:100%;display:flex;align-items:center;gap:11px;padding:12px 2px;text-align:left}
.slot[aria-pressed="true"]{font-weight:600;}
.slot .tick{margin-left:auto;color:var(--color-accent-primary);opacity:0}
.av.new{background:var(--color-surface-secondary);color:var(--color-text-tertiary);display:grid;place-items:center}
.av.new svg{width:17px;height:17px}
.slot[aria-pressed="true"] .tick{opacity:1}
@media (hover:hover){.slot:hover{background:var(--color-fill-quaternary);border-radius:var(--radius-6)}}
.field{margin-bottom:18px}
.field label{
  font:var(--text-all-cap); letter-spacing:var(--tracking-all-cap);
  display:block;margin-bottom:8px;
  color:var(--color-text-tertiary);text-transform:uppercase;}
.field input{
  font:var(--text-input); letter-spacing:var(--tracking-input);
  width:100%;min-height:48px;padding:10px 13px;color:var(--color-text-primary);
  border:1px solid transparent;border-radius:var(--radius-12);background:var(--color-surface-secondary);outline:none;
}
.field input::placeholder{color:var(--color-text-tertiary)}
.field input:focus{border-color:var(--color-accent-primary)}
.field input.warn{border-color:var(--color-status-error);animation:nudge .3s ease}