* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}
::selection {
    background: #FF5722;
    color: #fff;
}
::before {
	font-family: "iconfont";
    display: inline-block;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
    font-style: normal;
}
/*滚动条*/
::-webkit-scrollbar {
	height:6px;
	width:6px;
}
::-webkit-scrollbar-thumb {
	transition:all 0.25s ease 0s;
	background:rgb(255 255 255 / 15%);
	background-size:100% 100%;
	min-height: 100px;
	min-width: 100px;
}
::-webkit-scrollbar-thumb:hover {
	height:6px;
	width:9px;
	background:#99e640;
	transition:all 0.25s ease 0s;
}
::-webkit-scrollbar-corner {
	background: transparent;
}
/* 流光划过 */
.shimmer-text {
    background: linear-gradient(
    90deg,
    #ededed 0%,
    #ededed 40%,
    #ffd700 50%,
    #ededed 60%,
    #ededed 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@font-face {
	font-family:'cmdpe1';
	src:url('https://dl.cmdpe.com/cmpde.com/Font/TarponMotel.woff2');
	/* IE9 Compat Modes */
    font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'cmdpe2';
	src:url('https://dl.cmdpe.com/cmpde.com/Font/cmdpe.woff2');
	/* IE9 Compat Modes */
    font-weight:normal;
	font-style:normal;
}
#fountain {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}
.icon {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    user-select: none;
    line-height: 1;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon.iconfont {
    font-family: "iconfont" !important;
    speak: never;
}

body {
	font-family: "cmdpe2", -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
	letter-spacing: .5px;
	color:#bdbdbd;
	background: #101010;
}
body:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(#ededed17 1px, transparent 1.5px);
    background-image: radial-gradient(#000000bd 1px, #ad2a000a 1.5px);
    background-size: 26px 26px;
    position: fixed;
    inset: 0;
    mask-image: linear-gradient(#000, #0000 90%);
    opacity: 0;
}

#hero-art {
    pointer-events: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    height: min(22vh, 180px);
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(#0000 0%, #000 22% 78%, #0000 100%);
    top: 25px;
    width: 100%;
    z-index: -1;
    opacity: 1;
    position: absolute;
}
#art {
    font-family: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
    letter-spacing: 1px;
    color: #ff2800;
    opacity: .5;
    flex-shrink: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    white-space: pre;
}


/* 顶部导航 */
header {
    display: flex;
    gap: 0;
    justify-content: center;
    position: fixed;
    top: 20px;
    width: 100vw;
    align-items: center;
    z-index: 100;
}
.Mobile {
    display: none;
}
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-actions {
    margin-left: 10px;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-links a:nth-child(1) {
    left: 10px;
}
.nav-links a:nth-child(1)::before,.nav-links a:nth-child(1)::after {
    display: none !important;
} 
header svg {
    font-size: 2em;
    transform-origin: center center;
    display: inline-block;           /* 保证 transform 生效 */
    /* 每 3 秒自动抖一次 */
    /*animation: bounce-shake-auto 3s ease-in-out infinite;*/
}
.nav-links a:hover svg {
    animation: bounce-shake 0.6s ease-in-out both;
}
/* ========== 自动循环（每 3 秒抖一下） ========== */
/* 抖动占前 20%（约 0.6s），后面静止 */
@keyframes bounce-shake-auto {
  0%, 20%, 100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  3% {
    transform: translateX(-8px) rotate(-12deg) scale(1.15);
  }
  6% {
    transform: translateX(8px) rotate(10deg) scale(1.12);
  }
  9% {
    transform: translateX(-6px) rotate(-8deg) scale(1.08);
  }
  12% {
    transform: translateX(5px) rotate(6deg) scale(1.05);
  }
  15% {
    transform: translateX(-3px) rotate(-3deg) scale(1.02);
  }
  18% {
    transform: translateX(2px) rotate(1deg) scale(1);
  }
}
@keyframes bounce-shake {
      0%, 100% {
        transform: translateX(0) rotate(0) scale(1);
      }
      15% {
        transform: translateX(-8px) rotate(-12deg) scale(1.15);
      }
      30% {
        transform: translateX(8px) rotate(10deg) scale(1.12);
      }
      45% {
        transform: translateX(-6px) rotate(-8deg) scale(1.08);
      }
      60% {
        transform: translateX(5px) rotate(6deg) scale(1.05);
      }
      75% {
        transform: translateX(-3px) rotate(-3deg) scale(1.02);
      }
      90% {
        transform: translateX(2px) rotate(1deg) scale(1);
      }
}
header a {
    color: #bdbdbd;
    font-size: 1em;
    text-decoration: none;
    padding: 0 12px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    margin: 0 -3px;
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
header a:hover {
    color: #F5F5F5;
}
header a:not([data-route="announcement"])::before {
    content: "";
    position: absolute;
    inset: 4px 4px;
    opacity: 0;
    z-index: -1;
    background: #4f1fff;
}
header a:not([data-route="announcement"])::after {
    content: "";
    position: absolute;
    inset: 0px 8px;
    opacity: 0;
    z-index: -1;
    background: #4f1fff;
}
header a:hover::before,  header a:hover::after{
    opacity: 1;
}
header a[data-route="freekey"] {
    margin-left: auto;
    --border-width: 2px;
}
header a[data-route="freekey"]::after {
    opacity: 1;
    inset: 0px 3px;
    --m-i: linear-gradient(#000, #000);
    --m-o: content-box, padding-box;
    content: "";
    padding: var(--border-width);
    border-radius: var(--border-radius);
    background-image: conic-gradient(#488cfb, #29dbbc, #ddf505, #ff9f0e, #e440bb, #655adc, #488cfb);
    -webkit-mask-image: var(--m-i), var(--m-i);
    mask-image: var(--m-i), var(--m-i);
    -webkit-mask-origin: var(--m-o);
    mask-origin: var(--m-o);
    -webkit-mask-clip: var(--m-o);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    filter: hue-rotate(0);
    animation: rotate-hue linear 500ms infinite;
    animation-play-state: paused;
    animation-play-state: running;
    border-radius: 12px;
}
@keyframes rotate-hue {
	to {filter:hue-rotate(1turn);}
}
header a[data-route="freekey"]:hover::after {
    border: 0;
    -webkit-mask-composite: inherit;
    animation-play-state: paused;
    animation: none;
    border-radius: 0;
    background: #4f1fff;
    inset: 0px 8px;
}
header a[data-route="announcement"]::before {
    content: "\e60d";
    font-size: 20px;
    width: 36px;
    text-align: center;
    border-radius: 10px;
    margin-left: -5px;
    /* 每 3 秒自动摇一次 */
    animation: bell-ring-auto 3s ease-in-out infinite;
}
header a[data-route="announcement"]:hover::before {
    /*background: #ffffff14;*/
    animation: bell-ring 0.7s ease-in-out both;
}
/* ========== 自动循环：每 3 秒摇铃一次 ========== */
/* 前约 0.7s 摇动（≈23%），后面静止 */
@keyframes bell-ring-auto {
  0%, 23%, 100% {
    transform: rotate(0deg);
  }
  3%  { transform: rotate(14deg); }
  6%  { transform: rotate(-12deg); }
  9%  { transform: rotate(10deg); }
  12% { transform: rotate(-8deg); }
  15% { transform: rotate(5deg); }
  18% { transform: rotate(-3deg); }
  21% { transform: rotate(1deg); }
}

/* ========== 悬停单次摇铃 ========== */
@keyframes bell-ring {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  70% { transform: rotate(2deg); }
  80% { transform: rotate(-1deg); }
}

@media screen and (max-width: 768px) {
    header {
        top: 15px;
    }
    .Mobile {
        width: 30px;
        height: 3px;
        position: relative;
        transition: all 0.25s ease 0s;
        z-index: 1;
        background: #ffffff;
        border-radius: 10px;
    }
    .Mobile::before, .Mobile::after {
        content: '';
        background: #ffffff;
        position: absolute;
        right: 8px;
        left: 0;
        margin: 0;
        height: 3px;
        transition: all .3s ease 0s;
        border-radius: 10px;
    }
    .Mobile::before {
        top: -10px;
    }
    .Mobile::after {
        bottom: -10px;
    }
    .Mobile.open::before, .Mobile.open::after {
        right: 0;
        left: 8px;
    }
    .nav-links {
        display: flex;
        flex-direction: column;
        background: #a02600;
        position: fixed;
        top: 10px;
        left: -50%;
        bottom: 10px;
        width: 50%;
        padding-top: 50px;
        transition: all 0.3s ease 0s;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .nav-links::before {
        content: '';
        position: absolute;
        bottom: 0;
        top: 0;
        right: -1px;
        width: 8px;
        border-top: 6px solid #050404;
        border-bottom: 6px solid #050404;
    }
    .nav-links.open {
        left: 0;
    }
    .Mobile {
        display: block;
        margin-left: 10px;
    }
    .nav-actions {
        margin-left: auto;
        margin-right: 0;
    }
    .nav-links a {
        margin: 8px 0px;
    }
}


/* 主页 */
#home {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    margin-top: 150px;
    font-family: "cmdpe1", "cmdpe2", -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#home h1 {
    font-size: 4.5em;
    letter-spacing: 0.06em;
    display: flex;
    justify-content: center;
}
#home h2 {
    margin-top: 0px;
    font-size: 4em;
    font-weight: 700;
    color: #ededed;
    margin-bottom: 60px;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#home .p1 {
    font-size: 1.2em;
    margin: 5px auto;
    width: 100vw;
    font-family: "cmdpe2", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#home #issue-stats span:nth-child(1) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5'%3E%3Cpath fill='none' stroke='%2300d26a' stroke-width='1' stroke-linecap='round' d='M0 4 L2.5 1 L5 4 L7.5 1 L10 4 L12.5 1 L15 4 L17.5 1 L20 4'/%3E%3C/svg%3E") repeat-x 0 100%;
    background-size: 22px auto;
    padding-bottom: 4px;
    animation: waveMove 3s infinite linear;
    font-weight: 600;
    color: #00d26a;
    display: inline-block;
}
#home #issue-stats span:nth-child(2) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5'%3E%3Cpath fill='none' stroke='%23ff3d00' stroke-width='1' stroke-linecap='round' d='M0 4 L2.5 1 L5 4 L7.5 1 L10 4 L12.5 1 L15 4 L17.5 1 L20 4'/%3E%3C/svg%3E") repeat-x 0 100%;
    background-size: 22px auto;
    padding-bottom: 4px;
    animation: waveMove 3s infinite linear;
    font-weight: 600;
    color: #ff3d00;
    display: inline-block;
}

@keyframes waveMove {
    from { background-position-x: 0; }
    to   { background-position-x: 44px; }
}
#home .p2 {
    font-size: 1.2em;
    margin: 5px 38px;
    line-height: 1.7;
}
input {
    width: 100%;
    padding: 0 10px;
    border: 0px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    
    outline: none;
    height: 36px;
    line-height: 36px;
    color: #ccc;
    transition: all 0.25s ease-out 0s;
    padding-top: 1px;
}
input::placeholder {
    font-family: "cmdpe2", -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    color: rgba(255, 255, 255, 0.30);
    font-size: .9em;
}
/* 浏览器自动填充 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    /* 将背景色的过渡时间设置得非常长（比如50000秒），让它“永远”无法变成白色 */
    transition: background-color 50000s ease-in-out 0s;
    /* 文字颜色同样可以这样处理 */
    -webkit-text-fill-color: #ccc !important;
}
input {
  /* Firefox 隐藏箭头 */
  -moz-appearance: textfield;
}
/* Chrome / Edge / Safari 隐藏箭头 */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 主页输入框 */
#form-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px auto;
    padding: 0 100px;
}
.form-input {
    flex: 1;
    min-width: 0;
    position: relative;
}
.form-input:nth-child(1)::before {
    content: "\e60c";
    font-size: 1em;
    margin-right: 3px;
    vertical-align: 0px;
    position: relative;
    position: absolute;
    left: 5px;
    top: 10px;
}
.form-input:nth-child(2)::before {
    content: "\e8e8";
    font-size: 1em;
    margin-right: 3px;
    vertical-align: 0px;
    position: relative;
    position: absolute;
    left: 7px;
    top: 10px;
}
.form-input input {
    background: #222;
}
.form-input input:focus {
    box-shadow: 0 0 0 3px #222;
}
.form-box-right {
    display: flex;
    gap: 15px;
}

#buy-channel-select .custom-select-btn {
    background: #222;
    color: #00dd70;
    font-weight: 100;
}
#buy-channel-select .custom-select-panel {
    background: #222;
    min-width: calc(100% + 17px);
}
#amount {
    padding-left: 24px;
}
#email {
    padding-left: 30px;
}
button {
	border:none;
	border-radius:10px;
	font-size:14px;
	cursor:pointer;
}
button:disabled {
	/*background:#999;
	cursor:default;*/
}
button.full {
    height: 36px;
    line-height: 38px;
    background: rgb(240 58 0 / 50%);
    color: #fff;
    font-weight: 700;
    width: 52px;
    font-family: "cmdpe1", "cmdpe2", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: transform 0.1s ease;
}
button.full:hover {
    background: #ff3d00;
    color: #fff;
}


