/* Shared skeleton roles; visible controls and business states are unchanged. */
.ui-skeleton { display:flex; flex-direction:column; gap:12px; }
.ui-skeleton-line, .ui-skeleton-flag, .ui-skeleton-chevron,
.ui-skeleton-badge, .ui-skeleton-action {
    display:block; position:relative; overflow:hidden;
    background:var(--esd-color-disabled-bg,#E5E5EA); border-radius:6px; flex-shrink:0;
}
.ui-skeleton-line { width:100%; height:14px; }
.ui-skeleton-title { width:62%; height:22px; }
.ui-skeleton-short { width:68%; }
.ui-skeleton-paragraph { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.ui-skeleton-content { padding:8px 0; min-height:300px; }
.ui-skeleton-rows { gap:10px; }
.ui-skeleton-row { display:flex; align-items:center; gap:14px; padding:16px; min-height:58px; border:1px solid var(--esd-color-border,#E5E5EA); border-radius:12px; background:var(--esd-color-bg-surface,#fff); }
.ui-skeleton-row .ui-skeleton-line { width:52%; height:18px; }
.ui-skeleton-flag { width:34px; height:24px; }
.ui-skeleton-chevron { width:8px; height:14px; margin-left:auto; }
.ui-skeleton-marketing { min-height:206px; }
.ui-skeleton-action { width:96px; height:44px; border-radius:10px; }
.ui-skeleton-badge { width:84px; height:24px; border-radius:6px; }
.ui-skeleton-state-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0 16px; }
.ui-skeleton-progress { height:8px; border-radius:999px; }
.ui-skeleton-current { min-height:320px; display:flex; flex-direction:column; gap:12px; }
.ui-skeleton-order { min-height:76px; }
.ui-skeleton-order-left { display:flex; align-items:center; gap:12px; }
.ui-skeleton-order-right { display:flex; flex-direction:column; gap:10px; width:90px; align-items:flex-end; }
/* Showcase spacing only: keep actual screen loading geometry unchanged. */
#skeleton-examples .kit-panel > h3 { margin:0 0 16px; }
#skeleton-examples .kit-panel > h3 + div { margin-top:0; }
#skeleton-examples .ui-skeleton-content { padding-top:0; }
.ui-skeleton-line::after, .ui-skeleton-flag::after, .ui-skeleton-badge::after,
.ui-skeleton-action::after, .ui-skeleton-chevron::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    transform:translateX(-100%); animation:uiSkeletonSweep 1.4s linear infinite;
}
@keyframes uiSkeletonSweep { to { transform:translateX(100%); } }
.ui-loading-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ui-frame-loading { visibility:hidden; }
.ui-calculator-loading, .ui-calculator-error { position:absolute; inset:var(--tg-safe-area-inset-top,0px) 0 0; padding:24px 16px; overflow:auto; background:var(--esd-color-bg-page,#F2F2F7); }
.ui-calculator-loading[hidden], .ui-calculator-error[hidden] { display:none; }
.ui-calculator-loading .ui-skeleton-action { width:100%; height:120px; margin-top:18px; }
.ui-calculator-error p { font:inherit; color:var(--text-secondary,#636366); margin-bottom:16px; }
@media(prefers-reduced-motion:reduce) {
    .ui-skeleton-line::after, .ui-skeleton-flag::after, .ui-skeleton-badge::after,
    .ui-skeleton-action::after, .ui-skeleton-chevron::after,
    .plan-skeleton-shimmer::after, .esim-skeleton-item::after,
    .current-esim-skeleton-card::after, .skeleton-line::after,
    .referral-skeleton-shape::after { animation:none!important; }
}