* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background-color: #f7f8fa; /* 优化：更柔和的背景色 */
            overflow-x: hidden;
            width: 100vw;
            max-width: 100vw;
        }
        .register-box {
            width: 100%;
            max-width: 500px;
            background-color: #fff;
            border-radius: 6px; /* 优化：更小的圆角更精致 */
            box-shadow: 0 2px 12px rgba(0,0,0,0.06); /* 优化：更细腻的阴影 */
            max-width: calc(100vw - 30px);
            margin: 30px auto;
            padding: 25px; /* 核心优化：减少内边距 紧凑化 */
        }
        .title {
            color: #2f4050;
            font-size: 22px;
            text-align: center;
            margin-bottom: 20px; /* 优化：减少标题间距 */
            font-weight: bold;
            word-wrap: break-word;
            word-break: break-all;
        }
        .form-item {
            margin-bottom: 12px; /* 核心优化：大幅压缩表单项间距 极致紧凑 */
            overflow: hidden;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .form-item label {
            display: block;
            color: #666;
            font-size: 14px;
            margin-bottom: 3px; /* 优化：标签与输入框间距更贴合 */
        }
        .red-star {
            color: #f56c6c;
            font-size: 12px;
            margin-left: 2px;
        }
        .username-tip {
            color: #f56c6c;
            font-size: 12px;
            display: block;
            margin-top: 2px;
            line-height: 1.2;
        }
        .form-item input {
            width: 100%;
            padding: 10px 15px; /* 优化：输入框内边距 紧凑不拥挤 */
            border: 1px solid #e5e7eb; /* 优化：更浅的边框色 更精致 */
            border-radius: 4px; /* 优化：更小的圆角 */
            font-size: 14px;
            color: #333;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
            transition: all 0.25s ease; /* 优化：更快的过渡效果 */
        }
        .form-item input:focus {
            outline: none;
            border-color: #1ab394;
            box-shadow: 0 0 0 2px rgba(26, 179, 148, 0.08); /* 优化：更细腻的聚焦阴影 */
        }
        .code-item {
            display: flex;
            gap: 10px; /* 核心优化：减少验证码行间距 */
            flex-wrap: nowrap;
            align-items: flex-end;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .code-item input:first-child {
            flex: 1;
            min-width: 0;
        }
        .code-item button {
            flex-shrink: 0;
            width: 105px; /* 优化：按钮宽度适配紧凑布局 */
            padding: 10px 0; /* 优化：按钮内边距 */
            background-color: #1ab394;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            white-space: normal;
            word-wrap: break-word;
            transition: background-color 0.25s ease;
        }
        .code-item button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .code-item button:hover:not(:disabled) {
            background-color: #18a689;
        }
        .code-item.email-item {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .btn {
            width: 100%;
            padding: 11px; /* 优化：按钮内边距 更紧凑 */
            background-color: #1ab394;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            transition: background-color 0.25s;
            margin-top: 8px; /* 核心优化：减少按钮与表单间距 */
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .btn:hover {
            background-color: #18a689;
        }
        .msg {
            text-align: center;
            margin-bottom: 15px; /* 优化：减少提示框间距 */
            font-size: 14px;
            word-wrap: break-word;
            word-break: break-all;
            margin-left: auto;
            margin-right: auto;
            padding: 6px 10px; /* 优化：提示框内边距 */
            border-radius: 4px; /* 优化：提示框圆角 */
            color: #f56c6c;
            background-color: #fef2f2; /* 新增：失败提示浅背景 更醒目精致 */
            border: 1px solid #fee2e2;
        }
        .msg.success {
            color: #1ab394;
            background-color: #f0fdf9;
            border: 1px solid #ccfbf1;
        }
        .link {
            text-align: center;
            margin-top: 15px; /* 优化：减少链接间距 */
            font-size: 14px;
            margin-left: auto;
            margin-right: auto;
            color: #666;
        }
        .link a {
            color: #1ab394;
            text-decoration: none;
            transition: color 0.25s ease;
        }
        .link a:hover {
            text-decoration: underline;
            color: #18a689;
        }
        .menu a {
            color: #fff;
            text-decoration: none;
            margin: 0 15px;
            font-size: 16px;
        }
        .menu a:hover {
            color: #1ab394;
        }
        .content {
            width: 1200px;
            margin: 30px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            display: none;
        }
        .intro {
            width: 100%;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            display: none;
        }
        .intro h2 {
            color: #2f4050;
            margin-bottom: 20px;
            font-size: 22px;
        }
        .intro p {
            color: #666;
            line-height: 1.8;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .query-box {
            width: 580px;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: none;
        }
        .query-box h3 {
            color: #2f4050;
            margin-bottom: 20px;
            font-size: 18px;
            text-align: center;
        }
        .side-info {
            width: 580px;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: none;
        }
        .side-info h3 {
            color: #2f4050;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .side-info ul {
            list-style: none;
        }
        .side-info li {
            color: #666;
            line-height: 2;
            font-size: 14px;
            padding-left: 20px;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%231ab394'><path d='M21 7l-9-5-9 5v14l9 5 9-5V7z'/><path d='M17 15h-2v2h2v-2zm-4 0h-2v2h2v-2zm-4 0h-2v2h2v-2z'/></svg>") no-repeat left center;
        }
        .footer {
            background-color: #2f4050;
            color: #fff;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px; /* 优化：底部间距适配 */
            font-size: 14px;
            width: 100vw;
            max-width: 100vw;
        }
        @media (min-width: 501px) {
            .register-box {
                margin: 40px auto;
                padding: 30px;
                max-width: 500px;
                box-shadow: 0 3px 15px rgba(0,0,0,0.07);
            }
            .title {
                font-size: 24px;
                margin-bottom: 22px;
            }
            .form-item {
                margin-bottom: 12px;
            }
            .form-item input {
                padding: 10px 15px;
                font-size: 14px;
            }
            .code-item {
                gap: 10px;
            }
            .code-item button {
                width: 105px;
                padding: 10px 0;
                font-size: 14px;
            }
            .btn {
                padding: 12px;
                font-size: 16px;
                margin-top: 10px;
            }
        }
        @media (max-width: 500px) {
            body {
                padding: 0;
                overflow-x: hidden;
            }
            .register-box {
                padding: 15px;
                margin: 15px auto;
                max-width: calc(100vw - 10px);
                border-radius: 4px;
            }
            .title {
                font-size: 20px;
                margin-bottom: 18px;
            }
            .form-item {
                margin-bottom: 8px; /* 移动端核心紧凑优化 */
            }
            .form-item input {
                padding: 7px 12px;
                font-size: 13px;
            }
            .code-item {
                gap: 6px;
            }
            .code-item button {
                width: 85px;
                padding: 7px 0;
                font-size: 13px;
            }
            .btn {
                padding: 9px;
                font-size: 15px;
                margin-top: 6px;
            }
            .link {
                font-size: 13px;
                margin-top: 12px;
            }
            .msg {
                font-size: 13px;
                padding: 5px 8px;
            }
            .footer {
                padding: 15px 0;
                font-size: 13px;
                margin-top: 30px;
            }
        }