:root {
  font-family: system-ui, sans-serif;
  color: #e9efff;
  background: #0b1020;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 40px 20px;
}
main {
  max-width: 1000px;
  margin: auto;
  text-align: center;
}
.badge {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #7dd3fc;
}
h1 {
  font-size: clamp(36px, 7vw, 64px);
  margin: 14px 0;
}
p {
  line-height: 1.6;
  color: #bac8e6;
}
#pair {
  margin: 32px auto;
  padding: 24px;
  border: 1px solid #293650;
  border-radius: 24px;
  max-width: 430px;
  background: #121b30;
}
#qr {
  max-width: 100%;
  border-radius: 12px;
  width: 280px;
}
.hint {
  font-size: 13px;
}
#screen {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
}
footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
button {
  font: inherit;
  padding: 12px 20px;
  border: 1px solid #405578;
  border-radius: 12px;
  background: #192944;
  color: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible {
  outline: 3px solid #7dd3fc;
}
#screen:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

#invitation {
  max-width: 600px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #293650;
  border-radius: 16px;
}
#share-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font: inherit;
  color: inherit;
  background: #121b30;
  border: 1px solid #405578;
  border-radius: 8px;
}

#capture-studio {
  margin: 32px auto;
  padding: 24px;
  border: 1px solid #293650;
  border-radius: 24px;
  background: #121b30;
}
#capture-schedule {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
#capture-search, #capture-model, #capture-time, #capture-duration, #capture-results textarea {
  font: inherit;
  color: inherit;
  background: #0b1020;
  border: 1px solid #405578;
  border-radius: 8px;
  padding: 12px;
  max-width: 100%;
}
#capture-jobs { text-align: left; }
#capture-jobs li { margin: 12px 0; }
#capture-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
#capture-results article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #405578;
  border-radius: 16px;
}
#capture-results video { display: block; max-width: 100%; max-height: 360px; margin: 0 auto 16px; }
#capture-results a { color: #7dd3fc; }
#capture-results textarea { display: block; width: 100%; min-height: 110px; margin-bottom: 12px; }

#mockup-preview { display: block; width: 100%; max-height: 440px; object-fit: contain; margin: 20px auto; }
#mockup-preview[hidden] { display: none; }
#capture-studio a { color: #7dd3fc; }

.transparent-option { display: block; margin: 20px 0 8px; }
#mockup-preview, #capture-results video {
  background-color: #cbd5e1;
  background-image: conic-gradient(#94a3b8 25%, transparent 0 50%, #94a3b8 0 75%, transparent 0);
  background-size: 24px 24px;
}

#install-app {
  max-width: 680px;
  margin: 28px auto;
  padding: 24px;
  border: 1px solid #293650;
  border-radius: 24px;
  background: #121b30;
}
#install-app h2 { margin-top: 0; }
.google-play-link { display: inline-block; max-width: 100%; border-radius: 12px; }
.google-play-link img { display: block; width: 240px; max-width: 100%; height: auto; }
.google-play-link:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 4px; }
.install-steps { text-align: left; padding-left: 24px; color: #bac8e6; line-height: 1.6; }
.install-steps li { padding-left: 4px; margin: 12px 0; }

.language-picker { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 24px; }
#language-select { font: inherit; color: inherit; background: #121b30; border: 1px solid #405578; border-radius: 8px; padding: 10px; max-width: 100%; }
#language-select:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; }

.premium-offer { margin: 1.25rem 0; padding: 1.25rem; border: 1px solid #8074e6; border-radius: 16px; background: rgba(109, 87, 224, .08); }
.premium-offer h3 { margin-top: 0; }
.premium-offer details { margin-top: 1rem; }
.premium-offer input { width: 100%; box-sizing: border-box; }