/* 按钮点击特效 */
button.full:active {
  transform: scale(0.96);
}
.animate {
  animation: pulse 1s cubic-bezier(0, 0.60, 0, 0); 
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.3);
  }
  10% {
    box-shadow: 0 0 0 5px rgba(255, 61, 0, 0.3);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(255, 61, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(255, 61, 0, 0);
  }
}
.animate1 {
  animation: pulse1 1s cubic-bezier(0, 0.60, 0, 0); 
}

@keyframes pulse1 {
  0% {
    box-shadow: 0 0 0 0 rgba(158, 0, 185, 0.3);
  }
  10% {
    box-shadow: 0 0 0 5px rgba(158, 0, 185, 0.3);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(158, 0, 185, 0.1);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(158, 0, 185, 0);
  }
}
#submit-btn {
    background: #3e00ad;
    width: 36px;
    overflow: hidden;
    color: inherit;
}
#submit-btn:hover {
    background: #bc2d00;
}
#submit-btn::before {
    content: "\101e3";
    font-size: 18px;
    margin-right: 22px;
    margin-left: 8px;
    margin-top: -2px;
}
/* 复制按钮 */
.icon-btn {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 0px solid rgba(255,255,255,0.15);
	background: rgba(255,255,255,0.08);
	color: rgb(255 255 255 / 50%);
	cursor: pointer;
}
.icon-btn:hover {
	background: rgb(192 46 0);
	color: rgb(255 255 255 / 100%);
}
i.icon-copy {
    display: block;
    line-height: 1;
    transform: translate(-1.9px, 1.1px);
}

