/* Skeleton loading state */

/* ═══ SKELETON LOADING STATE ═══ */
/* Base shimmer animation — subtle diagonal light sweep */
@keyframes skel-shimmer{
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(212,255,62,0.06) 50%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0.04) 100%
  );
  background-size:200% 100%;
  animation:skel-shimmer 1.8s linear infinite;
  border-radius:4px;
}

/* Skeleton card — matches real card structure */
.skel-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.skel-card .skel-thumb{
  aspect-ratio:3/2;background:var(--bg-2);
  position:relative;overflow:hidden;
}
.skel-card .skel-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(212,255,62,0.05) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:skel-shimmer 1.8s linear infinite;
}
.skel-card .skel-body{
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.skel-card .skel-cat{height:9px;width:35%}
.skel-card .skel-title-1{height:16px;width:85%}
.skel-card .skel-title-2{height:16px;width:60%}
.skel-card .skel-short-1{height:11px;width:100%}
.skel-card .skel-short-2{height:11px;width:70%}
.skel-card .skel-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;border-top:1px dashed var(--line);margin-top:4px;
}
.skel-card .skel-meta-date{height:10px;width:60px}
.skel-card .skel-meta-author{height:10px;width:80px}
.skel-card .skel-meta-size{height:10px;width:40px}
.skel-card .skel-meta-f{width:22px;height:22px;border-radius:5px}

/* Covers-wide skeleton adjustments */
.grid.view-covers-wide .skel-card .skel-thumb{aspect-ratio:16/10}
.grid.view-covers-wide .skel-card .skel-title-1{height:18px}
.grid.view-covers-wide .skel-card .skel-title-2{height:18px}

/* Covers-single skeleton */
.grid.view-covers-single .skel-card{max-width:900px;margin:0 auto;width:100%}
.grid.view-covers-single .skel-card .skel-thumb{aspect-ratio:16/9}
.grid.view-covers-single .skel-card .skel-title-1{height:22px}
.grid.view-covers-single .skel-card .skel-title-2{height:22px}

/* Classic view skeleton — horizontal layout */
.grid.view-classic .skel-card{
  flex-direction:row;align-items:center;
  padding:10px;gap:14px;
}
.grid.view-classic .skel-card .skel-thumb{
  width:120px;height:72px;aspect-ratio:unset;flex-shrink:0;border-radius:6px;
}
.grid.view-classic .skel-card .skel-body{
  flex:1;padding:0;
}
.grid.view-classic .skel-card .skel-short-1,
.grid.view-classic .skel-card .skel-short-2,
.grid.view-classic .skel-card .skel-meta{display:none}

/* Titles-only view skeleton */
.grid.view-titles .skel-card{
  padding:10px 14px;flex-direction:row;align-items:center;gap:12px;
  border-radius:0;border-bottom:1px solid var(--line);border-left:0;border-right:0;border-top:0;
}
.grid.view-titles .skel-card:first-child{border-top:1px solid var(--line)}
.grid.view-titles .skel-card .skel-thumb,
.grid.view-titles .skel-card .skel-short-1,
.grid.view-titles .skel-card .skel-short-2,
.grid.view-titles .skel-card .skel-meta{display:none}
.grid.view-titles .skel-card .skel-body{flex:1;padding:0;flex-direction:row;gap:14px;align-items:center}
.grid.view-titles .skel-card .skel-cat{width:90px;flex-shrink:0}
.grid.view-titles .skel-card .skel-title-2{display:none}

/* Grid while loading — fade-in skeletons, fade-out real cards */
.grid.loading > .card{opacity:.35;pointer-events:none;transition:opacity .18s}