/* ════════════════════════════════════════════════════════════════
   SKELETON SYSTEM — Premium Dark Cinematic
   version: 1.0.0 | vybor-miniapp
   ════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --sk-bg:        #0d0b0b;
  --sk-surface:   #131010;
  --sk-highlight: rgba(201, 161, 108, 0.07);
  --sk-border:    rgba(255, 255, 255, 0.055);
  --sk-glow:      rgba(141, 29, 36, 0.14);
  --sk-radius:    16px;
  --sk-radius-sm: 10px;
  --sk-radius-lg: 22px;
  --sk-duration:  1.9s;
}

/* ── Base shimmer (GPU-friendly: transform only, no repaint) ─── */
@keyframes sk-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Respect reduced-motion: keep static placeholder, no animation */
@media (prefers-reduced-motion: reduce) {
  .sk-shimmer::after,
  .sk-block::after,
  .sk-line::after,
  .sk-circle::after,
  .sk-card::after {
    animation: none !important;
  }
}

/* ── Shimmer mixin via pseudo-element ───────────────────────── */
.sk-block,
.sk-line,
.sk-circle,
.sk-card,
.sk-btn {
  position: relative;
  overflow: hidden;
  background: var(--sk-surface);
  border-radius: var(--sk-radius-sm);
}

.sk-block::after,
.sk-line::after,
.sk-circle::after,
.sk-card::after,
.sk-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--sk-highlight) 40%,
    rgba(201, 161, 108, 0.12) 50%,
    var(--sk-highlight) 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
  pointer-events: none;
}

/* ── Primitives ─────────────────────────────────────────────── */
.sk-line {
  height: 14px;
  border-radius: 6px;
  width: 100%;
}

.sk-line--xs  { height: 10px; }
.sk-line--sm  { height: 12px; }
.sk-line--md  { height: 16px; }
.sk-line--lg  { height: 20px; }
.sk-line--xl  { height: 26px; }
.sk-line--xxl { height: 36px; }

.sk-line--w20  { width: 20%; }
.sk-line--w25  { width: 25%; }
.sk-line--w30  { width: 30%; }
.sk-line--w40  { width: 40%; }
.sk-line--w50  { width: 50%; }
.sk-line--w55  { width: 55%; }
.sk-line--w60  { width: 60%; }
.sk-line--w65  { width: 65%; }
.sk-line--w70  { width: 70%; }
.sk-line--w75  { width: 75%; }
.sk-line--w80  { width: 80%; }
.sk-line--w85  { width: 85%; }
.sk-line--w90  { width: 90%; }

.sk-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.sk-circle--sm  { width: 28px; height: 28px; }
.sk-circle--md  { width: 40px; height: 40px; }
.sk-circle--lg  { width: 52px; height: 52px; }
.sk-circle--xl  { width: 72px; height: 72px; }

.sk-block {
  border-radius: var(--sk-radius-sm);
}

.sk-card {
  border-radius: var(--sk-radius);
  border: 1px solid var(--sk-border);
  background: var(--sk-surface);
  box-shadow:
    0 0 0 1px var(--sk-border),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 24px var(--sk-glow);
}

/* ── Skeleton delay helpers (stagger effect) ────────────────── */
.sk-delay-1 { animation-delay: 0.1s; }
.sk-delay-2 { animation-delay: 0.2s; }
.sk-delay-3 { animation-delay: 0.3s; }
.sk-delay-4 { animation-delay: 0.4s; }
.sk-delay-5 { animation-delay: 0.5s; }

/* ════════════════════════════════════════════════════════════════
   FULL-PAGE HOME SKELETON (inside bootstrap overlay)
   ════════════════════════════════════════════════════════════════ */

.sk-page-home {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: var(--miniapp-max-width, 430px);
  margin: 0 auto;
  padding: 0;
}