/* 弹窗 */
  .modal-overlay {
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.75);
	align-items:center;
	justify-content:center;
	z-index:100;
	padding:20px;
	display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
div#modal-balance .modal-box {
	max-width: 688px;
}

.modal-box {
	background:#222;
    padding: 16px 20px 20px;
	width:100%;
	max-width: 660px;
	position:relative;
    transform: translateY(24px);
    transition: transform 0.25s ease;
    backdrop-filter: blur(9px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    display: flex;
    flex-direction: column;
    max-height: 84vh;

  background-color: #3a3a3a;
  /* 只做喷砂材质，不做强高光 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.58  0 0 0 0 0.58  0 0 0 0 0.58  0 0 0 0.68 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.48  0 0 0 0 0.48  0 0 0 0 0.48  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3c3c3c 0%, #383838 48%, #343434 100%);
  background-size:
    52px 52px,
    84px 84px,
    auto;
  background-repeat:
    repeat,
    repeat,
    no-repeat;
  background-blend-mode:
    soft-light,
    overlay,
    normal;
}

.modal-overlay.open .modal-box {
  transform: translateY(0);
}
.modal-box::before {
    content: "";
    position: absolute;
    top: 0px;
    z-index: 1;
    left: 0px;
    right: 0;
    height: 9px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}
.modal-box::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0px;
    right: 0;
    height: 9px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}
.modal-box::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0px;
    right: 0;
    height: 9px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}
.modal-box-bj {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;

  background-image:
    /* 1) 左下拐角光泽：贴圆角、柔反射 */
    radial-gradient(ellipse 58% 46% at 6% 100%,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.11) 24%,
      rgba(255,255,255,0.03) 48%,
      transparent 70%),
    /* 2) 右下拐角光泽 */
    radial-gradient(ellipse 58% 46% at 94% 100%,
      rgba(255,255,255,0.24) 0%,
      rgba(255,255,255,0.10) 24%,
      rgba(255,255,255,0.03) 48%,
      transparent 70%),
    /* 3) 底边横向柔光带：把两角光泽连起来，突出质感 */
    linear-gradient(0deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.05) 7%,
      rgba(255,255,255,0.015) 16%,
      transparent 28%),
    /* 4) 主体纵光：上偏亮、中过渡、下偏暗 */
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.045) 14%,
      rgba(255,255,255,0.01) 28%,
      transparent 42%,
      rgba(0,0,0,0.08) 58%,
      rgba(0,0,0,0.22) 76%,
      rgba(0,0,0,0.40) 92%,
      rgba(0,0,0,0.52) 100%),
    /* 5) 顶部微抬 + 底部再压一点，增强厚度 */
    radial-gradient(ellipse 110% 70% at 50% 0%,
      rgba(255,255,255,0.06) 0%,
      transparent 58%),
    /* 6) 底区整体收暗，避免下半发灰平 */
    radial-gradient(ellipse 120% 75% at 50% 100%,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.08) 42%,
      transparent 72%);

  background-repeat: no-repeat;
  /* soft-light：既能上提亮也能下压暗，底角光泽能出来 */
  mix-blend-mode: hard-light;
  opacity: 1;
}

