:root {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  color: #153247;
  background: #eff5f4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px 40px;
  background:
    radial-gradient(circle at 15% 5%, rgba(223, 183, 92, .2), transparent 24rem),
    radial-gradient(circle at 90% 15%, rgba(30, 128, 119, .16), transparent 30rem),
    #eff5f4;
}
button, a { -webkit-tap-highlight-color: transparent; }
.call-page { width: min(100%, 520px); margin: 0 auto; }
.intro { text-align: center; margin-bottom: 20px; }
.back-link { display: inline-block; margin-bottom: 20px; color: #31566b; text-decoration: none; font-size: .9rem; }
.college-mark { display: block; color: #967024; font-weight: 700; letter-spacing: .04em; }
.intro h1 { margin: 8px 0; color: #123f4d; font-size: clamp(1.8rem, 7vw, 2.45rem); }
.intro p { margin: 0; color: #58717c; line-height: 1.7; }
.call-card, .help-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(42, 90, 101, .14);
  box-shadow: 0 22px 65px rgba(28, 70, 77, .12);
}
.call-card { border-radius: 30px; padding: 24px; text-align: center; }
.connection-row {
  direction: rtl;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #667d86;
  font-size: .9rem;
}
.connection-row time { margin-right: auto; color: #284957; font-variant-numeric: tabular-nums; }
.connection-dot { width: 10px; height: 10px; border-radius: 50%; background: #8da0a8; box-shadow: 0 0 0 5px rgba(141,160,168,.12); }
.connection-dot.connecting { background: #d6952f; box-shadow: 0 0 0 5px rgba(214,149,47,.14); }
.connection-dot.connected { background: #17855f; box-shadow: 0 0 0 5px rgba(23,133,95,.14); }
.connection-dot.error { background: #c5474e; box-shadow: 0 0 0 5px rgba(197,71,78,.14); }
.receiver {
  width: 86px;
  height: 86px;
  margin: 26px auto 18px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: white;
  background: linear-gradient(145deg, #1d7c72, #123f4d);
  box-shadow: 0 18px 34px rgba(18,63,77,.22);
}
.receiver span { font-size: 2.2rem; transform: rotate(-18deg); }
.call-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.call-card > p { line-height: 1.7; }
#call-message { min-height: 54px; color: #607782; margin: 0 auto 18px; }
.dialed-screen {
  width: min(100%, 320px);
  min-height: 82px;
  margin: 4px auto 18px;
  padding: 12px 18px;
  border: 1px solid #cbd9d8;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fbfa, #eaf2f0);
  box-shadow: inset 0 2px 8px rgba(18, 63, 77, .07);
}
.dialed-screen[hidden] { display: none; }
.dialed-label { display: block; margin-bottom: 5px; color: #71868e; font-size: .75rem; }
.dialed-screen output {
  display: block;
  min-height: 34px;
  overflow: hidden;
  color: #123f4d;
  font: 700 1.75rem/1.2 "Segoe UI", Tahoma, sans-serif;
  letter-spacing: .15em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialed-screen.has-input {
  border-color: #1d8a72;
  background: #e3f3ee;
  box-shadow: 0 0 0 4px rgba(29, 138, 114, .12), inset 0 2px 8px rgba(18, 63, 77, .06);
}
.web-keypad {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: 12px 18px;
  margin: 20px 0 24px;
}
.web-keypad[hidden] { display: none; }
.web-keypad button {
  width: 72px;
  height: 62px;
  border: 1px solid #d6e0df;
  border-radius: 20px;
  background: #f8fbfa;
  color: #153f4e;
  font: 600 1.35rem/1 "Segoe UI", sans-serif;
  cursor: pointer;
}
.web-keypad button:active { transform: scale(.95); background: #e5f2ef; }
.web-keypad button.pressed {
  transform: scale(.92);
  border-color: #19845f;
  background: #19845f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(25, 132, 95, .25);
}
.web-keypad button.pressed small { color: rgba(255, 255, 255, .78); }
.web-keypad small { display: block; margin-top: 6px; color: #8b9da3; font-size: .52rem; letter-spacing: .12em; }
.call-actions { display: flex; gap: 10px; }
.call-actions button { min-height: 52px; border: 0; border-radius: 16px; padding: 12px 18px; font: 700 1rem/1 "Segoe UI",Tahoma,sans-serif; cursor: pointer; }
.start-call { flex: 1; background: #19845f; color: white; }
.start-call.connecting { background: #b67d27; cursor: wait; }
.start-call.end { background: #c24149; }
.secondary-action { background: #e9f0ef; color: #294c57; }
.secondary-action.active { background: #f3dfe0; color: #9f3037; }
.audio-output-select {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #cbd9d8;
  border-radius: 14px;
  background: #f8fbfa;
  color: #294c57;
  font: 600 .9rem/1.3 "Segoe UI", Tahoma, sans-serif;
}
.audio-output-select[hidden] { display: none; }
.call-actions button:disabled { opacity: .55; cursor: not-allowed; }
.privacy-note { margin: 16px 0 0; color: #71868e; font-size: .78rem; }
.error-message { min-height: 24px; margin: 10px 0 0; color: #ad343d; font-size: .9rem; }
.help-card { margin-top: 18px; border-radius: 22px; padding: 20px 24px; }
.help-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.help-card ol { margin: 0; padding-right: 22px; color: #5c737d; line-height: 1.9; }
@media (max-width: 380px) {
  body { padding-inline: 10px; }
  .call-card { padding-inline: 14px; }
  .web-keypad { grid-template-columns: repeat(3, 66px); gap-inline: 13px; }
  .web-keypad button { width: 66px; }
  .dialed-screen output { font-size: 1.5rem; }
}