:root {
  --bg: #0d1117; --ink: #e8edf4; --mute: #8b97a8;
  --glass: rgba(24, 31, 44, .55); --edge: rgba(255, 255, 255, .14);
  --rec: #ff2e4d; --ok: #2fd3a4; --warn: #ffb020;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; /* blok pull-to-refresh */
  background: var(--bg); color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#app { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; }

.glass {
  background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}

#remoteVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #05070b; }
.remote-idle { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .25s; }
.remote-idle p { margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--mute); font-size: 15px; }
.remote-idle.hidden { opacity: 0; }

.bar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 16px; }
.bar select { background: transparent; color: var(--ink); border: 0; font: inherit; font-weight: 600; max-width: 55%; outline: none; }
.bar select option { color: #111; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); }
.status[data-kind="ready"] .dot { background: var(--ok); }
.status[data-kind="tx"] .dot { background: var(--rec); }
.status[data-kind="rx"] .dot { background: var(--warn); }

#localPreview { position: absolute; z-index: 4; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 72px);
  width: 28vw; max-width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; transform: scaleX(-1); /* cermin */ }

.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 0 calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: linear-gradient(to top, rgba(5, 7, 11, .8), transparent); }
#hint { margin: 0; font-size: 14px; color: var(--mute); }

#ptvBtn { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--edge); background: var(--glass); cursor: pointer;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; padding: 0;
  transition: transform .08s ease, background .12s, box-shadow .12s; touch-action: none; }
#ptvBtn span { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); opacity: .85; transition: background .12s, opacity .12s; }
#ptvBtn:disabled { opacity: .4; }
#ptvBtn.rec { transform: scale(1.08); background: rgba(255, 46, 77, .22); border-color: var(--rec);
  box-shadow: 0 0 0 6px rgba(255, 46, 77, .18), 0 0 36px 10px rgba(255, 46, 77, .55); animation: glow 1s ease-in-out infinite alternate; }
#ptvBtn.rec span { background: var(--rec); opacity: 1; }
@keyframes glow { to { box-shadow: 0 0 0 10px rgba(255, 46, 77, .12), 0 0 58px 18px rgba(255, 46, 77, .75); } }

.gate { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5, 7, 11, .82); }
.gate button { color: var(--ink); font: inherit; font-weight: 600; padding: 16px 26px; border-radius: 16px; cursor: pointer; }
.gate.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { #ptvBtn.rec { animation: none; } }

/* ---- tambahan versi P2P: header dua baris + toggle mode ---- */
.bar { flex-direction: column; align-items: stretch; gap: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row input[type="text"] { min-width: 0; flex: 1; background: rgba(255, 255, 255, .07); border: 1px solid var(--edge);
  border-radius: 10px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 13px; outline: none; user-select: text; -webkit-user-select: text; touch-action: auto; }
.row input[hidden] { display: none; }
.mode { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; cursor: pointer; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.lbl { color: var(--mute); transition: color .15s; }
[data-mode="online"] .lbl-on, [data-mode="offline"] .lbl-off { color: var(--ink); font-weight: 600; }
.track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid var(--edge); }
.thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); transition: transform .18s, background .18s; }
.mode input:checked ~ .track .thumb { transform: translateX(18px); background: var(--warn); }
.mode input:focus-visible ~ .track { outline: 2px solid var(--ink); outline-offset: 2px; }
#localPreview { top: calc(env(safe-area-inset-top, 0px) + 116px); }

/* ---- mode 3-pilihan, tombol QR, lembar pairing ---- */
[hidden] { display: none !important; }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--mute); font: inherit; font-size: 13px; padding: 7px 4px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: rgba(255, 255, 255, .16); color: var(--ink); font-weight: 600; }
.qrbox { display: flex; gap: 6px; width: 100%; }
.qrbox button, .btns button { flex: 1; color: var(--ink); font: inherit; font-size: 13px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); }
.pill { position: absolute; z-index: 4; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 124px); padding: 6px 12px; border-radius: 999px; }
#localPreview { top: calc(env(safe-area-inset-top, 0px) + 124px); }
.sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 11, .82); }
.sheet .card { width: min(100%, 360px); max-height: 100%; overflow: auto; touch-action: pan-y; padding: 16px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sheet h2 { margin: 0; font-size: 17px; }
.sheet p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--mute); text-align: center; }
#qrCanvas { background: #fff; border-radius: 10px; max-width: 100%; }
#scanVideo { width: 100%; max-height: 26vh; object-fit: cover; border-radius: 12px; background: #000; }
.sheet textarea { width: 100%; resize: none; background: rgba(255, 255, 255, .07); border: 1px solid var(--edge); border-radius: 10px;
  padding: 8px 10px; color: var(--ink); font: inherit; font-size: 12px; user-select: text; -webkit-user-select: text; touch-action: auto; }
.btns { display: flex; gap: 8px; width: 100%; }