/* ==========================================================================
   ⚡ cn5.org 全局共用样式库 (多页面通用)
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --ink: #1D1920;
  --line: #E3E9E1;
  --active: #6c20e1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { 
  background: #FFFFFF; 
  overflow-x: hidden; 
  overflow-y: scroll;        /* ⚡ 双保险：保证所有页面拥有统一的滚动条基准 */
  scrollbar-gutter: stable; /* ⚡ 现代标准：所有页面预留稳定的滚动条槽位，彻底消除位移 */
}

body {
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Urbanist', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; }

/* ⚡ 48x48 科技定制鼠标光标（全站覆盖） */
html, body, *,
input, textarea, select,
input:hover, input:focus, input:active,
.flip-card__input {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M9 5 L9 39.6 L18.4 30.2 L31 30.2 Z' fill='%2318181b' stroke='%23ffffff' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E"), auto !important;
}
button, a, .slide-btn, .iso-btn, .button, .flip-card__btn, .slider, .menu-title, .card-side, .uiverse-btn, .btn-31, .shine-btn {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M9 5 L9 39.6 L18.4 30.2 L31 30.2 Z' fill='%23000000' stroke='%2352E19F' stroke-width='3.6' stroke-linejoin='round'/%3E%3C/svg%3E"), pointer !important;
}

/* ================= 顶栏 Header（吸顶固定） ================= */
header.header {
  height: 100px;
  background: #FFFFFF;
  color: #1D1920;
  border-bottom: 1px solid rgba(227, 233, 225, 0.6);
  position: fixed; /* ⚡ 改为 fixed 固定到窗口 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header__container {
  max-width: 1248px;
  height: 100%;
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__left {
  display: flex;
  align-items: center;
  max-width: 688px;
  width: 100%;
  height: 73px;
  gap: 15px;
}

.logo {
  font-family: 'Space Grotesk', 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #1D1920 !important;
  width: 145px;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  flex-shrink: 0;
  pointer-events: none;
}
.logo img { pointer-events: auto; }

/* 菜单导航 */
.nav-menu { display: flex; align-items: center; height: 73px; }
.nav-item { height: 73px; display: flex; align-items: center; justify-content: center; }
.nav-item.short-item { width: 80px; }
.nav-item.long-item { width: 112px; }

.nav-item a {
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: #251234;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-item a:hover { color: var(--active); }
.nav-item a.active { color: #251234; }
.nav-item a.active::after {
  content: '';
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: -4px;
  right: -4px;
  height: 2px;
  background-color: var(--active);
  border-radius: 1px;
}

@media (max-width:700px){ .nav-menu{display:none;} }

/* ================= 顶栏右侧按钮区 ================= */
.header__actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
}

.slide-btn {
  outline: 0;
  border: 0;
  display: inline-flex;
  flex-direction: column;
  width: 120px;
  height: 45px;
  margin-top: 30px;
  border-radius: 0.5em;
  box-shadow: 
    0 14px 28px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(30, 144, 255, 0.4);
  overflow: hidden;
  cursor: pointer;
  margin-left: 8px;
  flex-shrink: 0;
  padding: 0;
  transition: 0.6s cubic-bezier(.16,1,.3,1);
  vertical-align: middle;
}

.slide-btn div {
  transform: translateY(0px);
  width: 100%;
  transition: 0.6s cubic-bezier(.16,1,.3,1);
}

.slide-btn div span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 12px;
  box-sizing: border-box;
}

.slide-btn div:nth-child(1) { background-color: #1e90ff; }
.slide-btn div:nth-child(2) { background-color: #21dc62; }
.slide-btn:hover {
  box-shadow: 
    0 18px 36px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(33, 220, 98, 0.55);
}
.slide-btn:hover div { transform: translateY(-45px); }

.slide-btn p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}
.slide-btn:active { transform: scale(0.95); }

.iso-btn {
  transform: rotate(-25deg) skew(25deg);
  transform-style: preserve-3d;
  position: relative;
  list-style: none;
  width: 100px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 10px 25px 0 35px;
  flex-shrink: 0;
  outline: none;
  filter: 
    drop-shadow(-12px 18px 14px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 18px rgba(30, 144, 255, 0.35));
  transition: filter 0.3s ease;
}
.iso-btn:hover, .iso-btn.active {
  filter: 
    drop-shadow(-18px 26px 20px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 28px rgba(82, 225, 159, 0.65));
}
.iso-btn:before {
  content: ''; position: absolute; bottom: -10px; left: -5px;
  width: 100%; height: 10px; background: #2a2a2a; transform: skewX(-41deg);
}
.iso-btn:after {
  content: ''; position: absolute; top: 5px; left: -9px;
  width: 9px; height: 100%; background: #2a2a2a; transform: skewY(-49deg);
}
.iso-btn span {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #2a2a2a; color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: 1.1s ease-out;
}
.iso-btn:hover span, .iso-btn.active span {
  z-index: 1000; transition: .3s; background: #52E19F; color: #1D1920;
}
.iso-btn:hover span:nth-child(5), .iso-btn.active span:nth-child(5) { transform: translate(40px, -40px); opacity: 1; }
.iso-btn:hover span:nth-child(4), .iso-btn.active span:nth-child(4) { transform: translate(30px, -30px); opacity: .8; }
.iso-btn:hover span:nth-child(3), .iso-btn.active span:nth-child(3) { transform: translate(20px, -20px); opacity: .6; }
.iso-btn:hover span:nth-child(2), .iso-btn.active span:nth-child(2) { transform: translate(10px, -10px); opacity: .4; }
.iso-btn:hover span:nth-child(1), .iso-btn.active span:nth-child(1) { transform: translate(0px, 0px); opacity: .2; }

@media (max-width: 600px) {
  .header__container { padding: 10px 14px; }
  .logo { width: 100px; margin-right: 0; }
  .logo img { height: 42px !important; }
  .slide-btn { width: 100px; height: 40px; margin-top: 15px; }
  .slide-btn div span { height: 40px; padding: 0 8px; }
  .slide-btn:hover div { transform: translateY(-40px); }
  .iso-btn { width: 70px; height: 28px; margin: 6px 10px 0 16px; transform: rotate(-25deg) skew(25deg) scale(0.85); }
}

/* ================= 下拉菜单 ================= */
.header-dropdown {
  position: absolute; 
  top: 100px; 
  left: 0;
  width: 100%; 
  min-height: 200px; 
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0; 
  box-shadow: 0 20px 45px rgba(0,0,0,0.1);
  display: none; 
  z-index: 999; 
  transform-origin: top center; /* ⚡ 关键：以顶栏下边为轴心向下甩出 */
}

.header-dropdown.active { 
  display: block; 
  animation: whipDown 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* ⚡ 物理甩摆曲线 */
}

/* ⚡ 核心 3D 惯性折叠甩落动画 */
@keyframes whipDown {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateX(-75deg) translateY(-20px);
  }
  65% {
    opacity: 1;
    transform: perspective(800px) rotateX(10deg) translateY(3px); /* 向前甩过头 */
  }
  85% {
    transform: perspective(800px) rotateX(-4deg) translateY(-1px); /* 轻微回弹 */
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0);    /* 平稳就位 */
  }
}
.dropdown-content {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 30px 90px; min-height: 200px; padding: 30px 32px;
  max-width: 1248px; margin: 0 auto;
}
.menu-col { display: flex; flex-direction: column; gap: 12px; }
.menu-title {
  font-size: 18px; font-weight: 700; color: #251234;
  transition: color 0.2s ease; display: inline-flex; align-items: center; cursor: pointer;
}
.menu-title:hover { color: var(--active); }
.menu-title::after {
  content: '›'; font-size: 22px; font-weight: 600; line-height: 1; margin-left: 28px;
  opacity: 0; visibility: hidden; transform: translateX(-8px); transition: all 0.2s ease;
}
.menu-title:hover::after { opacity: 1; visibility: visible; transform: translateX(0); }

/* ================= 主布局容器 ================= */
main.wrap {
  position: relative;
  z-index: 10;
  max-width: 1248px;
  margin: 100px auto 0 auto; /* ⚡ 增加 100px 顶部外边距，防止被 fixed 顶栏遮挡 */
  padding: 0 32px;
  min-height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: max(40px, calc(30vh - 100px));
}
@media (max-width:640px){ main.wrap { padding: 50px 20px 0 20px; } }

/* ================= 通用弹窗蒙层 ================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.25s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* ================= 登录/注册 3D 翻转卡片 ================= */
.wrapper {
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-switch { display: flex; flex-direction: column; align-items: center; }
.switch {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 50px; height: 20px; margin-bottom: 25px; user-select: none;
}
.card-side::before {
  position: absolute; content: '登 录'; left: -70px; top: 0; width: 60px;
  text-align: right; text-decoration: underline; color: var(--font-color); font-weight: 600; font-size: 15px;
}
.card-side::after {
  position: absolute; content: '注 册'; left: 60px; top: 0; width: 60px;
  text-align: left; text-decoration: none; color: var(--font-color); font-weight: 600; font-size: 15px;
}
.toggle { opacity: 0; width: 0; height: 0; }
.slider {
  border-radius: 5px; border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color); position: absolute;
  cursor: pointer; inset: 0; background-color: lightgrey; transition: 0.3s;
}
.slider:before {
  position: absolute; content: ""; height: 20px; width: 20px;
  border: 2px solid var(--main-color); border-radius: 5px; left: -2px; bottom: 2px;
  background-color: var(--bg-color); box-shadow: 0 3px 0 var(--main-color); transition: 0.3s;
}
.toggle:checked + .slider { background-color: var(--input-focus); }
.toggle:checked + .slider:before { transform: translateX(30px); }
.toggle:checked ~ .card-side:before { text-decoration: none; }
.toggle:checked ~ .card-side:after { text-decoration: underline; }

.flip-card__inner {
  width: 510px; max-width: 92vw; height: 390px; position: relative;
  background-color: transparent; perspective: 1000px; text-align: center;
  transition: transform 0.8s; transform-style: preserve-3d;
}
.flip-card__inner.flipped { transform: rotateY(180deg) !important; }
.flip-card__front, .flip-card__back {
  padding: 24px 30px; position: absolute; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  backface-visibility: hidden; background: lightgrey; gap: 20px;
  border-radius: 8px; border: 2.5px solid var(--main-color); box-shadow: 6px 6px var(--main-color);
}
.flip-card__back { transform: rotateY(180deg); }
.flip-card__form { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.title { margin: 15px 0; font-size: 26px; font-weight: 900; text-align: center; color: var(--main-color); letter-spacing: 2px; }
.flip-card__input {
  width: 280px; max-width: 82vw; height: 44px; border-radius: 6px;
  border: 2px solid var(--main-color); background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color); font-size: 15px; font-weight: 600;
  color: var(--font-color); padding: 6px 12px; outline: none;
}
.flip-card__input::placeholder { color: var(--font-color-sub); opacity: 0.8; }
.flip-card__input:focus { border: 2px solid var(--input-focus); }
.flip-card__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 4px 4px var(--main-color) !important;
}
.flip-card__btn {
  margin: 15px 0 10px 0; width: 130px; height: 42px; border-radius: 0.75em;
  border: 2px solid #000000; background-color: #e8e8e8;
  box-shadow: 0 0.2em 0 #000000; font-size: 17px; font-weight: 700;
  color: #000000; cursor: pointer; transform: translateY(-0.2em);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.flip-card__btn:hover {
  transform: translateY(-0.33em);
  box-shadow: 0 0.33em 0 #000000;
}
.flip-card__btn:active {
  transform: translateY(0);
  box-shadow: 0 0 0 #000000;
}
#mRcSubmitBtn { transform: translate(-50%, -0.2em) !important; }
#mRcSubmitBtn:hover { transform: translate(-50%, -0.33em) !important; box-shadow: 0 0.33em 0 #000000 !important; }
#mRcSubmitBtn:active { transform: translate(-50%, 0) !important; box-shadow: 0 0 0 #000000 !important; }

