/* Extracted from ecosystem.css — standalone stage screens. */
/* Load after ecosystem.css and before ui-unification.css. */

/* --- from ecosystem.css L3728-3815 --- */
/* Standalone stage screens (welcome / referral / bio gate) */
.stage-host, #stage.stage-host {
  max-width: 460px;
  margin: 28px auto;
  text-align: center;
  padding: 16px;
}
.stage-emoji { font-size: 46px; line-height: 1; }
.stage-emoji-sm { font-size: 40px; }
.stage-title { margin: 10px 0 6px; }
.stage-title-tight { margin: 8px 0 4px; }
.stage-lead {
  color: var(--tg-theme-hint-color, #888);
  line-height: 1.55;
  margin: 0 0 16px;
}
.stage-muted { color: var(--tg-theme-hint-color, #888); }
.stage-loading { margin-top: 8px; }
.stage-hint {
  color: var(--tg-theme-hint-color, #888);
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0;
}
.stage-error { color: #c00; }
.stage-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.stage-panel {
  background: var(--tg-theme-secondary-bg-color, #f4f4f4);
  border-radius: 12px;
  padding: 14px;
  text-align: left;
}
.stage-label { font-size: 13px; color: var(--tg-theme-hint-color, #888); }
.stage-code {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.stage-link { word-break: break-all; margin-bottom: 8px; }
.stage-copy { font-size: 13px; line-height: 1.6; }
.stage-steps {
  text-align: left;
  line-height: 1.5;
  color: var(--tg-theme-text-color, #000);
}
.stage-step {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.stage-step-body { flex: 1; }
.wc-ref-input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--tg-theme-hint-color, #ccc);
  border-radius: 10px;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  margin-bottom: 10px;
  text-align: center;
}
.stage-primary, .stage-secondary, .stage-btn {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 12px;
}
.stage-primary, .stage-btn {
  font-weight: 600;
  padding: 12px 18px;
  background: var(--tg-theme-button-color, #3390ec);
  color: var(--tg-theme-button-text-color, #fff);
}
.stage-primary-spaced { margin-top: 14px; }
.stage-secondary {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--tg-theme-secondary-bg-color, #eee);
}
.stage-status { margin-top: 10px; }

/* Extracted from ecosystem.css — skeleton + view anim. */
 /* skeleton loaders — a shimmering placeholder instead of a «загрузка…» text */
    .skel { position:relative; overflow:hidden; border-radius:8px;
        background:var(--tg-theme-secondary-bg-color,#ececec); }
    .skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
        background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
        animation:shimmer 1.25s infinite; }
    @keyframes shimmer { 100% { transform:translateX(100%); } }
    .skel-row { height:13px; margin:8px 0; }
    .skel-card { height:62px; margin-bottom:7px; border-radius:10px; }
 /* Lite home gradient tiles → ecosystem_dashboard.css. */
 /* swipe-between-tabs: a brief slide when the active view changes via gesture */
    @keyframes viewIn { from { opacity:.4; transform:translateX(var(--vx,0)); } to { opacity:1; transform:none; } }
    .view-anim { animation:viewIn .18s ease-out; }