* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #eef1f5;
  color: #1d2330;
}
.phone { max-width: 380px; margin: 24px auto; padding: 0 12px; }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 14px; margin: 0 0 8px; color: #5b6475; text-transform: uppercase; letter-spacing: .04em; }
.card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.hidden { display: none; }
label { display: block; font-size: 13px; color: #5b6475; margin-bottom: 10px; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 16px; border: 1px solid #ccd3de; border-radius: 8px; background: #fff;
}
button {
  font-size: 15px; padding: 10px 14px; border: 0; border-radius: 8px;
  background: #e3e8ef; color: #1d2330; cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button.primary { background: #2f6fed; color: #fff; width: 100%; }
button.call { background: #1faa59; color: #fff; width: 100%; font-size: 17px; }
button.hangup { background: #e5484d; color: #fff; }
button.link { background: none; padding: 0; color: #2f6fed; font-size: 13px; }
.status { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.status.offline { background: #f3d6d7; color: #a4262c; }
.status.connecting { background: #fbeccc; color: #8a5a00; }
.status.online { background: #d3f1de; color: #147a3d; }
.me { font-size: 14px; margin-bottom: 10px; }
.target { font-size: 26px; text-align: center; letter-spacing: .05em; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.keypad button { font-size: 20px; padding: 14px 0; }
.row { display: flex; gap: 8px; }
.row button { flex: 1; }
.peer-label { font-size: 13px; color: #5b6475; text-align: center; }
.peer { font-size: 30px; font-weight: 600; text-align: center; margin: 6px 0 10px; }
.timer { font-size: 18px; text-align: center; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.presence { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.presence li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.presence .dev { color: #5b6475; font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #1d2330; }
.check input { width: auto; margin: 0; }
.video-box { position: relative; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 12px; aspect-ratio: 16 / 9; }
#remoteVideo { width: 100%; height: 100%; object-fit: contain; }
#localVideo { position: absolute; right: 8px; bottom: 8px; width: 30%; border-radius: 6px; border: 2px solid rgba(255,255,255,.7); transform: scaleX(-1); }
.log { font-size: 11px; max-height: 180px; overflow: auto; margin: 0; white-space: pre-wrap; color: #3a4252; }