/* ================= 充值弹窗 ================= */
.recharge-card {
  position: relative; width: 340px; background: lightgrey; border: 2.5px solid #323232;
  border-radius: 6px; box-shadow: 5px 5px #323232; padding: 35px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.xianyu-hint {
  margin-top: 24px; font-size: 16px; font-weight: 900; color: #1D1920;
  background: transparent; border: none; padding: 0; letter-spacing: 1px; user-select: all;
}

/* ================= QQ群飞机按钮 ================= */
.button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;
  cursor: pointer; border-radius: var(--radius); border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2);
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: all 0.3s ease; width: 100%; max-width: 250px; height: 60px;
  font-size: 16px; font-weight: 700; color: #1D1920;
}
.button:hover { transform: scale(1.02); }
.button:active { transform: scale(1); }
.button:after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
              linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
  z-index: 0;
}
.button::before {
  content: ""; inset: 7px 6px 6px 6px; position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2)); border-radius: 30px; z-index: 2;
}
.state p { display: flex; align-items: center; justify-content: center; margin: 0; }
.state .icon {
  position: absolute; left: 0; top: 0; bottom: 0; margin: auto;
  transform: scale(1.25); display: flex; align-items: center; justify-content: center;
}
.outline {
  position: absolute; border-radius: inherit; overflow: hidden;
  z-index: 1; opacity: 0; transition: opacity 0.4s ease; inset: -2px -3.5px;
}
.outline::before {
  content: ""; position: absolute; inset: -100%;
  background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
  animation: spin 2s linear infinite; animation-play-state: paused;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.button:hover .outline { opacity: 1; }
.button:hover .outline::before { animation-play-state: running; }

.state p span {
  display: inline-block !important;
  opacity: 1 !important;
  color: #1D1920 !important;
  font-weight: 700 !important;
}
.button:hover p span { opacity: 1; animation: wave 0.5s ease forwards calc(var(--i) * 0.02s); }
.button:focus p span { opacity: 1; animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s); }
@keyframes wave {
  30% { transform: translateY(4px); } 50% { transform: translateY(-3px); color: var(--primary); } 100% { transform: translateY(0); }
}
@keyframes disapear { from { opacity: 1; } to { opacity: 0; transform: translateY(20px); filter: blur(5px); } }