.modal-box-bj::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 8px;
    right: 8px;
    height: 4px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}
.modal-box-bj::after {
    content: '';
    position: absolute;
    bottom: 9px;
    left: 9px;
    right: 9px;
    height: 9px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}

.modal-overlay[data-route="qrcode"] .modal-box {
    max-width: 382px;
}

.modal-close {
    position: absolute;
    top: -24px;
    right: -24px;
    font-size: 22px;
    width: 24px;
    height: 24px;
    line-height: 25px;
    color: #999;
    cursor: pointer;
    background: #ff000085;
    border: none;
    padding: 0;
    border-radius: 9px;
    z-index: 99999;
}
.modal-close:hover {
    color: #fff;
    background: #ff0000c9;
}
.modal-overlay h2 {
    font-size: 1.2em;
    position: relative;
    margin-bottom: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5'%3E%3Cpath fill='none' stroke='%2300d26a' stroke-width='0.3' stroke-linecap='round' d='M0 4 L2.5 1 L5 4 L7.5 1 L10 4 L12.5 1 L15 4 L17.5 1 L20 4'/%3E%3C/svg%3E") repeat-x 0 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5'%3E%3Cpath fill='none' stroke='%23161616' stroke-width='0.3' stroke-linecap='round' d='M0 2 L20 2'/%3E%3C/svg%3E") repeat-x 0 100%;
    background-size: 22px auto;
    padding-bottom: 16px;
    flex-shrink: 0;
}
.modal-overlay h2::before, .modal-overlay h3::before {
    content: '';
    position: absolute;
    top: 1px;
    left: -23px;
    background: #00d26a;
    width: 6px;
    height: 22px;
}
.modal-overlay h3::before {
    height: 19px;
}
.modal-overlay h2::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -23px;
    right: -23px;
    height: 4px;
    border-left: 9px solid #050404;
    border-right: 9px solid #050404;
}


.query-btn-box {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    justify-content: space-between;
}

#query-email, #balance-key {
    background: #00000080;
    border-radius: 10px 0 0 10px;
}

#modal-freekey .query-btn-box {
    flex-direction: column;
}
#freekey-claim-btn {
    width: 140px;
    margin: 10px 0;
}
#freekey-info {
    width: 100%;
}
#renew-form {
    gap: 12px;
    flex-direction: column;
}
#renew-key, #renew-amount, #renew-email {
    background: #00000080;
    padding: 0 22px;
}
#renew-email {
    padding: 0 10px 0 28px;
}
#renew-form div:nth-child(1) {
    flex: 5;
}
#renew-form div:nth-child(2) {
    flex: 3;
}
#renew-form div:nth-child(3) {
    flex: 1.5;
}
#renew-form div {
    position: relative;
    width: 70%;
}
#renew-form div:nth-child(1)::before {
    content: "\e7be";
    font-size: 1em;
    margin-right: 3px;
    vertical-align: 0px;
    position: absolute;
    left: 5px;
    top: 10px;
}
#renew-form div:nth-child(2)::before {
    content: "\e8e8";
    font-size: 1em;
    margin-right: 3px;
    vertical-align: 0px;
    position: absolute;
    left: 7px;
    top: 10px;
}
#renew-form div:nth-child(3)::before {
    content: "\e60c";
    font-size: 1em;
    margin-right: 3px;
    vertical-align: 0px;
    position: absolute;
    left: 5px;
    top: 10px;
}

