/* Mobile-first */
:root {
  --theme: #0866ff;
  --max-width: 560px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #f0f2f5;
  color: #050505;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.loading { text-align: center; padding: 40px 0; color: #65676b; }
.cover {
  width: 100%; height: auto; border-radius: 14px; display: block;
  background: #dcdfe3; aspect-ratio: 16 / 10; object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 16px;
}
.card {
  background: #fff; margin-top: 16px; padding: 20px; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); text-align: center;
}
.card:first-child { margin-top: 0; }
.msg { font-size: 17px; line-height: 1.45; margin: 0 0 16px; white-space: pre-line; }
.msg:last-child { margin-bottom: 0; }
.btn {
  appearance: none; border: 0; cursor: pointer; font-weight: 700;
  font-size: 16px; letter-spacing: .3px; padding: 14px 20px;
  border-radius: 10px; width: 100%; transition: transform .05s ease, background .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--theme); color: #fff; }
.btn-primary:hover { filter: brightness(.92); }
.timer {
  font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--theme); margin-top: 8px; letter-spacing: 2px;
}
.timer-hidden { display: none; }
.video { width: 100%; height: auto; border-radius: 10px; background: #000; display: block; }
.spinner {
  width: 36px; height: 36px; border: 3px solid #e4e6eb;
  border-top-color: var(--theme); border-radius: 50%;
  margin: 16px auto 0; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }