/* Sandya Video Conference — design system mengikuti mockup HADIR (examples/): Inter, biru korporat #2563eb, kartu putih border tipis,
   radius besar, bayangan halus, warna semantik hanya untuk keadaan. Dua tema: terang (default) & gelap; token yang sama, nilai berbeda. */
@font-face{font-family:"Inter";src:url("/inter.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:block} /* block + preload di <head>: teks ditahan sesaat sampai Inter siap, bukan digambar dengan font sistem lalu dilompat-ganti (FOUT) */
:root{
  --blue-50:#eff5ff;--blue-100:#dbe8fe;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;
  --bg:#f6f8fc;--surface:#ffffff;--surface2:#f8fafc;--tile:#e6edf7;--tile2:#dbe8fe;--border:#e2e8f0;--border2:#cbd5e1;
  --text:#0f172a;--text2:#475569;--muted:#64748b;--primary:var(--blue-600);--primary-h:var(--blue-700);--speak:var(--blue-500);
  --ok:#16a34a;--ok-bg:#dcfce7;--warn:#d97706;--warn-bg:#fef3c7;--danger:#dc2626;--danger-bg:#fee2e2;
  /* D19: toast memakai biru Sandya lembut, bukan pil hitam. Kontras teks/aksen diperiksa pada kedua tema. */
  --toast-bg:#eaf2ff;--toast-fg:#172337;--toast-ac:#2563eb;--toast-bd:#c9dbff;--video-bg:#0f172a;--tag-bg:rgba(15,23,42,.72);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);--shadow-md:0 4px 16px rgba(15,23,42,.06);--shadow-lg:0 24px 60px rgba(15,23,42,.12);--shadow-blue:0 8px 20px rgba(37,99,235,.24);
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:var(--font); /* satu font untuk semua: Inter, angka tabular untuk kolom */
  color-scheme:light;
}
:root[data-theme=dark],:root:not([data-theme=light]).sys-dark{
  --bg:#0b1220;--surface:#111a2b;--surface2:#0f172a;--tile:#1e293b;--tile2:#26344a;--border:#253248;--border2:#334155;
  --text:#f1f5f9;--text2:#cbd5e1;--muted:#94a3b8;--primary:var(--blue-500);--primary-h:var(--blue-600);--speak:#60a5fa;--blue-50:rgba(59,130,246,.14);--blue-100:rgba(59,130,246,.22);
  --ok:#4ade80;--ok-bg:rgba(22,163,74,.18);--warn:#fbbf24;--warn-bg:rgba(217,119,6,.18);--danger:#f87171;--danger-bg:rgba(220,38,38,.2);
  --toast-bg:#17345f;--toast-fg:#f6f8fc;--toast-ac:#60a5fa;--toast-bd:#2f5f9f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.35);--shadow-lg:0 24px 60px rgba(0,0,0,.5);--shadow-blue:0 8px 20px rgba(59,130,246,.23);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.ic{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.3em}
.off>.ic.on,:not(.off)>.ic.off{display:none}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-optical-sizing:auto;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* animasi masuk halaman awal (§1): fade-in ~0.7s + translate halus; hanya layar non-rapat, sekali saat load */
.screen:not(#meet).enter{animation:pagein .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.enter{animation:none!important}}
/* pagein menggeser layar 8px ke bawah, dan geseran itu ikut memperluas area scroll dokumen ~6px:
   scrollbar vertikal muncul lalu hilang lagi selama ~0,4 dtk saat halaman pertama kali tampil.
   Klip hanya selama animasi berjalan (.enter dilepas pada animationend).
   Dibatasi ke no-preference: pada prefers-reduced-motion animasinya none, animationend tidak pernah
   terjadi, .enter menetap — dan aturan ini akan mematikan scroll selamanya. */
@media (prefers-reduced-motion:no-preference){
  html:has(.screen:not(#meet).enter){overflow:hidden}
}
h1,h2{margin:0;font-weight:600}
h1{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h2{font-size:20px;letter-spacing:-.01em}
p{margin:0}
a{color:var(--primary);text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.screen{position:relative;min-height:100%;display:flex;flex-direction:column}
.center{align-items:center;justify-content:center;text-align:center;gap:18px;padding:24px}
.center p{max-width:46ch;color:var(--muted)}
/* hiasan latar halus (seperti .shell--deco mockup): lingkaran biru sangat tipis, digambar sebagai background */
body:not(.inmeet){background-image:radial-gradient(circle 260px at calc(100% - 80px) 40px,rgba(37,99,235,.05) 0 100%,transparent 100%),radial-gradient(circle 220px at -60px 60%,rgba(59,130,246,.05) 0 100%,transparent 100%);background-repeat:no-repeat;background-attachment:fixed}

/* landing (acuan v0.5): topbar 76 px Sandya + "Ruang rapat", hero lockup, kartu Gabung; lingkaran ambient tipis */
.land,.pj{overflow:hidden}
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient::before,.ambient::after{content:"";position:absolute;width:650px;height:430px;border-radius:50%;border:1px solid rgba(37,99,235,.08);transform:rotate(-30deg)}
.ambient::before{top:-270px;right:-190px;box-shadow:0 0 0 46px rgba(37,99,235,.018),0 0 0 110px rgba(37,99,235,.012)}
.ambient::after{bottom:-320px;left:-400px;box-shadow:0 0 0 46px rgba(37,99,235,.018)}
.land>*:not(.ambient),.pj>*:not(.ambient){position:relative;z-index:1}
.topnav{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 40px}
/* aset per tema: .lt tampil di terang, .dk di gelap (logo, ikon & label tombol tema) */
:root[data-theme=dark] .lt,:root:not([data-theme=light]).sys-dark .lt{display:none}
:root:not([data-theme=dark]):not(.sys-dark) .dk,:root[data-theme=light] .dk{display:none}
.pbrand{display:inline-flex;align-items:center;gap:17px;min-height:44px}
.pbrand .sandya-link{display:inline-flex;border-radius:8px}
.pbrand .pcap{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.pbrand .pcap:hover,.pbrand .pcap:focus-visible{color:var(--text);border-bottom-color:var(--border2)}
.pbrand a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pbrand .sandya{width:106px;height:auto}
.pcap{font-size:12px;color:var(--muted);border-left:1px solid var(--border);padding-left:17px;white-space:nowrap}
.topnav .hdr-acts{gap:9px;flex-wrap:nowrap}
.topnav .btn{min-height:44px;padding:0 16px;font-size:12px;border-radius:var(--r-sm)}
.topnav .btn.ghost{background:none;border-color:transparent;box-shadow:none;color:var(--muted)}
.topnav .btn.ghost:hover{background:var(--surface2);color:var(--text)}
.topnav .btn:not(.ghost){background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm)}
#hdr-auth .chev{color:var(--muted);transition:transform .3s}
.hero{flex:1;width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,420px);gap:76px;align-items:center;padding:32px 32px 40px}
.intro{min-width:0}
.lockup{width:310px;max-width:100%;height:auto;margin-bottom:30px;display:block}
.intro h1{font-size:46px;font-weight:720;line-height:1.09;letter-spacing:-.045em;max-width:440px}
.lead{color:var(--muted);font-size:15px;line-height:1.7;margin-top:17px;max-width:380px}
.note{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:32px;opacity:.8}
.card.join{border-radius:var(--r-xl);padding:29px;gap:0;animation:none}
.card.join h2{font-size:25px;font-weight:700}
.card.join>.hint{margin-top:7px;line-height:1.6}
.flabel{display:block;font-size:12px;font-weight:600;color:var(--text);margin:19px 0 8px}
.in.soft{background:var(--surface2);border-radius:var(--r-sm);min-height:50px;padding:11px 12px;font-size:16px}
.btn.big{min-height:50px;font-size:14px;border-radius:var(--r-sm);width:100%}
.btn.between{justify-content:space-between;padding:0 15px}
.card.join .btn.big{margin-top:12px}
.card.join .err{margin-top:8px}
/* v0.7: input + tombol panah satu baris; CTA login/buat rapat sebagai tombol penuh; trial sebagai text action */
.join-row{display:flex;gap:8px;align-items:stretch}
.join-row .in{flex:1;min-width:0}
.btn.go{flex:none;width:50px;min-height:50px;padding:0;border-radius:var(--r-sm)}
.host-label{margin-top:18px;font-size:12px;color:var(--muted);text-align:center}
.card.join .host-label+.btn.big{margin-top:8px}
.trial-area{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.trial-sep{display:flex;align-items:center;gap:10px;width:100%;font-size:12px;color:var(--muted)}
.trial-sep::before,.trial-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.trial-link{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--primary);padding:6px 10px;border-radius:var(--r-sm);cursor:pointer}
.trial-link:hover{text-decoration:underline}
.trial-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.live{margin-top:18px;padding-top:17px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.live h3{margin:0;font-size:13px;font-weight:650}
.live-h{align-items:center;gap:8px}
.live-h .tipb{margin-left:auto}
.mlist{padding-left:15px;border-left:2px solid var(--border)}   /* 5.3: daftar jelas anak dari judul di atasnya */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.mlist{display:flex;flex-direction:column}
.mitem{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;min-height:62px}
.mitem:last-child{border-bottom:0}
/* S4.8/S48-04: info punya lebar dasar 220px; kalau tidak muat bersama tombol, grup aksi turun ke baris sendiri (bukan menjepit info jadi kolom kata) */
.mitem>div{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.mitem b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem>div>span{font-size:12.5px;color:var(--muted)}
.mitem>.row{margin-left:auto;justify-content:flex-end;gap:6px}
.mitem>.ic{color:var(--muted)}
a.mitem:hover b,a.mitem:hover>.ic{color:var(--primary)}
.link-btn{border:0;background:none;color:var(--primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-sm)}
.link-btn:hover{background:var(--blue-50)}
.menu.top{inset:84px 40px auto auto;transform:none;width:min(92vw,240px)} /* dropdown akun di bawah tombol nama, kanan atas */
.menu.hdr{inset:64px 14px auto auto;transform:none;width:min(92vw,260px)} /* U-26: menu Undang menempel di bawah topbar rapat */
.menu.login{width:min(92vw,340px);padding:6px}
.menu.login .gate-card{width:auto;border:0;box-shadow:none;animation:none;background:none;padding:14px 16px}
.menu.login h2{font-size:17px}
#recs-dlg{max-width:min(92vw,560px)}
#create-dlg{max-width:min(92vw,440px)}
.create{max-height:90dvh;overflow-y:auto;gap:0}
.create .switch{margin-top:14px}
.switch.flat{border:0;background:none;padding:10px 0}  /* v0.7: baris toggle tanpa card, label kiri + switch kanan */
/* 5.1: kedua opsi akses dirapatkan jadi satu blok; 13,5px tetap terbaca (>=12px), baris klik tetap selebar dialog (36px) */
.create .switch.flat{margin-top:2px;padding:5px 0}
.create .switch.flat+.switch.flat{margin-top:-6px}   /* .card gap 12px tidak bisa dimatikan per-anak; tarik pasangan opsi ini saja */
.create .switch.flat>span:not(.tipb){font-size:13.5px}
.c-note{margin:8px 0 2px;text-align:center}
.create>.hint{margin-top:10px}
.create .btn.big{margin-top:18px}
.hello{margin-top:6px;font-size:15px;font-weight:650;color:var(--text)}
.row.between{justify-content:space-between;align-items:center}
.tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);font-weight:700}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-md);animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
.lbl{font-size:13px;color:var(--primary);font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row .in{flex:1;min-width:0}
.in{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;font:inherit;font-size:16px;min-height:50px;color:var(--text);width:100%;transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:#94a3b8}
.in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
select.in{appearance:auto}
.btn{font-weight:600;font-size:15px;border:1px solid transparent;border-radius:var(--r-md);padding:13px 20px;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.2;font-family:inherit}
.btn.primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-blue)}
.btn.primary:hover{background:var(--primary-h);transform:translateY(-1px)}
.btn.ghost{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{border-color:var(--border2)}
.btn.danger{background:var(--danger);color:#fff}
.btn:focus-visible,.tb:focus-visible,.rb:focus-visible,.hb:focus-visible,.link-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.acts .btn{flex:1}
.link{font-size:14px;font-weight:500}
.ftr{padding:14px 40px 22px;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center}
.ftr a{color:var(--text2);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.ftr a:hover,.ftr a:focus-visible{color:var(--primary);border-bottom-color:var(--primary)}
.gate-card{width:min(92vw,380px);text-align:left;padding:29px}
.gate-card h2{font-size:25px}
.card.create{padding:29px}
.card.create h2{font-size:25px}
.gate-card .btn{margin-top:4px}
.hint{font-size:12px;color:var(--muted)}
.recs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.recs li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;animation:recin .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)} /* daftar rekaman masuk berurutan; scale (bukan translate) agar tidak memicu scrollbar di daftar */
@keyframes recin{from{opacity:0;transform:scale(.96)}}
.recs li span{color:var(--muted);font-size:12.5px;text-align:right}
.recs li a.mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recs .dl{padding:6px 10px;font-size:13px;flex:none}
.recs .empty{color:var(--muted);justify-content:center;background:transparent;border:1px dashed var(--border)}
.err{color:var(--danger);font-size:13px}

/* login */
dialog{border:0;padding:0;background:transparent;color:inherit;max-width:min(92vw,400px);width:100%;overflow:visible} /* overflow: UA memberi auto -> scrollbar sesaat selama animasi masuk */
dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(4px)}
dialog .card{border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
dialog[open] .card{animation:dlgin .3s cubic-bezier(.2,.7,.2,1) both} /* dialog & menu: muncul membesar dari bawah, backdrop memudar masuk */
@keyframes dlgin{from{opacity:0;transform:translateY(16px) scale(.97)}}
dialog[open]::backdrop{animation:fadein .3s both}
@keyframes fadein{from{opacity:0}}
dialog .row{margin-top:6px}
dialog p{color:var(--muted);font-size:14px}

/* prejoin (acuan v0.5) */
.pj-inner{max-width:1150px;width:100%;padding:24px 32px 32px;margin:0 auto;flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px} /* flex:1 (bukan min-height:100%): merentang penuh sehingga pratinjau + kartu berada di tengah layar */
.pj-back{display:flex;justify-content:space-between;align-items:center;gap:12px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;min-height:44px}
.back:hover{color:var(--primary)}
.step{font-size:11px;color:var(--muted)}
.pj-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:28px;align-items:center}
.cam-block{min-width:0}
.preview{position:relative;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#233d5d,transparent 65%),linear-gradient(145deg,#16283d,#0d1625);border:1px solid #28415e;aspect-ratio:16/9;box-shadow:var(--shadow-md)}
.preview video{width:100%;height:100%;object-fit:cover} /* F3/D20: cermin bukan CSS lagi — frame kamera dicerminkan di track (pratinjau = yang dikirim) */
.nametag{position:absolute;left:16px;bottom:14px;background:var(--tag-bg);color:#dce9f7;padding:5px 10px;border-radius:6px;font-size:12px;display:inline-flex;align-items:center}
.ctl{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.rb{width:44px;height:44px;border-radius:50%;border:1px solid rgba(200,225,255,.23);background:rgba(12,26,43,.7);color:#e4effc;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.rb .ic{width:24px;height:24px}
.rb.off{background:#542b39;border-color:#78404c;color:#ffe4e7}
.preview .initial{width:110px;height:110px;font-size:32px;background:linear-gradient(135deg,#284a74,#15628a);box-shadow:0 14px 50px rgba(0,0,0,.18)}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px;color:var(--muted)}
.card.pre{border-radius:var(--r-xl);padding:29px;gap:0}
.card.pre h1{font-size:25px;line-height:1.25;margin-top:8px;overflow-wrap:anywhere;letter-spacing:-.02em;font-weight:700}
.card.pre>.hint{margin-top:6px}
/* 5.2: ringkasan compact key-value, bukan kalimat berderet */
.pj-sum{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2)}
.pj-sum dt{font-size:12px;color:var(--muted)}
.pj-sum dd{margin:0;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.pj-fix{align-self:flex-start;margin-top:4px;font-size:12px;padding:6px 0}
.pj-fix:hover{background:none;text-decoration:underline}
.pj-state{margin:14px 0 0;font-size:12.5px;font-weight:650;color:var(--warn);display:flex;align-items:center;gap:7px}
.pj-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg);flex:none}
/* 5.2: “Mendeteksi…” masih dipindai -> kecil & abu-abu; sesudah terdeteksi kembali normal */
.in.scan{font-size:12.5px;color:var(--muted)}
.policy{display:flex;gap:9px;align-items:flex-start;font-size:12px;padding:12px;background:var(--blue-50);color:var(--primary);border-radius:12px;margin-top:16px;line-height:1.5}
.policy .ic{width:19px;height:19px;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two select{font-size:12px;padding-right:5px}
.card.pre .btn.big{margin-top:20px}
.card.pre .err{margin-top:10px}
.pre-role{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;margin-top:12px;color:var(--muted)}
.pre-role .ic{width:14px;height:14px}
.pre-role .link-btn{font-size:11px;padding:4px 6px}

/* wait */
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--primary);animation:spin 1.1s linear infinite;flex:none}
.spin.sm{width:22px;height:22px;border-width:3px}
.wait-card{width:min(92vw,460px);text-align:center;align-items:center;padding:30px 28px}
.wait-sym{width:62px;height:62px;border-radius:20px;background:var(--blue-50);color:var(--primary);display:grid;place-items:center}
.wait-sym .ic{width:30px;height:30px}
.wait-card p{color:var(--muted);font-size:14px}
.wait-person{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);text-align:left}
.wait-person>div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
.wait-person span:not(.avatar){font-size:12.5px;color:var(--muted)}
.hint.lock{display:flex;gap:8px;align-items:flex-start;text-align:left}
.hint.lock .ic{flex:none;margin-top:2px}
.wait-card .btn{width:100%}
@keyframes spin{to{transform:rotate(360deg)}}

/* meeting */
#meet{--tbh:88px;height:100dvh;display:grid;grid-template-rows:auto 1fr var(--tbh);grid-template-columns:minmax(0,1fr) 0px;overflow:hidden;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),grid-template-columns .4s cubic-bezier(.2,.7,.2,1)} /* baris toolbar & kolom panel dalam px supaya bisa ditransisikan; ResizeObserver grid membuat tile mengikuti tiap frame */
#meet.open{grid-template-columns:minmax(0,1fr) 320px} /* panel chat/peserta: kolom kanan setinggi area rapat + toolbar (kotak tulis pesan sampai bawah), melebar dari 0 */
.topbar{grid-column:1/-1}
.body,.toolbar{grid-column:1}
.panel{grid-column:2;grid-row:2/4;width:308px;justify-self:start;min-height:0} /* lebar tetap: saat kolom melebar/menyempit panel tidak mengalir ulang, hanya tersingkap */
/* D15/UI03: toolbar auto-hide hanya MENGGESER dirinya sendiri. Barisnya tetap setinggi --tbh, jadi area video
   tidak berubah ukuran setiap toolbar muncul/hilang (dulu grid-template-rows ikut berubah -> tile reflow + oscillate
   ketika pointer menyentuh tepi). Tidak ada tombol PIN baru. */
#meet.idle .toolbar{transform:translateY(100%);opacity:0;pointer-events:none}
.toolbar{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .25s}
.banner{position:fixed;left:50%;top:0;transform:translate(-50%,-110%);background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;transition:transform .35s;z-index:5}
.banner.on{transform:translate(-50%,56px)}
.banner.endsoon{background:var(--danger-bg,var(--warn-bg));border-color:var(--danger,var(--warn));color:var(--danger,var(--warn))}
.banner.endsoon.on{transform:translate(-50%,56px)}
#banner.on~.endsoon.on{transform:translate(-50%,104px)}
.topbar{display:flex;align-items:center;gap:10px;padding:0 14px;height:58px;font-size:14px;min-width:0} /* satu header ringkas saat rapat (U-01): mark, judul+durasi, tema, undang, peserta */
.topbar .mark{height:28px;width:28px;object-fit:contain;flex:none}
.topbar .mt{min-width:0;display:flex;flex-direction:column;gap:1px}
.topbar .room{font-weight:600;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0} /* judul panjang: ellipsis; identitas lengkap di title */
.topbar .meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.topbar .time{font-variant-numeric:tabular-nums}
.adm{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.adm .ic{width:14px;height:14px}
.hb{height:44px;min-width:44px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text2);font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);flex:none}
.hb:hover{border-color:var(--primary);color:var(--primary)}
.hb .ic{width:22px;height:22px}
.recdot{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--danger);background:var(--danger-bg);padding:2px 9px;border-radius:999px}
.recdot i{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
#tb-rec.active{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}
.grow{flex:1}
.hb.pill{color:var(--text)}
/* 5.4: Bagikan = CTA sekunder yang mudah ditemukan */
.hb.cta{border-color:var(--primary);background:var(--blue-50);color:var(--primary)}
.hb.cta:hover{background:var(--blue-100)}
.body{background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr);min-height:0} /* D03: area luar video = latar VICON, bukan panel abu-abu tersendiri. minmax(0,..): grid boleh lebih sempit dari track tile-nya (saat panel terbuka), kalau tidak clientWidth tidak pernah mengecil */
.body>.grid,.body>#wb{grid-area:1/1} /* papan tulis (wb.js) menumpang sel yang sama dengan grid; tanpa ini auto-placement membuat baris kedua */
.grid{position:relative;padding:0 12px;display:grid;gap:8px;grid-template-columns:repeat(calc(var(--cols,1) * 2),calc((var(--tw,100px) - 8px) / 2));grid-auto-rows:calc(var(--tw,100px) * 9 / 16);justify-content:center;align-content:center;min-height:0} /* sel persis 16:9, grid dipusatkan: antar kotak hanya gap; kolom = setengah tile (span 2) supaya baris terakhir bisa digeser setengah sel */
.grid.speaker{grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:1fr;grid-auto-rows:auto;justify-content:stretch;align-content:stretch}
.grid.speaker .strip{display:flex;flex-direction:column;gap:6px;overflow:hidden;min-height:0}
.grid.anim .strip{overflow:visible!important}
.grid.speaker .strip .t{flex:0 1 112px;min-height:36px} /* dinamis: mengecil agar semua muat, tanpa scroll */
.grid.speaker .strip .t.new{animation:stripin .35s cubic-bezier(.2,.7,.2,1)} /* anggota baru: tumbuh dari 0, tile lain tergeser */
@keyframes stripin{from{flex-basis:0;opacity:0}}
.grid.speaker .strip .t.out{animation:tileout .25s ease-in forwards} /* anggota keluar: menyusut, tile lain naik */
.t.desktop .v{background:#000}
.t.desktop .nm:before{content:"Presentasi · ";color:#cbd5e1}
.t.desktop .initial{display:none}
.present{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);white-space:nowrap}
.present .ic{color:var(--primary)}
.present b{font-size:13px}
.present .btn{padding:5px 12px;font-size:13px}
/* .t = sel grid (container), .v = kotak video yang mengikuti rasio video (--ar) sehingga tidak ada letterbox */
.grid:not(.speaker)>.t{grid-column:span 2}
.t{position:relative;min-height:0;min-width:0;cursor:pointer;container-type:size;display:grid;place-items:center;transform-origin:0 0}
.t.new{animation:tilein .25s cubic-bezier(.2,.7,.2,1) both} /* hanya tile baru; .t tanpa animasi supaya pindah grid<->filmstrip tidak memulai ulang animasi dan mengganggu FLIP */
/* D03/D08: tidak ada surface pembungkus di luar video. Border tetap 2px tetapi TRANSPARAN (bukan garis abu-abu
   yang membuat "kotak di dalam kotak"); ia hanya slot untuk indikator bicara/fokus sehingga tata letak tidak
   bergeser saat indikator menyala. Isi video, label nama, offcam dan kontras toolbar tidak diubah. */
.t .v{position:relative;transform-origin:0 0;width:min(100%,calc(100cqh * var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 80% 20%,hsl(var(--h,214) 38% 32%),transparent 62%),linear-gradient(145deg,hsl(var(--h,214) 42% 19%),#0d1625);border:2px solid transparent;color:#e7f0fb}
.t:focus-visible .v{border-color:var(--primary);outline:none}
.t .role{position:absolute;left:12px;top:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a9bdd4;font-weight:600;z-index:2}
@keyframes tilein{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.t.out{animation:tileout .25s ease-in forwards;pointer-events:none}
@keyframes tileout{to{opacity:0;transform:scale(.9);flex-basis:0}}
.t.speaking .v{border-color:var(--speak);animation:speak 1.6s ease-in-out infinite}
.t .sig{position:absolute;right:12px;bottom:14px;margin:0;z-index:2}
@keyframes speak{50%{box-shadow:0 0 0 6px rgba(59,130,246,.25)}}
.t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--video-bg);z-index:1}
.t .nm,.t .hand{z-index:2}
.plist .rtt{color:var(--muted);font-size:11.5px;font-family:var(--mono);font-variant-numeric:tabular-nums;flex:none;width:6.2ch;text-align:right;white-space:nowrap} /* pojok kiri, lebar tetap muat "999+ ms" */
.t.desktop .mic{display:none}
/* F3/D20: .t.local video tanpa cermin CSS; lihat camXfEffect */
.t.desktop video{transform:none;transform-origin:0 0}
.grid.speaker>.t.desktop .v{touch-action:none} /* cubit/geser ditangani zoom presentasi, bukan browser */
/* R2-P2/FQ-11: video portrait TIDAK lagi dipaksa ke kotak 16:9 dengan object-fit:contain — itulah "kotak abu-abu" di
   layar lebar (sisi kiri-kanan #0f172a sebesar sisa kotak). Tile portrait memakai rasio aslinya (aturan .t .v di atas),
   sel grid di sekelilingnya transparan (latar VICON, D03). */
.t video.hidden,.preview video.hidden{display:none}
.t .initial,.preview .initial{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);color:#e7f6ff;display:grid;place-items:center;font-weight:600;font-size:24px;letter-spacing:-.02em;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.t .nm{position:absolute;left:10px;bottom:10px;background:rgba(5,15,28,.6);color:#fff;padding:4px 9px;border-radius:6px;font-size:12.5px;max-width:calc(100% - 56px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:2px} /* tag nama selalu gelap-transparan di atas video, di kedua tema */
.t .nm .mic{display:inline-flex;color:#cbd5e1;margin-right:3px} /* selalu tampil: abu = mic aktif, merah dicoret = muted */
.t .nm .mic.off{color:#fca5a5}
.sig{display:inline-flex;gap:1.5px;align-items:flex-end;height:11px;margin-left:7px;flex:none;color:#cbd5e1}
.nametag .sig{position:static}
.sig i{width:3px;border-radius:1px;background:currentColor;opacity:.3}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:7.5px}.sig i:nth-child(3){height:11px}
.sig.q1{color:#f87171}.sig.q2{color:#fbbf24}.sig.q3{color:#4ade80}
.sig.q1 i:nth-child(1),.sig.q2 i:nth-child(-n+2),.sig.q3 i{opacity:1}
.t .hand{position:absolute;right:10px;top:10px;background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:4px 6px;font-size:14px;display:grid;animation:pop .2s both}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.toolbar{display:flex;justify-content:center;align-items:center;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));height:var(--tbh);box-sizing:border-box;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.dock{display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-md);max-width:100%}
/* tombol berlabel: ikon garis 25 px + label 10 px, target >= 44 px (U-10); state dibedakan bentuk ikon/label + aria-pressed, bukan warna saja */
.tb{min-width:66px;height:57px;padding:4px 7px;border-radius:11px;background:none;border:1px solid transparent;color:var(--text);font:inherit;font-size:10px;font-weight:600;line-height:1;cursor:pointer;position:relative;transition:transform .15s,border-color .15s,background .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--shadow-sm)}
.tb .ic{width:25px;height:25px;stroke-width:1.6}
.tb .lb{white-space:nowrap}
.tb.off .lb::after{content:" mati"}
.tb:hover{background:var(--surface2)}
.tb.active,.tb.open{background:var(--blue-50);border-color:var(--border);color:var(--primary)}
.tb.off{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.tb:disabled,.menu.list button:disabled{opacity:.35;pointer-events:none}
.tbg{display:inline-flex}
.tbg .tb:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.tbg .caret{min-width:24px;width:24px;padding:0;border-radius:0 var(--r-md) var(--r-md) 0;margin-left:-1px;color:var(--muted)}
.tbg .caret .ic{width:16px;height:16px}
#tb-screen[hidden]+.caret{border-radius:var(--r-md);margin-left:0;min-width:44px} /* VIS-04: moderator tanpa capture lokal tetap bisa mengatur izin */ /* border kiri ditumpuk ke border kanan tombol utama: saat hover tiap tombol punya bingkai utuh sendiri */
.caret .ic,.tb .chev{transition:transform .2s}
.tb.open .ic:last-child{transform:rotate(180deg)}
.tb.open .chev{transform:rotate(180deg)}
.tb.leave{background:#dc2626;border-color:transparent;color:#fff;min-width:62px}
.tb.leave:hover{background:#b91c1c}
.tb.leave:hover{color:#fff;border-color:transparent;filter:brightness(1.06)}
.sep{width:1px;background:var(--border);margin:0 3px;height:28px}
.menu{position:fixed;inset:auto auto 100px 50%;transform:translateX(-50%);margin:0;width:min(92vw,340px);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);padding:14px 16px;flex-direction:column;gap:8px;box-shadow:var(--shadow-lg)}
.menu:popover-open{display:flex;animation:menuin .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes menuin{from{opacity:0;translate:0 8px}} /* pakai translate, bukan transform: menu toolbar dipusatkan lewat transform */
.menu{max-height:calc(100dvh - 110px);overflow-y:auto}
.menu::backdrop{background:transparent}
.menu.list{padding:8px;gap:2px}
.menu .mname{display:none;padding:10px 14px 8px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu.list button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer}
.menu.list button:hover{background:var(--blue-50);color:var(--primary)}
.menu.list button.danger{color:var(--danger)}
.menu.list button.danger:hover{background:var(--danger-bg);color:var(--danger)}
.m-only{display:none!important}
#tb-view .ic.b,#tb-view.stage .ic.a{display:none}
#tb-view.stage .ic.b{display:block}
/* popover Tata letak: dua pilihan, centang pada yang aktif (aria-pressed) */
.menu.view{width:min(92vw,280px)}
.menu.list .lbl{padding:6px 10px 2px}
.menu.view button span{flex:1;display:flex;flex-direction:column;gap:2px}
.menu.view button small{font-size:12px;color:var(--muted);font-weight:500}
.menu.view button .chk{visibility:hidden;color:var(--primary)}
.menu.view button[aria-pressed=true]{background:var(--blue-50);color:var(--primary)}
.menu.view button[aria-pressed=true] .chk{visibility:visible}
.settings .row.end{justify-content:flex-end}
#settings{max-width:min(92vw,520px)}
.settings{max-height:88dvh;overflow-y:auto}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--primary)}
.topnav .seg{min-height:44px;align-items:center}
.topnav .seg button{font-size:12px}
.menu .in{min-height:44px;font-size:14px} /* menu perangkat di dalam rapat tetap padat; acuan LENSA untuk form sebelum rapat */
.seg{align-self:flex-start;display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;gap:2px;background:var(--surface2)} /* pilihan tema: segmen 3 tombol */
.seg button{border:0;background:none;color:var(--text2);font:inherit;font-size:13px;font-weight:500;padding:6px 12px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--primary);font-weight:600;box-shadow:var(--shadow-sm)}
.bgs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bgs button,.bgs .up{aspect-ratio:16/9;border-radius:var(--r-sm);border:2px solid var(--border);background:var(--surface2) center/cover no-repeat;color:var(--text);font:inherit;font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
.bgs .up{font-size:22px;color:var(--muted)}
.bgs .on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.badge{position:absolute;top:-5px;right:-5px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.panel{position:relative;z-index:4;margin:0 12px 10px 0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:var(--shadow-md)}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:6;pointer-events:none}
.toast{background:var(--toast-bg);color:var(--toast-fg);border:1px solid var(--toast-bd);font-size:13px;font-weight:500;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow-md);max-width:min(92vw,520px);text-align:center;animation:toastin .3s cubic-bezier(.2,.7,.2,1) both,toastout .3s ease-in 3.7s forwards} /* D19: pil biru Sandya lembut; posisi/ukuran tidak berubah supaya tidak menutup toolbar */
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:12px;animation-delay:0s,7.7s} /* notifikasi beraksi (U-23/U-25): bisa diklik dan bertahan lebih lama */
.toast .tact{background:none;border:0;color:var(--toast-ac);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
#plist .hnd{display:inline-flex;color:var(--warn,#d97706)} /* U-25: tangan tetap terlihat di daftar sampai diturunkan */
#plist .hnd .ic{width:16px;height:16px}
@keyframes toastin{from{transform:translateY(12px);opacity:0}}
@keyframes toastout{to{transform:translateY(8px);opacity:0}}
.ph{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 10px;font-weight:700;font-size:17px}
.ph .x{width:44px;height:44px}
.x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;display:grid;place-items:center;border-radius:999px;padding:4px}
.x:hover{color:var(--text);background:var(--surface2)}
.msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.msg{animation:msgin .15s ease-out both;display:flex;flex-direction:column;align-items:flex-start;max-width:86%} /* D26: orang lain di kiri */
.msg.me{align-self:flex-end;align-items:flex-end}                                                                   /* pesan sendiri di kanan */
.msg time{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
@keyframes msgin{from{transform:translateY(6px);opacity:0}}
.msg>b{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:2px}
.msg .bb{background:var(--surface2);border:1px solid var(--border);padding:8px 12px;border-radius:var(--r-sm);border-bottom-left-radius:4px;overflow-wrap:anywhere;position:relative}
.msg.me .bb{background:var(--blue-50);border-color:var(--blue-100);border-bottom-left-radius:var(--r-sm);border-bottom-right-radius:4px}
.msg.me>b{display:none}   /* pesan sendiri: nama sendiri tidak diulang, posisi kanan sudah menjelaskannya */
/* F2/D26: grup pesan beruntun dari pengirim yang sama (nama sekali, jarak rapat); balasan (kutipan ringkas), sebutan, diteruskan */
.msg.cont{margin-top:-6px}
.msg.cont>b{display:none}
.msg .q{display:block;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);border-radius:4px;padding:4px 8px;margin:-2px 0 6px;font-size:12.5px;cursor:pointer;max-height:3.2em;overflow:hidden}
.msg .q b{display:block;color:var(--primary);font-weight:600;font-size:12px}
.msg .fw{display:block;font-size:11px;color:var(--muted);font-style:italic;margin-bottom:2px}
.msg .mn{color:var(--primary);font-weight:600;background:color-mix(in srgb,var(--primary) 12%,transparent);border-radius:4px;padding:0 3px}
.msg .mn.me{background:var(--primary);color:#fff}
.msg.hit .bb{animation:hit 1.2s ease-out}
@keyframes hit{from{box-shadow:0 0 0 3px var(--primary)}}
.msg .acts{display:none;position:absolute;top:-14px;right:6px;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px;box-shadow:var(--shadow-md)}
.msg.me .acts{right:auto;left:6px}
.msg:hover .acts,.msg:focus-within .acts{display:flex}
.msg .acts button{background:none;border:0;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;cursor:pointer}
.msg .acts button:hover{background:var(--surface2);color:var(--text)}
#more .tbadge{margin-left:auto}
.tabs .tbadge,#more .tbadge{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:8px;background:var(--primary);color:#fff;font-size:10.5px;padding:0 4px;margin-left:6px;vertical-align:1px}
.pvhead{display:flex;align-items:center;gap:8px;padding:8px 14px 0;font-size:14px}
.pvhead small{color:var(--muted)}
.pvlist{flex:1}
.pvlist li{cursor:pointer;justify-content:space-between}
.pvlist li:hover{border-color:var(--primary)}
.pvlist li small{color:var(--muted);font-size:12px;flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvlist li .tbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;padding:0 5px}
.creply{display:flex;align-items:center;gap:8px;margin:0 14px;padding:6px 10px;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);border-radius:4px;font-size:12.5px}
.creply>div{flex:1;min-width:0;display:flex;flex-direction:column}
.creply small{color:var(--primary);font-weight:600}
.creply span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ment{margin:0 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-lg);max-height:180px;overflow-y:auto;padding:4px}
.ment button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);font:inherit;font-size:14px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.ment button:hover,.ment button.on{background:var(--blue-50)}
.notif-row{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;margin-top:16px} /* VIS-09: blok sekunder rata tengah kartu; aksi = teks biru (link-btn), tanpa kotak */
.notif-row .link-btn{min-height:44px;padding:6px 10px}
.settings .notif-row{align-items:flex-start;text-align:left;margin:2px 0 6px}
#fw-list button.chk{width:100%;background:none;border:0;color:var(--text);font:inherit;text-align:left}
#fw-list button.chk:hover{background:var(--blue-50)}
.cin{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.cin .btn{padding:8px 14px}
.plist{list-style:none;margin:0;padding:8px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.plist li{padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plist li span:not(.rtt){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .role{font-size:11px;font-weight:600;color:var(--primary);background:var(--blue-50);border-radius:999px;padding:2px 8px;flex:none}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:var(--r-sm)}
.tabs{display:flex;padding:8px 14px 0;gap:4px;border-bottom:1px solid var(--border)}
.tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:8px 4px 10px;cursor:pointer;margin-bottom:-1px}
.tabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.wlist{padding:10px 14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.wlist .empty{text-align:center;padding:16px 0}
.wrow{display:grid;grid-template-columns:36px 1fr;gap:8px 10px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);animation:msgin .2s ease-out both}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-50);color:var(--primary);font-weight:600;display:grid;place-items:center;font-size:14px;flex:none}
.wrow .wi{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.wrow .wi b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow small{font-size:12px;color:var(--muted)}
.wrow .wa{grid-column:1/-1;display:flex;gap:8px}
.wrow .wa .btn{flex:1;min-height:40px}
.pbody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column} /* VIS-01: daftar + kebijakan satu bidang gulir, tanpa scroll bersarang */
.pbody .plist,.pbody .wlist{flex:none;overflow:visible}
.pfoot{margin-top:auto;padding:12px 14px;border-top:1px solid var(--border);flex:none}
.pfoot .pact{margin-top:10px;align-self:flex-start;padding:8px 8px;min-height:44px} /* VIS-07: pengelola izin unduh chat = aksi teks, bukan chip */
/* saklar (buat rapat, panel moderator) */
.switch{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);cursor:pointer}
.switch>span:not(.tipb){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px} /* VIS-01: .tipb juga span — jangan ikut melar */
.switch small{font-size:12.5px;color:var(--muted)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:44px;height:26px;border-radius:999px;background:var(--border2);position:relative;transition:background .2s;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s}
.switch input:checked+i{background:var(--primary)}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--primary);outline-offset:2px}

@media (max-width:900px){ /* tablet: kolom intro terlalu sempit untuk headline 46px -> tumpuk, hero dipadatkan agar kartu Gabung cepat terlihat */
  .hero{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px 24px 32px;align-content:start}
  .lockup{width:230px;margin-bottom:18px}
  .intro h1{font-size:34px}
  .lead{max-width:none;margin-top:12px}
  .note{margin-top:18px}
}
@media (max-width:760px){
  .topnav{height:60px;padding:0 16px;gap:8px}
  .pbrand .sandya{width:84px}
  .pcap,.topnav .btn.ghost span,.top .btn.ghost span{display:none}
  .topnav .btn.ghost{padding:0 10px}
  .topnav .btn{padding:0 12px}
  #hdr-user{display:none}          /* nama pindah ke dalam menu (.mname) agar topnav muat satu baris */
  .menu .mname{display:block}
  .hero{grid-template-columns:minmax(0,1fr);gap:26px;padding:16px 16px 28px;align-content:start}
  .lockup{width:190px;margin-bottom:14px}
  .intro h1{font-size:30px}
  .lead{display:none}  /* mobile: hero ringkas, lead memakan tinggi */
  .note{margin-top:14px}
  .card.join,.gate-card,.card.create{padding:22px}
  .card.join h2,.gate-card h2,.card.create h2{font-size:24px}
  .btn.go{width:44px;min-height:44px}
  .menu.top{inset:66px 16px auto auto}
  .ftr{padding:12px 16px 20px;justify-content:center}
  .pj-inner{padding:12px 16px 24px;justify-content:flex-start}
  .pj-grid{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .card.pre{padding:22px}
  .card.pre h1{font-size:24px}
  .recs li{flex-wrap:wrap;gap:4px 12px}
  .recs li a.mono{flex-basis:100%}
  .recs li span{flex:1}
  .recs li span{text-align:left}
  #meet.open{grid-template-columns:1fr}
  #meet.open .body{display:none} /* HP: panel memakai seluruh lebar, toolbar tetap */
  .panel{grid-column:1;grid-row:2;width:auto;justify-self:stretch;margin:0 8px 6px}
  #meet.open .panel{grid-row:2/4}
  .topbar{height:54px;gap:8px;padding:0 10px}
  .topbar .mark{height:26px;width:26px}
  .topbar .room{font-size:14px}
  .topbar .meta{font-size:10.5px;gap:6px}
  .adm span,.hb .lb{display:none}
  .hb{padding:0;min-width:44px;justify-content:center}
  .hb.pill{padding:0 8px}
  .grid.speaker{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 96px}
  .grid.speaker .strip{flex-direction:row;overflow-x:auto;scrollbar-width:none} /* HP: geser jari, scrollbar disembunyikan */
  .grid.speaker .strip::-webkit-scrollbar{display:none}
  .grid.speaker .strip .t{flex:0 0 150px;min-height:0}
  #toasts{bottom:88px}
  .grid.speaker>.t.portrait .v{width:min(100%,calc(100cqh * var(--ar)));aspect-ratio:var(--ar)}
  .grid.speaker>.t.portrait video{object-fit:cover}
}
@media (max-width:359px){ /* ponsel kecil (SE): tombol Masuk jadi ikon saja agar topnav tidak terpotong */
  .card.join,.gate-card,.card.create,.card.pre{padding:20px}
  .card.join h2,.gate-card h2,.card.create h2,.card.pre h1{font-size:22px}
  #hdr-login span{display:none}
  .topnav .btn{padding:0 10px}
}
@media (max-width:600px){ /* ponsel sempit: Mikrofon, Kamera, Papan tulis, Tata letak, Lainnya, Keluar tetap terlihat (A-02); sisanya di Lainnya */
  #meet{--tbh:74px}
  .toolbar{padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
  .dock{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;max-width:430px;gap:2px;padding:4px} /* VIS-02: enam slot sama lebar, ikon/label/tinggi seragam */
  .m-hide,.tbg .caret{display:none!important}
  .m-only:not([hidden]){display:flex!important}
  .tbg{display:flex;min-width:0}
  .tbg .tb{border-radius:var(--r-md)}
  .tb,.tb.leave{min-width:0;width:100%;padding:3px 1px;font-size:9px;height:50px;gap:2px;border-radius:var(--r-md)}   /* S4.7/I-12: 56->50 px */
  .tb .ic{width:22px;height:22px}
  .tb .lb{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tb.off .lb::after{content:""} /* HP: slot sempit — keadaan mati sudah ditunjukkan ikon dicoret + latar merah */
  .sep{display:none}
  .menu{inset:auto auto 92px 50%}
  .menu.list button{padding:11px 12px;font-size:14px}
  .present{gap:6px;padding:4px 6px 4px 10px}
  .present b{font-size:12px}
  .present .paud{padding:3px 5px}
  .present .paud span{display:none}   /* S4.7/I-10: HP tegak — status suara cukup ikon (nama aksesibel di aria-label) agar judul tidak terpotong */
}
@media (min-width:601px) and (max-width:860px){ /* tablet tegak: dock 13 kontrol butuh ~850px, jadi Lainnya & Keluar jatuh di luar layar.
  Pakai mekanisme yang sudah ada: kontrol sekunder (Bagikan layar, Obrolan, Peserta, Angkat tangan, Rekam) pindah ke menu Lainnya,
  sementara Mikrofon, Kamera, Papan tulis, Tata letak, Lainnya dan Keluar tetap di dock (A-02). Ukuran tombol tidak dikecilkan seperti ponsel. */
  .m-hide{display:none!important}
  .m-only:not([hidden]){display:flex!important}
}
@media (min-width:861px) and (max-width:960px){ .tb{min-width:56px;padding:4px 4px} .dock{gap:2px} } /* VIS-02/04: dock penuh (13 kontrol + 2 caret moderator = 898px) harus muat di 861–960 px tanpa melempar kontrol ke Lainnya */
@media (max-width:340px){ .tb .lb{display:none} .tb{height:50px} #meet{--tbh:74px} } /* hanya ponsel sangat sempit yang ikon saja; 360 masih memuat label */
@media (max-height:500px) and (min-width:500px) and (orientation:landscape){ /* HP horizontal: header 44 px satu baris, stage membesar; bilah kontrol tetap di dalam layar */
  #meet{--tbh:66px}
  .topbar{height:44px;padding:0 max(8px,env(safe-area-inset-left,0px)) 0 max(8px,env(safe-area-inset-right,0px));gap:8px}
  .topbar .mark{height:24px;width:24px}
  .topbar .mt{flex-direction:row;align-items:baseline;gap:8px}
  .topbar .room{font-size:14px}
  .adm span,.hb .lb{display:none}   /* S4.7/I-12: ikon "Persetujuan aktif" tetap tampil (teksnya di title) */
  #tb-chat.m-hide,#tb-people.m-hide{display:flex!important}   /* S4.7/I-12: lebar mendatar cukup -> Chat & Peserta dengan badge-nya di dock */
  #more [data-click="#tb-chat"],#more [data-click="#tb-people"]{display:none!important}
  .hb{padding:0;min-width:44px;justify-content:center;height:38px}
  .hb.pill{padding:0 8px}
  .toolbar{padding:4px 8px 6px}
  .dock{padding:4px;gap:3px}
  .tb{height:50px;min-width:56px;font-size:9px;gap:3px}
  .tb.leave{min-width:56px}
  .tb .ic{width:22px;height:22px}
  .banner.on{transform:translate(-50%,44px)}
  .banner.endsoon.on{transform:translate(-50%,44px)}
  #banner.on~.endsoon.on{transform:translate(-50%,88px)}
  #toasts{bottom:72px}
  .menu{max-height:calc(100dvh - 80px);inset:auto auto 74px 50%}
  .menu.list button{padding:9px 12px;font-size:14px} /* VIS-02: HP mendatar — baris menu lebih padat, muat lebih banyak sebelum gulir */
  .grid.speaker{grid-template-columns:minmax(0,1fr) 150px}
  .pj-inner{padding:6px 16px 10px;gap:6px;justify-content:flex-start}
  .pj-grid{gap:14px;align-items:start}
  .card.pre{padding:14px 16px}
  .card.pre h1{font-size:18px;margin-top:4px}
  .card.pre>.hint,.pv-foot,.step{display:none}
  .flabel{margin:10px 0 6px}
  .in.soft{min-height:42px;padding:8px 10px}
  .card.pre .btn.big{margin-top:12px;min-height:44px}
  .policy{margin-top:10px;padding:8px 10px}
  .present{top:6px;padding:4px 6px 4px 10px}
  .present b{font-size:12px}
}
.recorder .banner,.recorder .present,.recorder .panel,.recorder #pop-leave{display:none!important} /* mode perekam Jibri: hanya grid video yang direkam, tanpa chrome */
.recorder .topbar,.recorder .toolbar{height:0!important;min-height:0;padding:0;border:0;overflow:hidden;opacity:0;pointer-events:none} /* tetap di grid (baris 0) agar .body tetap di baris tengah, tapi tak terlihat */
.recorder #meet{grid-template-rows:0 minmax(0,1fr) 0;grid-template-columns:minmax(0,1fr) 0}
body.recorder,.recorder #meet,.recorder .body{background:#0b1220}
.recorder .grid{padding:16px}
@media (prefers-reduced-motion:reduce){
  .spin,.t,.t.speaking .v,.card,.msg,.t .hand,.panel,.toast,dialog[open] .card,dialog[open]::backdrop,.menu:popover-open,.recs li,.t.out,.grid.speaker .strip .t.new{animation:none!important}
  .banner,.tb,.btn{transition:none!important}
}

/* ===== req v2 (§2 langseg, §4 people picker, §6 akses) ===== */
.langseg{padding:2px;gap:1px}
.langseg button{padding:5px 9px;font-size:12px;font-weight:700;min-width:34px}
#c-internal{display:flex;flex-direction:column;margin-top:2px}
#c-access{align-self:stretch;display:flex;margin:2px 0 4px}
#c-access button{flex:1}
.picker{position:relative}
.picker .results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:240px;overflow-y:auto;padding:4px}
.picker .res{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.picker .res:hover{background:var(--blue-50)}
.picker .res .av{width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--primary);font-weight:600;font-size:13px;display:grid;place-items:center;flex:none}
.picker .res .ri{min-width:0;display:flex;flex-direction:column}
.picker .res .ri b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker .res .ri small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips:empty{margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;font-size:13px;max-width:100%}
.chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip small{color:var(--muted);font-size:11.5px}
.chip button{width:22px;height:22px;border:0;background:none;color:var(--muted);border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.chip button:hover{background:var(--danger-bg);color:var(--danger)}
.chip .ic{width:14px;height:14px}
.langseg button[aria-pressed=true]{background:var(--surface);color:var(--primary);font-weight:700;box-shadow:var(--shadow-sm)}

/* §11 avatar di Pengaturan */
.avatar-edit{display:flex;gap:14px;align-items:center;margin:2px 0 6px}
.avatar-prev{width:64px;height:64px;border-radius:50%;background:var(--blue-50) center/cover no-repeat;color:var(--primary);font-weight:600;font-size:22px;display:grid;place-items:center;flex:none;border:1px solid var(--border)}
.avatar-prev.img{color:transparent}
.up-btn{cursor:pointer;display:inline-flex}
#s-avatar-row .hint{margin-top:6px}
#s-avatar-row .err{margin-top:4px}
/* §8 mode rekam */
.recmodes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
.recmode{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;position:relative;text-align:center;font-size:13px;font-weight:600}
.recmode input{position:absolute;opacity:0;inset:0;cursor:pointer}
.recmode .rm-i{width:36px;height:36px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;color:var(--text2)}
.recmode.on{border-color:var(--primary);background:var(--blue-50);color:var(--primary)}
.recmode.on .rm-i{background:var(--primary);color:#fff}
.recmode.disabled{opacity:.65;cursor:not-allowed}
.recmode.disabled input{cursor:not-allowed}
.recmode .soon{font-size:10.5px;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:1px 7px;border-radius:999px}
/* §12 avatar AFK di tile saat kamera mati (avatar di atas inisial, di bawah video live) */
.t .afk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:none}
.t.hasafk .afk{display:block}
.t video{z-index:2}
.t.hasafk .v:has(>video.hidden)::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(5,12,25,.35));z-index:1;pointer-events:none} /* vignette halus hanya di dalam kotak tile & hanya saat kamera mati (VIS-03: dulu di .t = bidang abu di luar tile) */
.t.hasafk.local video:not(.hidden)~.afk,.t video:not(.hidden)~.afk{display:none} /* video hidup: sembunyikan avatar */

/* RC-06: gambar off-camera (aset terpisah dari avatar) */
/* Tombol "Unggah" (label berisi ikon 16px) dan "Hapus" (teks saja) tadinya kotak inline yang
   menempel: beda tinggi 2px, beda posisi karena sejajar baseline, dan tanpa jarak sama sekali.
   Satu baris flex membuat keduanya sejajar dan sama tinggi; hint/err turun ke baris sendiri. */
.ae-act{min-width:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.ae-act>.hint,.ae-act>.err{flex:1 0 100%;margin:0}
.offcam-edit{display:flex;gap:14px;align-items:flex-start;margin:2px 0 6px}
.offcam-prev{width:112px;height:63px;border-radius:10px;background:var(--surface2) center/cover no-repeat;border:1px solid var(--border);flex:none}
.offcam-prev.img{border-color:var(--border2)}
#s-offcam-row .hint{margin-top:6px}
.t .afk{object-fit:contain;background:#0b1220}      /* gambar off-camera: jaga proporsi, jangan stretch */
.t.cover .afk{object-fit:cover}
/* RC-06: penanda kamera mati pada tile (tetap jelas walau ada gambar off-camera) */
.t .camoff{display:none;position:absolute;right:10px;top:10px;z-index:3;width:26px;height:26px;border-radius:8px;background:rgba(5,15,28,.62);color:#e2e8f0;place-items:center;backdrop-filter:blur(4px)}
.t video.hidden~.camoff{display:grid}
.t .camoff .ic{width:16px;height:16px}
/* RC-08: mode terkunci selama rekaman berjalan */
.recmodes.locked{opacity:.6}
.recmodes.locked .recmode{cursor:not-allowed}

/* ---------- batch 5 (U-12, U-13, U-14, U-17, U-27) ---------- */
/* U-27: indikator rekaman di tengah header rapat yang sudah ada — bukan lapisan mengambang di atas wajah/share/dock */
.topbar{position:relative}
.hcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;pointer-events:none;max-width:46%}
.recdot span{letter-spacing:0;font-weight:600}
/* U-12: meter level (data aktual, bukan hiasan) */
.meter{height:8px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;margin:2px 0}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#22c55e)}
.mnote{display:block;font-size:11.5px;line-height:1.35;color:var(--muted);margin:0 0 2px}
.mnote:empty{margin:0}
.mscale{display:flex;justify-content:space-between;font-size:10px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 6px}
#p-flip{margin:8px 0 4px}
#p-test{align-self:flex-start;margin-top:4px}
/* U-13: baris zoom kamera */
.zrow{display:flex;align-items:center;gap:6px}
.zrow button:not(.btn){width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:16px;line-height:1;cursor:pointer;flex:none}
.zrow input[type=range]{flex:1;min-width:0;accent-color:var(--primary)}
.zrow [disabled]{opacity:.45;cursor:not-allowed}
.zval{font-size:12px;font-variant-numeric:tabular-nums;min-width:40px;text-align:center;color:var(--text2)}
/* U-14 & U-17: satu komponen bantuan hover/focus/tap. pointer-events:none -> tidak pernah menutup atau menangkap klik kontrol di bawahnya */
.tipb{position:relative;width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--border2);background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:help;display:grid;place-items:center}
.tipb:hover,.tipb:focus-visible{color:var(--primary);border-color:var(--primary)}
/* VIS-01: di baris kebijakan bantuan = lingkaran 22px yang digambar radial-gradient pada kotak tap 44x44 (margin -11 agar baris tidak meninggi);
   position static -> tip diposisikan terhadap .switch (lebar baris), tidak terpotong tepi panel */
.switch .tipb{position:static;width:44px;height:44px;margin:-11px;border:0;border-radius:50%;background:radial-gradient(circle at center,var(--surface) 0 10px,var(--border2) 10.5px 11px,transparent 11.5px)}
.switch .tipb:hover,.switch .tipb:focus-visible{background:radial-gradient(circle at center,var(--blue-50) 0 10px,var(--primary) 10.5px 11px,transparent 11.5px)}
.switch .tipb:focus-visible{outline:2px solid var(--primary);outline-offset:-8px}
.switch .tiptext{right:8px;bottom:calc(100% + 4px)}
.tiptext{position:absolute;right:0;bottom:calc(100% + 8px);width:max-content;max-width:min(280px,72vw);white-space:pre-line;text-align:left;font-size:12px;font-weight:500;line-height:1.45;letter-spacing:0;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;z-index:9}
.tipb:hover .tiptext,.tipb:focus-visible .tiptext,.tipb.on .tiptext,.sig:hover .tiptext,.sig:focus-visible .tiptext,.sig.on .tiptext{opacity:1;visibility:visible}
/* U-17: ikon sinyal jadi tombol (hover/focus/tap) + menu tile peserta lain */
.sig{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.t .sig .tiptext{font-variant-numeric:tabular-nums}
.tmenu{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:9px;border:0;background:rgba(5,15,28,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.5;transition:opacity .15s;z-index:3}
.tmenu .ic{width:18px;height:18px}
.t:hover .tmenu,.tmenu:focus-visible,.tmenu.open{opacity:1}
@media (hover:none){.tmenu{opacity:1}}
.t:has(.tmenu) .hand{right:46px}
#pop-tile .ttb{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
#pop-tile .ttb:hover{border-color:var(--primary);color:var(--primary)}
#pop-tile .ttb.on{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}
#pop-tile input[type=range]{width:100%;accent-color:var(--primary)}
#plist .hnd.sp{color:var(--muted)}
@media (max-width:760px){.recdot span{display:none}}

/* U-04: layar sangat lebar — area konten dan kolom kartu ikut acuan LENSA (1180 / 430) */
@media (min-width:1700px){.hero{width:min(1180px,100%);grid-template-columns:minmax(0,1fr) minmax(360px,430px)}}
.btn.sm.kick{color:var(--danger)}
.plist .pvol{width:100%;flex-basis:100%;accent-color:var(--primary);margin:2px 0 0}  /* FQ-07: volume lokal per peserta di daftar */

/* F1: izin peserta */
.plist .capb{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--blue-50);color:var(--primary);flex:none}
.plist .capb .ic{width:14px;height:14px}
.card.caps{width:min(92vw,440px)}
.card.caps #caps-q{margin:10px 0 8px}
.caplist{list-style:none;margin:0;padding:0;max-height:min(50vh,360px);overflow:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.caplist li{border-bottom:1px solid var(--border)}
.caplist li:last-child{border-bottom:0}
.caplist li.on{background:var(--blue-50)}
.caplist .chk{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0;cursor:pointer}
.caplist .chk span{flex:1;font-weight:600}
.caplist .chk small{color:var(--muted);font-size:12px}
.present{max-width:calc(100vw - 16px)}   /* S4.7/I-10: satu baris status; rincian suara di "?" */
.present b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.present .paud{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--border)}
.present .paud.on{color:var(--primary);background:var(--blue-50);border-color:var(--primary)}
.present .paud .ic{width:14px;height:14px;color:inherit}
.present .tiptext{top:calc(100% + 8px);bottom:auto;right:0}
.present .btn.danger{flex:none;font-weight:600}
#tb-pin[aria-pressed="true"]{color:var(--primary)}

/* F3/D16 clipping + D21 Mode Ringan */
.meter.clip i{background:#dc2626}
.clipn{color:#dc2626;font-weight:600}
.recs .nodl{font-size:12px;color:var(--muted)}
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important;box-shadow:none!important;backdrop-filter:none!important;text-shadow:none!important}
html.lite .t.speaking .v{border-color:var(--speak)} /* penanda bicara tetap ada (border), tanpa animasi */

/* ---------- S4.5 UAT convergence ---------- */
/* §4 penanda bicara: border biru tegas + cincin 2px, STATIS. Animasi box-shadow lama me-repaint tile tiap frame selama orang bicara
   (mahal di laptop lemah, bersaing dengan efek kamera/encode) dan terasa berkedip; packet: border biru sudah cukup. */
.t.speaking .v{border-color:var(--speak);box-shadow:0 0 0 2px var(--speak);animation:none}
/* §10 ikon kamera mati pindah ke tag nama (kiri bawah): tidak bertabrakan dengan menu … (kanan atas) dan badge peran (kiri atas) */
.t .nm .camoff{position:static;display:none;width:auto;height:auto;background:none;backdrop-filter:none;color:#fca5a5;margin-right:4px;flex:none}
.t .v:has(>video.hidden) .nm .camoff{display:inline-flex}
.t.desktop .nm .camoff{display:none}
.t .nm .camoff .ic{width:14px;height:14px}
/* §4.2 tanda pin di tag nama */
.t .nm .pinb{display:none;color:#93c5fd;margin-right:4px;flex:none}
.t.pinned .nm .pinb{display:inline-flex}
.t .nm .pinb .ic{width:13px;height:13px}
/* §7.2 tombol layar penuh presentasi (tile layar tidak punya menu …) */
.tfs{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:9px;border:0;background:rgba(5,15,28,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.6;transition:opacity .15s;z-index:3}
.tfs .ic{width:18px;height:18px}
.t:hover .tfs,.tfs:focus-visible{opacity:1}
@media (hover:none){.tfs{opacity:1}}
.grid .strip .tfs{display:none}
.t:fullscreen{background:#000;width:100vw;height:100vh;display:grid;place-items:center}
.t:fullscreen .v{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;animation:none}
.t:fullscreen video{object-fit:contain}
.t:-webkit-full-screen{background:#000;width:100vw;height:100vh}
.t:-webkit-full-screen .v{width:100%;height:100%;border-radius:0;border:0}
.t:-webkit-full-screen video{object-fit:contain}
/* §5.2 pill pembicara di atas materi yang dibagikan: kecil, tidak menutupi tag nama (kiri bawah) & sinyal (kanan bawah) */
.spill{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;max-width:min(64%,420px);padding:5px 12px;border-radius:999px;background:rgba(5,15,28,.74);color:#fff;font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 0 0 1.5px var(--speak)}
.grid .strip .spill{display:none}
.t:fullscreen .spill{top:max(12px,env(safe-area-inset-top))}
/* §9.2 izin anggota mengundang tamu: di menu Bagikan moderator (konteks undangan), hanya saat tamu ON */
#pop-invite .switch.inv{margin:6px 4px 2px;padding:10px 12px;max-width:320px}
#pop-invite .switch.inv b{font-size:13px}
#pop-invite .switch.inv small{font-size:11.5px;line-height:1.35}
/* §4.3 saklar "Ikuti pembicara" di menu Tampilan */
.menu .vfollow{margin-top:6px;padding:10px 12px;gap:10px}
.menu .vfollow b{font-size:13.5px;font-weight:600}
/* §10 header keluarga LENSA: isi header di shell terpusat (maks 1440, gutter 40 desktop), tidak menempel tepi viewport lebar */
.topnav{padding-inline:max(40px,calc((100% - 1440px) / 2 + 40px))}
@media (max-width:860px){.topnav{padding-inline:26px}}
@media (max-width:760px){.topnav{padding-inline:20px}}
@media (max-width:480px){.topnav{padding-inline:16px}}
@media (max-width:359px){.topnav{padding-inline:14px}}
/* §10 kontrol global ringkas: bahasa (IN/EN) & notifikasi browser sebagai ikon header dengan status */
.topnav .btn.hicon{padding:0 12px;gap:6px}
.hicon .lcode,.hb .lcode{font-size:12px;font-weight:700;letter-spacing:.04em}
.hnotif .ic.off{display:none}
.hnotif[data-st=denied] .ic.on{display:none}
.hnotif[data-st=denied] .ic.off{display:inline-block}
.hnotif[data-st=granted]{color:var(--primary)}
.topnav .btn.ghost.hnotif[data-st=granted]{color:var(--primary)}
.hnotif[data-st=default]::after{content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px var(--bg)}
.hnotif{position:relative}
#meet-lang{padding:0 8px}
@media (max-width:480px){.hb.hx{display:none}}   /* HP: header rapat hanya menyisakan tema/Bagikan/peserta; bahasa & notifikasi tetap di beranda */
/* §10 blok notifikasi beranda: satu blok ringkas di dasar kartu, jauh dari "Buat Rapat Baru" */
.notif-row{margin-top:40px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);gap:0}
.notif-row .nq{display:inline-flex;align-items:center;gap:6px}
.notif-row .ic{width:16px;height:16px;color:var(--primary);flex:none}
.notif-row .link-btn{min-height:44px;padding:6px 10px}   /* target tap >= 44 px (VIS-09) */
/* §10 placeholder contoh lebih kecil & abu dari isian; font input tetap 16px supaya iOS tidak auto-zoom */
.in::placeholder{font-size:.84em;color:#94a3b8}
/* §8.3 skala gain: label di posisi tick yang sama (0 dB = 80% lintasan); inset = setengah lebar thumb */
.zrow.grow{align-items:flex-start}
.gwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.gwrap input{width:100%;margin:6px 0 0}
.zrow.grow .zval{margin-top:4px}
.gscale{position:relative;display:block;height:14px;margin:0 8px 4px;font-size:10px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.gscale span{position:absolute;left:calc(var(--p) * 100%);transform:translateX(-50%);white-space:nowrap}
.gscale span:first-child{transform:none}
.gscale span:last-child{transform:translateX(-100%)}
.gscale .unity{color:var(--text2);font-weight:600}
/* §8.1 status dibisukan tegas */
.mnote.muted{color:#dc2626;font-weight:600}
/* §6 profil kualitas berbagi di menu Bagikan layar */
#pop-share .ss-prof{display:flex;margin:2px 0}
#pop-share .ss-prof button{flex:1;justify-content:center;padding:6px 10px;font-size:13px;font-weight:500;white-space:nowrap;gap:0} /* S4.7/I-01: .menu.list button (15px, 12/14) tidak lagi membesarkan segmen */
#pop-share .ss-prof button.on{font-weight:600}
#more .nocap{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted)}   /* S4.7/I-04 */
/* S4.7/I-08: baris izin/coret di menu Bagikan & Papan tulis = teks sekunder, lebih kecil dari aksi utama */
#pop-share button[data-cap],#pop-share #ann-open,#pop-wb button[data-cap]{font-size:13px;padding:8px 10px;gap:10px}
#pop-share button[data-cap] .ic,#pop-share #ann-open .ic,#pop-wb button[data-cap] .ic{width:18px;height:18px}
#pop-share .ss-note{display:block;margin:4px 2px 8px;font-size:12px;color:var(--muted);max-width:300px}
/* ---------- S4.8/S48-09 micro UI: menu & pengaturan lebih padat. Posisi, isi, dan logic tidak berubah; HP tetap memakai @media di atas ---------- */
.menu.list{width:min(92vw,288px);padding:6px;gap:1px}
@media (min-width:601px) and (min-height:501px){ .menu.list button{gap:10px;padding:8px 10px;font-size:13.5px;min-height:36px} }   /* rapat hanya di layar lebar; HP tegak/mendatar tetap memakai target sentuh di @media atas */
.menu.list button>.ic{width:18px;height:18px;flex:none}
.menu.hdr{width:min(92vw,296px)}
.menu .mh{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;font-size:13px;font-weight:700;color:var(--text)}
.menu .mh .ic{width:18px;height:18px;color:var(--primary)}
.menu.list .perm{margin:4px 2px 2px;width:auto;background:var(--surface2);border:1px solid var(--border)}   /* izin = baris pilihan bernilai (mis. "Hanya moderator"), dialog izin tetap sama */
.menu.list .perm>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.menu.list .perm small{font-size:11.5px;color:var(--muted);font-weight:500}
.menu.list .perm b{font-size:13px;font-weight:600;color:var(--text)}
.menu.list .perm .chev{width:16px;height:16px;color:var(--muted);transform:rotate(-90deg)}
#pop-share .ss-prof{margin:0 2px;align-self:stretch}
#pop-share .ss-note{margin:4px 4px 4px;font-size:11.5px}
.pfoot{padding:10px 12px}
.pfoot .sethead{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text2);margin:0 2px 4px}
.pfoot .sethead .ic{width:16px;height:16px}
.switch.srow{gap:10px;padding:8px 4px;border:0;border-radius:0;background:none}
.pfoot .srow+.srow{border-top:1px solid var(--border)}
.switch.srow>.ic{width:18px;height:18px;color:var(--muted);flex:none}
.switch.srow>span:not(.tipb){font-size:13px;gap:0}
.switch.srow b{font-weight:600;line-height:1.3}
.switch.srow small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.switch.srow i{width:36px;height:20px}
.switch.srow i::after{top:2px;left:2px;width:16px;height:16px}
.switch.srow input:checked+i::after{transform:translateX(16px)}
.pfoot .pact{margin-top:4px}
#pop-invite .switch.inv.srow{margin:4px 0 0;padding:8px 10px;max-width:none;border-top:1px solid var(--border)}