/* CU31 — reference-driven stacked glass refinement */
.cosmic-main10__grid{
  width:min(700px,82%);
  gap:clamp(13px,2vw,17px);
}
.cosmic-card{
  height:72px;
  overflow:visible;
}
.cosmic-card__stack{
  top:0;
  bottom:auto;
  height:54px;
  overflow:visible;
  isolation:isolate;
}

/* Front pane + three descending glass plates (ghost + ::before + ::after). */
.cosmic-card__ghost{
  inset:0;
  z-index:1;
  border:.45px solid rgba(166,205,255,.20);
  border-radius:13px;
  background:
    linear-gradient(112deg,rgba(207,237,255,.060),rgba(74,139,245,.028) 45%,rgba(143,84,255,.043)),
    rgba(9,22,52,.10);
  box-shadow:
    inset 0 .5px 0 rgba(238,250,255,.12),
    inset 0 -1px 0 rgba(116,107,255,.075),
    0 4px 12px rgba(0,0,0,.38),
    0 0 12px rgba(67,151,255,.050);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  transform:translate(3px,5px) scaleX(.985) translateZ(-24px);
  opacity:.58;
  overflow:visible;
}
.cosmic-card__ghost::before,.cosmic-card__ghost::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:.4px solid rgba(151,187,241,.16);
  background:
    linear-gradient(112deg,rgba(199,230,255,.045),rgba(67,126,226,.021) 46%,rgba(131,76,236,.032)),
    rgba(8,19,45,.07);
  box-shadow:
    inset 0 .5px 0 rgba(231,247,255,.075),
    inset 0 -1px 0 rgba(117,104,255,.050),
    0 4px 10px rgba(0,0,0,.30),
    0 0 9px rgba(74,141,255,.034);
  backdrop-filter:blur(10px) saturate(128%);
  -webkit-backdrop-filter:blur(10px) saturate(128%);
  transform-origin:top center;
}
.cosmic-card__ghost::before{transform:translate(3px,6px) scaleX(.968);opacity:.62}
.cosmic-card__ghost::after{transform:translate(6px,12px) scaleX(.938);opacity:.38}

/* Main pane should read as transparent glass, not a blue slab. */
.cosmic-card__glass{
  z-index:4;
  border:.45px solid rgba(194,226,255,.34);
  border-radius:13px;
  background:
    radial-gradient(44% 180% at 47% 110%,rgba(44,202,255,.18),transparent 55%),
    radial-gradient(58% 170% at 104% 72%,rgba(137,83,255,.13),transparent 62%),
    linear-gradient(120deg,rgba(132,194,255,.082),rgba(11,29,65,.145) 43%,rgba(63,42,116,.10));
  box-shadow:
    0 12px 34px rgba(0,0,0,.48),
    0 0 18px rgba(74,153,255,.070),
    inset 0 .7px 0 rgba(245,252,255,.58),
    inset .7px 0 0 rgba(143,220,255,.21),
    inset -.7px 0 0 rgba(171,108,255,.18),
    inset 0 -1px 0 rgba(97,190,255,.24);
  backdrop-filter:blur(18px) saturate(168%) brightness(1.03);
  -webkit-backdrop-filter:blur(18px) saturate(168%) brightness(1.03);
}
.cosmic-card__glass::before{
  background:
    linear-gradient(104deg,transparent 0 25%,rgba(255,255,255,.18) 34%,rgba(146,216,255,.080) 41%,transparent 51%) -155% 0/56% 100% no-repeat,
    linear-gradient(110deg,rgba(255,255,255,.055) 0 3%,transparent 19% 77%,rgba(165,118,255,.042) 100%);
  opacity:.68;
  mix-blend-mode:screen;
  animation:cosmicGlassSweep 9.5s cubic-bezier(.36,.1,.18,1) infinite;
}
.cosmic-card__glass::after{
  inset:auto 6% 2px 6%;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(52,207,255,.31),rgba(74,101,255,.12) 45%,rgba(145,83,255,.035) 62%,transparent 78%);
  filter:blur(7px);
  opacity:.74;
}
.cosmic-card__edge{padding:.38px;opacity:.50}
.cosmic-card__divider{width:.75px;box-shadow:0 0 6px rgba(198,238,255,.42),0 0 12px rgba(100,185,255,.22)}
.cosmic-card__top{padding:0 clamp(15px,2.7vw,22px);background:linear-gradient(180deg,rgba(139,198,255,.040),transparent)}
.cosmic-card__icon{width:32px;height:32px}
.cosmic-card__label{margin-left:14px;font-size:clamp(12px,1.85vw,16px);font-weight:600}

