/* ==========================================================================
   通用骨架屏 (Skeleton Loading)
   --------------------------------------------------------------------------
   用途：页面首屏异步取数时，用占位块替代空白区域，避免内容到达后布局突然
        撑开造成的跳变与“卡顿”观感。

   用法：
     <div class="sk-wrap">
         <span class="sk-line sk-xl sk-40"></span>
         <span class="sk-line sk-80"></span>
     </div>

   可用修饰类：
     .sk-line   文本/数值行占位     .sk-circle  头像等圆形占位
     .sk-bar    进度条占位          .sk-block   区块占位
     尺寸：.sk-sm/.sk-md/.sk-lg/.sk-xl    宽度：.sk-30/.sk-40/.sk-50/.sk-60/.sk-70/.sk-80
   ========================================================================== */

.sk-line,
.sk-circle,
.sk-bar,
.sk-block {
    --sk-c1: rgba(148, 163, 184, .15);
    --sk-c2: rgba(148, 163, 184, .28);
    display: block;
    background-color: var(--sk-c1);
    background-image: linear-gradient(90deg, var(--sk-c1) 0%, var(--sk-c2) 45%, var(--sk-c1) 90%);
    background-size: 300% 100%;
    animation: sk-shimmer 1.35s ease-in-out infinite;
}

.sk-wrap {
    display: block;
    width: 100%;
    min-width: 0;
}

.sk-line {
    height: 13px;
    border-radius: 7px;
}

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

.sk-bar {
    height: 12px;
    border-radius: 999px;
}

.sk-block {
    height: 96px;
    border-radius: 14px;
}

/* 尺寸 */
.sk-line.sk-sm { height: 10px; border-radius: 5px; }
.sk-line.sk-lg { height: 18px; border-radius: 9px; }
.sk-line.sk-xl { height: 26px; border-radius: 11px; }

/* 宽度 */
.sk-30 { width: 30%; }
.sk-40 { width: 40%; }
.sk-50 { width: 50%; }
.sk-60 { width: 60%; }
.sk-70 { width: 70%; }
.sk-80 { width: 80%; }
.sk-100 { width: 100%; }

/* 行间距 */
.sk-wrap > .sk-line + .sk-line,
.sk-wrap > .sk-bar + .sk-bar,
.sk-wrap > .sk-block + .sk-block {
    margin-top: 9px;
}

/* 内联行：占位块与文字混排时使用 */
.sk-inline { display: inline-block; vertical-align: middle; }

/* 行内标签 + 右侧数值的两列骨架（对应 .vd-overview-row / .vd-commission-row 结构）
   min-height 按真实行高标定，保证数据到达时容器高度基本不变 */
.sk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    min-height: 43px;
    border-bottom: 1px solid rgba(226, 232, 240, .55);
}

/* 三列骨架：对应地址行（标签 + 值 + 复制按钮），行高更高 */
.sk-row.sk-row-tall {
    grid-template-columns: 132px minmax(0, 1fr) 28px;
    min-height: 60px;
}

.sk-row.sk-row-tall .sk-line:last-child {
    height: 28px;
    border-radius: 8px;
}

.sk-row:last-child { border-bottom: 0; }
.sk-row .sk-line { margin: 0; }

@keyframes sk-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* 暗色主题（选择器与 theme-dark.css 的生效条件保持一致：html[data-theme="dark"]） */
html[data-theme="dark"] .sk-line,
html[data-theme="dark"] .sk-circle,
html[data-theme="dark"] .sk-bar,
html[data-theme="dark"] .sk-block {
    --sk-c1: rgba(148, 163, 184, .18);
    --sk-c2: rgba(203, 213, 225, .32);
}

html[data-theme="dark"] .sk-row { border-bottom-color: rgba(148, 163, 184, .18); }

/* 用户偏好减少动效时关闭闪烁 */
@media (prefers-reduced-motion: reduce) {
    .sk-line,
    .sk-circle,
    .sk-bar,
    .sk-block { animation: none; }
}