/* Recommended-platform card polish.
 * This layer intentionally changes only visual treatment; grid dimensions,
 * content order and click targets remain owned by the existing layout CSS.
 */
.page-shell .card-grid > .card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(165, 190, 238, .72);
  background:
    radial-gradient(circle at 92% 4%, rgba(61, 122, 255, .13), transparent 31%),
    radial-gradient(circle at 8% 100%, rgba(40, 205, 190, .06), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .94));
  box-shadow:
    0 10px 28px rgba(34, 77, 151, .10),
    inset 0 1px rgba(255, 255, 255, .98),
    inset 0 -1px rgba(87, 128, 210, .08);
}

/* A slow, staggered cabinet-light sweep. */
.page-shell .card-grid > .card::before {
  content: "";
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: -48%;
  z-index: 0;
  width: 34%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 24%,
    rgba(255, 255, 255, .72) 50%,
    rgba(116, 167, 255, .12) 66%,
    transparent 100%
  );
  box-shadow: none;
  opacity: 0;
  transform: translateX(0) skewX(-15deg);
  animation: platform-card-sweep 7.2s cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: calc(1s + var(--stagger, 0ms));
  pointer-events: none;
  will-change: transform, opacity;
}

.page-shell .card-grid > .card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 13px;
  left: 13px;
  z-index: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #4d7dff 35%, #31d2c2 64%, transparent);
  box-shadow: 0 2px 12px rgba(59, 124, 255, .26);
  opacity: .72;
  pointer-events: none;
}

.page-shell .card-grid > .card > :not(.card-rec-badge) {
  position: relative;
  z-index: 1;
}

.page-shell .card-grid > .card .avatar {
  border: 2px solid rgba(125, 163, 238, .48);
  background: linear-gradient(145deg, #fff, #edf4ff);
  box-shadow:
    0 0 0 5px rgba(65, 121, 241, .055),
    0 8px 18px rgba(30, 77, 163, .14),
    inset 0 1px rgba(255, 255, 255, .95);
  filter: saturate(1.04) contrast(1.02);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease, filter .28s ease;
}

.page-shell .card-grid > .card .go {
  position: relative;
  overflow: hidden;
  border-color: rgba(112, 157, 247, .54);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(232, 241, 255, .94));
  color: #245bd5;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .96),
    0 5px 14px rgba(47, 107, 255, .09);
  text-shadow: 0 1px rgba(255, 255, 255, .82);
}

.page-shell .card-grid > .card .go::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -46%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .82), transparent);
  opacity: 0;
  transform: skewX(-16deg);
  transition: transform .55s ease, opacity .2s ease;
  pointer-events: none;
}

/* Premium corner plaques: readable, compact and visually consistent. */
.page-shell .card-grid > .card .card-rec-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  display: inline-flex;
  min-height: 24px;
  max-width: calc(100% - 10px);
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 8px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px 13px 6px 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(11, 35, 86, .28);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    0 6px 14px rgba(30, 71, 148, .20);
  animation: platform-badge-breathe 3.8s ease-in-out infinite;
}

.page-shell .card-grid > .card .card-rec-badge::before {
  content: "✦";
  color: rgba(255, 255, 255, .9);
  font-size: 8px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .6));
}

.page-shell .card-grid > .card .rec-type-1,
.page-shell .card-grid > .card .badge-color-popularity {
  background: linear-gradient(120deg, #ff7a18 0%, #ff9f0a 52%, #ff6a18 100%);
}

.page-shell .card-grid > .card .badge-color-hot {
  background: linear-gradient(120deg, #e83355 0%, #f45468 52%, #d92348 100%);
}

.page-shell .card-grid > .card .rec-type-2,
.page-shell .card-grid > .card .badge-color-premium {
  background: linear-gradient(120deg, #225ee7 0%, #377dff 50%, #6559ed 100%);
}

@media (hover: hover) and (pointer: fine) {
  .page-shell .card-grid > .card:hover {
    border-color: rgba(91, 139, 239, .78);
    box-shadow:
      0 17px 38px rgba(47, 107, 255, .17),
      0 0 0 1px rgba(49, 210, 194, .08),
      inset 0 1px rgba(255, 255, 255, .98);
    transform: translateY(-3px);
  }

  .page-shell .card-grid > .card:hover .avatar {
    box-shadow:
      0 0 0 6px rgba(65, 121, 241, .09),
      0 10px 24px rgba(30, 77, 163, .21),
      0 0 20px rgba(65, 121, 241, .12);
    filter: saturate(1.12) contrast(1.025);
    transform: translateY(-2px) scale(1.045) rotate(1deg);
  }

  .page-shell .card-grid > .card:hover .go {
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(115deg, #245ddb, #3f7dff 55%, #6259ed);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 107, 255, .26), inset 0 1px rgba(255, 255, 255, .28);
    text-shadow: 0 1px 2px rgba(17, 48, 116, .34);
  }

  .page-shell .card-grid > .card:hover .go::before {
    opacity: .9;
    transform: translateX(440%) skewX(-16deg);
  }
}

html[data-theme="dark"] .page-shell .card-grid > .card {
  border-color: rgba(69, 105, 159, .78);
  background:
    radial-gradient(circle at 92% 4%, rgba(66, 119, 246, .18), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(37, 203, 189, .07), transparent 35%),
    linear-gradient(145deg, rgba(17, 34, 57, .98), rgba(11, 25, 43, .97));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .25),
    inset 0 1px rgba(255, 255, 255, .055),
    inset 0 -1px rgba(28, 56, 93, .68);
}

html[data-theme="dark"] .page-shell .card-grid > .card::before {
  background: linear-gradient(100deg, transparent, rgba(106, 151, 255, .03), rgba(111, 162, 255, .20), rgba(49, 212, 194, .05), transparent);
}

html[data-theme="dark"] .page-shell .card-grid > .card .avatar {
  border-color: rgba(87, 132, 205, .68);
  background: linear-gradient(145deg, #1c3557, #10233c);
  box-shadow: 0 0 0 5px rgba(75, 127, 235, .08), 0 9px 21px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .page-shell .card-grid > .card .go {
  border-color: rgba(74, 112, 170, .86);
  background: linear-gradient(180deg, rgba(25, 50, 82, .96), rgba(16, 34, 58, .98));
  color: #a9c5ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065), 0 6px 14px rgba(0, 0, 0, .16);
  text-shadow: none;
}

@keyframes platform-card-sweep {
  0%, 58% { opacity: 0; transform: translateX(0) skewX(-15deg); }
  64% { opacity: .78; }
  78% { opacity: .28; }
  84%, 100% { opacity: 0; transform: translateX(455%) skewX(-15deg); }
}

@keyframes platform-badge-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@media (max-width: 600px) {
  .page-shell .card-grid > .card::before {
    width: 28%;
    opacity: 0;
    animation-duration: 9s;
  }

  .page-shell .card-grid > .card .avatar {
    box-shadow: 0 0 0 3px rgba(65, 121, 241, .055), 0 5px 12px rgba(30, 77, 163, .12);
  }

  .page-shell .card-grid > .card .card-rec-badge {
    top: 5px;
    right: 5px;
    min-height: 19px;
    padding: 2px 6px;
    border-radius: 5px 10px 5px 10px;
    font-size: 9px;
  }

  .page-shell .card-grid > .card .card-rec-badge::before { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .card-grid > .card::before,
  .page-shell .card-grid > .card .card-rec-badge {
    animation: none !important;
  }

  .page-shell .card-grid > .card .avatar,
  .page-shell .card-grid > .card .go,
  .page-shell .card-grid > .card .go::before {
    transition: none !important;
  }
}