.state--default .icon svg { animation: land 0.6s ease forwards; }
.button:hover .state--default .icon { transform: rotate(45deg) scale(1.25); }
.button:focus .state--default svg { animation: takeOff 0.8s linear forwards; }
@keyframes takeOff {
  0% { opacity: 1; } 60% { opacity: 1; transform: translateX(70px) rotate(45deg) scale(2); } 100% { opacity: 0; transform: translateX(160px) rotate(45deg) scale(0); }
}
@keyframes land {
  0% { transform: translateX(-60px) rotate(-50deg) scale(2); opacity: 0; } 100% { transform: translateX(0) rotate(0); opacity: 1; }
}

.state { padding-left: 29px; z-index: 2; display: flex; position: relative; }
.state--sent { display: none; }
.button:focus .state--default { position: absolute; }
.button:focus .state--sent { display: flex; }
.button:focus .state--sent span { opacity: 0; animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s); }
.button:focus .state--sent .icon svg { opacity: 0; animation: appear 1.2s ease forwards 0.8s; }
@keyframes appear {
  0% { opacity: 0; transform: scale(4); } 100% { opacity: 1; transform: scale(1); }
}

/* ================= ⚡ 多页面共用：Uiverse 下载胶囊按钮 (绝对层叠结构，0 漏色 0 冲突) ================= */
.uiverse-btn {
  height: 48px;
  border: none !important;
  border-radius: 24px;
  background-color: #FFFFFF !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.5), 
    0 0 25px rgba(102, 252, 241, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  flex-shrink: 0;
  vertical-align: middle;
  padding: 0;
}

.uiverse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.65), 
    0 0 38px rgba(102, 252, 241, 0.45);
}