/* ── Hero skeleton ──────────────────────────────────────────── */
.sk-hero {
  position: relative;
  width: 100%;
  height: 520px;
  background: linear-gradient(180deg, #0f0b0b 0%, #100e0e 60%, #0c0a0a 100%);
  border-bottom: 1px solid var(--sk-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 24px;
  gap: 16px;
  flex-shrink: 0;
}

/* Ambient glow behind video area */
.sk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(141, 29, 36, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(201, 161, 108, 0.05) 0%, transparent 40%);
  pointer-events: none;
}

.sk-hero__topline {
  position: absolute;
  top: 16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
}

.sk-hero__eyebrow {
  height: 11px;
  width: 60px;
  border-radius: 4px;
  background: rgba(201, 161, 108, 0.1);
  position: relative;
  overflow: hidden;
}
.sk-hero__eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 108, 0.15), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}

.sk-hero__level-rail {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  height: 3px;
  display: flex;
  gap: 4px;
  padding: 0 20px;
}
.sk-hero__level-rail span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.sk-hero__level-rail span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-hero__level-rail span:first-child {
  background: rgba(201, 161, 108, 0.25);
}

.sk-hero__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.sk-hero__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  width: 180px;
  border-radius: 10px;
  background: rgba(201, 161, 108, 0.07);
  border: 1px solid rgba(201, 161, 108, 0.12);
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
.sk-hero__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 108, 0.1), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite 0.15s;
}

.sk-hero__headline { display: flex; flex-direction: column; gap: 8px; }
.sk-hero__headline .sk-line { animation-delay: 0.05s; }
.sk-hero__headline .sk-line:nth-child(2) { animation-delay: 0.1s; }
.sk-hero__headline .sk-line:nth-child(3) { animation-delay: 0.15s; }

.sk-hero__cta {
  height: 54px;
  border-radius: 14px;
  background: rgba(141, 29, 36, 0.18);
  border: 1px solid rgba(141, 29, 36, 0.32);
  box-shadow:
    0 0 24px rgba(141, 29, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.sk-hero__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 108, 0.08), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite 0.25s;
}

.sk-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.sk-hero__metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--sk-border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.sk-hero__metric::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-hero__metric:nth-child(2)::after { animation-delay: 0.1s; }
.sk-hero__metric:nth-child(3)::after { animation-delay: 0.2s; }
.sk-hero__metric:nth-child(4)::after { animation-delay: 0.3s; }

/* ── Section: Scenario path skeleton ────────────────────────── */
.sk-section {
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--sk-border);
}

.sk-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── SNX (Next Level) skeleton ──────────────────────────────── */
.sk-snx {
  padding: 20px;
  border-radius: var(--sk-radius-lg);
  background: linear-gradient(145deg, #130d0d 0%, #0f0b0b 100%);
  border: 1px solid rgba(141, 29, 36, 0.22);
  box-shadow:
    0 0 32px rgba(141, 29, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.sk-snx::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 29, 36, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.sk-snx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 108, 0.06), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer calc(var(--sk-duration) * 1.2) ease-in-out infinite 0.3s;
}

.sk-snx__tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sk-snx__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--sk-border);
  border-radius: 10px;
}

/* ── Scenario path rows ─────────────────────────────────────── */
.sk-scenario-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sk-scenario-row__axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 4px;
}
.sk-scenario-row__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201, 161, 108, 0.18);
  flex-shrink: 0;
}
.sk-scenario-row__line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}

.sk-scenario-row__card {
  flex: 1;
  padding: 14px;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.sk-scenario-row__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}

/* ── Feature cards grid skeleton ────────────────────────────── */
.sk-cm-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-cm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  position: relative;
  overflow: hidden;
}
.sk-cm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-cm-card:nth-child(2)::after { animation-delay: 0.12s; }
.sk-cm-card:nth-child(3)::after { animation-delay: 0.24s; }
.sk-cm-card:nth-child(4)::after { animation-delay: 0.36s; }

.sk-cm-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(141, 29, 36, 0.1);
  border: 1px solid rgba(141, 29, 36, 0.18);
  flex-shrink: 0;
}

.sk-cm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-cm-card__arrow {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   PROFILE SKELETON
   ════════════════════════════════════════════════════════════════ */
.sk-profile {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.sk-profile__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--sk-border);
}

.sk-profile__header-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-profile__section {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--sk-border);
}

.sk-profile__stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sk-profile__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  position: relative;
  overflow: hidden;
}
.sk-profile__stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}

