:root {
   --primary: #2563ff;
   --primary-hover: #1552f0;
   --text-main: #232323;
   --text-sub: #6b7280;
   --bg-light: #f5f7ff;
   --card-bg: #ffffff;
   --border-soft: #e5e7f0;
   --radius-lg: 18px;
   --shadow-soft: 0 18px 40px rgba(40, 78, 192, 0.08);
   --max-width: 1200px;
 }

 body,
 button,
 input,
 select,
 textarea {
   font: 12px/1.5tahoma, arial, \5b8b\4f53;
 }

 .container {
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
 }

 .w1200 {
   width: 1200px;
 }

 .flex {
   display: flex;
 }

 .flex-jsac {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .flex-align-center {
   display: flex;
   align-items: center;
 }

 .flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .flex-1 {
   flex: 1;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 210px;
   height: 58px;
   line-height: 1.5;
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
   outline: none;
   transition: background .2s, color .2s, border-color .2s, transform .1s, box-shadow .1s;
 }

 .btn-icon {
   margin-right: 8px;
   width: 32px;
 }

 .btn-primary {
   background: var(--primary);
   color: #ffffff;
   box-shadow: 0 10px 25px rgba(37, 99, 255, .28);
 }

 .btn-primary:hover {
   background: var(--primary-hover);
   transform: translateY(-1px);
 }

 .btn-outline {
   background: transparent;
   color: var(--primary);
   border-color: var(--primary);
 }

 .btn-outline:hover {
   background: rgba(37, 99, 255, 0.06);
 }

 /* 顶部导航 */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(229, 231, 235, 0.5);
 }

 .nav-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
 }

 .logo {
   width: 160px;
 }

 .logged {
   cursor: pointer;
 }

 .nav-menu {
   display: flex;
   align-items: center;
   gap: 64px;
   font-size: 16px;
   color: #4b5563;
 }

 .nav-menu a {
   position: relative;
   padding: 4px 0;
 }

 .nav-menu a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0;
   height: 2px;
   background: var(--primary);
   transition: width .2s;
 }

 .nav-active {
   color: #0866ff;
 }

 .nav-menu .nav-active::after {
   width: 100%;
 }

 .nav-menu a:hover::after,
 .nav-menu a:focus-visible::after {
   width: 100%;
 }

 .nav-right {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   font-size: 16px;
 }

 .user-name-box {
   cursor: pointer;
 }

 .log-out {
   display: none;
   position: absolute;
   right: 0px;
   border-radius: 4px;
   top: 32px;
   /* background-color: #f9f9f9; */
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   padding: 12px 16px;
   border-radius: 4px;
   text-align: left;
   border: none;
   background: #fff;
   cursor: pointer;
   width: 100px;
 }

 .nav-link {
   color: #4b5563;
 }

 .nav-btn {
   width: 114px;
   height: 42px;
 }

 /* Footer */
 .site-footer {
   background: #f9fafb;
   padding: 32px 0 20px;
   font-size: 12px;
   /* color: #9ca3af;
    */
   color: #000;
 }

 .footer-top {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   margin-bottom: 26px;
 }

 .footer-title {
   font-weight: 600;
   margin-bottom: 10px;
   color: #4b5563;
 }

 .footer-links {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .footer-links li {
   margin-bottom: 6px;
 }

 .footer-links a {
   /* color: #6b7280;
    */
   color: #000;
 }

 .footer-links a:hover {
   color: var(--primary);
 }

 .footer-bottom {
   border-top: 1px solid #e5e7eb;
   padding-top: 12px;
   text-align: center;
 }


 /* 消息提醒 */
 /* 容器：居中堆叠 */
 #message-container {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   pointer-events: none;
 }

 /* 单条消息 */
 .message-content {
   min-width: 200px;
   padding: 10px 20px;
   margin-top: 12px;
   border-radius: 6px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   opacity: 0;
   transform: translateY(-10px);
   animation: fadeIn 0.3s forwards;
   pointer-events: auto;
 }

 /* 类型颜色 */
 .message-success {
   background-color: #67C23A;
 }

 .message-error {
   background-color: #F56C6C;
 }

 .message-info {
   background-color: #909399;
 }

 /* .floating-service -btn {
   position: fixed;
   right: 24px;
   bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   background: #0866FF;
   color: #fff;
   border-radius: 50%;
   text-decoration: none;
   font-size: 14px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
   z-index: 9999;
 } */
 .service-aside {
   position: fixed;
   top: 50%;
   right: 0;
   width: 74px;
   display: flex;
   flex-direction: column;
   gap: 28px;
   padding: 24px 0;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
   background-color: #fff;
   box-shadow: 0px 0px 10px 1px rgb(87 73 73 / 40%);
   transform: translate(0, -50%);
   z-index: 2;
 }

 .floating-service-btn {
   border: 0;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 12px;
   cursor: pointer;
 }

 .floating-service-btn img {
   width: 32px;
 }

 /* 弹窗 */
 /* dialog：默认无边框 */
 #server-dialog {
   top: 200px;
   left: 50%;
   border: none;
   padding: 0;
   max-width: 90%;
   transform: translate(-50%);
 }

 .server-content {
   background: #fff;
   padding: 24px;
   border-radius: 12px;
   width: 320px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
   position: relative;
 }

 .server-close {
   position: absolute;
   right: 12px;
   top: 12px;
   border: none;
   background: transparent;
   font-size: 24px;
   cursor: pointer;
 }


 /* 隐藏元素不影响seo */
 .visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
 }

 /* dialog 背景遮罩（Chrome, Safari 支持） */
 .server-dialog::backdrop {
   background: rgba(0, 0, 0, 0.45);
 }

 /* 兼容 Firefox，使用额外遮罩（可选） */
 body.dialog-open {
   overflow: hidden;
 }

 /* 动画 */
 @keyframes fadeIn {
   to {
     opacity: 1;
     transform: translateY(0px);
   }
 }

 @keyframes fadeOut {
   to {
     opacity: 0;
     transform: translateY(-10px);
   }
 }