#balance-btn, #query-btn {
    border-radius: 0 10px 10px 0;
}
.modal-box p{
    line-height: 1.6;
}


/* 查询结果容器 */
#query-result, #renew-result {
    overflow-y: auto;
    display: block;
    padding: 0 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 20px;
    flex: 1;
    min-height: 0;
}
#balance-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 12px;
    overflow-y: auto;
    padding: 0 16px 0 20px;
    margin-left: -20px;
    margin-right: -20px;
}
.item, .box {
    background: rgb(0 0 0 / 20%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
}
.item>div, .box>div {
    display: flex;
    gap: 5px;
    align-items: center;
}
.item>div:not(:first-child) {
    margin-top: 10px;
}
.hint {
    font-size: 13px;
    color: #ff3d00;
    background: #ff3d001c;
    padding: 0 8px;
    border-radius: 8px;
    display: inline;
    width: 201px;
    height: 28px;
    line-height: 28px;
}
.item .hint {
    display: inline;
}
.hint span:nth-child(2) {
    color: #99e640;
}
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.token-chart-wrap + h3 {
    font-size: 1em;
    margin: 0 0 10px;
    position: relative;
    display: none;
}
.table-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 600px;
}
.stat {
    flex: 1 0 calc(33.333% - 8px);
    min-width: 0;
    background: #333;
    border-radius: 15px;
    padding: 12px 12px;
}
.stat:nth-child(1) {
    background-color: color-mix(in oklab, oklch(72.3% .219 149.579) 20%, transparent);
    color: oklch(72.3% .219 149.579);
}
.stat:nth-child(2) {
    background-color: color-mix(in oklab, oklch(62.7% .265 303.9) 30%, transparent);
    color: oklch(0.7 0.22 306.22);
}
.stat:nth-child(3) {
    background-color: color-mix(in oklab, oklch(70.5% .213 47.604) 20%, transparent);
    color: oklch(70.5% .213 47.604);
}
.stat:nth-child(4) {
    background-color: color-mix(in oklab, oklch(58.5% .233 277.117) 30%, transparent);
    color: oklch(0.62 0.22 278.06);
}
.stat:nth-child(5) {
    background: #008eff3d;
    color: #2398f5;
}
.stat:nth-child(6) {
    background: #ff00002b;
    color: #ff2424;
}
.stat b {
	display:block;
	font-size:14px;
	font-weight:700;
	margin-bottom:0px;
}
.stat span {
	font-size:14px;
}
code {
    background: rgb(0 0 0 / 38%);
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    border-radius: 8px;
    font-size: 13px;
    color: #99e640;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box>div:not(:first-child) {
    margin-top: 10px;
}

table {
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}
th, td {
	text-align:left;
	padding:6px 6px;
	border-bottom:1px solid #333;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.placeholder {
	color:#999;
	font-size:14px;
	padding:30px 0;
	text-align:center;
}
/* 查询密钥是金额变化时闪烁 */
.stat span.money-flash{animation:moneyFlash .55s ease;}
@keyframes moneyFlash{0%{color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,.55)}100%{color:inherit;text-shadow:none}}
tr.usage-row-flash td{animation:usageRowFlash .7s ease;}
@keyframes usageRowFlash{0%{color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,.45);background:rgba(0,229,255,.08)}100%{color:inherit;text-shadow:none;background:transparent}}

/* 二维码 */
#qrcode-box {
    text-align: center;
}
#qrcode-box img {
	width:280px;
	height:280px;
}
#qrcode-box>p:not(.tip) {
	margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: bold;
}
#qrcode-box>p span {
	color: #00d26a;
}

.tip {
	font-size:14px;
	margin-top:12px;
    font-weight: bold;
}
.tip span {
    color: #ff3d00 !important;
    font-weight: 700;
}

/* 支付成功 */
#success-content {

}

/* 通知小图标 */
.notice-ico::before, .tl-text::before {
    content: "\e719";
    font-size: 1.1em;
    margin-right: 5px;
    vertical-align: 0px;
}


/* 顶部通知 */
#toast-wrap {
    position: fixed;
    top: 0;
    right: 10px;
    display: flex;
    z-index: 200;
    pointer-events: none;
    width: 160px;
    flex-wrap: wrap;
    justify-content: center;
}
.toast {
	margin-top:16px;
	padding:10px 10px;
	border-radius:12px;
	font-size:14px;
	color:#fff;
	background:#333;
	box-shadow:0 4px 12px rgba(0,0,0,0.15);
	opacity:0;
	transform:translateY(-12px);
	transition:all 0.25s ease;
}
.toast::before {
    content: "\e719";
    font-size: 1.1em;
    margin-right: 5px;
    vertical-align: 0px;
}
.toast.show {
	opacity:1;
	transform:translateY(0);
}
.toast.error {
	background:#bc2d00;
}
.toast.success {
	background:#370099;
}





