/* ═══════════════════════════════════════════════════════════
   V6.5 Resource Card Redesign
   Apple TV + Bilibili + iOS Glass Style
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Card Base Glass Morphism ── */
:root{
  --card-bg: rgba(255,255,255,.72);
  --card-border: rgba(255,255,255,.55);
  --card-shadow: 0 18px 50px rgba(15,23,42,.10);
  --card-shadow-hover: 0 28px 68px rgba(15,23,42,.16);
  --card-radius: 20px;
  --cover-radius: 16px;
  --transition-card: transform .4s cubic-bezier(.2,.8,.2,1),
                     box-shadow .4s cubic-bezier(.2,.8,.2,1),
                     border-color .4s cubic-bezier(.2,.8,.2,1);
  --transition-cover: transform .38s cubic-bezier(.2,.8,.2,1);
  --transition-overlay: opacity .32s cubic-bezier(.2,.8,.2,1);
}

html[data-theme=dark]{
  --card-bg: rgba(31,41,55,.68);
  --card-border: rgba(148,163,184,.18);
  --card-shadow: 0 18px 50px rgba(0,0,0,.28);
  --card-shadow-hover: 0 32px 72px rgba(0,0,0,.42);
}

/* ── 2. Card Container ── */
.store-page .app-card{
  background: var(--card-bg) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: var(--card-radius) !important;
  transition: var(--transition-card) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

/* Override !important from v64.css base for card bg */
.store-page .app-card{
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Card hover — PC only */
@media (hover: hover){
  .store-page .app-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(255,255,255,.75) !important;
  }
  html[data-theme=dark] .store-page .app-card:hover{
    border-color: rgba(148,163,184,.32) !important;
  }
}

/* Card active/press */
.store-page .app-card:active{
  transform: scale(.985) !important;
}

/* ── 3. Cover Area ── */
.app-cover{
  position: relative;
  width: 56px;
  height: 56px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 14px;
  background: color-mix(in srgb,var(--theme-color,#4f46e5) 12%,#f1f5f9);
  align-self: flex-start;
}

html[data-theme=dark] .app-cover{
  background: color-mix(in srgb,var(--theme-color,#4f46e5) 16%,#1e293b);
}

.app-cover .cover-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: var(--transition-cover);
  will-change: transform;
}

/* Cover hover zoom — PC only */
@media (hover: hover){
  .store-page .app-card:hover .cover-img{
    transform: scale(1.06);
  }
}

/* ── 4. Cover Fallback ── */
.app-cover .cover-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--theme-color,#4f46e5) 30%,transparent),
    color-mix(in srgb,var(--theme-color-2,#06b6d4) 30%,transparent));
}

.app-cover .cover-fallback span{
  font-size: 16px;
  font-weight: 950;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}

/* ── 5. Cover Gradient Mask ── */
.cover-gradient{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.28) 30%,
    transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ── 6. Cover Type Badge ── */
.cover-type-badge{
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}

.cover-type-badge svg{
  width: 10px;
  height: 10px;
  fill: #fff;
  stroke: none;
}

.cover-badge-video svg polygon{
  fill: #fff;
  stroke: none;
}

.cover-badge-audio svg{
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 7. Hover Overlay ── */
.cover-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-overlay);
  border-radius: inherit;
  background: rgba(0,0,0,.40);
  pointer-events: none;
}

/* Show overlay on card hover — PC only */
@media (hover: hover){
  .store-page .app-card:hover .cover-overlay{
    opacity: 1;
    pointer-events: auto;
  }
}

/* On mobile/tablet, overlay is permanently hidden */
@media (hover: none), (pointer: coarse){
  .cover-overlay{
    display: none !important;
  }
}

/* ── 8. Overlay Action Buttons ── */
.overlay-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.overlay-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.overlay-btn span{ display: none; }

.overlay-btn svg{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.overlay-btn svg polygon,
.overlay-btn svg path{
  fill: currentColor;
  stroke: none;
}

.overlay-btn-play{
  background: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.58);
}

.overlay-btn:hover{
  background: rgba(255,255,255,.40);
  border-color: rgba(255,255,255,.70);
  transform: scale(1.08);
}

.overlay-btn:active{
  transform: scale(.94);
}

/* ── 9. Card Info Area ── */
.store-page .app-card .app-info{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

/* Title: max 2 lines */
.store-page .app-title{
  font-size: 15px;
  font-weight: 750;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Subtitle: max 2 lines */
.store-page .app-subtitle{
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  margin-top: 2px;
}

/* Meta row */
.store-page .app-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.app-meta span{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15,23,42,.04);
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme=dark] .app-meta span{
  background: rgba(255,255,255,.06);
}

/* Type capsule badge */
.app-meta-kind{
  color: var(--theme-color) !important;
  background: color-mix(in srgb,var(--theme-color,#4f46e5) 12%,transparent) !important;
  font-weight: 750 !important;
}

html[data-theme=dark] .app-meta-kind{
  background: color-mix(in srgb,var(--theme-color,#4f46e5) 22%,transparent) !important;
}

/* Category icon in meta */
.app-meta .card-cat-icon{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  border-radius: 4px;
}

/* ── 10. Type-Specific Card Styles ── */

/* === Video Cards === */
.kind-video .app-cover{
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Film-edge accent */
.kind-video .app-cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border-top: 2px solid rgba(255,255,255,.18);
  border-bottom: 2px solid rgba(255,255,255,.18);
}

/* Play triangle watermark */
.kind-video .cover-type-badge{
  background: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.28);
  border-radius: 50%;
}

/* === Music/Audio Cards === */
.kind-audio .app-cover{
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(145deg,
    color-mix(in srgb,var(--theme-color,#4f46e5) 18%,#1a1a2e),
    color-mix(in srgb,var(--theme-color-2,#06b6d4) 18%,#16213e));
}

/* CD ring effect on cover */
.kind-audio .app-cover::after{
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.16);
  z-index: 1;
  pointer-events: none;
}

/* Audio fallback album-art style */
.kind-audio .app-cover .cover-fallback{
  background: linear-gradient(145deg,
    color-mix(in srgb,var(--theme-color,#4f46e5) 40%,#0f0f23),
    color-mix(in srgb,var(--theme-color-2,#06b6d4) 40%,#0f0f23));
}

.kind-audio .app-cover .cover-fallback span{
  font-size: 48px;
  color: rgba(255,255,255,.44);
}

/* Music badge styling */
.kind-audio .cover-type-badge{
  background: rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.16);
  border-radius: 50%;
}

/* === APK / App Cards === */
.kind-apk .app-cover{
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(145deg,
    color-mix(in srgb,#22c55e 22%,#f1f5f9),
    color-mix(in srgb,#16a34a 22%,#e2e8f0));
}

html[data-theme=dark] .kind-apk .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#22c55e 26%,#1e293b),
    color-mix(in srgb,#16a34a 26%,#0f172a));
}

.kind-apk .app-cover .cover-fallback{
  background: linear-gradient(145deg,
    color-mix(in srgb,#22c55e 36%,#f1f5f9),
    color-mix(in srgb,#16a34a 36%,#e2e8f0));
}

/* === Document Cards === */
.kind-doc .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#3b82f6 18%,#f1f5f9),
    color-mix(in srgb,#2563eb 18%,#e2e8f0));
}

html[data-theme=dark] .kind-doc .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#3b82f6 22%,#1e293b),
    color-mix(in srgb,#2563eb 22%,#0f172a));
}

.kind-doc .app-cover .cover-fallback{
  background: linear-gradient(145deg,
    color-mix(in srgb,#3b82f6 32%,#f1f5f9),
    color-mix(in srgb,#2563eb 32%,#e2e8f0));
}

/* === Image Cards === */
.kind-image .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#8b5cf6 18%,#f1f5f9),
    color-mix(in srgb,#7c3aed 18%,#e2e8f0));
}

html[data-theme=dark] .kind-image .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#8b5cf6 22%,#1e293b),
    color-mix(in srgb,#7c3aed 22%,#0f172a));
}

.kind-image .app-cover .cover-fallback{
  background: linear-gradient(145deg,
    color-mix(in srgb,#8b5cf6 32%,#f1f5f9),
    color-mix(in srgb,#7c3aed 32%,#e2e8f0));
}

/* === Archive Cards === */
.kind-archive .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#f59e0b 18%,#f1f5f9),
    color-mix(in srgb,#d97706 18%,#e2e8f0));
}

html[data-theme=dark] .kind-archive .app-cover{
  background: linear-gradient(145deg,
    color-mix(in srgb,#f59e0b 22%,#1e293b),
    color-mix(in srgb,#d97706 22%,#0f172a));
}

.kind-archive .app-cover .cover-fallback{
  background: linear-gradient(145deg,
    color-mix(in srgb,#f59e0b 32%,#f1f5f9),
    color-mix(in srgb,#d97706 32%,#e2e8f0));
}

/* ── 11. Skeleton Loading ── */
.app-grid.is-filtering .app-card{
  pointer-events: none;
}

.skeleton-shimmer{
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.32) 40%,
    rgba(255,255,255,.48) 50%,
    rgba(255,255,255,.32) 60%,
    transparent 100%);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  z-index: 10;
}

@keyframes skeleton-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* Skeleton card placeholder */
.skeleton-card{
  background: var(--card-bg) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.skeleton-cover{
  aspect-ratio: 16 / 9;
  background: rgba(15,23,42,.06);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

html[data-theme=dark] .skeleton-cover{
  background: rgba(255,255,255,.04);
}

.skeleton-info{
  flex: 1;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line{
  height: 14px;
  border-radius: 7px;
  background: rgba(15,23,42,.06);
}

html[data-theme=dark] .skeleton-line{
  background: rgba(255,255,255,.05);
}

.skeleton-line.short{ width: 60%; }
.skeleton-line.mid{ width: 80%; }
.skeleton-line.long{ width: 94%; }

.skeleton-meta{
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.skeleton-tag{
  height: 22px;
  width: 52px;
  border-radius: 6px;
  background: rgba(15,23,42,.06);
}

html[data-theme=dark] .skeleton-tag{
  background: rgba(255,255,255,.05);
}

/* ── 12. Filter Transition ── */
.app-grid.is-filtering .app-card{
  opacity: .5;
  transition: opacity .15s ease;
}

.app-card{
  opacity: 1;
  transition: var(--transition-card), opacity .25s ease;
}

/* Staggered card reveal after filter */
.app-card{
  animation: card-reveal .45s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes card-reveal{
  from{
    opacity: .4;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 13. Desktop Layout (≥861px) ── */
@media(min-width:861px){
  /* ── Grid: auto-fit, min 320px ── */
  .store-page .app-grid{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 16px !important;
  }

  /* ── Card: horizontal grid (icon left, info right) ── */
  .store-page .app-card,
  .store-page .store-app-card,
  .store-page.card-style-compact .app-card,
  .store-page.card-style-gallery .app-card,
  .store-page .app-card:not(.is-hidden),
  .store-page .store-app-card:not(.is-hidden),
  .store-page.card-style-compact .app-card:not(.is-hidden),
  .store-page.card-style-gallery .app-card:not(.is-hidden){
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: none !important;
    padding: 14px 62px 14px 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* ── Cover: 76px at left ── */
  .store-page .app-cover{
    width: 76px !important;
    height: 76px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .store-page .app-cover .cover-img,
  .store-page .app-icon,
  .store-page .app-cover .cover-fallback{
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    border-radius: 20px !important;
    object-fit: cover !important;
  }

  /* ── Hide overlay / badge / gradient on PC covers ── */
  .store-page .cover-overlay,
  .store-page .overlay-actions,
  .store-page .overlay-btn,
  .store-page .cover-gradient,
  .store-page .cover-type-badge{
    display: none !important;
  }

  /* ── Info: right column, centered ── */
  .store-page .app-info{
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .store-page .app-title{
    font-size: 15.5px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
  }

  .store-page .app-subtitle{
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: var(--muted) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .store-page .app-meta{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    max-height: 42px !important;
  }

  .store-page .app-meta .card-cat-icon{
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    border-radius: 4px !important;
    margin-right: 2px !important;
  }

  .store-page .app-meta span{
    flex: 0 0 auto !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .store-page .app-meta-downloads{
    max-width: none !important;
  }

  .app-meta-kind{
    color: var(--theme-color) !important;
    background: color-mix(in srgb,var(--theme-color) 12%,transparent) !important;
    font-weight: 750 !important;
  }

  /* Hide mobile-line on desktop */
  .app-mobile-line{
    display: none !important;
  }

  /* ── Card type decorative mark (top-right) ── */
  .store-page .card-type-mark{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 10px 24px rgba(15,23,42,.09);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    pointer-events: none;
    z-index: 4;
  }

  html[data-theme=dark] .store-page .card-type-mark{
    background: rgba(15,23,42,.62);
    border-color: rgba(148,163,184,.22);
  }

  .store-page .card-type-mark svg{
    width: 22px;
    height: 22px;
    display: block;
  }

  /* ── Audio: vinyl disc ── */
  .store-page .card-type-audio{
    background: linear-gradient(135deg, rgba(24,24,27,.95), rgba(76,29,149,.78));
  }

  .store-page .vinyl-disc{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    display: block;
    background:
      repeating-radial-gradient(circle, #020617 0 2px, #111827 2px 3px),
      radial-gradient(circle at center, #f8fafc 0 9%, #111827 10% 40%, #020617 41% 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.18),
      0 7px 16px rgba(0,0,0,.25);
    animation: vinyl-spin 5s linear infinite;
  }

  .store-page .vinyl-disc i{
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #f8fafc;
  }

  @keyframes vinyl-spin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  /* ── Video: screen + scan line + recording dot ── */
  .store-page .card-type-video{
    color: #2563eb;
    background:
      radial-gradient(circle at 65% 25%, rgba(255,255,255,.9), transparent 28%),
      linear-gradient(135deg, rgba(219,234,254,.95), rgba(147,197,253,.75));
  }

  .store-page .type-icon-video{
    animation: video-float 2.8s ease-in-out infinite;
  }

  .store-page .video-record-dot{
    animation: video-record 1.4s ease-in-out infinite;
  }

  .store-page .video-scan-line{
    opacity: .7;
    animation: video-scan 1.8s ease-in-out infinite;
  }

  @keyframes video-float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-1.5px); }
  }

  @keyframes video-record{
    0%,100%{ opacity: .35; transform: scale(.85); }
    50%{ opacity: 1; transform: scale(1.1); }
  }

  @keyframes video-scan{
    0%,100%{ transform: translateY(0); opacity: .45; }
    50%{ transform: translateY(5px); opacity: .9; }
  }

  /* ── APK: bobbing android + arm wave ── */
  .store-page .card-type-apk{
    color: #16a34a;
    background: linear-gradient(135deg, rgba(220,252,231,.95), rgba(134,239,172,.72));
  }

  .store-page .type-icon-apk{
    animation: apk-bob 3s ease-in-out infinite;
  }

  .store-page .apk-arm{
    transform-origin: center;
    animation: apk-arm-wave 2.2s ease-in-out infinite;
  }

  @keyframes apk-bob{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-1.5px); }
  }

  @keyframes apk-arm-wave{
    0%,100%{ opacity: .65; }
    50%{ opacity: 1; }
  }

  /* ── Doc: glowing lines ── */
  .store-page .card-type-doc{
    color: #0ea5e9;
    background: linear-gradient(135deg, rgba(224,242,254,.95), rgba(125,211,252,.72));
  }

  .store-page .doc-line{
    animation: doc-line-glow 2s ease-in-out infinite;
  }

  .store-page .doc-line-2{
    animation-delay: .25s;
  }

  @keyframes doc-line-glow{
    0%,100%{ opacity: .45; }
    50%{ opacity: 1; }
  }

  /* ── Image: sparkling sun ── */
  .store-page .card-type-image{
    color: #8b5cf6;
    background: linear-gradient(135deg, rgba(245,243,255,.95), rgba(196,181,253,.72));
  }

  .store-page .image-sun{
    animation: image-spark 2.4s ease-in-out infinite;
  }

  @keyframes image-spark{
    0%,100%{ opacity: .55; transform: scale(.9); }
    50%{ opacity: 1; transform: scale(1.15); }
  }

  /* ── Archive: zipper movement ── */
  .store-page .card-type-archive{
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(254,243,199,.95), rgba(252,211,77,.72));
  }

  .store-page .zip-line{
    animation: zip-move 1.8s ease-in-out infinite;
  }

  @keyframes zip-move{
    0%,100%{ transform: translateY(-1px); }
    50%{ transform: translateY(1.5px); }
  }

  /* ── iOS: dot pulse ── */
  .store-page .card-type-ios{
    color: #111827;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(226,232,240,.76));
  }

  html[data-theme=dark] .store-page .card-type-ios{
    color: #e5e7eb;
    background: linear-gradient(135deg, rgba(31,41,55,.92), rgba(55,65,81,.72));
  }

  .store-page .ios-dot{
    animation: ios-pulse 1.8s ease-in-out infinite;
  }

  @keyframes ios-pulse{
    0%,100%{ opacity: .45; transform: scale(.8); }
    50%{ opacity: 1; transform: scale(1.15); }
  }

  /* ── File: pulsing line ── */
  .store-page .card-type-file{
    color: #64748b;
    background: linear-gradient(135deg, rgba(248,250,252,.96), rgba(226,232,240,.76));
  }

  html[data-theme=dark] .store-page .card-type-file{
    color: #9ca3af;
    background: linear-gradient(135deg, rgba(31,41,55,.88), rgba(55,65,81,.68));
  }

  .store-page .file-pulse-line{
    animation: file-pulse 2s ease-in-out infinite;
  }

  @keyframes file-pulse{
    0%,100%{ opacity: .45; }
    50%{ opacity: 1; }
  }

  /* Accessibility: respect reduced motion */
  @media(prefers-reduced-motion: reduce){
    .store-page .card-type-mark *,
    .store-page .vinyl-disc{
      animation: none !important;
    }
  }
}

/* Wider screens — auto columns, never forced to 4 */
@media(min-width:1100px){
  .store-page .app-grid{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 18px !important;
  }
}

/* Card type mark — base */
.card-type-mark{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── 14. Tablet (701-860px) ── */
@media(min-width:701px) and (max-width:860px){
  .store-page .app-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .store-page .app-card{
    height: 148px !important;
    min-height: 148px !important;
    max-height: none !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .store-page .app-card:not(.is-hidden){
    height: 148px !important;
    min-height: 148px !important;
    max-height: none !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .app-cover{
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 14px !important;
  }

  .app-cover .cover-img,
  .store-page .app-icon-wrap,
  .store-page .app-icon{
    width: 52px !important;
    height: 52px !important;
    aspect-ratio: auto !important;
    border-radius: 14px !important;
    display: block;
    flex: 0 0 52px !important;
    object-fit: cover;
  }

  .app-cover .cover-fallback{
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .app-cover .cover-fallback span{
    font-size: 16px !important;
  }

  .store-page .app-info{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .store-page .app-title{
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }

  .store-page .app-subtitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
    margin-top: 3px !important;
  }

  .store-page .app-meta{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
  }

  .app-meta span{
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    background: rgba(15,23,42,.05) !important;
    color: var(--muted) !important;
  }

  .app-meta-kind{
    color: var(--theme-color) !important;
    background: color-mix(in srgb,var(--theme-color) 12%,transparent) !important;
  }

  /* Hide mobile-line on tablet */
  .app-mobile-line{
    display: none !important;
  }

  /* Hide hover overlay on tablets */
  .cover-overlay{ display: none !important; }

  /* Card type mark */
  .store-page .card-type-mark{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    pointer-events: none;
    z-index: 4;
  }
  .store-page .card-type-mark svg{
    width: 17px;
    height: 17px;
    display: block;
  }
  .store-page .card-type-audio{
    background: linear-gradient(135deg, rgba(24,24,27,.92), rgba(76,29,149,.74));
  }
  .store-page .vinyl-disc{
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: relative;
    display: block;
    background:
      repeating-radial-gradient(circle, #020617 0 2px, #111827 2px 3px),
      radial-gradient(circle at center, #f8fafc 0 9%, #111827 10% 40%, #020617 41% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.22);
    animation: vinyl-spin 5s linear infinite;
  }
  .store-page .vinyl-disc i{
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #f8fafc;
  }
  .store-page .card-type-video{ color: #2563eb; background: linear-gradient(135deg, rgba(219,234,254,.94), rgba(147,197,253,.72)); }
  .store-page .card-type-apk{ color: #16a34a; background: linear-gradient(135deg, rgba(220,252,231,.94), rgba(134,239,172,.7)); }
  .store-page .card-type-doc{ color: #0ea5e9; background: linear-gradient(135deg, rgba(224,242,254,.94), rgba(125,211,252,.7)); }
  .store-page .card-type-image{ color: #8b5cf6; background: linear-gradient(135deg, rgba(245,243,255,.94), rgba(196,181,253,.7)); }
  .store-page .card-type-archive{ color: #f59e0b; background: linear-gradient(135deg, rgba(254,243,199,.94), rgba(252,211,77,.7)); }
  .store-page .card-type-ios{ color: #111827; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(226,232,240,.74)); }
  .store-page .card-type-file{ color: #64748b; background: linear-gradient(135deg, rgba(248,250,252,.94), rgba(226,232,240,.74)); }
  .store-page .type-icon-video{ animation: video-float 2.8s ease-in-out infinite; }
  .store-page .video-record-dot{ animation: video-record 1.4s ease-in-out infinite; }
  .store-page .video-scan-line{ animation: video-scan 1.8s ease-in-out infinite; }
  .store-page .type-icon-apk{ animation: apk-bob 3s ease-in-out infinite; }
  .store-page .apk-arm{ animation: apk-arm-wave 2.2s ease-in-out infinite; }
  .store-page .doc-line{ animation: doc-line-glow 2s ease-in-out infinite; }
  .store-page .doc-line-2{ animation-delay: .25s; }
  .store-page .image-sun{ animation: image-spark 2.4s ease-in-out infinite; }
  .store-page .zip-line{ animation: zip-move 1.8s ease-in-out infinite; }
  .store-page .ios-dot{ animation: ios-pulse 1.8s ease-in-out infinite; }
  .store-page .file-pulse-line{ animation: file-pulse 2s ease-in-out infinite; }
  html[data-theme=dark] .store-page .card-type-mark{
    background: rgba(15,23,42,.58);
    border-color: rgba(148,163,184,.18);
  }
  html[data-theme=dark] .store-page .card-type-ios{
    color: #e5e7eb;
    background: linear-gradient(135deg, rgba(31,41,55,.88), rgba(55,65,81,.68));
  }
  html[data-theme=dark] .store-page .card-type-file{
    color: #9ca3af;
    background: linear-gradient(135deg, rgba(31,41,55,.84), rgba(55,65,81,.64));
  }
}

/* ── 15. Mobile (≤700px) ── */
@media(max-width:700px){
  /* ── Card: vertical app-card layout, fixed height ── */
  .store-page .app-card,
  .store-page .store-app-card,
  .store-page.card-style-compact .app-card,
  .store-page.card-style-gallery .app-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: none !important;
    padding: 12px !important;
    gap: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(248,250,252,.68)) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  }

  .store-page .app-card:not(.is-hidden),
  .store-page .store-app-card:not(.is-hidden),
  .store-page.card-style-compact .app-card:not(.is-hidden),
  .store-page.card-style-gallery .app-card:not(.is-hidden){
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: none !important;
    padding: 12px !important;
    gap: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* ── Type-specific card backgrounds (subtle) ── */
  .store-page .kind-music .app-card,
  .store-page .kind-audio .app-card{
    background: linear-gradient(135deg, rgba(250,245,255,.88), rgba(245,240,255,.68)) !important;
    border-color: rgba(168,130,220,.28) !important;
  }
  .store-page .kind-video .app-card{
    background: linear-gradient(135deg, rgba(240,245,255,.88), rgba(235,240,252,.68)) !important;
    border-color: rgba(100,140,220,.24) !important;
  }
  .store-page .kind-apk .app-card{
    background: linear-gradient(135deg, rgba(240,255,245,.86), rgba(230,248,238,.66)) !important;
    border-color: rgba(80,200,130,.22) !important;
  }
  .store-page .kind-doc .app-card{
    background: linear-gradient(135deg, rgba(240,248,255,.86), rgba(232,242,252,.66)) !important;
    border-color: rgba(80,150,220,.22) !important;
  }
  .store-page .kind-image .app-card{
    background: linear-gradient(135deg, rgba(250,242,255,.86), rgba(245,238,252,.66)) !important;
    border-color: rgba(150,100,210,.22) !important;
  }

  html[data-theme=dark] .store-page .app-card{
    background: linear-gradient(135deg, rgba(31,41,55,.82), rgba(15,23,42,.72)) !important;
    border-color: rgba(148,163,184,.18) !important;
  }
  html[data-theme=dark] .store-page .kind-audio .app-card{
    background: linear-gradient(135deg, rgba(45,35,55,.78), rgba(30,22,42,.68)) !important;
  }
  html[data-theme=dark] .store-page .kind-video .app-card{
    background: linear-gradient(135deg, rgba(25,35,55,.78), rgba(20,28,42,.68)) !important;
  }
  html[data-theme=dark] .store-page .kind-apk .app-card{
    background: linear-gradient(135deg, rgba(22,42,30,.78), rgba(18,32,22,.68)) !important;
  }

  /* ── Cover icon: 44×44 at top-left ── */
  .app-cover{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 13px !important;
    overflow: hidden;
    position: relative;
    align-self: flex-start;
  }

  .app-cover .cover-img,
  .store-page .app-icon-wrap,
  .store-page .app-icon{
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: auto !important;
    border-radius: 13px !important;
    display: block;
    flex: 0 0 44px !important;
    object-fit: cover;
  }

  .app-cover .cover-fallback{
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: auto !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .app-cover .cover-fallback span{
    font-size: 15px !important;
  }

  /* Hide extras on mobile */
  .cover-gradient,
  .cover-type-badge,
  .cover-overlay,
  .kind-video .app-cover::before,
  .kind-audio .app-cover::after{
    display: none !important;
  }

  /* ── Info area: fills space between cover and bottom ── */
  .store-page .app-info{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* ── Title: max 2 lines, bold ── */
  .store-page .app-title{
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }

  /* Subtitle: hidden */
  .store-page .app-subtitle{
    display: none !important;
  }

  /* Meta: hidden (info shown in mobile-line) */
  .store-page .app-meta{
    display: none !important;
  }

  /* ── Mobile-line: single line, type + downloads ── */
  .app-mobile-line{
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--muted) !important;
  }

  .app-mobile-line span{
    display: inline !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    white-space: nowrap;
  }

  /* Separator dot between type and downloads */
  .app-mobile-type + .app-mobile-size::before,
  .app-mobile-type + .app-mobile-downloads::before,
  .app-mobile-size + .app-mobile-downloads::before{
    content: '·';
    display: inline;
    margin: 0 4px;
    color: var(--muted);
  }

  /* Hide file size on mobile */
  .app-mobile-size{
    display: none !important;
  }

  /* When size is hidden, separator between type and downloads still works */
  .app-mobile-type + .app-mobile-size + .app-mobile-downloads::before{
    display: none;
  }

  /* Category icon */
  .app-mobile-line .card-cat-icon{
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    border-radius: 3px !important;
    margin-right: 4px !important;
  }

  .app-mobile-line .card-cat-icon + span::before{
    display: none;
  }

  /* ── Card type mark (top-right) ── */
  .store-page .card-type-mark{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 6px 14px rgba(15,23,42,.07);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    pointer-events: none;
    z-index: 4;
  }
  .store-page .card-type-mark svg{
    width: 15px;
    height: 15px;
    display: block;
  }
  .store-page .card-type-audio{
    background: linear-gradient(135deg, rgba(24,24,27,.9), rgba(76,29,149,.7));
  }
  .store-page .vinyl-disc{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    display: block;
    background:
      repeating-radial-gradient(circle, #020617 0 1.5px, #111827 1.5px 2.5px),
      radial-gradient(circle at center, #f8fafc 0 8%, #111827 9% 40%, #020617 41% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.2);
    animation: vinyl-spin 5s linear infinite;
  }
  .store-page .vinyl-disc i{
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #f8fafc;
  }
  .store-page .card-type-video{ color: #2563eb; background: linear-gradient(135deg, rgba(219,234,254,.93), rgba(147,197,253,.7)); }
  .store-page .card-type-apk{ color: #16a34a; background: linear-gradient(135deg, rgba(220,252,231,.93), rgba(134,239,172,.68)); }
  .store-page .card-type-doc{ color: #0ea5e9; background: linear-gradient(135deg, rgba(224,242,254,.93), rgba(125,211,252,.68)); }
  .store-page .card-type-image{ color: #8b5cf6; background: linear-gradient(135deg, rgba(245,243,255,.93), rgba(196,181,253,.68)); }
  .store-page .card-type-archive{ color: #f59e0b; background: linear-gradient(135deg, rgba(254,243,199,.93), rgba(252,211,77,.68)); }
  .store-page .card-type-ios{ color: #111827; background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(226,232,240,.72)); }
  .store-page .card-type-file{ color: #64748b; background: linear-gradient(135deg, rgba(248,250,252,.93), rgba(226,232,240,.72)); }
  .store-page .type-icon-video{ animation: video-float 2.8s ease-in-out infinite; }
  .store-page .video-record-dot{ animation: video-record 1.4s ease-in-out infinite; }
  .store-page .video-scan-line{ animation: video-scan 1.8s ease-in-out infinite; }
  .store-page .type-icon-apk{ animation: apk-bob 3s ease-in-out infinite; }
  .store-page .apk-arm{ animation: apk-arm-wave 2.2s ease-in-out infinite; }
  .store-page .doc-line{ animation: doc-line-glow 2s ease-in-out infinite; }
  .store-page .doc-line-2{ animation-delay: .25s; }
  .store-page .image-sun{ animation: image-spark 2.4s ease-in-out infinite; }
  .store-page .zip-line{ animation: zip-move 1.8s ease-in-out infinite; }
  .store-page .ios-dot{ animation: ios-pulse 1.8s ease-in-out infinite; }
  .store-page .file-pulse-line{ animation: file-pulse 2s ease-in-out infinite; }
  html[data-theme=dark] .store-page .card-type-mark{
    background: rgba(15,23,42,.54);
    border-color: rgba(148,163,184,.16);
  }
  html[data-theme=dark] .store-page .card-type-ios{
    color: #e5e7eb;
    background: linear-gradient(135deg, rgba(31,41,55,.86), rgba(55,65,81,.64));
  }
  html[data-theme=dark] .store-page .card-type-file{
    color: #9ca3af;
    background: linear-gradient(135deg, rgba(31,41,55,.82), rgba(55,65,81,.6));
  }

  /* ── Grid: exactly 2 columns ── */
  .store-page .app-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ── Extra small mobile (≤380px) ── */
@media(max-width:380px){
  .store-page .app-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .store-page .app-card{
    height: 112px !important;
    min-height: 112px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .store-page .app-card:not(.is-hidden){
    height: 112px !important;
    min-height: 112px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .store-page .card-type-mark{
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .store-page .card-type-mark svg{
    width: 14px;
    height: 14px;
  }
  .store-page .vinyl-disc{
    width: 16px;
    height: 16px;
  }
  .store-page .vinyl-disc i{
    inset: 5px;
  }

  .app-cover{
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }

  .app-cover .cover-img,
  .app-cover .cover-fallback{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .store-page .app-title{
    font-size: 12px !important;
    margin-top: 6px !important;
    -webkit-line-clamp: 2 !important;
  }

  .app-mobile-line{
    font-size: 10px !important;
    padding-top: 2px !important;
  }

  .app-mobile-line span{
    font-size: 10px !important;
  }

  .app-mobile-line .card-cat-icon{
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
}

/* ── 16. Accessibility: Respect reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .store-page .app-card,
  .app-cover .cover-img,
  .cover-overlay{
    transition: none !important;
    animation: none !important;
  }

  .store-page .app-card:hover{
    transform: none !important;
  }

  .store-page .app-card:hover .cover-img{
    transform: none !important;
  }
}

/* V6.6 front UI fixes: cards, drawers, and resource detail */
.store-page .app-grid{
  align-items:stretch!important;
}

.store-page .app-card{
  min-width:0!important;
}

.store-page .app-cover{
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.store-page .app-title,
.store-page .app-subtitle,
.store-page .app-mobile-line,
.store-page .app-meta span{
  overflow-wrap:anywhere;
}

.store-page .card-type-mark{
  flex:0 0 auto;
}

.store-page .kind-audio,
.store-page .kind-video,
.store-page .kind-apk,
.store-page .kind-doc,
.store-page .kind-image{
  background:var(--card-bg)!important;
}

@media(min-width:861px){
  .store-page .app-card,
  .store-page .store-app-card,
  .store-page.card-style-compact .app-card,
  .store-page.card-style-gallery .app-card,
  .store-page .app-card:not(.is-hidden),
  .store-page .store-app-card:not(.is-hidden),
  .store-page.card-style-compact .app-card:not(.is-hidden),
  .store-page.card-style-gallery .app-card:not(.is-hidden){
    grid-template-columns:76px minmax(0,1fr) 38px!important;
    padding:14px!important;
    gap:14px!important;
  }

  .store-page .card-type-mark{
    position:static!important;
    align-self:start!important;
    justify-self:end!important;
  }

  .store-page .app-info{
    align-self:stretch!important;
    min-height:0!important;
    padding:2px 0!important;
  }

  .store-page .app-meta{
    max-height:30px!important;
    overflow:hidden!important;
  }
}

.bottom-sheet .sheet-panel{
  overscroll-behavior:contain;
}

.bottom-sheet .sheet-pills,
.bottom-sheet .dock-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.bottom-sheet .sheet-pills .dock-tab,
.bottom-sheet .dock-tabs .dock-tab{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.bottom-sheet .dock-tab>span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.bottom-sheet .dock-tab em,
.bottom-sheet .dock-tab b{
  flex:0 0 auto!important;
}

#categorySheet .sheet-pills,
#categorySheet .dock-tabs{
  overflow-y:auto!important;
  padding-right:2px!important;
  scrollbar-width:none;
}

#categorySheet .sheet-pills::-webkit-scrollbar,
#categorySheet .dock-tabs::-webkit-scrollbar{
  display:none;
}

.resource-detail .detail-panel{
  min-height:0!important;
}

.resource-detail .detail-main{
  min-height:0!important;
}

.resource-detail .detail-section,
.resource-detail .detail-fields,
.resource-detail .detail-fields div{
  min-width:0!important;
}

.resource-detail .detail-desc{
  overflow-wrap:anywhere!important;
}

.resource-detail .detail-cover-fallback{
  text-align:center;
  padding:16px;
}

.resource-detail .detail-actions{
  z-index:5!important;
}

.resource-detail .detail-action-group{
  min-width:0!important;
}

.resource-detail .detail-action-btn{
  white-space:nowrap!important;
}

@media(max-width:700px){
  .store-page .app-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .store-page .app-card,
  .store-page .store-app-card,
  .store-page.card-style-compact .app-card,
  .store-page.card-style-gallery .app-card,
  .store-page .app-card:not(.is-hidden),
  .store-page .store-app-card:not(.is-hidden),
  .store-page.card-style-compact .app-card:not(.is-hidden),
  .store-page.card-style-gallery .app-card:not(.is-hidden){
    min-height:136px!important;
    height:auto!important;
    padding:11px!important;
  }

  .store-page .app-title{
    padding-right:30px!important;
    margin-top:7px!important;
    line-height:1.24!important;
  }

  .store-page .app-mobile-line{
    min-height:15px!important;
  }

  .store-page .card-type-mark{
    top:8px!important;
    right:8px!important;
  }

  .bottom-sheet .sheet-panel{
    left:10px!important;
    right:10px!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    max-height:min(62vh,520px)!important;
    padding:14px!important;
    border-radius:24px!important;
  }

  .bottom-sheet .sheet-pills,
  .bottom-sheet .dock-tabs{
    gap:8px!important;
  }

  .bottom-sheet .dock-tab{
    min-height:44px!important;
    padding:10px!important;
    border-radius:16px!important;
  }

  .resource-detail{
    padding:0 8px calc(8px + env(safe-area-inset-bottom))!important;
  }

  .resource-detail .detail-panel{
    max-height:min(90vh,var(--vvh,90vh))!important;
  }

  .resource-detail .detail-main{
    padding:12px 12px 96px!important;
  }

  .resource-detail .detail-desc{
    max-height:none!important;
  }

  .resource-detail .detail-actions{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
  }

  .resource-detail .detail-action-group{
    gap:8px!important;
  }

  .resource-detail .detail-action-btn{
    height:42px!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
}

@media(max-width:520px){
  .resource-detail .detail-fields{
    grid-template-columns:1fr!important;
  }

  .resource-detail .detail-quick-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .resource-detail .detail-head{
    gap:10px!important;
  }

  .resource-detail .detail-head button{
    width:38px!important;
    height:38px!important;
  }
}

@media(max-width:380px){
  .store-page .app-grid{
    gap:7px!important;
  }

  .store-page .app-card,
  .store-page .app-card:not(.is-hidden){
    min-height:128px!important;
    height:auto!important;
  }

  .store-page .app-title{
    font-size:11.5px!important;
  }

  .resource-detail .detail-action-btn span{
    display:none!important;
  }

  .resource-detail .detail-action-btn svg{
    margin:0!important;
  }
}

/* V6.7 premium animated type badges */
.store-page .card-type-mark{
  --badge-a:#64748b;
  --badge-b:#e2e8f0;
  --badge-ink:#0f172a;
  overflow:hidden!important;
  isolation:isolate;
  color:var(--badge-ink)!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.96),rgba(255,255,255,.30) 32%,transparent 58%),
    linear-gradient(145deg,color-mix(in srgb,var(--badge-a) 88%,#fff),color-mix(in srgb,var(--badge-b) 82%,#fff))!important;
  border:1px solid rgba(255,255,255,.70)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -10px 22px rgba(255,255,255,.16),
    0 12px 28px color-mix(in srgb,var(--badge-a) 24%,transparent)!important;
  transform-style:preserve-3d;
  animation:type-badge-float 4.8s ease-in-out infinite;
}

.store-page .card-type-mark::before,
.store-page .card-type-mark::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
}

.store-page .card-type-mark::before{
  background:
    conic-gradient(from 145deg,transparent 0 23%,rgba(255,255,255,.78) 30%,transparent 39% 62%,rgba(255,255,255,.36) 70%,transparent 82% 100%);
  animation:type-badge-sheen 5.8s linear infinite;
  opacity:.82;
}

.store-page .card-type-mark::after{
  inset:3px;
  border-radius:inherit;
  background:
    radial-gradient(circle at 68% 72%,color-mix(in srgb,var(--badge-b) 48%,transparent),transparent 46%),
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

.store-page .card-type-mark svg,
.store-page .vinyl-disc{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 3px 5px rgba(15,23,42,.18));
  transform-origin:center;
  transform-box:fill-box;
}

.store-page .card-type-video{
  --badge-a:#2563eb;
  --badge-b:#38bdf8;
  --badge-ink:#eff6ff;
}

.store-page .card-type-audio{
  --badge-a:#7c3aed;
  --badge-b:#ec4899;
  --badge-ink:#fdf4ff;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.40),transparent 34%),
    radial-gradient(circle at 72% 76%,rgba(236,72,153,.52),transparent 38%),
    linear-gradient(145deg,#18181b,#581c87 54%,#be185d)!important;
}

.store-page .card-type-apk{
  --badge-a:#16a34a;
  --badge-b:#84cc16;
  --badge-ink:#f0fdf4;
}

.store-page .card-type-doc{
  --badge-a:#0284c7;
  --badge-b:#67e8f9;
  --badge-ink:#f0f9ff;
}

.store-page .card-type-image{
  --badge-a:#8b5cf6;
  --badge-b:#f472b6;
  --badge-ink:#faf5ff;
}

.store-page .card-type-archive{
  --badge-a:#f59e0b;
  --badge-b:#fb7185;
  --badge-ink:#fff7ed;
}

.store-page .card-type-ios{
  --badge-a:#0f172a;
  --badge-b:#94a3b8;
  --badge-ink:#f8fafc;
}

.store-page .card-type-file{
  --badge-a:#475569;
  --badge-b:#cbd5e1;
  --badge-ink:#f8fafc;
}

html[data-theme=dark] .store-page .card-type-mark{
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 32px rgba(0,0,0,.34),
    0 0 24px color-mix(in srgb,var(--badge-a) 26%,transparent)!important;
}

.store-page .type-icon-video{
  color:#fff!important;
  animation:type-video-pop 3.2s cubic-bezier(.4,0,.2,1) infinite!important;
}

.store-page .video-scan-line{
  stroke:#fff!important;
  opacity:.9!important;
  animation:type-video-scan 1.7s ease-in-out infinite!important;
}

.store-page .video-record-dot{
  fill:#fecdd3!important;
  animation:type-record-glow 1.15s ease-in-out infinite!important;
}

.store-page .type-icon-apk{
  color:#fff!important;
  animation:type-apk-orbit 3.4s ease-in-out infinite!important;
}

.store-page .apk-arm-left{
  transform-origin:7px 10px;
  animation:type-apk-wave-left 1.8s ease-in-out infinite!important;
}

.store-page .apk-arm-right{
  transform-origin:17px 10px;
  animation:type-apk-wave-right 1.8s ease-in-out infinite!important;
}

.store-page .type-icon-doc,
.store-page .type-icon-file,
.store-page .type-icon-image,
.store-page .type-icon-archive,
.store-page .type-icon-ios{
  color:#fff!important;
}

.store-page .type-icon-doc{
  animation:type-doc-page 3.1s ease-in-out infinite!important;
}

.store-page .doc-line{
  animation:type-doc-line 1.9s ease-in-out infinite!important;
}

.store-page .doc-line-2{
  animation-delay:.28s!important;
}

.store-page .type-icon-image{
  animation:type-image-frame 3.8s ease-in-out infinite!important;
}

.store-page .image-sun{
  animation:type-image-sun 1.8s ease-in-out infinite!important;
}

.store-page .type-icon-archive{
  animation:type-archive-tilt 3.2s ease-in-out infinite!important;
}

.store-page .zip-line{
  animation:type-zip-run 1.35s ease-in-out infinite!important;
}

.store-page .type-icon-ios{
  animation:type-ios-lift 3.6s ease-in-out infinite!important;
}

.store-page .ios-dot{
  animation:type-ios-dot 1.7s ease-in-out infinite!important;
}

.store-page .type-icon-file{
  animation:type-file-breathe 3.4s ease-in-out infinite!important;
}

.store-page .file-pulse-line{
  animation:type-file-line 1.6s ease-in-out infinite!important;
}

.store-page .vinyl-disc{
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.65) 0 5%,transparent 6%),
    radial-gradient(circle at center,#fdf2f8 0 10%,#ec4899 11% 20%,#111827 21% 42%,#020617 43% 100%),
    repeating-radial-gradient(circle,#020617 0 2px,#1f2937 2px 3px)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 12px rgba(255,255,255,.08),
    0 7px 16px rgba(0,0,0,.28)!important;
  animation:type-vinyl-spin 3.2s linear infinite,type-vinyl-bob 2.4s ease-in-out infinite!important;
}

.store-page .vinyl-disc i{
  background:
    radial-gradient(circle,#fff 0 24%,#f9a8d4 25% 100%)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}

@keyframes type-badge-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  45%{ transform:translateY(-2px) rotate(-1.4deg); }
  70%{ transform:translateY(1px) rotate(.8deg); }
}

@keyframes type-badge-sheen{
  to{ transform:rotate(360deg); }
}

@keyframes type-video-pop{
  0%,100%{ transform:translateY(0) scale(1); }
  36%{ transform:translateY(-1px) scale(1.06); }
  58%{ transform:translateY(0) scale(.98); }
}

@keyframes type-video-scan{
  0%{ transform:translateY(-3px); opacity:.18; }
  45%{ opacity:1; }
  100%{ transform:translateY(6px); opacity:.18; }
}

@keyframes type-record-glow{
  0%,100%{ opacity:.45; transform:scale(.78); filter:drop-shadow(0 0 0 rgba(254,205,211,0)); }
  50%{ opacity:1; transform:scale(1.18); filter:drop-shadow(0 0 5px rgba(254,205,211,.9)); }
}

@keyframes type-vinyl-spin{
  to{ transform:rotate(360deg); }
}

@keyframes type-vinyl-bob{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -1px; }
}

@keyframes type-apk-orbit{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  35%{ transform:translateY(-2px) rotate(-3deg); }
  68%{ transform:translateY(1px) rotate(2deg); }
}

@keyframes type-apk-wave-left{
  0%,100%{ transform:rotate(0deg); opacity:.65; }
  50%{ transform:rotate(-12deg); opacity:1; }
}

@keyframes type-apk-wave-right{
  0%,100%{ transform:rotate(0deg); opacity:.65; }
  50%{ transform:rotate(12deg); opacity:1; }
}

@keyframes type-doc-page{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  46%{ transform:translateY(-1.5px) rotate(-2deg); }
}

@keyframes type-doc-line{
  0%,100%{ stroke-dasharray:2 8; opacity:.45; }
  50%{ stroke-dasharray:8 2; opacity:1; }
}

@keyframes type-image-frame{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.05) rotate(1.4deg); }
}

@keyframes type-image-sun{
  0%,100%{ transform:scale(.82); opacity:.55; filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ transform:scale(1.28); opacity:1; filter:drop-shadow(0 0 6px rgba(255,255,255,.9)); }
}

@keyframes type-archive-tilt{
  0%,100%{ transform:rotate(0deg); }
  35%{ transform:rotate(-2.5deg); }
  70%{ transform:rotate(2deg); }
}

@keyframes type-zip-run{
  0%,100%{ transform:translateY(-2px); opacity:.5; }
  50%{ transform:translateY(3px); opacity:1; }
}

@keyframes type-ios-lift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

@keyframes type-ios-dot{
  0%,100%{ transform:scale(.7); opacity:.45; }
  50%{ transform:scale(1.25); opacity:1; }
}

@keyframes type-file-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}

@keyframes type-file-line{
  0%,100%{ stroke-dasharray:3 7; opacity:.45; }
  50%{ stroke-dasharray:9 2; opacity:1; }
}

@media(min-width:861px){
  .store-page .card-type-mark{
    width:42px!important;
    height:42px!important;
    border-radius:16px!important;
  }

  .store-page .card-type-mark svg{
    width:23px!important;
    height:23px!important;
  }

  .store-page .vinyl-disc{
    width:26px!important;
    height:26px!important;
  }
}

@media(max-width:700px){
  .store-page .card-type-mark{
    width:30px!important;
    height:30px!important;
    border-radius:11px!important;
  }

  .store-page .card-type-mark svg{
    width:17px!important;
    height:17px!important;
  }

  .store-page .vinyl-disc{
    width:20px!important;
    height:20px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .store-page .card-type-mark,
  .store-page .card-type-mark::before,
  .store-page .card-type-mark svg,
  .store-page .card-type-mark svg *,
  .store-page .vinyl-disc{
    animation:none!important;
  }
}

/* V6.8 debossed type marks: knocked into the card surface */
.store-page .card-type-mark{
  --badge-a:#64748b;
  --badge-b:#cbd5e1;
  --badge-ink:color-mix(in srgb,var(--badge-a) 82%,var(--text,#111827));
  position:relative;
  overflow:hidden!important;
  isolation:isolate;
  color:var(--badge-ink)!important;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.36),transparent 38%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--badge-a) 10%,rgba(255,255,255,.40)),
      color-mix(in srgb,var(--badge-b) 16%,rgba(15,23,42,.05)))!important;
  border:1px solid color-mix(in srgb,var(--badge-a) 18%,rgba(255,255,255,.58))!important;
  box-shadow:
    inset 4px 5px 10px rgba(15,23,42,.16),
    inset -4px -5px 10px rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 0 rgba(255,255,255,.52)!important;
  filter:none!important;
  transform:none!important;
  animation:type-inset-breathe 6.5s ease-in-out infinite!important;
}

.store-page .card-type-mark::before{
  inset:0;
  z-index:0;
  background:
    linear-gradient(120deg,transparent 0 30%,rgba(255,255,255,.45) 42%,transparent 56% 100%);
  opacity:.42;
  transform:translateX(-120%);
  animation:type-inset-sweep 5.6s ease-in-out infinite!important;
}

.store-page .card-type-mark::after{
  inset:4px;
  z-index:0;
  border-radius:calc(inherit - 4px);
  background:
    radial-gradient(circle at 68% 72%,color-mix(in srgb,var(--badge-a) 20%,transparent),transparent 46%),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(15,23,42,.035));
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,.34),
    inset -1px -1px 5px rgba(15,23,42,.10)!important;
}

.store-page .card-type-mark svg,
.store-page .vinyl-disc{
  z-index:1;
  filter:
    drop-shadow(1px 1px 0 rgba(255,255,255,.45))
    drop-shadow(-1px -1px 0 rgba(15,23,42,.14))!important;
  opacity:.88;
}

.store-page .card-type-mark svg{
  stroke-width:2.15!important;
}

.store-page .card-type-video{
  --badge-a:#2563eb;
  --badge-b:#38bdf8;
  --badge-ink:#1d4ed8;
}

.store-page .card-type-audio{
  --badge-a:#8b5cf6;
  --badge-b:#ec4899;
  --badge-ink:#7e22ce;
  background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.30),transparent 38%),
    linear-gradient(145deg,rgba(139,92,246,.16),rgba(236,72,153,.10))!important;
}

.store-page .card-type-apk{
  --badge-a:#16a34a;
  --badge-b:#84cc16;
  --badge-ink:#15803d;
}

.store-page .card-type-doc{
  --badge-a:#0284c7;
  --badge-b:#67e8f9;
  --badge-ink:#0369a1;
}

.store-page .card-type-image{
  --badge-a:#8b5cf6;
  --badge-b:#f472b6;
  --badge-ink:#7c3aed;
}

.store-page .card-type-archive{
  --badge-a:#f59e0b;
  --badge-b:#fb7185;
  --badge-ink:#b45309;
}

.store-page .card-type-ios{
  --badge-a:#475569;
  --badge-b:#cbd5e1;
  --badge-ink:#334155;
}

.store-page .card-type-file{
  --badge-a:#64748b;
  --badge-b:#cbd5e1;
  --badge-ink:#475569;
}

html[data-theme=dark] .store-page .card-type-mark{
  --badge-ink:color-mix(in srgb,var(--badge-b) 76%,#fff);
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.08),transparent 42%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--badge-a) 16%,rgba(255,255,255,.05)),
      rgba(2,6,23,.28))!important;
  border-color:color-mix(in srgb,var(--badge-a) 26%,rgba(148,163,184,.18))!important;
  box-shadow:
    inset 4px 5px 12px rgba(0,0,0,.42),
    inset -3px -4px 9px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.06)!important;
}

html[data-theme=dark] .store-page .card-type-mark svg,
html[data-theme=dark] .store-page .vinyl-disc{
  filter:
    drop-shadow(1px 1px 0 rgba(255,255,255,.10))
    drop-shadow(-1px -1px 0 rgba(0,0,0,.42))!important;
  opacity:.9;
}

.store-page .app-card:hover .card-type-mark{
  box-shadow:
    inset 5px 6px 13px rgba(15,23,42,.18),
    inset -5px -6px 13px rgba(255,255,255,.68),
    inset 0 0 0 1px color-mix(in srgb,var(--badge-a) 18%,rgba(255,255,255,.22)),
    0 1px 0 rgba(255,255,255,.58)!important;
}

html[data-theme=dark] .store-page .app-card:hover .card-type-mark{
  box-shadow:
    inset 5px 6px 14px rgba(0,0,0,.52),
    inset -4px -5px 10px rgba(255,255,255,.07),
    inset 0 0 0 1px color-mix(in srgb,var(--badge-a) 20%,rgba(255,255,255,.05))!important;
}

.store-page .type-icon-video,
.store-page .type-icon-audio,
.store-page .type-icon-apk,
.store-page .type-icon-doc,
.store-page .type-icon-file,
.store-page .type-icon-image,
.store-page .type-icon-archive,
.store-page .type-icon-ios{
  color:var(--badge-ink)!important;
}

.store-page .type-icon-video{
  animation:type-engraved-video 4.2s ease-in-out infinite!important;
}

.store-page .type-icon-audio{
  color:var(--badge-ink)!important;
  animation:type-engraved-audio 5.2s ease-in-out infinite!important;
}

.store-page .audio-disc{
  animation:type-engraved-spin 7.2s linear infinite!important;
  transform-origin:center;
  transform-box:fill-box;
}

.store-page .audio-wave{
  animation:type-audio-wave 2.2s ease-in-out infinite!important;
}

.store-page .audio-wave-2{
  animation-delay:.22s!important;
}

.store-page .video-scan-line{
  stroke:var(--badge-ink)!important;
  animation:type-engraved-scan 2.2s ease-in-out infinite!important;
}

.store-page .video-record-dot{
  fill:var(--badge-ink)!important;
  animation:type-engraved-dot 1.7s ease-in-out infinite!important;
}

.store-page .type-icon-apk{
  animation:type-engraved-nudge 4.6s ease-in-out infinite!important;
}

.store-page .type-icon-doc,
.store-page .type-icon-file,
.store-page .type-icon-image,
.store-page .type-icon-archive,
.store-page .type-icon-ios{
  animation:type-engraved-settle 5.4s ease-in-out infinite!important;
}

.store-page .doc-line,
.store-page .file-pulse-line{
  animation:type-engraved-dash 2.4s ease-in-out infinite!important;
}

.store-page .image-sun,
.store-page .ios-dot{
  animation:type-engraved-pulse 2.6s ease-in-out infinite!important;
}

.store-page .zip-line{
  animation:type-engraved-zip 2s ease-in-out infinite!important;
}

.store-page .vinyl-disc{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.32) 0 5%,transparent 7%),
    radial-gradient(circle,#fff 0 8%,color-mix(in srgb,var(--badge-a) 70%,#fff) 9% 18%,rgba(15,23,42,.18) 19% 42%,rgba(15,23,42,.28) 43% 100%),
    repeating-radial-gradient(circle,rgba(15,23,42,.20) 0 1.5px,transparent 1.5px 3px)!important;
  box-shadow:
    inset 3px 4px 8px rgba(15,23,42,.22),
    inset -2px -3px 6px rgba(255,255,255,.36)!important;
  animation:type-engraved-spin 6s linear infinite!important;
}

.store-page .vinyl-disc i{
  background:color-mix(in srgb,var(--badge-a) 64%,#fff)!important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.35),
    inset -1px -1px 2px rgba(15,23,42,.18)!important;
}

@keyframes type-inset-breathe{
  0%,100%{ background-position:0 0,0 0; }
  50%{ background-position:6px -4px,0 0; }
}

@keyframes type-inset-sweep{
  0%,58%{ transform:translateX(-130%); opacity:0; }
  70%{ opacity:.45; }
  100%{ transform:translateX(130%); opacity:0; }
}

@keyframes type-engraved-video{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(.96); }
}

@keyframes type-engraved-audio{
  0%,100%{ transform:translateX(0); }
  48%{ transform:translateX(-.7px); }
}

@keyframes type-audio-wave{
  0%,100%{ opacity:.35; transform:translateX(-1px); }
  50%{ opacity:.95; transform:translateX(1px); }
}

@keyframes type-engraved-scan{
  0%,100%{ transform:translateY(-2px); opacity:.35; }
  50%{ transform:translateY(4px); opacity:.95; }
}

@keyframes type-engraved-dot{
  0%,100%{ transform:scale(.82); opacity:.42; }
  50%{ transform:scale(1.08); opacity:.9; }
}

@keyframes type-engraved-nudge{
  0%,100%{ transform:translate(0,0); }
  42%{ transform:translate(-.8px,1px); }
  68%{ transform:translate(.7px,-.6px); }
}

@keyframes type-engraved-settle{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(1px); }
}

@keyframes type-engraved-dash{
  0%,100%{ stroke-dasharray:2 8; opacity:.42; }
  50%{ stroke-dasharray:7 3; opacity:.9; }
}

@keyframes type-engraved-pulse{
  0%,100%{ transform:scale(.86); opacity:.46; }
  50%{ transform:scale(1.08); opacity:.9; }
}

@keyframes type-engraved-zip{
  0%,100%{ transform:translateY(-1.5px); opacity:.42; }
  50%{ transform:translateY(2.5px); opacity:.9; }
}

@keyframes type-engraved-spin{
  to{ transform:rotate(360deg); }
}

@media(min-width:861px){
  .store-page .card-type-mark{
    width:44px!important;
    height:44px!important;
    border-radius:15px!important;
  }
}

@media(max-width:700px){
  .store-page .card-type-mark{
    width:31px!important;
    height:31px!important;
    border-radius:10px!important;
  }
}

/* V6.9 embedded watermark type marks: no floating badge */
@media(min-width:861px){
  .store-page .app-card,
  .store-page .store-app-card,
  .store-page.card-style-compact .app-card,
  .store-page.card-style-gallery .app-card,
  .store-page .app-card:not(.is-hidden),
  .store-page .store-app-card:not(.is-hidden),
  .store-page.card-style-compact .app-card:not(.is-hidden),
  .store-page.card-style-gallery .app-card:not(.is-hidden){
    grid-template-columns:76px minmax(0,1fr)!important;
    padding:14px 88px 14px 14px!important;
  }
}

.store-page .card-type-mark{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  width:68px!important;
  height:68px!important;
  border:0!important;
  border-radius:24px!important;
  transform:translateY(-50%)!important;
  opacity:.34;
  color:color-mix(in srgb,var(--badge-a) 62%,var(--text,#111827))!important;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.58),transparent 36%),
    linear-gradient(145deg,rgba(15,23,42,.055),rgba(255,255,255,.34))!important;
  box-shadow:
    inset 8px 9px 18px rgba(15,23,42,.12),
    inset -8px -9px 18px rgba(255,255,255,.74),
    inset 0 0 0 1px rgba(15,23,42,.035)!important;
  mix-blend-mode:multiply;
  pointer-events:none!important;
}

.store-page .card-type-mark::before{
  inset:0!important;
  border-radius:inherit;
  background:
    linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.36) 48%,transparent 60% 100%)!important;
  opacity:.42;
  transform:translateX(-125%);
  animation:type-watermark-sweep 6.5s ease-in-out infinite!important;
}

.store-page .card-type-mark::after{
  inset:7px!important;
  border-radius:19px!important;
  background:
    radial-gradient(circle at 65% 70%,color-mix(in srgb,var(--badge-a) 16%,transparent),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(15,23,42,.045))!important;
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.32),
    inset -2px -2px 7px rgba(15,23,42,.10)!important;
}

.store-page .card-type-mark svg{
  width:34px!important;
  height:34px!important;
  opacity:.82;
  color:inherit!important;
  filter:
    drop-shadow(1px 1px 0 rgba(255,255,255,.60))
    drop-shadow(-1px -1px 0 rgba(15,23,42,.16))!important;
}

.store-page .vinyl-disc{
  width:36px!important;
  height:36px!important;
  opacity:.82;
}

.store-page .app-card:hover .card-type-mark{
  opacity:.48;
  box-shadow:
    inset 10px 11px 22px rgba(15,23,42,.14),
    inset -9px -10px 21px rgba(255,255,255,.78),
    inset 0 0 0 1px color-mix(in srgb,var(--badge-a) 10%,rgba(15,23,42,.05))!important;
}

html[data-theme=dark] .store-page .card-type-mark{
  opacity:.40;
  color:color-mix(in srgb,var(--badge-b) 68%,#fff)!important;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.07),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(2,6,23,.26))!important;
  box-shadow:
    inset 9px 10px 20px rgba(0,0,0,.46),
    inset -7px -8px 16px rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
  mix-blend-mode:screen;
}

html[data-theme=dark] .store-page .app-card:hover .card-type-mark{
  opacity:.54;
  box-shadow:
    inset 11px 12px 24px rgba(0,0,0,.55),
    inset -8px -9px 18px rgba(255,255,255,.07)!important;
}

@media(max-width:700px){
  .store-page .card-type-mark{
    right:8px!important;
    top:8px!important;
    width:42px!important;
    height:42px!important;
    border-radius:16px!important;
    transform:none!important;
    opacity:.36;
  }

  .store-page .card-type-mark::after{
    inset:5px!important;
    border-radius:12px!important;
  }

  .store-page .card-type-mark svg{
    width:23px!important;
    height:23px!important;
  }

  .store-page .vinyl-disc{
    width:25px!important;
    height:25px!important;
  }
}

@media(max-width:380px){
  .store-page .card-type-mark{
    width:38px!important;
    height:38px!important;
    border-radius:14px!important;
  }
}

@keyframes type-watermark-sweep{
  0%,62%{ transform:translateX(-130%); opacity:0; }
  72%{ opacity:.42; }
  100%{ transform:translateX(130%); opacity:0; }
}

/* V6.10 icon-only detail actions */
.resource-detail .detail-actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
}

.resource-detail .detail-action-group{
  width:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}

.resource-detail .detail-action-btn{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  padding:0!important;
  border-radius:50%!important;
  flex:0 0 46px!important;
  background:rgba(255,255,255,.62)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 28px rgba(15,23,42,.10)!important;
}

.resource-detail .detail-action-btn span{
  display:none!important;
}

.resource-detail .detail-action-btn svg,
.resource-detail .detail-action-btn .dock-btn-icon{
  width:20px!important;
  height:20px!important;
  margin:0!important;
}

.resource-detail .detail-download-btn{
  background:linear-gradient(135deg,var(--theme-color),var(--theme-color-2,var(--theme-color)))!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 14px 30px color-mix(in srgb,var(--theme-color) 28%,transparent)!important;
}

.resource-detail .detail-play-btn,
.resource-detail .detail-preview-btn{
  color:var(--theme-color)!important;
}

html[data-theme=dark] .resource-detail .detail-action-btn{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.28)!important;
}

@media(max-width:700px){
  .resource-detail .detail-actions{
    justify-content:flex-end!important;
  }

  .resource-detail .detail-action-group{
    width:auto!important;
    gap:9px!important;
  }

  .resource-detail .detail-action-btn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
  }
}

/* V6.11 animated bottom drawers and persistent dock */
.store-page .mobile-dock{
  z-index:320!important;
  transition:
    box-shadow .24s ease,
    background .24s ease!important;
}

.store-page.sheet-open .mobile-dock,
.sheet-open .store-page .mobile-dock{
  opacity:1!important;
  pointer-events:auto!important;
}

@media(max-width:759px){
  .store-page.sheet-open .mobile-dock,
  .sheet-open .store-page .mobile-dock{
    transform:none!important;
  }
}

@media(min-width:760px){
  .store-page.sheet-open .mobile-dock,
  .sheet-open .store-page .mobile-dock{
    transform:translateX(-50%)!important;
  }
}

.bottom-sheet{
  z-index:260!important;
  pointer-events:none;
}

.bottom-sheet[hidden]{
  display:none!important;
}

.bottom-sheet:not([hidden]){
  display:block!important;
}

.bottom-sheet .sheet-mask{
  opacity:0;
  transition:
    opacity .24s ease,
    backdrop-filter .24s ease,
    -webkit-backdrop-filter .24s ease;
  pointer-events:auto;
}

.bottom-sheet .sheet-panel{
  opacity:0;
  transform:translateY(22px) scale(.97);
  transform-origin:50% 100%;
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.18,.88,.2,1),
    box-shadow .28s ease;
  will-change:transform,opacity;
  pointer-events:auto;
}

.bottom-sheet.is-open .sheet-mask{
  opacity:1;
}

.bottom-sheet.is-open .sheet-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.bottom-sheet:not([hidden]):not(.is-closing) .sheet-mask{
  opacity:1;
}

.bottom-sheet:not([hidden]):not(.is-closing) .sheet-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.bottom-sheet.is-closing .sheet-mask{
  opacity:0;
}

.bottom-sheet.is-closing .sheet-panel{
  opacity:0;
  transform:translateY(18px) scale(.98);
}

@media(min-width:760px){
  .bottom-sheet .sheet-panel{
    transform:translateX(-50%) translateY(22px) scale(.97)!important;
  }

  .bottom-sheet.is-open .sheet-panel{
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }

  .bottom-sheet:not([hidden]):not(.is-closing) .sheet-panel{
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }

  .bottom-sheet.is-closing .sheet-panel{
    transform:translateX(-50%) translateY(18px) scale(.98)!important;
  }
}

@media(max-width:700px){
  .bottom-sheet .sheet-panel{
    bottom:calc(86px + env(safe-area-inset-bottom))!important;
    max-height:min(62vh,520px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .bottom-sheet .sheet-mask,
  .bottom-sheet .sheet-panel,
  .store-page .mobile-dock{
    transition:none!important;
    animation:none!important;
  }
}

/* V6.12 animated resource detail modal */
.resource-detail{
  pointer-events:none;
}

.resource-detail[hidden]{
  display:none!important;
}

.resource-detail:not([hidden]){
  display:flex!important;
}

.resource-detail .detail-mask{
  opacity:0;
  transition:
    opacity .24s ease,
    backdrop-filter .24s ease,
    -webkit-backdrop-filter .24s ease!important;
  pointer-events:auto;
}

.resource-detail .detail-panel{
  opacity:0;
  transform:translateY(18px) scale(.97);
  transform-origin:50% 56%;
  transition:
    opacity .26s ease,
    transform .32s cubic-bezier(.18,.88,.2,1),
    box-shadow .28s ease!important;
  will-change:transform,opacity;
  pointer-events:auto;
}

.resource-detail.is-open{
  pointer-events:auto;
}

.resource-detail.is-open .detail-mask{
  opacity:1;
}

.resource-detail.is-open .detail-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.resource-detail:not([hidden]):not(.is-closing) .detail-mask{
  opacity:1;
}

.resource-detail:not([hidden]):not(.is-closing) .detail-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.resource-detail.is-closing .detail-mask{
  opacity:0;
}

.resource-detail.is-closing .detail-panel{
  opacity:0;
  transform:translateY(16px) scale(.98);
}

@media(max-width:700px){
  .resource-detail .detail-panel{
    transform:translateY(34px) scale(.985);
    transform-origin:50% 100%;
  }

  .resource-detail.is-open .detail-panel{
    transform:translateY(0) scale(1);
  }

  .resource-detail:not([hidden]):not(.is-closing) .detail-panel{
    transform:translateY(0) scale(1);
  }

  .resource-detail.is-closing .detail-panel{
    transform:translateY(28px) scale(.99);
  }
}

@media(prefers-reduced-motion:reduce){
  .resource-detail .detail-mask,
  .resource-detail .detail-panel{
    transition:none!important;
    animation:none!important;
  }
}