:root {
  color-scheme: dark;
  font-family: Inter,Segoe UI,Arial,sans-serif;
}
* { box-sizing:border-box }
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at top,#123b69,#06162d 55%);
  color:#eef6ff;
}
main {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.card {
  width:min(480px,100%);
  background:rgba(9,34,68,.97);
  border:1px solid #315f91;
  border-radius:24px;
  padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:26px;
}
h1 { margin:4px 0 0;font-size:25px }
.eyebrow {
  margin:0;
  color:#75b9ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}
.status {
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:700;
}
.offline { background:#56252a;color:#ffc0c5 }
.connecting { background:#55471d;color:#ffe69a }
.online { background:#153f32;color:#9ef3ca }
label {
  display:block;
  margin-bottom:16px;
  color:#bed0e7;
  font-size:14px;
}
input {
  width:100%;
  margin-top:7px;
  padding:13px 14px;
  border:1px solid #3a628c;
  border-radius:11px;
  background:#071d38;
  color:white;
  font-size:16px;
}
button {
  border:0;
  border-radius:11px;
  padding:12px 15px;
  background:#284b70;
  color:white;
  font-weight:700;
  cursor:pointer;
}
button:disabled { opacity:.4;cursor:not-allowed }
.primary { width:100%;background:#1784e8 }
.secondary { width:100%;margin-top:18px }
.answer { background:#168554 }
.danger { background:#a83c4b }
.note { color:#8faac7;font-size:12px }
.callbox {
  padding:18px;
  border:1px solid #2f5e8d;
  border-radius:14px;
  background:#071d38;
  text-align:center;
}
.callbox p { margin:4px }
.caller { color:#80bfff;font-size:18px;font-weight:700 }
.actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}
.keypad {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.keypad button { font-size:18px }

.workspace-name{margin-bottom:16px;padding:13px 14px;border:1px solid #3a628c;border-radius:11px;background:#071d38;color:#eef6ff;font-size:16px;font-weight:650}

.contact-card{position:fixed;right:20px;bottom:20px;width:min(350px,calc(100vw - 40px));padding:20px 44px 20px 20px;border:1px solid #6dabeb;border-radius:16px;background:#10345c;color:#edf7ff;box-shadow:0 18px 55px #0009;z-index:100}.contact-card small{display:block;color:#8cc7ff;font-weight:800;letter-spacing:.08em;margin-bottom:8px}.contact-card strong{display:block;font-size:18px}.contact-card span{display:block;margin:5px 0 13px}.contact-card a{color:#aee0ff;font-weight:700}.contact-card-close{position:absolute;right:9px;top:8px;padding:5px 10px;background:transparent;font-size:22px}