/*
 * 来源：根目录 价格表_clean.html 与 液态玻璃按钮_clean.html。
 * 下列 DOM 对应的尺寸、层级、SVG 状态、弹性 transition、玻璃阴影与高光直接复制；
 * 仅增加 samui 前缀、项目主题变量、键盘焦点、移动端与 reduced-motion 适配。
 */

@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.samui-pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.samui-price-card {
  position: relative;
  width: 320px;
  height: 384px;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  padding: 32px;
  color: #fff;
  box-shadow: 0 10px 25px #0004;
  transition: transform 1s cubic-bezier(.68, -.55, .27, 1.55), box-shadow .2s;
}

.samui-tone-indigo { background: #55536f; }
.samui-tone-rose { background: #795762; }
.samui-tone-sage { background: #586b59; }
.samui-tone-sand { background: #75614f; }

.samui-price-card:hover,
.samui-price-card:focus-within,
.samui-price-card.is-reference-active {
  transform: scale(1.05);
  box-shadow: 0 20px 35px #0005;
}

.samui-price-content {
  position: relative;
  z-index: 2;
}

.samui-price-label {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-bottom: 12px;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  background: #ffffff33;
  padding: 2px 12px;
  color: #fff;
  font: 500 14px/1.5 var(--font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  backdrop-filter: blur(4px);
}

.samui-price {
  display: block;
  margin: 8px 0;
  color: #fff;
  font: 900 60px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.055em;
  transform: scale(.85);
  transform-origin: left top;
  transition: transform 1s cubic-bezier(.68, -.55, .27, 1.55);
}

.samui-price-card:hover .samui-price,
.samui-price-card:focus-within .samui-price,
.samui-price-card.is-reference-active .samui-price {
  transform: scale(1);
}

.samui-price-desc {
  margin: 0;
  color: #ffffffe6;
  font-size: 18px;
  line-height: 1.55;
}

.samui-price-constant {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  color: #ffffffc9;
  font-size: 13px;
  line-height: 1.45;
}

.samui-price-cta {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  left: 16px;
  min-height: 44px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  padding: 8px 14px;
  color: #262626;
  font: 900 16px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s;
}

.samui-price-cta:hover {
  border-color: #ffffffcc;
  background: #ffffff1a;
  color: #fff;
}

.samui-price-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.samui-price-shape {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 320px;
  height: 384px;
  pointer-events: none;
  transition: transform 1s cubic-bezier(.68, -.55, .27, 1.55);
}

.samui-price-shape > *,
.samui-price-shape .samui-shape-mirror > * {
  fill: #ffffff1a;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1s cubic-bezier(.68, -.55, .27, 1.55);
}

.samui-card1:hover .samui-price-shape,
.samui-card1:focus-within .samui-price-shape,
.samui-card1.is-reference-active .samui-price-shape {
  transform: scale(1.5);
}

.samui-card1:hover .samui-circle,
.samui-card1:focus-within .samui-circle,
.samui-card1.is-reference-active .samui-circle {
  transform: translateY(-25px) scaleY(.5);
}

.samui-card1:hover .samui-ellipse,
.samui-card1:focus-within .samui-ellipse,
.samui-card1.is-reference-active .samui-ellipse {
  transform: translateY(-25px) scaleY(2.25);
}

.samui-card2:hover .samui-price-shape,
.samui-card2:focus-within .samui-price-shape,
.samui-card2.is-reference-active .samui-price-shape {
  transform: scale(1.05);
}

.samui-card2 .samui-r1,
.samui-card2 .samui-r2 {
  transition-delay: .2s;
}

.samui-card2:hover .samui-r1,
.samui-card2:focus-within .samui-r1,
.samui-card2.is-reference-active .samui-r1 {
  transform: translateY(207px) rotate(90deg) scaleX(2);
}

.samui-card2:hover .samui-r2,
.samui-card2:focus-within .samui-r2,
.samui-card2.is-reference-active .samui-r2 {
  transform: translateY(-207px) rotate(90deg) scaleX(2);
}

.samui-card3:hover .samui-price-shape,
.samui-card3:focus-within .samui-price-shape,
.samui-card3.is-reference-active .samui-price-shape {
  transform: scale(1.25);
}

.samui-card3 .samui-p1 { transition-delay: .3s; }
.samui-card3 .samui-p2 { transition-delay: .2s; }
.samui-card3 .samui-p3 { transition-delay: .1s; }

.samui-card3:hover path,
.samui-card3:focus-within path,
.samui-card3.is-reference-active path {
  transform: translateY(-50px);
}

.samui-glass-button-wrap {
  --anim-time: .4s;
  --anim-ease: cubic-bezier(.25, 1, .5, 1);
  --border-width: clamp(1px, .0625em, 4px);
  --background: var(--surface, #101d2c);
  --foreground: var(--text, #eaf1f8);
  position: relative;
  z-index: 2;
  border-radius: 9999px;
  transform-style: preserve-3d;
  transition: transform var(--anim-time) var(--anim-ease);
  cursor: pointer;
}

.samui-glass-button-wrap:has(.samui-glass-button:active) {
  transform: rotateX(25deg);
}

.samui-glass-button-shadow {
  --cut: 2em;
  position: absolute;
  width: calc(100% + var(--cut));
  height: calc(100% + var(--cut));
  top: calc(0% - var(--cut) / 2);
  left: calc(0% - var(--cut) / 2);
  border-radius: 9999px;
  filter: blur(clamp(2px, .125em, 12px));
  pointer-events: none;
  transition: filter var(--anim-time) var(--anim-ease);
}

.samui-glass-button-shadow::after {
  content: "";
  position: absolute;
  width: calc(100% - var(--cut) - .25em);
  height: calc(100% - var(--cut) - .25em);
  top: calc(var(--cut) - .5em);
  left: calc(var(--cut) - .875em);
  box-sizing: border-box;
  border-radius: 9999px;
  padding: .125em;
  background: linear-gradient(180deg, oklch(from var(--foreground) l c h / 20%), oklch(from var(--foreground) l c h / 10%));
  opacity: 1;
  transition: all var(--anim-time) var(--anim-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.samui-glass-button {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 9999px;
  outline: 0;
  background: linear-gradient(-75deg, oklch(from var(--background) l c h / 5%), oklch(from var(--background) l c h / 20%), oklch(from var(--background) l c h / 5%));
  color: inherit;
  box-shadow:
    inset 0 .125em .125em oklch(from var(--foreground) l c h / 5%),
    inset 0 -.125em .125em oklch(from var(--background) l c h / 50%),
    0 .25em .125em -.125em oklch(from var(--foreground) l c h / 20%),
    0 0 .1em .25em inset oklch(from var(--background) l c h / 20%),
    0 0 oklch(from var(--background) l c h);
  backdrop-filter: blur(clamp(1px, .125em, 4px));
  cursor: pointer;
  transition: all var(--anim-time) var(--anim-ease);
}

.samui-glass-button:hover {
  transform: scale(.975);
  box-shadow:
    inset 0 .125em .125em oklch(from var(--foreground) l c h / 5%),
    inset 0 -.125em .125em oklch(from var(--background) l c h / 50%),
    0 .15em .05em -.1em oklch(from var(--foreground) l c h / 25%),
    0 0 .05em .1em inset oklch(from var(--background) l c h / 50%),
    0 0 oklch(from var(--background) l c h);
  backdrop-filter: blur(.01em);
}

.samui-glass-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 9999px;
  padding: var(--border-width);
  background:
    conic-gradient(from var(--angle-1) at 50% 50%, oklch(from var(--foreground) l c h / 50%) 0%, transparent 5% 40%, oklch(from var(--foreground) l c h / 50%) 50%, transparent 60% 95%, oklch(from var(--foreground) l c h / 50%) 100%),
    linear-gradient(180deg, oklch(from var(--background) l c h / 50%), oklch(from var(--background) l c h / 50%));
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) oklch(from var(--background) l c h / 50%);
  transition: all var(--anim-time) var(--anim-ease), --angle-1 .5s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.samui-glass-button:hover::after { --angle-1: -125deg; }
.samui-glass-button:active::after { --angle-1: -75deg; }

.samui-glass-button:focus-visible {
  outline: 3px solid var(--brand, #72a9e8);
  outline-offset: 4px;
}

.samui-glass-button-text {
  position: relative;
  z-index: 2;
  display: block;
  color: oklch(from var(--foreground) l c h / 90%);
  letter-spacing: -.025em;
  text-shadow: 0 .25em .05em oklch(from var(--foreground) l c h / 10%);
  user-select: none;
  transition: all var(--anim-time) var(--anim-ease);
}

.samui-glass-button-text::after {
  content: "";
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  top: calc(var(--border-width) / 2);
  left: calc(var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 9999px;
  background: linear-gradient(var(--angle-2), transparent 0%, oklch(from var(--background) l c h / 50%) 40% 50%, transparent 55%);
  background-position: 0%;
  background-size: 200% 200%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position calc(var(--anim-time) * 1.25) var(--anim-ease), --angle-2 calc(var(--anim-time) * 1.25) var(--anim-ease);
}

.samui-glass-button:hover .samui-glass-button-text::after { background-position: 25%; }

.samui-glass-button:active .samui-glass-button-text::after {
  --angle-2: -15deg;
  background-position: 50% 15%;
}

.samui-glass-button-wrap:has(.samui-glass-button:hover) .samui-glass-button-shadow {
  filter: blur(clamp(2px, .0625em, 6px));
}

.samui-glass-button-wrap:has(.samui-glass-button:hover) .samui-glass-button-shadow::after {
  top: calc(var(--cut) - .875em);
}

.samui-glass-button-wrap:has(.samui-glass-button:active) .samui-glass-button-shadow {
  filter: blur(clamp(2px, .125em, 12px));
}

.samui-glass-button-wrap:has(.samui-glass-button:active) .samui-glass-button-shadow::after {
  top: calc(var(--cut) - .5em);
  opacity: .75;
}

.samui-glass-icon {
  width: 40px;
  height: 40px;
}

.samui-glass-icon .samui-glass-button-text {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.samui-glass-sm { font-size: 14px; font-weight: 500; }
.samui-glass-sm .samui-glass-button-text { padding: 8px 16px; }

@media (max-width: 700px) {
  .samui-pricing { width: 100%; }
  .samui-price-card { width: min(320px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .samui-price-card,
  .samui-price,
  .samui-price-shape,
  .samui-price-shape > *,
  .samui-price-shape .samui-shape-mirror > *,
  .samui-price-cta,
  .samui-glass-button-wrap,
  .samui-glass-button-shadow,
  .samui-glass-button-shadow::after,
  .samui-glass-button,
  .samui-glass-button::after,
  .samui-glass-button-text,
  .samui-glass-button-text::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .samui-price-card:hover,
  .samui-price-card:focus-within,
  .samui-price-card.is-reference-active,
  .samui-price-card:hover .samui-price,
  .samui-price-card:focus-within .samui-price,
  .samui-price-card.is-reference-active .samui-price,
  .samui-price-card:hover .samui-price-shape,
  .samui-price-card:focus-within .samui-price-shape,
  .samui-price-card.is-reference-active .samui-price-shape,
  .samui-price-card:hover .samui-price-shape *,
  .samui-price-card:focus-within .samui-price-shape *,
  .samui-price-card.is-reference-active .samui-price-shape *,
  .samui-glass-button-wrap:has(.samui-glass-button:active),
  .samui-glass-button:hover {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .samui-price-card,
  .samui-price-cta,
  .samui-glass-button {
    border: 2px solid ButtonText;
    forced-color-adjust: auto;
  }
}