.sk-profile__sub-card {
  padding: 16px;
  border-radius: var(--sk-radius);
  background: rgba(141, 29, 36, 0.07);
  border: 1px solid rgba(141, 29, 36, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.sk-profile__sub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 108, 0.06), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite 0.2s;
}

/* ════════════════════════════════════════════════════════════════
   HISTORY SKELETON
   ════════════════════════════════════════════════════════════════ */
.sk-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.sk-history__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  position: relative;
  overflow: hidden;
}
.sk-history__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-history__item:nth-child(2)::after { animation-delay: 0.1s; }
.sk-history__item:nth-child(3)::after { animation-delay: 0.2s; }
.sk-history__item:nth-child(4)::after { animation-delay: 0.3s; }
.sk-history__item:nth-child(5)::after { animation-delay: 0.4s; }
.sk-history__item:nth-child(6)::after { animation-delay: 0.5s; }

.sk-history__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(141, 29, 36, 0.3);
  margin-top: 4px;
  flex-shrink: 0;
}

.sk-history__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════════
   ANALYTICS SKELETON
   ════════════════════════════════════════════════════════════════ */
.sk-analytics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  width: 100%;
}

.sk-analytics__top {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sk-analytics__tab {
  height: 32px;
  border-radius: 8px;
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  position: relative;
  overflow: hidden;
}
.sk-analytics__tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-analytics__tab:nth-child(2)::after { animation-delay: 0.15s; }
.sk-analytics__tab:nth-child(3)::after { animation-delay: 0.3s; }

.sk-analytics__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sk-analytics__metric-card {
  padding: 14px;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.sk-analytics__metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-analytics__metric-card:nth-child(2)::after { animation-delay: 0.1s; }
.sk-analytics__metric-card:nth-child(3)::after { animation-delay: 0.2s; }
.sk-analytics__metric-card:nth-child(4)::after { animation-delay: 0.3s; }

/* Chart skeleton */
.sk-chart {
  width: 100%;
  height: 180px;
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 16px 16px 24px;
}
.sk-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(141, 29, 36, 0.04) 100%);
  pointer-events: none;
}
.sk-chart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer calc(var(--sk-duration) * 1.1) ease-in-out infinite 0.1s;
}

.sk-chart__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(141, 29, 36, 0.15);
  border: 1px solid rgba(141, 29, 36, 0.12);
  position: relative;
  z-index: 1;
}

/* Table skeleton */
.sk-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--sk-radius-sm);
  overflow: hidden;
  border: 1px solid var(--sk-border);
}

.sk-table__head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--sk-border);
}

.sk-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  padding: 12px 14px;
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-border);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sk-table__row:last-child { border-bottom: none; }
.sk-table__row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.025), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}
.sk-table__row:nth-child(2)::after { animation-delay: 0.08s; }
.sk-table__row:nth-child(3)::after { animation-delay: 0.16s; }
.sk-table__row:nth-child(4)::after { animation-delay: 0.24s; }
.sk-table__row:nth-child(5)::after { animation-delay: 0.32s; }
.sk-table__row:nth-child(6)::after { animation-delay: 0.40s; }
.sk-table__row:nth-child(7)::after { animation-delay: 0.48s; }

.sk-table__cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════
   BOOTSTRAP OVERLAY → HOME SKELETON
   Replaces the spinner in base.html during Telegram init + API
   ════════════════════════════════════════════════════════════════ */

.app-bootstrap-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #080606;
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Hide overlay once body gets app-ready */
.app-ready .app-bootstrap-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Error state: freeze skeleton, show message */
.app-bootstrap-overlay.is-error {
  overflow: hidden;
}
.app-bootstrap-overlay.is-error .sk-page-home {
  opacity: 0.3;
}
.app-bootstrap-overlay.is-error .sk-overlay-error {
  display: flex;
}
.app-bootstrap-overlay.is-error .sk-overlay-error-panel {
  display: flex;
}

/* ── Error panel (hidden normally) ────────────────────────── */
.sk-overlay-error {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(8, 6, 6, 0.8);
  backdrop-filter: blur(8px);
}

.sk-overlay-error-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 300px;
}

