/* 全局样式 */
    :root {
      --primary-color: #2A0A73;
      --secondary-color: #6C4DDA;
      --accent-color: #00FF88;
      --opacity-color: rgba(69, 94, 193, 0.85);
      --primary-color: #6a5ff9;
      /* 主要颜色（紫色）*/
      /* --secondary-color: #ff6a95; */
      /* 辅助颜色（粉色）*/
      --background-light: #f4f7fd;
      /* 浅色背景 */
      --background-dark: #1f2d3d;
      /* 深色背景 */
      --accent-color: #00d1b2;
      /* 强调色（青绿色） */
      --text-color: #333;
      /* 文字颜色 */
      --text-light: #e0e0e0;
      --primary-gradient: linear-gradient(135deg, #2A0A73 0%, #6C4DDA 100%);
      --accent-color: #00FF88;
      --card-bg: rgba(255, 255, 255, 0.05);
      --text-light: #e0e0e0;
      --glass-border: rgba(255, 255, 255, 0.1);
    }

    body {
      background: var(--primary-gradient);
      color: var(--text-light);
      padding: 0%;
      margin: 0%;
    }

    .containerB {
      height: 90vh;
      position: relative;
      padding: 0%;
      margin: 0%;
    }

    .card {
      background-color: white;
      text-align: center;
      width: 28%;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-radius: 5% !important;
      border: unset !important;
      background: var(--card-bg) !important;
      backdrop-filter: blur(15px);
      border: 1px solid var(--glass-border) !important;
      border-radius: 20px !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      width: 90%;
      max-width: 500px;
      margin-top: 80px;
    }

    .top-profile img {
      width: 100%;
      border-radius: 1em 1em 0 0;
      border-radius: 20px 20px 0 0;
      height: 180px;
      object-fit: cover;
    }

    .info {
      margin-bottom: -5%;
    }

    .info img {
      margin: 0%;
      padding: 0%;
      margin: auto;
      border-radius: 100%;
      border: white solid 5px;
      -ms-transform: translate(0%, -50%);
      transform: translate(0%, -50%);
      width: 25%;
      width: 100px;
      height: 100px;
      border: 3px solid var(--accent-color);
      box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    }

    .info .personal-data {
      margin: auto;
      padding: 0%;
      -ms-transform: translate(0%, -50%);
      transform: translate(0%, -50%);
    }

    .personal-data p {
      font-family: 'Kumbh Sans', sans-serif;
      margin: 0;
      padding: 0;
    }

    .personal-data .name {
      font-size: 5wh;
      font-weight: 700;
      color: hsl(229, 23%, 23%)
    }

    .personal-data .age {
      font-weight: 400;
      color: gray;
    }

    .personal-data .colombia {
      font-size: 0.7em;
      font-weight: 400;
      margin-top: 4%;
      color: gray;
    }

    .social {
      display: grid;
      grid-template-areas: "linkedin instagram photos";
      margin-bottom: 3%;
      padding: 15px 10px;
      background-color: rgb(221, 214, 214);
    }

    .fa-linkedin {
      color: #007bb5;
    }

    .fa-square-instagram {
      color: #FF5341;
    }

    .fa-square-twitter {
      color: #55ACEE;
    }

    .social p {
      font-family: 'Kumbh Sans', sans-serif;
      color: hsl(229, 23%, 23%);
    }

    .social .number {
      font-weight: 700;
      margin-bottom: 0%;
      font-size: 2.5vh;
    }

    .bg-pattern-top {
      position: fixed;
      z-index: -1;
      -ms-transform: translate(-20%, -50%);
      transform: translate(-20%, -50%);
      width: 100%;
    }

    .bg-pattern-bottom {
      position: fixed;
      z-index: -1;
      -ms-transform: translate(50%, 30%);
      transform: translate(50%, 30%);
      width: 100%;
    }

    .attribution {
      text-align: center;
      font-family: 'Kumbh Sans', sans-serif;
      height: 10vh;
      line-height: 10vh;
      background-color: rgba(255, 255, 255, 0.5);
      color: #2158AD;
      font-size: 1em;
    }

    .attribution a {
      color: #2158AD;
      text-decoration: none;
      font-weight: 700;
    }

    .attribution a:hover {
      text-decoration: underline;
    }

    .captcha-box {
      padding: 3px 7px;
      /* height: 35px; */
    }

    .input-group {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      justify-content: end;
    }

    #codeInput {
      padding: 8px;
      flex: 1;
      border: 0.1rem solid rgba(255, 255, 255, 0.1);
    }

    button {
      background: var(--primary-gradient) !important;
      border: none !important;
      padding: 12px 30px !important;
      border-radius: 30px !important;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .btn-close {
      background: unset !important;
      border: none !important;
      padding: unset !important;
      border-radius: unset !important;
    }

    button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: all 0.5s;
    }

    button:hover::before {
      left: 100%;
    }

    button:hover {
      box-shadow: 0 5px 20px rgba(108, 77, 218, 0.5);
      transform: translateY(-2px);
    }

    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .input-field {
      width: 100%;
      /* height: 5rem; */
      padding: 1rem;
      border-radius: 0.5rem;
      border-top-right-radius: 0.5rem !important;
      border-bottom-right-radius: 0.5rem !important;
      font-size: 1.1rem;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid var(--glass-border) !important;
      color: var(--text-light) !important;
      transition: all 0.3s ease;
    }

    .input-field:focus {
      box-shadow: 0 0 10px rgba(108, 77, 218, 0.5);
      border-color: #6C4DDA !important;
    }

    .nav-tabs .nav-link {
      border: 1px solid #dee2e6;
      border-bottom-color: transparent;
      margin-bottom: -1px;
    }

    .nav-tabs {
      border-bottom: 2px solid var(--glass-border);
    }

    .nav-link {
      color: var(--text-light) !important;
      border: none !important;
      position: relative;
      transition: all 0.3s ease;
    }

    .nav-link.active {
      color: var(--accent-color) !important;
      background: transparent !important;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--accent-color);
    }

    .tab-content {
      /* border: 1px solid #dee2e6; */
      border-top: none;
      padding: 20px;
      width: 100%;
      margin: 0 auto;
    }

    /* 基础样式 */
    #history {
      max-width: 100%;
      height: 300px;
      overflow-y: auto;
      margin: 20px auto;
      height: 300px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 12px;
      padding: 15px;
    }

    .history-item {
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 10px;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      height: 135px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      margin-bottom: 12px;
      padding: 15px;
      transition: all 0.3s ease;
      /* border-left: 3px solid var(--accent-color); */
    }

    .history-item:hover {
      transform: translateX(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* 类型颜色标识 */
    .type-other {
      color: #999;
      font-size: 12px;
    }

    /* 支出 */
    .type-DEPOSIT {
      color: #28a745;
    }

    .nav-tabs .nav-link {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    /* 其他部分样式保持不变 */
    .nav-item {
      cursor: pointer;
    }

    .nav-item:hover {
      color: white;
    }

    .navbar {
      background: rgba(42, 10, 115, 0.9) !important;
      backdrop-filter: blur(10px);
    }

    .navbar-brand .hero-logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    button[aria-expanded="true"]+.navbar-collapse .navbar-nav {
      margin-top: 10px;
      padding: 7px 13px;
      border-radius: 11px;
      background-color: var(--opacity-color);
    }

    .flex-end-row {
      display: flex !important;
      flex-direction: row !important;
      justify-content: flex-end !important;
      align-items: center !important;
      width: 100%;
    }

    .cta-button-nav {
      background: var(--opacity-color);
      color: #eee;
      padding: 7px 13px;
      border-radius: 11px;
      font-weight: 700;
      font-size: 1rem;
      display: inline-block;
      width: auto;
      /* transform: translateY(20px); */
      transition: opacity 0.8s ease-out 0.6s, transform 0.8s ease-out 0.6s;
      margin-left: auto;
      margin-right: 10px;
    }
    
    @media (min-width: 768px) {
      .cta-button-nav {
        padding: 15px 40px;
        border-radius: 30px;
        font-size: 1.2rem;
      }
      html::-webkit-scrollbar {
        display: none;
      }
    }

    /* Pantallas de tamaño máximo de 1160 píxeles */
    @media screen and (max-width: 1160px) {
      .bg-pattern-top {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(-30%, -50%);
        transform: translate(-30%, -50%);
        width: 100%;
      }

      .bg-pattern-bottom {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(50%, 30%);
        transform: translate(50%, 30%);
        width: 100%;
      }
    }

    /* Pantallas de tamaño máximo de 1080 píxeles */
    @media screen and (max-width: 1080px) {
      .card {
        width: 30%;
      }
    }

    /* Pantallas de tamaño máximo de 830 píxeles */
    @media screen and (max-width: 830px) {
      .card {
        width: 50%;
      }

      .bg-pattern-top {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(-80%, -50%);
        transform: translate(-80%, -50%);
        width: 100%;
      }

      .bg-pattern-bottom {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(50%, 30%);
        transform: translate(50%, 30%);
        width: 100%;
      }
    }

    /* Pantallas de tamaño máximo de 620 píxeles */
    @media screen and (max-width: 620px) {
      .bg-pattern-top {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(-113%, -50%);
        transform: translate(-113%, -50%);
        width: 100%;
      }
    }

    /* Pantallas de tamaño máximo de 470 píxeles */
    @media screen and (max-width: 470px) {
      .card {
        width: 90%;
      }

      .bg-pattern-top {
        position: fixed;
        z-index: -1;
        -ms-transform: translate(-180%, -50%);
        transform: translate(-180%, -50%);
        width: 100%;
      }

      .attribution {
        font-size: 15px;
      }
    }

    /* Pantallas de tamaño máximo de 470 píxeles */
    @media screen and (max-width: 440px) {
      .attribution {
        font-size: 10px;
      }
    }

    /* Pantallas de tamaño máximo de 375 píxeles */
    @media screen and (max-width: 375px) {
      .containerB {
        margin: auto;
        width: 98%;
      }

      .bg-pattern-top {
        -ms-transform: translate(-210%, -50%);
        transform: translate(-210%, -50%);
        width: 100%;
      }

      .bg-pattern-bottom {
        -ms-transform: translate(50%, 15%);
        transform: translate(50%, 15%);
        width: 100%;
      }
    }

    /* Pantallas de tamaño máximo de 375 píxeles */
    @media screen and (max-height: 300px) {
      .card {
        width: 50vw;
        height: 50vh;
      }
    }

    @media (max-width: 768px) {
      .card {
        width: 90%;
        margin-top: 60px;
      }
      
      .top-profile img {
        height: 120px;
      }
      
      .info img {
        width: 80px;
        height: 80px;
      }
    }
    
    @media (max-width: 480px) {
      .input-group {
        flex-direction: column;
      }
      
      button {
        width: 100%;
      }
    }