:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background: #07130c;
  color: #f5fff8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 5%, rgba(55, 214, 113, .18), transparent 38%),
    linear-gradient(180deg, #091a10 0%, #040a06 100%);
}

main {
  min-height: 100svh;
  max-width: 34rem;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.mark {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.7rem;
  font-weight: 800;
  color: #041108;
  background: #38e878;
  box-shadow: 0 0 3rem rgba(56, 232, 120, .3);
}

.eyebrow {
  margin: 0;
  color: #64e994;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
}

h1 { margin: .4rem 0 1.5rem; font-size: clamp(2.3rem, 10vw, 4rem); line-height: 1; }
h2 { margin: 0 0 .5rem; }
.panel, .target-card { border: 1px solid #2b4734; border-radius: 1.3rem; background: #0e1d13; padding: 1.25rem; }
.panel p { color: #aebbb2; margin-top: 0; }
label { display: block; color: #aebbb2; text-align: left; font-size: .88rem; font-weight: 700; margin-bottom: .45rem; }

input, select {
  width: 100%;
  min-height: 3.5rem;
  border: 1px solid #365540;
  border-radius: .85rem;
  padding: 0 .9rem;
  color: #f5fff8;
  background: #07130c;
  font: inherit;
  font-size: 1.05rem;
}

.active-target { margin: .7rem 0 0; color: #64e994; font-weight: 800; text-align: left; }
.status { margin: 1rem 0 1.25rem; color: #aebbb2; font-size: 1rem; }
.actions { display: grid; gap: 1rem; }

.button {
  min-height: 4.75rem;
  border: 0;
  border-radius: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  text-decoration: none;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}

.button:active { transform: scale(.985); }
.button:disabled { opacity: .55; }
.call, .unlock { color: #041108; background: #38e878; }
.unlock { width: 100%; margin-top: 1rem; }
.text { color: #f5fff8; background: #17271d; border: 1px solid #2b4734; }
.number { min-height: 1.25rem; margin: 1.25rem 0 .5rem; color: #718177; font-variant-numeric: tabular-nums; }
.lock { color: #91a398; background: transparent; border: 0; padding: .75rem; font: inherit; text-decoration: underline; }
.message { min-height: 1.4rem; margin: .8rem 0 0; color: #d4e0d7; }