/* 模型广场 */
.modal-box-wide {
	max-width: 1122px;
	width: 94vw;
    min-height: 84vh;
}
#models-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: 13px;
    justify-content: space-between;
    flex-shrink: 0;
}
.search-box {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
}
.search-box::before {
    content: "\eda2";
    font-size: 1.1em;
    position: absolute;
    left: 12px;
    top: 10px;

}
.search-box input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 28px;
    background: rgb(255 255 255 / 15%);
    padding: 0px 32px;
}
.search-box input:focus {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 15%);
}

.search-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    color: #bbb;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: rgb(255 255 255 / 15%);
    width: 18px;
    height: 18px;
    border-radius: 7px;
}
.search-clear-btn:hover { 
    color: #fff;
    background: #ff0000a6;
}

.custom-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    /*min-width: 120px;*/
    text-align: left;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgb(255 255 255 / 15%);
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    font-family: "cmdpe2", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.custom-select-label.selected {
    color: #ff3e00;
    font-weight: 600;
}
.custom-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: calc(100% + 30px);
    max-height: 280px;
    overflow-y: auto;
    background: #221529;
    border-radius: 10px;
    padding: 0 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.custom-select-option.active {
    color: #ff3e00;
    font-weight: 600;
}
.custom-select-arrow {
    font-size: 0;
    opacity: 1;
    transition: transform 0.15s ease;
    width: 6px;
    height: 6px;
    margin-right: 0px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(0deg);
}
.custom-select.open .custom-select-arrow { transform: rotate(45deg); }
.custom-select { position: relative; }
.custom-select.open .custom-select-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-option { margin: 4px 0; padding: 6px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.custom-select-option:hover, .custom-select-option.active { background: rgb(255 255 255 / 10%); }
#models-toolbar label {
    display: none;
}


