/*这里放通用的经常用的CSS，比如返回按钮；*/

 .back-btn {
     position: fixed;
     right: 60px;
     bottom: 60px;
     z-index: 1000;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     height: 56px;
     padding: 0 18px;
     border: 1px solid rgba(255, 255, 255, 0.22);
     border-radius: 18px;
     background: rgba(20, 24, 32, 0.55);
     color: rgba(255, 255, 255, 0.92);
     cursor: pointer;
     user-select: none;
     text-decoration: none;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
     transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
 }

 .back-btn:hover {
     transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.38);
     background: rgba(28, 34, 44, 0.62);
 }

 .back-btn:active {
     transform: translateY(0);
 }

 .back-btn i {
     width: 22px;
     height: 22px;
     display: block;
     flex: 0 0 auto;
     font-size: 0;
     line-height: 0;
 }

 .back-btn i.bi-arrow-90deg-left::before {
     content: "" !important;
     display: block;
     width: 22px;
     height: 22px;
     background-color: currentColor;
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M797.184%20472.064c66.56%2049.152%20113.664%20120.832%20133.12%20201.216%2014.848%2058.368%2022.016%20118.272%2020.48%20178.688%200%200-32.256-51.2-45.056-70.144-40.448-53.248-93.184-96.256-154.112-125.44-73.216-25.088-150.528-36.352-227.84-32.256v163.84l-394.24-278.528%20394.24-279.04v166.4s94.72%207.168%20143.872%2017.408c47.104%208.704%2091.648%2028.16%20129.536%2057.856z%22%2F%3E%3C%2Fsvg%3E");
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center;
     -webkit-mask-size: contain;
     mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M797.184%20472.064c66.56%2049.152%20113.664%20120.832%20133.12%20201.216%2014.848%2058.368%2022.016%20118.272%2020.48%20178.688%200%200-32.256-51.2-45.056-70.144-40.448-53.248-93.184-96.256-154.112-125.44-73.216-25.088-150.528-36.352-227.84-32.256v163.84l-394.24-278.528%20394.24-279.04v166.4s94.72%207.168%20143.872%2017.408c47.104%208.704%2091.648%2028.16%20129.536%2057.856z%22%2F%3E%3C%2Fsvg%3E");
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: contain;
 }

 .back-btn .label {
     font-size: 16px;
     letter-spacing: 0.08em;
     padding-left: 0.08em;
     white-space: nowrap;
 }


 /*右侧导航条*/
 .line-top-nav {
     position: fixed;
     top: 30px;
     right: 60px;
     z-index: 1001;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     background: rgba(10, 20, 34, 0.55);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
 }

 .line-top-nav::before {
     content: "";
     position: absolute;
     left: 12px;
     right: 12px;
     top: 50%;
     height: 1px;
     transform: translateY(-50%);
     background: linear-gradient(90deg, rgba(var(--line-rgb), 0.0), rgba(var(--line-rgb), 0.38), rgba(var(--line-rgb), 0.0));
     opacity: 0.9;
     pointer-events: none;
 }

 .line-top-nav__item {
     position: relative;
     z-index: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 36px;
     padding: 0 14px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     color: rgba(255, 255, 255, 0.86);
     text-decoration: none;
     font-size: 14px;
     letter-spacing: 0.18em;
     padding-left: calc(14px + 0.18em);
     background: rgba(0, 0, 0, 0.16);
     transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background-color 160ms ease;
     user-select: none;
     white-space: nowrap;
 }

 .line-top-nav__item:hover {
     transform: translateY(-1px);
     border-color: rgba(var(--accent-rgb), 0.38);
     color: rgba(255, 255, 255, 0.94);
     background: rgba(0, 0, 0, 0.22);
 }

 .line-top-nav__item.is-active {
     border-color: rgba(var(--accent-rgb), 0.70);
     color: rgba(255, 255, 255, 0.96);
     box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.10) inset, 0 0 18px rgba(var(--accent-rgb), 0.12);
 }

 .line-top-nav__item:nth-of-type(n+5) {
     display: none;
 }