.sk-overlay-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(141, 29, 36, 0.15);
  border: 1px solid rgba(141, 29, 36, 0.3);
  display: grid;
  place-items: center;
}
.sk-overlay-error-icon svg {
  width: 22px;
  height: 22px;
  stroke: #8d1d24;
  stroke-width: 1.8;
  fill: none;
  display: block;
}

.sk-overlay-error-title {
  font: 600 16px/1.35 "Inter", system-ui, sans-serif;
  color: rgba(243, 239, 232, 0.9);
}

.sk-overlay-error-text {
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(188, 180, 175, 0.75);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   INLINE SECTION SKELETONS (for AJAX blocks on page)
   Shown via [data-sk-loading] attribute on their parent
   ════════════════════════════════════════════════════════════════ */

/* Generic container: when loading, show the skeleton sibling */
[data-sk-section] .sk-section-placeholder { display: none; }
[data-sk-section].is-sk-loading .sk-section-placeholder,
[data-sk-section].is-loading .sk-section-placeholder { display: flex; }
[data-sk-section].is-sk-loading .sk-section-content,
[data-sk-section].is-loading .sk-section-content { visibility: hidden; height: 0; overflow: hidden; }

/* Smooth fade-in of real content */
[data-sk-section] .sk-section-content {
  animation: sk-fadein 0.4s ease forwards;
}
@keyframes sk-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state */
.sk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.sk-empty-state__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(141, 29, 36, 0.08);
  border: 1px solid rgba(141, 29, 36, 0.16);
  display: grid;
  place-items: center;
}
.sk-empty-state__icon svg {
  width: 22px;
  height: 22px;
  stroke: rgba(141, 29, 36, 0.7);
  stroke-width: 1.6;
  fill: none;
  display: block;
}

.sk-empty-state__title {
  font: 600 15px/1.4 "Inter", system-ui, sans-serif;
  color: rgba(243, 239, 232, 0.65);
  margin: 0;
}

.sk-empty-state__text {
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(188, 180, 175, 0.5);
  margin: 0;
  max-width: 220px;
}

/* Error state */
.sk-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  text-align: center;
}

.sk-error-state__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(141, 29, 36, 0.1);
  border: 1px solid rgba(141, 29, 36, 0.22);
  display: grid;
  place-items: center;
}
.sk-error-state__icon svg {
  width: 18px;
  height: 18px;
  stroke: #8d1d24;
  stroke-width: 2;
  fill: none;
  display: block;
}

.sk-error-state__title {
  font: 600 14px/1.4 "Inter", system-ui, sans-serif;
  color: rgba(243, 239, 232, 0.7);
  margin: 0;
}

.sk-error-state__text {
  font: 400 12px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(188, 180, 175, 0.5);
  margin: 0;
}

.sk-error-state__btn {
  margin-top: 4px;
  padding: 8px 20px;
  border-radius: 8px;
  background: rgba(141, 29, 36, 0.12);
  border: 1px solid rgba(141, 29, 36, 0.28);
  color: rgba(220, 90, 82, 0.88);
  font: 500 13px "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.sk-error-state__btn:active {
  background: rgba(141, 29, 36, 0.22);
}

/* ════════════════════════════════════════════════════════════════
   PAGE-AWARE OVERLAY: show only the matching skeleton per page
   ════════════════════════════════════════════════════════════════ */

/* Default: show home skeleton on all pages unless overridden */
.sk-page-profile,
.sk-page-history { display: none; }

/* Profile page */
body[data-page="profile"] .sk-page-home  { display: none; }
body[data-page="profile"] .sk-page-profile { display: flex; flex-direction: column; width: 100%; }

/* History page */
body[data-page="history"] .sk-page-home  { display: none; }
body[data-page="history"] .sk-page-history { display: flex; flex-direction: column; width: 100%; }

/* Pages without a specific skeleton: use minimal home skeleton */

/* ── Bottom nav skeleton (part of home overlay) ─────────────── */
.sk-bottom-nav {
  display: flex;
  align-items: center;
  gap: 0;
  height: 64px;
  background: rgba(10, 8, 8, 0.96);
  border-top: 1px solid var(--sk-border);
  padding: 0 8px;
}
.sk-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
}
.sk-bottom-nav__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.sk-bottom-nav__label {
  height: 8px;
  width: 36px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
}