/* 按钮各自固定宽度 */
.btn-w1 { width: 205px !important; }
.btn-w2 { width: 170px !important; }
.btn-w3 { width: 148px !important; }

/* ⚡ 上层黑胶囊：100% 满铺盖住底层 (z-index: 2)，悬停向中心收拢至 0 */
.uiverse-btn > span,
.uiverse-btn .btn-span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2a2a2a !important;
  height: 100% !important;
  width: 100% !important;
  border-radius: 24px;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 20px;
  margin: 0;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.uiverse-btn:hover > span,
.uiverse-btn:hover .btn-span {
  width: 0 !important;
  padding: 0 !important;
}

/* ⚡ 下层容器：白底黑字在底层等候 (z-index: 1) */
/* ⚡ 下层容器：默认 width: 0，悬停时 0.4s 从左往右拉出展开 */
.uiverse-btn .container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;             /* ⚡ 默认宽度为 0 */
  height: 100%;
  background-color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #000000 !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;     /* ⚡ 必须有：在展开过程中从左侧平滑拉出内容 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: width 0.4s ease; /* ⚡ 激活 0.4s 展开动画 */
}

/* ⚡ 悬停时：下层容器从 0 拉伸到 100% 铺满 */
.uiverse-btn:hover .container {
  width: 100%;
}