/* Tap: compress -> separate the rear plates -> lift front glass -> single refractive sweep. */
.cosmic-card.is-launching .cosmic-card__glass{
  animation:cosmicTapKick .24s cubic-bezier(.2,.75,.2,1) both;
  border-color:rgba(220,242,255,.62);
  box-shadow:
    0 17px 42px rgba(0,0,0,.56),
    0 0 30px rgba(66,193,255,.22),
    0 0 40px rgba(133,86,255,.12),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(91,196,255,.34);
}
.cosmic-card.is-launching .cosmic-card__ghost{
  transform:translate(4px,8px) scaleX(.982) translateZ(-30px);
  opacity:.72;
}
.cosmic-card.is-launching .cosmic-card__ghost::before{transform:translate(5px,10px) scaleX(.958);opacity:.74}
.cosmic-card.is-launching .cosmic-card__ghost::after{transform:translate(9px,20px) scaleX(.918);opacity:.46}
.cosmic-card.is-launching .cosmic-card__glass::before{animation:cosmicTapSweep .26s ease-out 1;background-position:220% 0,0 0;opacity:1}
.cosmic-card__ghost,.cosmic-card__ghost::before,.cosmic-card__ghost::after{transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .2s ease,filter .2s ease}

/* Large card: same object, but with obvious glass refraction and post-expand settle. */
.cosmic-expanded{
  width:min(860px,92vw);
  height:min(650px,76svh);
}
.cosmic-expanded__stack{overflow:visible;isolation:isolate}
.cosmic-expanded__ghost{
  inset:0;
  z-index:1;
  border:.5px solid rgba(164,198,255,.18);
  border-radius:22px;
  background:
    linear-gradient(114deg,rgba(204,234,255,.052),rgba(70,130,235,.025) 46%,rgba(139,82,248,.038)),
    rgba(8,20,50,.09);
  box-shadow:inset 0 .6px 0 rgba(239,250,255,.09),0 8px 22px rgba(0,0,0,.34),0 0 16px rgba(66,145,255,.043);
  backdrop-filter:blur(16px) saturate(138%);
  -webkit-backdrop-filter:blur(16px) saturate(138%);
  transform:translate(5px,8px) scaleX(.988) translateZ(-34px);
  opacity:.52;
  overflow:visible;
}
.cosmic-expanded__ghost::before,.cosmic-expanded__ghost::after{
  content:"";
  position:absolute;
  inset:0;
  border:.45px solid rgba(148,181,237,.14);
  border-radius:inherit;
  background:linear-gradient(114deg,rgba(195,228,255,.039),rgba(64,118,215,.019) 46%,rgba(128,72,228,.028));
  box-shadow:inset 0 .5px 0 rgba(231,247,255,.065),0 7px 18px rgba(0,0,0,.28);
  transform-origin:top center;
}
.cosmic-expanded__ghost::before{transform:translate(5px,8px) scaleX(.968);opacity:.58}
.cosmic-expanded__ghost::after{transform:translate(10px,16px) scaleX(.94);opacity:.34}
.cosmic-expanded__glass{
  z-index:4;
  border:.5px solid rgba(198,229,255,.38);
  border-radius:22px;
  background:
    radial-gradient(55% 26% at 48% 54%,rgba(49,205,255,.20),rgba(68,103,255,.07) 46%,transparent 78%),
    radial-gradient(120% 160% at var(--mx) -10%,rgba(207,240,255,.12),transparent 40%),
    radial-gradient(72% 120% at 100% 64%,rgba(145,90,255,.12),transparent 64%),
    linear-gradient(126deg,rgba(123,188,255,.095),rgba(8,24,59,.24) 46%,rgba(65,41,121,.13));
  box-shadow:
    0 34px 105px rgba(0,0,0,.72),
    0 0 38px rgba(58,161,255,.12),
    inset 0 .8px 0 rgba(244,252,255,.58),
    inset .8px 0 0 rgba(151,220,255,.18),
    inset -.8px 0 0 rgba(172,111,255,.16),
    inset 0 -1px 0 rgba(107,181,255,.22);
  backdrop-filter:blur(24px) saturate(175%) brightness(1.025);
  -webkit-backdrop-filter:blur(24px) saturate(175%) brightness(1.025);
}
.cosmic-expanded__glass::before{
  background:
    linear-gradient(107deg,transparent 0 24%,rgba(255,255,255,.18) 35%,rgba(125,210,255,.080) 42%,transparent 52%) -155% 0/58% 100% no-repeat,
    radial-gradient(55% 12% at 48% 44%,rgba(57,209,255,.30),rgba(75,93,255,.09) 48%,transparent 76%);
  opacity:.92;
  animation:cosmicExpandSweep .95s cubic-bezier(.16,1,.3,1) .03s 1 both;
}
.cosmic-expanded__glass::after{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:2%;height:28px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(57,209,255,.34),rgba(86,100,255,.12) 44%,rgba(151,84,255,.055) 62%,transparent 78%);
  filter:blur(11px);
  opacity:.60;
  pointer-events:none;
  animation:cosmicCausticBreath 3.1s ease-in-out 1.0s infinite alternate;
}
.cosmic-expanded__edge{padding:.4px;opacity:.50}
.cosmic-expanded__top{border-bottom:.45px solid rgba(174,211,255,.22);background:linear-gradient(180deg,rgba(135,190,255,.052),transparent)}
.cosmic-expanded__divider{width:1px;box-shadow:0 0 8px rgba(199,240,255,.42),0 0 16px rgba(104,188,255,.22)}
.cosmic-expanded__close{border:.45px solid rgba(181,218,255,.24);background:rgba(7,18,43,.32)}
.cosmic-expanded__selection{
  border:.45px solid rgba(222,234,255,.24);
  background:linear-gradient(112deg,rgba(231,240,255,.10),rgba(170,181,255,.065) 58%,rgba(124,91,255,.05));
  box-shadow:0 0 24px rgba(78,160,255,.065),inset 0 .7px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(112,112,255,.08);
}

