/* =========================================================
   DATA — stat, progress, rating, skeleton, empty
   ========================================================= */

.ui-kit-stat {
    display: flex; flex-direction: column; gap: 6px;
    padding: var(--ui-kit-space-xl);
    background: var(--ui-kit-white); border: 1px solid var(--ui-kit-border);
    border-radius: var(--ui-kit-radius-lg);
    transition: box-shadow var(--ui-kit-trans-fast), transform var(--ui-kit-trans-fast);
}
.ui-kit-stat:hover { box-shadow: var(--ui-kit-shadow-md); transform: translateY(-2px); }
.ui-kit-stat__label { font-size: var(--ui-kit-fs-sm); color: var(--ui-kit-text-muted); font-weight: var(--ui-kit-fw-medium); }
.ui-kit-stat__value { font-size: var(--ui-kit-fs-4xl); font-weight: var(--ui-kit-fw-bold); color: var(--ui-kit-navy); line-height: 1; letter-spacing: -0.02em; }
.ui-kit-stat__change { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-semibold); }
.ui-kit-stat__change--up { color: var(--ui-kit-success); }
.ui-kit-stat__change--down { color: var(--ui-kit-danger); }

.ui-kit-progress { width: 100%; height: 8px; background: var(--ui-kit-bg-soft); border-radius: var(--ui-kit-radius-pill); overflow: hidden; }
.ui-kit-progress__fill { height: 100%; background: var(--ui-kit-blue); border-radius: inherit; transition: width var(--ui-kit-trans-base) var(--ui-kit-ease); }
.ui-kit-progress--success .ui-kit-progress__fill { background: var(--ui-kit-success); }
.ui-kit-progress--accent .ui-kit-progress__fill { background: var(--ui-kit-accent); }
.ui-kit-progress--warning .ui-kit-progress__fill { background: var(--ui-kit-warning); }
.ui-kit-progress--danger .ui-kit-progress__fill { background: var(--ui-kit-danger); }

.ui-kit-progress-circle {
    --value: 0;
    --size: 72px;
    width: var(--size); height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--ui-kit-blue) calc(var(--value) * 1%), var(--ui-kit-bg-soft) 0);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.ui-kit-progress-circle::before {
    content: ''; position: absolute; inset: 8px; background: var(--ui-kit-white); border-radius: 50%;
}
.ui-kit-progress-circle__value {
    position: relative; font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-bold);
    color: var(--ui-kit-navy); z-index: 1;
}
.ui-kit-progress-circle--success { background: conic-gradient(var(--ui-kit-success) calc(var(--value) * 1%), var(--ui-kit-bg-soft) 0); }
.ui-kit-progress-circle--warning { background: conic-gradient(var(--ui-kit-warning) calc(var(--value) * 1%), var(--ui-kit-bg-soft) 0); }
.ui-kit-progress-circle--danger { background: conic-gradient(var(--ui-kit-danger) calc(var(--value) * 1%), var(--ui-kit-bg-soft) 0); }

.ui-kit-rating { display: inline-flex; align-items: center; gap: 2px; }
.ui-kit-rating__star {
    display: inline-block; width: 20px; height: 20px;
    background: var(--ui-kit-border); cursor: pointer;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z' fill='black'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z' fill='black'/></svg>") center/contain no-repeat;
    transition: background var(--ui-kit-trans-fast);
    border: none; padding: 0;
}
.ui-kit-rating__star.is-active { background: var(--ui-kit-warning); }
.ui-kit-rating__star:hover { background: var(--ui-kit-warning); }
.ui-kit-rating--sm .ui-kit-rating__star { width: 16px; height: 16px; }
.ui-kit-rating--lg .ui-kit-rating__star { width: 26px; height: 26px; }

