:root {
  color-scheme: dark;
  --background: #07111f;
  --surface: rgba(15, 31, 51, 0.92);
  --surface-light: #162b45;
  --line: rgba(159, 190, 220, 0.18);
  --text: #eef7ff;
  --muted: #91a8bd;
  --cyan: #36d7c4;
  --blue: #4d91ff;
  --green: #43d38b;
  --red: #ff647c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(45, 117, 208, 0.26), transparent 34rem),
    radial-gradient(circle at 90% 90%, rgba(54, 215, 196, 0.14), transparent 32rem),
    var(--background);
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

.shell {
  width: min(100% - 2rem, 34rem);
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.brand-mark {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 1rem;
  color: #041117;
  background: linear-gradient(135deg, var(--cyan), #8af5e9);
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 0 1rem 2.5rem rgba(54, 215, 196, 0.2);
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.2rem; }
h2 { margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.eyebrow, .step { margin-bottom: 0.15rem; color: var(--cyan); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.status-badge {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(7, 17, 31, 0.68);
}

.status-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #62768a; }
.status-badge[data-state="connecting"] .status-dot { background: #ffbd59; box-shadow: 0 0 0 0.25rem rgba(255, 189, 89, 0.13); }
.status-badge[data-state="online"] { color: var(--text); }
.status-badge[data-state="online"] .status-dot { background: var(--green); box-shadow: 0 0 0 0.25rem rgba(67, 211, 139, 0.13); }
.status-badge[data-state="error"] .status-dot { background: var(--red); }

.panel {
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: var(--surface);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.panel-heading p:not(.step) { color: var(--muted); line-height: 1.55; }
.form-stack { display: grid; }
label { margin: 0.75rem 0 0.4rem; color: #c9d9e8; font-size: 0.8rem; font-weight: 750; }

input {
  width: 100%;
  min-height: 3.15rem;
  padding: 0 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  outline: none;
  color: var(--text);
  background: rgba(5, 15, 27, 0.76);
  transition: border-color 150ms, box-shadow 150ms;
}

input:focus { border-color: var(--cyan); box-shadow: 0 0 0 0.2rem rgba(54, 215, 196, 0.12); }

.button {
  min-height: 2.85rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.8rem;
  color: var(--text);
  background: var(--surface-light);
  font-weight: 800;
}

.button.primary { margin-top: 1rem; color: #03131b; background: linear-gradient(135deg, var(--cyan), #7de9f4); }
.button.quiet { border: 1px solid var(--line); background: transparent; }
.button.accept { color: #042117; background: var(--green); }
.button.danger { color: white; background: var(--red); }

.endpoint-note {
  display: grid;
  gap: 0.25rem;
  margin: 1.4rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: rgba(3, 12, 22, 0.38);
  font-size: 0.72rem;
}
.endpoint-note code { overflow-wrap: anywhere; color: #c8f9f3; }

.account-row, .button-row, .dial-row, .call-actions { display: flex; gap: 0.75rem; align-items: center; }
.account-row { justify-content: space-between; margin-bottom: 1.25rem; }
.account-row h2 { margin: 0; }

.incoming-card, .call-card {
  padding: 1.15rem;
  border: 1px solid rgba(54, 215, 196, 0.28);
  border-radius: 1rem;
  background: rgba(54, 215, 196, 0.07);
}
.incoming-card strong { display: block; margin-bottom: 1rem; font-size: 1.25rem; }
.button-row .button { flex: 1; }

.dial-form { margin-top: 0.5rem; }
.dial-row input { flex: 1; }
.dial-row .call-button { flex: 0 0 auto; margin: 0; }

.call-card { margin-top: 1.25rem; text-align: center; border-color: var(--line); background: rgba(5, 15, 27, 0.58); }
.call-card > strong { display: block; font-size: 1.45rem; }
.call-state { margin: 0.35rem 0; color: var(--muted); }
.call-card time { display: block; margin: 0.5rem 0 1rem; font-variant-numeric: tabular-nums; font-size: 1.85rem; font-weight: 300; }
.call-actions { justify-content: center; margin: 1rem 0 1.4rem; }

.round-button {
  display: grid;
  width: 4.7rem;
  height: 4.7rem;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-light);
}
.round-button span { font-size: 1.3rem; }
.round-button small { font-size: 0.62rem; }
.round-button[aria-pressed="true"] { color: #03131b; background: #f0c968; }
.round-button.hangup { background: var(--red); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.keypad button {
  display: grid;
  min-height: 3rem;
  place-items: center;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--text);
  background: rgba(23, 45, 70, 0.65);
  font-size: 1.05rem;
  font-weight: 750;
}
.keypad small { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.08em; }

.message { min-height: 1.5rem; margin: 0.9rem 0 0; color: var(--muted); text-align: center; font-size: 0.82rem; }
.message.error { color: #ff9aab; }
[hidden] { display: none !important; }

@media (max-width: 28rem) {
  .shell { width: min(100% - 1rem, 34rem); padding-top: 1rem; }
  .masthead { grid-template-columns: auto 1fr; }
  .status-badge { grid-column: 1 / -1; justify-self: start; }
  .panel { padding: 1.1rem; }
  .endpoint-note { margin: 1.3rem -1.1rem -1.1rem; padding-inline: 1.1rem; }
}