/* 模型广场卡片 */
#models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 0 14px 0 20px;
    margin-left: -20px;
    margin-right: -20px;
    flex: 1;
    min-height: 0;
}
.model-card {
	display: flex;
	flex-direction: column;
	background: #17171c;
	border: 0px solid rgba(255,255,255,0.08);
    border: 0px solid hsl(217 19% 24%);
	border-radius: 14px;
	overflow: hidden;
	height: 324px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 /* 固定高度，保证卡片整齐，内容多的截断、少的留白 */
}
.model-card:hover {
    transform: translateY(0px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.model-card:hover .model-icon {
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(180deg, rgb(158 0 185 / 25%), rgba(0, 0, 0, 0));
}
.model-card.unavailable {
	/*opacity: 0.55; */
}
.model-card-top {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0 10px;
	top: 10px;
	font-weight: 600;
}
.tag-vendor {
    font-size: 11px;
    border: 0px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 4px 8px;
    min-height: 18px;
    background: rgba(0, 0, 0, 0.35);
    color: rgb(100, 116, 139);
    background: rgba(100, 116, 139, 0.12);
    border: 0px solid rgba(100, 116, 139, 0.22);
}
.tag-category {
    font-size: 11px;
    border-radius: 8px;
    padding: 4px 8px;
    color: rgb(100, 116, 139);
    background: rgba(100, 116, 139, 0.08);
    border: 0px solid rgba(100, 116, 139, 0.22);
}
.model-icon {
	height: 88px;
	margin: -24px 0 0 0;
 /* 往上叠一点，盖住标签行下方，跟示意图的构图接近 */
    padding: 10px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(158,0,185,0.12), rgba(0,0,0,0));
	font-size: 32px;
	color: rgba(255,255,255,0.85);
}
  /* 图标本体交给外部 iconfont 的 ::before 规则去插入，这里只留一个居中的挂载点 */

.model-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px 10px;
	min-height: 0;
}
.model-name {
	font-weight: bold;
	font-size: 15px;
	word-break: break-all;
	
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.model-vendor-line {
	font-size: 12px;
	color: #999;
	margin-top: 2px;
}
.model-desc {
	font-size: 12px;
	color: #aaa;
	margin-top: 8px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.9em;
 /* 没有摘要时留出等高的空白，保证卡片不会参差不齐 */
}
.model-price-list {
	margin-top: 8px;
	font-size: 12px;
}
.price-line {
	display: flex;
	align-items: baseline;
	gap: 0px;
	color: #ccc;
    font-weight: 600;
}
.price-line span {
	color: #888;
	/* min-width: 62px; */
}
.price-line b {
	color: #f0b90b;
	font-weight: 600;
    margin-right: 5px;
    margin-left: -6px;
}
.price-line i {
    font-style: normal;
    color: #f0b90b;
    font-size: 12px;
}
.model-tags {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.model-tags .tag {
	font-size: 11px;
	background: rgba(158,0,185,0.15);
	color: #c77dd6;
	border-radius: 6px;
	padding: 2px 6px;
	color: hsl(0 0% 92% / 0.50);
    background: hsl(0 0% 92% / 0.05);
    border: 0px solid hsl(217 19% 24%);
}
.model-card:hover .model-tags .tag {
    background: rgb(0 142 255 / 20%);
    color: rgb(44 189 255);
}
.badge-billing {
	font-size: 11px;
	border-radius: 6px;
	padding: 2px 6px;
}
.badge-billing.usage {
	background: rgba(0,210,106,0.15);
	color: #00d26a;
}
.badge-billing.count {
	background: rgba(255,152,0,0.15);
	color: #ff9800;
}
.badge-unavailable {
	font-size: 11px;
	background: rgba(153,153,153,0.25);
	color: #bbb;
    border-radius: 6px;
    padding: 2px 6px;
    background: rgb(255 17 0 / 50%);
    color: rgb(255 255 255);
    opacity: 0.38;
}
.model-card-footer {
    position: relative;
	display: flex;
	gap: 8px;
	padding: 10px 10px;
	border-top: 0px solid rgba(255,255,255,0.06);
    align-items: center;
}
.model-card-footer::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 15px;
    right: 15px;
    height: 0;
    border-bottom: 1px solid hsl(217 19% 24%);
}
.tooltip {
    position: absolute;
    bottom: 45px;
    left: 10px;
    background: rgb(54 0 148 / 70%);
    color: #f3f3f3;
    padding: 8px 8px;
    border-radius: 10px 10px 10px 3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    pointer-events: none;
    z-index: 999;
    font-size: 12px;
    font-family: "cmdpe2", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.icon-btn:hover .tooltip {
    opacity: 1;
    visibility: visible;
}
.btn-try {
	flex: 1;
    height: 28px;
    padding-right: 5px;
	border-radius: 8px;
	font-size: 13px;
	cursor: not-allowed;
	font-family: "cmdpe2", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: hsl(211 100% 64%);
    background-color: hsl(211 100% 64% / .08);
    border: 0px solid hsl(211 100% 64% / .3);
}
:is([class*="-gpt"], [class*="-o1"], [class*="-o2"], [class*="-o3"], [class*="-o4"])::before {
    content: "\fcc7";
    font-size: 2em;
}
:is([class*="-claude"])::before {
    content: "\e619";
    font-size: 2em;
}
:is([class*="-deepseek"])::before {
    content: "\e603";
    font-size: 2em;
}
:is([class*="-llama"])::before {
    content: "\ea0e";
    font-size: 2em;
}
:is([class*="-grok"])::before {
    content: "\e672";
    font-size: 2em;
}
:is([class*="-doubao"])::before {
    content: "\e600";
    font-size: 2em;
}
:is([class*="-seedance"])::before {
    content: "\e600";
    font-size: 2em;
}
:is([class*="-codex"])::before {
    content: "\10218";
    font-size: 2em;
}
:is([class*="-gemini"])::before {
    content: "\e607";
    font-size: 2em;
}
:is([class*="-kimi"])::before {
    content: "\e6a0";
    font-size: 2em;
}


/* 模型卡片可用性灯条：复制按钮后 */
.model-health-strip {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    max-height: 28px;
    max-width: 93px;
    min-width: 48px;
    flex: 0 0 auto;
    gap: 1px;
    padding: 5px 0;
    border-radius: 8px;
    border: 0;
    /*background: rgba(0, 12, 24, 0.55);
    background: hsl(211 100% 64% / .08); */
    overflow: hidden;
    cursor: default;
}
.model-health-strip .tooltip {
    left: 45px;
}
.model-health-strip:hover .tooltip {
    opacity: 1;
    visibility: visible;
}
.model-health-strip .hb {
  display: block;
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
  flex: 0 0 5px;               /* 和宽高一致，别写 0 0 2px */
  border-radius: 10px;
  opacity: 0.8;
  margin: 0;
  padding: 0;
}
.model-health-strip .hb.green  { background: #00d26a; }
.model-health-strip .hb.yellow { background: #ffc107; }
.model-health-strip .hb.red    { background: #f44336; }
.model-health-strip .hb.gray   { background: #5a6570; }

/* 公告按钮 */
#announcement-badge[hidden]{display:none!important}
.ann-badge {
    position: absolute;
    top: -6px;
    right: 10px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 14px;
    background: #ff1100;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}
/* 公告窗口 */
#modal-announcement .modal-box {
    max-width: 888px;
}
.announcement-timeline {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    flex: 1;
    min-height: 0;

}
/* 删掉父级竖线（如果还有的话）
#modal-announcement .announcement-timeline::before { ... }
*/
.tl-item {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    padding-bottom: 28px;
}
.tl-item:hover .tl-dot {
    background: #ff3d00;
    box-shadow: 0 0 0 4px rgba(15, 20, 25, 0.9), 0 0 10px rgb(255 61 0 / 40%);
}
/* 每条自己的竖线段：随 article 一起滚 */
.tl-item::before {
content: "";
    position: absolute;
    top: 25px;
    bottom: 5px;
    width: 0px;
    background: rgba(120, 130, 145, 0.45);
    pointer-events: none;
    z-index: 0;
    border-right: 1px solid rgba(120, 130, 145, 0.45);
}
.tl-item--left {
  margin-right: auto;
  padding-right: 28px;
  padding-left: 0px;
  text-align: right;
}
.tl-item--right {
  margin-left: auto;
  padding-left: 28px;
  padding-right: 0px;
  text-align: left;
}
/* 左右条目的线都落在中轴 50% 上 */
.tl-item--left::before {
  right: 0;
  transform: translateX(50%);
}
.tl-item--right::before {
  left: 0;
  transform: translateX(-50%);
}
/* 最后一条：线只到圆点附近，避免多拖一截（可选） */
.tl-item:last-child {
  padding-bottom: 8px;
}
.tl-item:last-child::before {
  bottom: auto;
  height: 0px; /* 约等于圆点中心 */
}
/* 圆点压在线上 */
.tl-dot {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 1;
}
.tl-item--left .tl-dot {
  right: 0;
  transform: translateX(50%);
}
.tl-item--right .tl-dot {
  left: 0;
  transform: translateX(-50%);
}
.tl-dot--green {
  background: #34d399;
  box-shadow:
    0 0 0 4px rgba(15, 20, 25, 0.9),
    0 0 10px rgba(52, 211, 153, 0.4);
}
.tl-dot--gray {
  background: #6b7280;
  box-shadow: 0 0 0 4px rgba(15, 20, 25, 0.9);
}
.tl-dot--yellow {
    background: #ffbf00;
    box-shadow: 0 0 0 4px rgba(15, 20, 25, 0.9);
}
.tl-dot--red {
    background: #ff1100;
    box-shadow: 0 0 0 4px rgba(15, 20, 25, 0.9);
}
.tl-card {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 100%;
}
.tl-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #e5e7eb;
    word-break: break-word;
    background: rgb(255 255 255 / 10%);
    padding: 15px;
    padding-left: 38px;
}
.tl-text::before {
    content: "\e719";
    font-size: 1.3em;
    margin-right: 5px;
    vertical-align: 0px;
    position: absolute;
    left: 15px;
    top: 33px;
}
.tl-item--left .tl-text {
    border-radius: 20px 5px 20px 20px;
    text-align: left;
}
.tl-item--right .tl-text {
    border-radius: 5px 20px 20px 20px;
}
.tl-time {
    display: block;
    margin-top: 0px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}
@media (max-width: 640px) {
  .tl-item,
  .tl-item--left,
  .tl-item--right {
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 0 4px 24px 28px;
  }
  .tl-item::before,
  .tl-item--left::before,
  .tl-item--right::before {
    left: 10px;
    right: auto;
    transform: translateX(-50%);
  }
  .tl-item--left .tl-dot,
  .tl-item--right .tl-dot {
    left: 10px;
    right: auto;
    transform: translateX(-50%);
  }
.tl-item--left .tl-text {
    border-radius: 5px 20px 20px 20px;
}
  
}


/* 近 24h Tokens 曲线 */
.token-chart-wrap {
  margin: 12px 0;
  padding: 10px 14px 5px;
  border: 0px solid rgba(0, 229, 255, 0.22);
  border-radius: 15px;
  background: linear-gradient(180deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 30%));
}
.token-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0px;
  font-size: 13px;
}
.token-chart-title {
  color: #7df9ff;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.token-chart-meta {
  color: rgba(180, 220, 240, 0.55);
  font-size: 12px;
}
.token-chart-stage {
  position: relative;
}
.token-chart-svg {
  display: block;
  width: 100%;
  height: 160px;
}
.token-chart-svg .grid-h,
.token-chart-svg .grid-v {
    stroke: rgb(3 169 244 / 20%);
    stroke-width: 1;
    stroke-dasharray: 2 2;
}
.token-chart-svg .line {
  fill: none;
  stroke: #00e5ff;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.token-chart-svg .hover-dot {
  fill: #FF5722;
  stroke: #00d26a;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.9));
}
.token-chart-svg .axis-y,
.token-chart-svg .axis-x {
  fill: rgba(180, 220, 240, 0.5);
  font-size: 10px;
}
.token-tooltip {
  position: absolute;
  z-index: 5;
  /* min-width: 148px; */
  padding: 8px 10px;
  pointer-events: none;
  border: 0px solid rgba(0, 229, 255, 0.45);
  border-radius: 15px;
  background: rgba(4, 16, 28, 0.92);
  /* box-shadow: 0 0 16px rgba(0, 200, 255, 0.2); */
  color: #c8f7ff;
  font-size: 12px;
  line-height: 1.45;
}
.token-tooltip .tip-time {
  color: #7df9ff;
  margin-bottom: 4px;
  font-weight: 600;
}
.token-tooltip b {
  color: #fff;
  font-weight: 600;
}
.token-chart-empty {
  color: rgba(180, 220, 240, 0.5);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}
/* 公告窗口结束 */


/* 手机端 */
@media (max-width: 768px) {
body {
    letter-spacing: 0;
}
#hero-art {
    opacity: 0;
}
#home {
    margin-top: 100px;
}
#home h1 {
    font-size: 2.3em;
}
#home h2 {
    margin-top: 10px;
    font-size: 2em;
    margin-bottom: 20px;
}
#home .p1 {
    font-size: 1em;
}
#form-box {
    width: 70vw;
    padding: 0 10px;
    flex-direction: column;
}
#form-box > div {
    width: 100%;
}
.form-input:nth-child(1)::before {
    left: 7px;
}
#amount {
    padding-left: 26px;
}
#email {
    padding-left: 28px;
}
#submit-btn {
    flex: 1;
}
#submit-btn::before {
    margin-right: 6px;
}
#home .p2 {
    font-size: 1em;
    margin: 5px 5px;
}
.modal-close {
    right: 20px;
    top: 16px;
}
.item>div, .box>div {
    flex-wrap: wrap;
    justify-content: space-between;
}
code {
    width: calc(100% - 35px);
}
.stats {
    flex-wrap: wrap;
}
#models-toolbar {
    justify-content: flex-start;
    gap: 5px;
}
#renew-form div {
    width: 100%;
}
.token-chart-svg {
    height: 130px;
}