.ui-kit-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--ui-kit-space-md);
    padding: 40px 24px;
    border: 2px dashed var(--ui-kit-border); border-radius: var(--ui-kit-radius-lg);
    background: var(--ui-kit-bg-muted);
    color: var(--ui-kit-text-muted); text-align: center;
    cursor: pointer; transition: border-color var(--ui-kit-trans-fast), background var(--ui-kit-trans-fast);
}
.ui-kit-dropzone:hover,
.ui-kit-dropzone.is-dragover {
    border-color: var(--ui-kit-blue);
    background: var(--ui-kit-blue-tint);
    color: var(--ui-kit-blue);
}
.ui-kit-dropzone__icon { color: var(--ui-kit-blue); opacity: 0.7; }
.ui-kit-dropzone__title { font-size: var(--ui-kit-fs-md); font-weight: var(--ui-kit-fw-semibold); color: var(--ui-kit-navy); margin: 0; }
.ui-kit-dropzone__hint { font-size: var(--ui-kit-fs-sm); color: var(--ui-kit-text-muted); margin: 0; }

.ui-kit-skeleton { background: var(--ui-kit-white); border: 1px solid var(--ui-kit-border); border-radius: var(--ui-kit-radius-xl); overflow: hidden; display: flex; flex-direction: column; }
.ui-kit-skeleton__media { height: 170px; background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%); background-size: 200% 100%; animation: ui-kit-skeleton-shimmer 1.4s ease-in-out infinite; }
.ui-kit-skeleton__body { padding: var(--ui-kit-space-xl); display: flex; flex-direction: column; gap: 10px; }
.ui-kit-skeleton__line, .ui-kit-skeleton__cta {
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
    background-size: 200% 100%; animation: ui-kit-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--ui-kit-radius-sm);
}
.ui-kit-skeleton__line { height: 12px; }
.ui-kit-skeleton__line--title { height: 18px; width: 80%; }
.ui-kit-skeleton__line--title-short { height: 18px; width: 55%; }
.ui-kit-skeleton__line--short { width: 60%; }
.ui-kit-skeleton__cta { height: 44px; margin-top: var(--ui-kit-space-md); border-radius: var(--ui-kit-radius-md); }
@keyframes ui-kit-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ui-kit-skeleton.is-hiding { opacity: 0; transition: opacity var(--ui-kit-trans-base); }

.ui-kit-skeleton-row {
    display: grid; grid-template-columns: 40px 1fr 120px 100px;
    align-items: center; gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-kit-border-soft);
}
.ui-kit-skeleton-row:last-child { border-bottom: none; }
.ui-kit-skeleton-row__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
    background-size: 200% 100%; animation: ui-kit-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ui-kit-skeleton-row__line {
    height: 12px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
    background-size: 200% 100%; animation: ui-kit-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
.ui-kit-skeleton-row__line--lg { height: 16px; width: 60%; }
.ui-kit-skeleton-row__line--sm { height: 12px; width: 40%; }

.ui-kit-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 20px; background: var(--ui-kit-bg-soft);
    border-radius: var(--ui-kit-radius-xl); text-align: center;
    gap: var(--ui-kit-space-lg);
}
.ui-kit-empty__icon { color: var(--ui-kit-text-muted); opacity: 0.5; }
.ui-kit-empty__title { font-size: var(--ui-kit-fs-xl); font-weight: var(--ui-kit-fw-bold); color: var(--ui-kit-navy); margin: 0; }
.ui-kit-empty__text { font-size: var(--ui-kit-fs-base); color: var(--ui-kit-text-muted); margin: 0; max-width: 420px; line-height: var(--ui-kit-lh-loose); }
.ui-kit-empty__actions { margin-top: var(--ui-kit-space-sm); display: inline-flex; gap: 8px; }

.ui-kit-status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    color: var(--ui-kit-white); flex-shrink: 0;
}
.ui-kit-status-icon--active { background: var(--ui-kit-success); }
.ui-kit-status-icon--paused { background: var(--ui-kit-warning); }
.ui-kit-status-icon--error  { background: var(--ui-kit-danger); }
.ui-kit-status-icon--info   { background: var(--ui-kit-info); }
.ui-kit-status-icon--offline{ background: var(--ui-kit-text-muted); }