/* CoinsCapture skeleton loaders — shimmer placeholders until content is ready */

@keyframes cc-sk-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.cc-sk-block {
    --cc-sk-base: var(--cc-surface-2, #eef1f5);
    --cc-sk-highlight: var(--cc-surface, #f8fafc);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cc-sk-base);
}

[data-theme="dark"] .cc-sk-block,
html[data-theme="dark"] .cc-sk-block {
    --cc-sk-base: rgba(255, 255, 255, 0.06);
    --cc-sk-highlight: rgba(255, 255, 255, 0.12);
}

.cc-sk-line,
.cc-sk-circle,
.cc-sk-rect,
.cc-sk-card {
    background: linear-gradient(
        90deg,
        var(--cc-sk-base) 0%,
        var(--cc-sk-highlight) 50%,
        var(--cc-sk-base) 100%
    );
    background-size: 936px 100%;
    animation: cc-sk-shimmer 1.35s ease-in-out infinite;
    border-radius: 8px;
}

.cc-sk-line { height: 12px; margin-bottom: 10px; }
.cc-sk-line--sm { height: 10px; width: 55%; }
.cc-sk-line--md { width: 72%; }
.cc-sk-line--lg { width: 88%; }
.cc-sk-line--full { width: 100%; }

.cc-sk-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cc-sk-rect {
    width: 100%;
    border-radius: 14px;
}

.cc-sk-section {
  position: relative;
  max-width: 100%;
}

.cc-sk-section .cc-sk-placeholder {
    display: block;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cc-sk-section .cc-sk-content {
    transition: opacity 0.35s ease;
}

html.cc-page-loading .cc-sk-section .cc-sk-content {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

html.cc-page-loading .cc-sk-section .cc-sk-placeholder {
    opacity: 1;
    visibility: visible;
}

html.cc-page-ready .cc-sk-section .cc-sk-placeholder,
.cc-sk-section.cc-sk-ready .cc-sk-placeholder {
    display: none;
}

html.cc-page-ready .cc-sk-section .cc-sk-content,
.cc-sk-section.cc-sk-ready .cc-sk-content {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
}

/* Layout presets */
.cc-sk-stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: 12px;
  overflow: hidden;
  max-width: 100%;
  padding: 4px 0 8px;
}

.cc-sk-stat-card {
    min-height: 118px;
    padding: 14px;
    border: 1px solid var(--cc-border, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
}

.cc-sk-live {
    min-height: 280px;
    padding: 16px;
    border: 1px solid var(--cc-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
}

.cc-sk-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}

@media (max-width: 991px) {
    .cc-sk-hero-grid { grid-template-columns: 1fr; }
}

.cc-sk-hero-main { min-height: 360px; }
.cc-sk-trend-list { min-height: 360px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 16px; }

.cc-sk-market-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cc-border, rgba(0, 0, 0, 0.06));
}

.cc-sk-market-table { min-height: 420px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 16px; }

.cc-sk-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 991px) {
    .cc-sk-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-sk-line,
    .cc-sk-circle,
    .cc-sk-rect,
    .cc-sk-card {
        animation: none;
    }
}