.uiverse-btn .container svg {
  width: 20px;
  height: 20px;
  fill: #000000 !important;
  flex-shrink: 0;
}

.uiverse-btn .container .hover-text {
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  background: transparent !important;
}

/* ================= ⚡ 多页面共用：说明书直角 btn-31 翻滚按钮 ================= */
.btn-31,
.btn-31 *,
.btn-31 :after,
.btn-31 :before,
.btn-31:after,
.btn-31:before {
  border: 0 !important;
  box-sizing: border-box;
}

.btn-31 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #2a2a2a;
  border: none !important;
  outline: none !important;
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  margin: 4px 0 0 0;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 20px;
  height: 48px;
  border-radius: 0px !important;
  overflow: hidden;
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.5), 
    0 0 25px rgba(102, 252, 241, 0.25);
  transition: background-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.btn-31:hover {
  background-color: #FFFFFF;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.65), 
    0 0 38px rgba(102, 252, 241, 0.45);
  transform: translateY(-2px);
}

.btn-31:before {
  --progress: 100%;
  background: #FFFFFF;
  -webkit-clip-path: polygon(100% 0, var(--progress) var(--progress), 0 100%, 100% 100%);
  clip-path: polygon(100% 0, var(--progress) var(--progress), 0 100%, 100% 100%);
  content: "";
  inset: -2px;
  position: absolute;
  transition: -webkit-clip-path 0.25s ease;
  transition: clip-path 0.25s ease;
}

.btn-31:hover:before { --progress: 0%; }

.btn-31 .text-container {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden; position: relative; height: 24px; width: 100%; z-index: 2;
}

.btn-31 .text {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 900; color: #FFFFFF; position: relative; letter-spacing: 1px;
  height: 24px; width: 100%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  flex-shrink: 0; white-space: nowrap;
}

.btn-31 .doc-icon { width: 18px; height: 18px; fill: #FFFFFF; transition: fill 0.2s ease; }
.btn-31:hover .text { color: #000000; }
.btn-31:hover .doc-icon { fill: #000000; }
.btn-31:hover .default-text { transform: translateY(-24px); }
.btn-31:hover .hover-text { transform: translateY(-24px); }