.cosmic-expanded.is-revealed .cosmic-expanded__stack{animation:cosmicExpandedSettle .58s cubic-bezier(.16,1,.3,1) both}
.cosmic-expanded.is-revealed .cosmic-expanded__ghost{animation:cosmicGhostSettle .60s cubic-bezier(.16,1,.3,1) both}
.cosmic-expanded.is-revealed .cosmic-expanded__ghost::before{animation:cosmicGhostSettle2 .66s cubic-bezier(.16,1,.3,1) both}
.cosmic-expanded.is-revealed .cosmic-expanded__ghost::after{animation:cosmicGhostSettle3 .72s cubic-bezier(.16,1,.3,1) both}
.cosmic-expanded__scan,.cosmic-expanded__selection,.cosmic-expanded__copy{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .34s ease,transform .44s cubic-bezier(.16,1,.3,1);
}
.cosmic-expanded.is-revealed .cosmic-expanded__scan{opacity:.50;transform:none;transition-delay:.07s}
.cosmic-expanded.is-revealed .cosmic-expanded__selection{opacity:1;transform:none;transition-delay:.16s}
.cosmic-expanded.is-revealed .cosmic-expanded__copy{opacity:1;transform:none;transition-delay:.26s}
.cosmic-expanded.is-closing .cosmic-expanded__scan,.cosmic-expanded.is-closing .cosmic-expanded__selection,.cosmic-expanded.is-closing .cosmic-expanded__copy{opacity:0;transform:translateY(7px);transition-delay:0s;transition-duration:.12s}

