:root {
  --bg: #07111f;
  --card: rgba(12, 27, 49, 0.76);
  --line: rgba(175, 213, 255, 0.18);
  --text: #ecf6ff;
  --muted: #9eb5cb;
  --accent: #53d3a7;
  --danger: #ff5f79;
  --shadow: 0 24px 80px rgba(2, 9, 18, 0.45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Manrope', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(83, 211, 167, 0.16), transparent 30%),
    radial-gradient(circle at bottom right, rgba(90, 141, 255, 0.22), transparent 28%),
    linear-gradient(160deg, #081221 0%, #0f1f39 45%, #09111f 100%);
  color: var(--text);
}

.app-shell { position: relative; max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; }
.ambient { position: fixed; width: 240px; height: 240px; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.5; }
.ambient-one { top: -40px; left: -20px; background: rgba(83, 211, 167, 0.18); }
.ambient-two { right: -30px; bottom: 80px; background: rgba(94, 148, 255, 0.18); }
.hero, .layout, .call-screen, .incoming-banner { position: relative; z-index: 1; }
.hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-size: 12px; margin: 0 0 8px; }
h1, h2, h3, p, strong { margin: 0; }
h1 { font-size: clamp(42px, 8vw, 72px); line-height: 0.95; margin-bottom: 12px; }
.subtitle, .call-screen-subtitle { color: var(--muted); font-size: 16px; }
.layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }
.card, .incoming-banner, .call-screen-inner { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(22px); border-radius: 28px; }
.card { padding: 22px; }
.incoming-banner { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; margin-bottom: 18px; }
.card-header, .call-topbar, .presence-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.topbar-actions, .incoming-actions, .call-actions, .contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.status-pill, .presence-counter, .participant-badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); font-size: 12px; }
.status-pill.live, .presence-counter, .participant-badge.online { background: rgba(83, 211, 167, 0.14); color: #b7f8df; }
.participant-badge.left { background: rgba(255, 95, 121, 0.14); color: #ffc6cf; }
.invite-box, .presence-card, .contact-item, .participant-item, .event-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; }
.invite-box, .presence-card { padding: 16px; }
.invite-box { margin-bottom: 16px; }
.invite-box span, .input-group span, .contact-meta span, .participant-status, .event-time { display: block; color: var(--muted); font-size: 14px; }
.invite-box strong, .participant-name, .contact-meta strong { display: block; font-size: 20px; }
.input-group { display: block; }
.input-row { display: flex; gap: 10px; }
input { width: 100%; background: rgba(4, 13, 24, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 14px 16px; color: var(--text); outline: none; }
input::placeholder { color: rgba(158, 181, 203, 0.55); }
.glass-button { border: 0; border-radius: 18px; padding: 14px 18px; background: linear-gradient(135deg, var(--accent) 0%, #74e0bf 100%); color: #06131f; font-weight: 800; cursor: pointer; }
.glass-button.ghost { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.glass-button.danger { background: linear-gradient(135deg, #ff6e86 0%, var(--danger) 100%); color: #fff; }
.contacts-list, .participants-list, .event-log { display: grid; gap: 14px; }
.contact-item, .participant-item, .event-item { padding: 16px; }
.contact-item, .participant-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.call-screen { position: fixed; inset: 0; padding: 16px; background: rgba(3, 10, 18, 0.72); }
.call-screen-inner { max-width: 1180px; height: calc(100vh - 32px); margin: 0 auto; padding: 22px; overflow: auto; }
.incoming-screen-inner { max-width: 520px; height: auto; margin-top: 14vh; text-align: center; }
.large-actions { justify-content: center; margin: 24px 0 16px; }
.call-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.video-grid { display: grid; grid-template-columns: 1.65fr 0.85fr; gap: 16px; }
.video-frame { position: relative; min-height: 240px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(9, 18, 32, 0.7), rgba(4, 11, 22, 0.92)); }
.main-frame { min-height: 420px; }
.local-frame { min-height: 220px; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame span { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(4, 13, 24, 0.7); font-size: 12px; }
.call-actions { margin-top: 18px; }
.empty-state { color: var(--muted); padding: 20px; text-align: center; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 22px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(4, 13, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); padding: 14px 18px; border-radius: 16px; z-index: 20; }
.hidden { display: none !important; }

@media (max-width: 880px) {
  .layout, .call-meta-grid, .video-grid, .contact-item, .participant-item, .incoming-banner {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .input-row, .incoming-actions, .call-actions, .contact-actions, .topbar-actions { flex-direction: column; }
  .call-screen { padding: 10px; }
  .call-screen-inner { height: calc(100vh - 20px); padding: 18px; }
}