/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    background: linear-gradient(180deg, #ff3d2a 0%, #cc262b 100%);
  }
  
  * {
    padding: 0;
    margin: 0;
  }
  
  div {
    display: block;
    unicode-bidi: isolate;
  }
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden,
  [hidden] {
    display: none !important;
  }
  
  /*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
  
  .visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
   * Extends the .visually-hidden class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  
  .visually-hidden.focusable:active,
  .visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
   * Hide visually and from screen readers, but maintain layout
   */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
   * Clearfix: contain floats
   *
   * The use of `table` rather than `block` is only necessary if using
   * `::before` to contain the top-margins of child elements.
   */
  
  .clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
  
  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
  }
  
  
  /* PC端最大宽度768px */
  @media (min-width: 768px) {
    .pc-container {
      transform: translateX(-50%);
      margin-left: 50%;
      max-width: 768px;
    }
  
    .skeleton {
      max-width: 768px;
    }
  
  
    
  }
  
  .main {
    width: 100%;
    border-radius: 0px 0px 0px 0px;
    background-color: #fff;
  }
  
  .main-top {
    width: 100%;
    height: 60px;
    background: linear-gradient(90deg, #ff3d2a 0%, #cc262b 100%);
    position: fixed; /* 固定在顶部 */
    top: 0;
    left: 0;
    z-index: 1000;
  }
  
  /* 让后续内容不被顶部栏遮挡 */
  .data {
    padding-top: 60px; /* 与 .main-top 高度一致 */
  }
  
  .head-background {
    width: 100%;
    height: auto;
    display:block;          
  }
  
  .invite-bottom {
    font-weight: 500;
    color: #e5303a;
    position: absolute;
    background-color: #f9ddc8;
    left: 18px;
    right: 18px;
    bottom: 20px;
    padding: 6px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .user-info-box {
    width: calc(100% - 40px);
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
    z-index: 1;
    text-align: center;
    border: 2px solid #ff8c27;
    border-radius: 20px;
    display: inline-block;
    margin-top: 0;
    background-color: #d44042;
    min-height: 400px; /* 根据实际内容高度调整 */
  }
  
  .data {
    height: auto;
    text-align: center;
    display: inline-block;
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, #FF3D2A 0%, #CC262B 100%);
  }
  
  .container {
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
    background-color: transparent;
    background: linear-gradient(180deg, #FF3D2A 0%, #CC262B 100%);
  }
  
  .user-info-head-line1 {
    min-height: 20px; /* 根据实际内容高度调整 */
    color: #fff8c6;
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
  }
  
  /* H5端样式 */
  @media screen and (max-width: 430px) {
    body {
      margin: 0;
    }
  
    .pc-container {
      max-width: 430px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
      min-height: 100vh;
      position: relative;
    }
  
    ul {
      list-style: none; /* 去掉圆点 */
    }
  
   
  
    
  
  
  
    .line2-icon-left {
      margin-right: 9px;
    }
  
    .line2-icon-right {
      margin-left: 9px;
    }
  
    .line2-iconleft {
      width: auto;
      height: 22px;
      position: relative;
      top: 3px;
    }
  
    .line2-icontright {
      width: auto;
      height: 22px;
      position: relative;
      top: 3px;
    }
  
    .user-info-body {
      width: auto;
      height: auto;
      text-align: center;
      padding: 0 25px 3px;
      /* background-color: rgb(204, 34, 40); */
    }
  
    .user-info-detail-box {
      width: 100%;
      height: auto;
      padding: 10px 0px 10px 0px;
    }
  
    .user-phone-box {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: row;
      padding: 10px 0px 5px 0px;
      align-items: center;
    }
  
    .user-name-box {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: row;
      padding: 10px 0px 5px 0px;
    }
  
    .icon-name {
      width: 2rem;
      margin-right: 1rem;
    }
  
    .icon-phone {
      width: 2rem;
      margin-right: 1rem;
    }
  
    .open-button-box {
      margin-top: 20px;
      height: 50px;
      background-color: rgb(255, 81, 52);
      border-radius: 25px;
      line-height: 50px;
      font-size: 1.18rem;
      font-weight: 700;
      color: white;
    }
  
    input {
      outline: none;
      border: 1px solid #fbddc7;
      width: 95%;
      border-radius: 20px;
      height: 30px;
      background-color: rgb(204, 34, 40);
      padding-left: 15px;
      font-size: medium;
      font-family: fangsong;
      color: white;
    }
  
    input::-webkit-input-placeholder {
      color: white;
    }
  
    input::-moz-placeholder {
      color: white;
    }
  
    input::-ms-input-placeholder {
      color: white;
    }
  
    input::placeholder {
      color: white;
    }
  }
  
  /* 语言下拉菜单绝对定位，防止按钮位置变动 */
  /* .language-switcher {
    top: 20px;
    right: 20px;
    z-index: 1000;
    position: static;
    margin-left: auto;
  } */
  
  /* 语言下拉菜单美化和定位 */
  
  .logo_h {
    height: 26px;
    width: auto;
    display: block;
  }
  
  /* 语言切换按钮样式 */
  .language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  .hs-dropdown {
    position: relative;
  }
  
  .language_menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 8px;
    background: white;
    border-radius: 16px;
    padding: 16px 0;
    min-width: 150px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
  }
  
  .language_menu a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
  }
  
  .language_menu a:hover {
    background-color: #f5f5f5;
  }
  
  .lang-icon {
    margin-right: 8px;
  }
  
  .lang-flag {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 4px;
    object-fit: cover;
  }
  
  .hs-dropdown {
    position: relative;
  }
  
  .header-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1100;
    box-sizing: border-box;
  }
  .site-logo {
    height: 36px;
    width: auto;
    display: block;
  }
  
  .logo-bg-box {
    position: relative;
    width: 120px; /* 可根据实际图片宽度调整 */
    height: 48px; /* 可根据实际图片高度调整 */
    display: flex;
    align-items: flex-start;
  }
  .head-bg-img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .site-logo {
    position: absolute;
    top: 8px;
    left: 10px;
    height: 32px;
    width: auto;
    z-index: 2;
  }
  
  /* 阿拉伯语RTL支持 */
  [lang="ar"] {
    direction: rtl;
    text-align: right;
  }
  
  [lang="ar"] .user-info-head-line1,
  [lang="ar"] .user-info-head-line2,
  [lang="ar"] .info1-seg-title,
  [lang="ar"] .info1-seg-content,
  [lang="ar"] .info2-seg-title,
  [lang="ar"] .info2-seg-content,
  [lang="ar"] .info3-seg-title,
  [lang="ar"] .info3-seg-content {
    text-align: right;
  }
  
  [lang="ar"] .line2-icon-left {
    margin-right: 0;
    margin-left: 9px;
  }
  
  [lang="ar"] .line2-icon-right {
    margin-left: 0;
    margin-right: 9px;
  }
  
  [lang="ar"] .icon-name,
  [lang="ar"] .icon-phone {
    margin-right: 0;
    margin-left: 1rem;
  }
  
  [lang="ar"] input {
    text-align: right;
    padding-right: 15px;
    padding-left: 0;
  }
  
  [lang="ar"] .select-container {
    text-align: right;
  }
  
  [lang="ar"] .checkbox-input {
    margin-right: 0;
    margin-left: 5px;
  }
  
  
  .invite-title-group {
    position: absolute;
    top: 38px;
    left: 18px;
    width: auto;
    text-align: left;
    z-index: 2;
    pointer-events: none;
    transform: none;
  }
  
  .invite-title {
    font-size: 30px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffe8db 0%, #f0d597 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    width: 100%;
    white-space: nowrap;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
  }
  
  .invite-subtitle {
    max-width: 55%;
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 700;
    color: #fff6d2;
    margin-top: 10px;
    letter-spacing: 1px;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  
  
  
  /* 注册模块 */
  
  .steps {
    display: flex;
    align-items: center; /* 垂直居中所有孩子（包括箭头和 .step） */
    justify-content: space-between; /* 也可以用 space-between，根据你想要的左右留白 */
    margin-left: 26px;
    margin-right: 26px;
    margin-bottom: 16px;
  }
  
  .step {
    display: flex;
    flex-direction: column;
    align-items: center; /* 数字和文字都水平居中 */
  }
  
  .icon {
    width: 30px;
    height: 30px;
    background: #fff4c9;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #d23b3e;
  }
  
  .label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff8c6;
  }
  
  .arrow {
    width: 24px;
    height: 24px;
    background: url("../img/arrow.png") no-repeat center/contain;
    align-self: flex-start; /* 将箭头与容器顶部对齐 */
    margin: 0 12px; /* 左右留白，调节水平间距 */
    margin-top: 3px; /* 微调顶部位置，与图标顶部对齐 */
  }
  
  .register-success {
    display: none;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffd8d4 0%, #fff8c6 100%);
    border-radius: 20px;
    padding-bottom: 40px;
  }
  
  .scan-code {
    display: flex;
    width: 100%;
    height: 200px;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 56px;
    justify-content: space-between;
    align-items: stretch; /* 让子元素上下对齐 */
  }
  
  .scan-code-button-group {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
  }
  
  .scan-code-img {
    max-width: 176px;
    max-height: 176px;
    width: auto;
    height: 100%;
    display: block;
  }

  /* 二维码区：保存按钮样式 */
  .qrcode-wrapper {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .qrcode-tip {
    width: 176px; /* 与二维码最大宽度对齐 */
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(-90deg, #ff7071 0%, #ff351f 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(255, 53, 31, 0.22);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* 轻微按压反馈 */
  .qrcode-tip:active {
    transform: translateY(1px);
    filter: brightness(0.96);
  }

  /* 键盘可用性：聚焦描边 */
  #save-qrcode-btn:focus-visible {
    outline: 3px solid rgba(255, 248, 198, 0.95);
    outline-offset: 3px;
  }
  
  .scan-code-button-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 按钮靠右 */
    justify-content: space-between; /* 上下分布 */
    height: 100%; /* 撑满父容器高度 */
  }
  
  .scan-code-button-apple,
  .scan-code-button-android, 
  .scan-code-button-google {
    width: 134px;
    height: 40px;
    display: block;
  }
  
  .success-title {
    display: block; /* 占据整行 */
    width: calc(100% - 32px); /* 与输入框一样全宽 */
    height: 50px; /* 高度可按设计调整 */
    margin-top: 66px; /* 与上方输入框的间距 */
    margin-left: 16px;
    margin-right: 16px;
    /* 背景：从左到右的渐变色 */
    background: linear-gradient(-90deg, #ff7071 0%, #ff351f 100%);
  
    border: none; /* 去掉默认边框 */
    border-radius: 24px; /* 圆角 = 高度的一半，做成胶囊状 */
  
    font-size: 20px; /* 字号 */
    font-weight: 500; /* 字重 */
    color: #ffffff; /* 白色文字 */
    line-height: 50px; /* 文本垂直居中 */
    text-align: center; /* 水平居中 */
  
    cursor: pointer; /* 手型光标 */
    transition: filter 0.2s ease; /* 悬停/点击效果过渡 */
    -webkit-tap-highlight-color: transparent; /* 去掉点击高亮（尤其是移动端 WebKit） */
  }
  
  .register-body {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #ffd8d4 0%, #fff8c6 100%);
    border-radius: 20px;
  }
  
  .register-tabs {
    display: flex; /* 横向平分 */
    width: 100%; /* 或 100% 自适应，根据需要 */
    height: 50px;
    margin: 0 auto; /* 居中 */
  }
  
  .tab {
    flex: 1; /* 两个 tab 等分 */
    text-align: center;
    padding: 12px 0; /* 上下内边距 */
    font-size: 18px;
    color: rgba(51, 51, 51, 0.6); /* 未激活文字色 */
    position: relative; /* 为伪元素定位做准备 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* 去掉点击高亮（尤其是移动端 WebKit） */
  }
  
  .tab.active {
    color: #333; /* 激活文字色 */
    font-weight: 500;
    font-size: 18px;
  }
  
  /* 下划线：只有激活项才出伪元素 */
  .tab.active::after {
    content: "";
    position: absolute;
    bottom: 8px; /* 紧贴底部 */
    left: 40%; /* 下划线左右空 20%，可调 */
    width: 20%; /* 宽度占父宽的 60% */
    height: 4px;
    background: #d23b3e; /* 下划线颜色 */
    border-radius: 2px; /* 圆角 */
  }
  
  .register-forms .form {
    display: none; /* 默认隐藏 */
  }
  
  .register-forms .form.active {
    display: block; /* 只有 active 的表单才显示 */
  }
  
  /* 统一设置所有表单项 */
  .register-forms .form input {
    width: calc(100% - 32px); /* 占满父容器宽度 */
    box-sizing: border-box; /* 内边距不影响总宽度 */
    height: 50px; /* 根据设计调高度 */
    padding: 0 16px; /* 左右内边距 */
    margin-bottom: 8px; /* 每行之间的间距 */
    margin-left: 16px;
    margin-right: 16px;
    font-size: 16px; /* 字号 */
    color: #333333; /* 文本色 */
  
    background-color: #ffffff; /* 白色背景 */
    border: 1px solid #f0f0f0; /* 淡灰边框 */
    border-radius: 12px; /* 圆角（与高度一致可做胶囊形） */
    transition: border-color 0.2s; /* 焦点态过渡 */
  }
  
  /* 占位符文字样式 */
  .register-forms .form input::placeholder {
    color: #bfbfbf;
  }
  
  /* —— 容器水平布局 —— */
  .phone-group {
    position: relative; /* 为绝对定位子元素提供参考 */
    width: 100%;
    /* margin-bottom: 8px; */
  }
  
  /* —— 国家选择按钮 —— */
  .country-select {
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 16px;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: none; /* 移除右边框 */
    z-index: 2; /* 确保在输入框上方 */
    cursor: pointer;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent; /* 去掉点击高亮（尤其是移动端 WebKit） */
  }
  
  .country-flag {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #CC262B;
  }
  
  /* 国家码文本 */
  .country-code {
    padding-left: 6px;
    padding-right: 4px;
    font-size: 16px;
    color: #333;
  }
  
  /* 下拉箭头图标 */
  .down_arrow {
    width: 10px;
    height: 6px;
    transition: transform 0.2s;
  }
  
  /* 点击时箭头旋转效果 */
  .country-select.active .down_arrow {
    transform: rotate(180deg);
  }
  
  .country-panel {
    display: none;
    position: absolute;
    left: 16px;
    top: 50px;
    width: calc(100% - 32px);
    height: 300px;
    /* max-width: 300px; */
    max-height: 300px;
    background: white;
    /* border: 1px solid #ddd; */
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    padding: 10px;
  }
  
  .country-panel.active {
    display: block;
  }
  
  .country-search {
    width: 100%;
    padding: 8px;
    height: 35px !important;
    border: 1px solid #ddd;
    border-radius: 10px !important;
    margin-bottom: 10px;
    box-sizing: border-box;
    background-color: orange;
    font-size: 14px !important;
  }
  
  /* 手机号输入框样式 */
  .phone-input {
    width: calc(100% - 32px) !important; /* 覆盖之前的宽度设置 */
    box-sizing: border-box;
    height: 50px;
    font-size: 16px;
    color: #333;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
  }
  
  /* 验证码输入框容器 */
  .code-vertical {
    position: relative; /* 确保为绝对定位子元素提供参考 */
    width: 100%;
  }
  
  /* 验证码输入框 */
  .code-vertical input {
    width: calc(100% - 32px);
    box-sizing: border-box;
    height: 50px;
    padding: 0 90px 0 16px; /* 右侧留出足够空间给发送按钮 */
    margin-left: 16px;
    margin-right: 16px;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
  }
  
  #phone-send-code.disabled {
    color: #bfbfbf;
    cursor: not-allowed;
  }
  
  /* 发送按钮 */
  .code-vertical .send-code {
    position: absolute;
    top: 0;
    right: 16px; /* 与输入框右边距对齐 */
    height: 50px;
    padding: 0 16px;
    border: none;
    line-height: 50px;
    font-size: 16px;
    color: #5771f9;
    cursor: pointer;
    z-index: 2; /* 确保在输入框上方 */
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 使用伪元素创建较短的分割线 */
  .code-vertical .send-code::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px; /* 顶部减少10px */
    bottom: 10px; /* 底部减少10px */
    width: 1px;
    background-color: #e0e0e0;
  }
  
  /* 发送按钮悬停效果 */
  .code-vertical .send-code:hover {
    color: #4a5fd7;
  }
  
  /* 发送按钮禁用状态 */
  .code-vertical .send-code:disabled {
    color: #bfbfbf;
    cursor: not-allowed;
  }
  
  /* 获取焦点时的高亮效果 */
  .register-forms .form input:focus {
    outline: none; /* 去掉默认蓝色外框 */
    border-color: #cc262b; /* 红色高亮 */
    box-shadow: 0 0 0 2px rgba(210, 59, 62, 0.1);
  }
  
  /* 密码输入框容器 */
  .password-input-container {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
  }
  
  /* 密码输入框 */
  .password-input-container input {
    width: calc(100% - 32px) !important;
    box-sizing: border-box;
    height: 50px;
    padding: 0 50px 0 16px !important; /* 右侧留出空间给眼睛图标 */
    margin-left: 16px;
    margin-right: 16px;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: border-color 0.2s;
  }
  
  /* 密码切换按钮 */
  .password-toggle {
    position: absolute;
    right: 32px; /* 与输入框右边距对齐 */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 2;
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  
  .password-toggle:hover {
    opacity: 1;
  }
  
  .register-button {
    width: calc(100% - 32px); /* 与输入框一样全宽 */
    min-height: 50px; /* 最小高度，允许内容撑开 */
    height: auto; /* 高度自适应内容 */
    margin-top: 16px; /* 与上方输入框的间距 */
    margin-left: 16px;
    margin-right: 16px;
    /* 背景：从左到右的渐变色 */
    background: linear-gradient(-90deg, #ff7071 0%, #ff351f 100%);
  
    border: none; /* 去掉默认边框 */
    border-radius: 24px; /* 圆角 = 高度的一半，做成胶囊状 */
  
    font-size: 20px; /* 字号 */
    font-weight: 500; /* 字重 */
    color: #ffffff; /* 白色文字 */
    line-height: 1.4; /* 合适的行高 */
    padding: 12px 16px; /* 内边距确保内容不贴边 */
    text-align: center; /* 水平居中 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    word-wrap: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器支持 */
  
    cursor: pointer; /* 手型光标 */
    transition: filter 0.2s ease; /* 悬停/点击效果过渡 */
    -webkit-tap-highlight-color: transparent; /* 去掉点击高亮（尤其是移动端 WebKit） */
  }
  
  /* 悬停时稍微提亮 */
  .register-forms .form button:hover {
    filter: brightness(1.05);
  }
  
  /* 按下时轻微压下感 */
  .register-forms .form button:active {
    filter: brightness(0.95);
  }
  
  /* —— 隐私政策部分 —— */
  .privacy {
    text-align: center;
    padding-top: 12px; /* 与按钮的间距 */
    padding-bottom: 16px;
    font-size: 12px;
    color: #666666; /* 文本灰色 */
    -webkit-tap-highlight-color: transparent; /* 去掉点击高亮（尤其是移动端 WebKit） */
  }
  
  .privacy__label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  
  /* 隐藏默认 checkbox */
  .privacy__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #666666;
    border-radius: 50%; /* 圆形框 */
    margin-right: 6px;
    position: relative;
    flex-shrink: 0;
    background-color: transparent;
  }
  
  /* 勾选后的样式 */
  .privacy__checkbox:checked {
    background-color: #d23b3e;
    border-color: #d23b3e;
  }
  
  .privacy__checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  /* "我已同意并阅读" 文字 */
  .privacy__text {
    margin-right: 4px;
  }
  
  /* 隐私政策链接 */
  .privacy__link {
    color: #cc262b;
    text-decoration: none;
    font-weight: 500;
  }
  .privacy__link:hover {
    text-decoration: none;
  }
  
  /* 隐私政策弹窗 */
  
  /* 去掉浏览器默认样式，给弹窗加圆角 + 阴影 */
  .my-dialog2 {
    /* 固定定位到视口 */
    position: fixed;
    top: 50%;
    left: 50%;
    /* 把自身的中心点对准 top/left 位置 */
    transform: translate(-50%, -50%);
  
    /* 如果你之前用行内 style 定了 height，建议一并搬到这里 */
    height: 70%;
    max-width: 480px; /* 可选：限制最大宽度 */
    width: 90%; /* 可选：宽度为视口的 90% */
    overflow-y: auto; /* 纵向滚动 */
    overflow-x: hidden; /* 横向隐藏 */
  
    border: none;
    border-radius: 16px;
    padding: 0;
    /* max-height: 80vh; */
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* 半透明遮罩 */
  .my-dialog2::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
  
  /* 退出图标定位 */
  .exit-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    /* ↓ 增大点击热区 */
    padding: 8px;
    cursor: pointer;
    z-index: 1;
  }
  
  /* 保证图片正常居中 */
  .exit-icon img {
    display: block;
    width: 10px;
    height: 10px;
  }
  
  /* 内容区，上面留一点空间给退出 */
  .privacy-policy-box {
    padding: 40px 24px 24px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
  }
  .privacy-policy-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .privacy-policy-content p {
    margin-bottom: 12px;
    text-align: left;
  }
  
  .privacy-policy-agree-button {
    width: calc(100% - 48px);
    display: block;
    margin: 16px auto;
    padding: 10px;
    background: #d23b3e;
    color: #fff;
    border-radius: 24px;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  
  /* 下载APP */
  .info1-body {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* 卡片容器 - 固定高度确保三个卡片一样高 */
  .info1-body-seg {
    flex: 1;
    min-height: 200px; /* 最小高度 */
    height: auto; /* 内容超过时自适应 */
    text-align: center;
    padding: 12px;
    background: linear-gradient(180deg, #fff2e3 0%, #ffcc99 100%);
    border-radius: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 顶部区域（图标和标题） */
  .info1-seg-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0; /* 防止顶部区域被压缩 */
  }
  
  /* 图标样式 */
  .info1-body-seg-img {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    display: block;
  }
  
  /* 标题样式 */
  .info1-seg-title {
    height: auto;
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 500;
    color: #a31600;
  }
  
  /* 内容区域 - 从上到下对齐 */
  .info1-seg-content {
    width: 100%;
    line-height: 1.5;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 内容从上到下对齐 */
    align-items: center;
    font-weight: 500;
    color: #7f2816;
    flex-grow: 1; /* 占据剩余空间 */
  }
  
  /* 段落样式 */
  .info1-seg-content p {
    margin: 3px 0;
    line-height: 1.5;
  }
  
  .info1-seg-content p:last-child {
    margin-bottom: 0;
  }
  
  /* 平台优势 */
  
  .info-title {
    margin-top: -30px;
    margin-left: 22px;
    margin-right: 22px;
    height: 60px;
    background: linear-gradient(90deg, #ff7465 0%, #ff8e1f 100%);
    border-radius: 30px 30px 30px 30px;
    border: 2px solid #fff8c6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff8c6;
    padding: 10px;
  }
  
  .info2-content {
    height: auto;
    font-size: 12px;
    color: #fff8c6;
    margin-top: 30px;
    padding-left: 22px;
    padding-right: 22px;
  }
  
  .info3-seg-space {
    height: 10px;
  }
  
  .info3-seg-title {
    font-size: 16px;
    font-weight: 500;
  }
  
  .info3-seg-content {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .line-split {
    width: 100%;
    height: 0px;
    margin-bottom: 16px;
    margin-top: 16px;
    border: 1px solid;
    border-image: linear-gradient(90deg, #d44042, #ffb872, #d44042) 2 2;
  }
  
  .index-info {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #d44042;
    border: 2px solid #ffd9b4;
    border-radius: 20px;
    display: block;
  }
  
  .index-info-white {
    background: #fff;
  }
  
  .info2-seg1 {
    margin-top: 12px;
    /* margin-bottom: 12px; */
    width: calc(100% - 20px);
    /* 高度根据内容自动撑开，避免固定 */
    min-height: 86px;
    height: auto;
    background-size: cover;
    background-position: center; /* 添加这一行，使背景图片居中 */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  
  .welfare-img1 {
    background-image: url("../img/welfare1.png");
  }
  
  .welfare-img2 {
    background-image: url("../img/welfare2.png");
  }
  
  .welfare-img3 {
    background-image: url("../img/welfare3.png");
  }
  
  .welfare-img4 {
    background-image: url("../img/welfare4.png");
  }
  
  .welfare-img5 {
    background-image: url("../img/welfare5.png");
  }
  
  
  .info2-seg-title {
    height: auto;
    min-height: 24px;
    font-size: 18px; /* 默认字体大小 */
    width: 100%;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px; /* 右侧也加padding，避免贴边 */
    /* padding-top: 12px;
    padding-bottom: 12px; */
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: left;
    color: #7f2816;
    line-height: 1.2; /* 添加合适的行高 */
    white-space: nowrap; /* 强制单行显示 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出显示省略号（作为备用） */
  }
  
  .info2-seg-content {
    /* width: 50%; */
    padding-left: 12px;
    padding-bottom: 6px;
    text-align: left;
    font-size: 12px;
    height: auto;
    font-weight: 400;
    color: #7f2816;
    line-height: 1;
    box-sizing: border-box;
    margin-top: auto;
  }
  
  .info2-seg-content p {
    /* 针对这个容器内的p标签 */
    margin-bottom: 6px; /* 添加底部间距，数值可调整 */
  }
  
  /* 荣誉 */
  .honour-img {
    padding-top: 10px;
    width: 100%;
    height: auto;
  }
  
  .info4-honour1 {
    font-size: 18px;
    font-weight: 500;
    color: #7f2816;
  }
  
  /* 将机器人样式移到媒体查询外部，使其在所有屏幕尺寸下生效 */
  .robot {
    position: fixed;
    width: 30px;
    height: 30px;
    right: 10px;
    bottom: 30px;
    z-index: 1000; /* 确保在其他元素上方 */
    cursor: pointer; /* 添加手型光标提示可点击 */
    transition: transform 0.2s ease; /* 平滑过渡 */
  }
  
  /* PC 端（支持悬停设备）鼠标悬停放大 */
  @media (hover: hover) and (pointer: fine) {
    .robot:hover {
      transform: scale(1.25);
    }
  }
  
  /* 可以为不同屏幕尺寸调整位置 */
  @media screen and (max-width: 600px) {
    .robot {
      right: 10px;
      bottom: 30px;
    }
  }
  
  @media screen and (min-width: 601px) {
    .robot {
      right: 20px;
      bottom: 40px;
    }
  }
  
  .country-group-title {
    font-weight: bold;
    margin: 10px 0 0 10px;
    color: #888;
    font-size: 16px;
    text-align: left;
    padding-left: 16px;
  }
  
  .country-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    height: 48px;
    position: relative;
  }
  
  .item-flag {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #CC262B;
  }
  
  .item-name {
    font-size: 14px;
    color: #222;
    margin-right: 8px;
    flex: none; /* 或 flex: 0 0 auto; */
  }
  
  .item-code {
    font-size: 14px;
    color: #222;
    margin-right: 32px; /* 给对勾留出空间 */
    flex: none;
  }
  
  .country-item:hover {
    background: #f5f5f5;
  }
  
  .check {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* 根据实际图片大小调整 */
    height: 12px;
    margin-left: 0;
    color: unset; /* 不需要文字颜色 */
    font-size: unset;
  }
  
  .country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* 让内容靠左 */
  }
  
  .country-skeleton {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    height: 48px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
    animation: skeleton-loading 1.2s infinite linear;
  }
  .skeleton-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e0e0;
    margin-right: 12px;
  }
  .skeleton-name {
    width: 60px;
    height: 14px;
    border-radius: 7px;
    background: #e0e0e0;
    margin-right: 8px;
  }
  .skeleton-code {
    width: 36px;
    height: 14px;
    border-radius: 7px;
    background: #e0e0e0;
  }
  @keyframes skeleton-loading {
    0% {
      background-color: #f5f5f5;
    }
    50% {
      background-color: #e0e0e0;
    }
    100% {
      background-color: #f5f5f5;
    }
  }
  
  #toast {
    position: fixed;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 300px;
    padding: 15px 20px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: pre-line;
  }
  
  .fk-toast--visible {
    opacity: 1 !important;
    animation: none !important;
    pointer-events: auto;
  }
  
  .toast-body {
    text-align: center;
    font-size: 15px;
    color: white;
    width: 50%;
    margin-left: 25%;
    padding: 5px 5px 5px 5px;
    background-color: #333;
    border-radius: 8px;
  }
  
  body {
    background: #fdfcf2; /* 或你想要的浅色背景 */
    margin: 0;
    min-height: 100vh;
  }
  
  
  
  .skeleton {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    /* 其他样式 */
  }
  
  /* 针对移动端进一步调整标题字体大小 */
  @media screen and (max-width: 430px) {
    .info2-seg-title {
      font-size: clamp(12px, 3.5vw, 16px); /* 移动端更小的字体范围 */
    }
  }
  
  /* 图片懒加载优化样式 */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* 国家图标加载状态 */
.item-flag {
  transition: opacity 0.3s ease;
}

.item-flag[data-loading="true"] {
  opacity: 0.5;
}

/* 国家选择器分隔线 */
.country-separator {
  height: 1px;
  background: #e0e0e0;
  margin: 8px 0;
}

/* 加载更多按钮 */
.load-more-btn {
  padding: 12px 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
  background: #f8f8f8;
  transition: background 0.2s;
  border-radius: 0 0 12px 12px;
}

.load-more-btn:hover {
  background: #f0f0f0;
  color: #333;
}

/* 骨架屏加载动画优化 */
.skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 虚拟滚动优化 */
.country-list {
  contain: layout style paint;
  will-change: scroll-position;
}

.country-item {
  contain: layout style paint;
  transform: translateZ(0); /* 启用硬件加速 */
}

/* 优化滚动性能 */
.country-panel {
  contain: strict;
}

.country-panel.active {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 图片加载错误处理 */
.item-flag.error {
  background-color: #f0f0f0;
  position: relative;
}

.item-flag.error::after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 10px;
}

/* 预加载指示器 */
.flag-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite;
}