::view-transition-group(cosmic-card){animation-duration:.68s;animation-timing-function:cubic-bezier(.14,.88,.22,1)}
::view-transition-old(cosmic-card),::view-transition-new(cosmic-card){animation-duration:.68s;mix-blend-mode:normal}

@keyframes cosmicTapKick{
  0%{transform:translateZ(16px) scale(1);filter:brightness(1)}
  38%{transform:translate3d(0,1px,12px) scale(.968);filter:brightness(1.18)}
  100%{transform:translate3d(0,-2px,28px) scale(1.015);filter:brightness(1.08)}
}
@keyframes cosmicExpandedSettle{
  0%{transform:translateY(10px) scale(.982);filter:brightness(1.18) saturate(1.10)}
  58%{transform:translateY(-2px) scale(1.009);filter:brightness(1.06) saturate(1.04)}
  100%{transform:none;filter:none}
}
@keyframes cosmicGhostSettle{0%{transform:translate(2px,3px) scaleX(.996);opacity:.12}100%{transform:translate(5px,8px) scaleX(.988) translateZ(-34px);opacity:.52}}
@keyframes cosmicGhostSettle2{0%{transform:translate(2px,3px) scaleX(.988);opacity:.04}100%{transform:translate(5px,8px) scaleX(.968);opacity:.58}}
@keyframes cosmicGhostSettle3{0%{transform:translate(3px,5px) scaleX(.978);opacity:0}100%{transform:translate(10px,16px) scaleX(.94);opacity:.34}}
@keyframes cosmicCausticBreath{from{transform:scaleX(.82);opacity:.40}to{transform:scaleX(1.08);opacity:.72}}

@media (max-width:560px){
  .cosmic-main10{padding:18px 16px 116px}
  .cosmic-main10__grid{width:82%;gap:13px}
  .cosmic-card{height:70px}
  .cosmic-card__stack{height:53px}
  .cosmic-card__ghost{border-radius:12px;transform:translate(3px,5px) scaleX(.983) translateZ(-24px)}
  .cosmic-card__ghost::before{transform:translate(3px,6px) scaleX(.962)}
  .cosmic-card__ghost::after{transform:translate(6px,12px) scaleX(.928)}
  .cosmic-card__glass{border-radius:12px}
  .cosmic-card__top{padding:0 14px}
  .cosmic-card__icon{width:30px;height:30px}
  .cosmic-card__divider{height:30px;margin-left:11px}
  .cosmic-card__label{margin-left:12px;font-size:clamp(12px,3.35vw,14px)}
  .cosmic-expanded{width:91vw;height:min(620px,76svh);min-height:min(450px,76svh)}
  .cosmic-expanded__glass,.cosmic-expanded__ghost{border-radius:20px}
  .cosmic-expanded__ghost{transform:translate(4px,7px) scaleX(.986) translateZ(-34px)}
  .cosmic-expanded__ghost::before{transform:translate(4px,7px) scaleX(.962)}
  .cosmic-expanded__ghost::after{transform:translate(8px,14px) scaleX(.932)}
}
@media (prefers-reduced-motion:reduce){
  .cosmic-card__ghost,.cosmic-card__ghost::before,.cosmic-card__ghost::after,.cosmic-expanded__ghost,.cosmic-expanded__ghost::before,.cosmic-expanded__ghost::after,.cosmic-expanded__stack,.cosmic-expanded__glass::after{animation:none!important;transition:none!important}
}