:root {
  --bg-1: #020303;
  --bg-2: #03140f;
  --bg-3: #0b3f2a;
  --card: #050807;
  --ink: #e7f8ef;
  --muted: #9dc4b2;
  --success: #3cff95;
  --error: #ff6f8e;
  --stroke: rgba(86, 255, 163, 0.24);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Sora', sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(80% 80% at 15% 15%, rgba(34, 197, 94, 0.24), transparent 70%),
    radial-gradient(80% 80% at 85% 10%, rgba(22, 163, 74, 0.16), transparent 70%),
    linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(165deg, rgba(10, 18, 15, 0.95), rgba(5, 8, 7, 0.98));
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 24px 24px 26px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(133, 255, 187, 0.15);
  display: grid;
  gap: 14px;
}

.brand-line {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1eff8d, #2bc866, #0f6f44);
}

.headline {
  margin: 0;
  font-size: 1.62rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #f2fff8;
}

.intro {
  margin: -2px 0 0;
  color: #b7d8c8;
  line-height: 1.55;
  font-size: 0.98rem;
}

.instance-name {
  margin: -2px 0 0;
  color: #7fa392;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.status {
  margin: 0;
  min-height: 24px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #3f6a57;
  color: #bbd8ca;
  background: rgba(12, 26, 20, 0.7);
}

.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.status.connected {
  color: var(--success);
  border-color: rgba(60, 255, 149, 0.45);
  background: rgba(17, 56, 36, 0.45);
}

.status.disconnected {
  color: #d7e5dd;
  border-color: rgba(215, 229, 221, 0.35);
  background: rgba(36, 44, 40, 0.65);
}

.status.loading {
  color: #8ad8b4;
  border-color: rgba(138, 216, 180, 0.4);
  background: rgba(21, 40, 31, 0.65);
}

.status.error {
  color: var(--error);
  border-color: rgba(255, 111, 142, 0.45);
  background: rgba(70, 25, 36, 0.6);
}

.qr-timer {
  margin: -6px 0 0;
  color: #a8ceb9;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.qr-timer.hidden {
  display: none;
}

.qr-container {
  display: grid;
  place-items: center;
  min-height: 140px;
  background: linear-gradient(180deg, #f7fdf9, #e8f9ee);
  border: 1px solid #85d7a8;
  border-radius: 14px;
  padding: 18px;
}

.qr-container.hidden {
  display: none;
}

@media (max-width: 640px) {
  .card {
    padding: 18px;
    border-radius: 14px;
  }

  .headline {
    font-size: 1.34rem;
  }

  .intro {
    font-size: 0.9rem;
  }
}