:root {
  --main-color: #d9ac4f;
  --main_gradient-color: linear-gradient(90deg, #FAE59F 0%, #C4933F 100%);
  --main_gradient-color2: linear-gradient(180deg, #FAE59F 0%, #C4933F 100%);
  --norm_red-color: #D23838;
  --norm_green-color: #17B15E;
  --norm_secondary-color: #DD9138;
  --norm_Purple-color: #9B48DB;
  --norm_bule-color: #5088D3;
  --button_dis_color: #6F7381;
  --text_color_L1: #F5F3F0;
  --text_color_L2: #A8A5A1;
  --text_color_L3: #666462;
  --text_color_L4: #8F5206;
  --text_color_black: #292929;
  --bg_color_L1: #242424;
  --bg_color_L2: #333332;
  --bg_color_L3: #4D4D4C;
  --Dividing-line_color: #525167;
  --sheet_nva_color: #3A3947;
  --sheet_detail_bg_color: #282730;
  --icon1: rgba(217, 172, 79, .6);
  --icon2: rgba(217, 172, 79, .3);
  --blackGoldN: #FAE59F;
  --van-sidebar-text-color: var(--main-color);
  --van-picker-background: var(--bg_color_L2);
  --van-picker-mask-color: linear-gradient(180deg, rgba(32, 29, 43, .9), rgba(32, 29, 43, .4)), linear-gradient(0deg, rgba(32, 29, 43, .9), rgba(32, 29, 43, .4));
  --van-picker-option-text-color: var(--text_color_L2);
  --van-picker-confirm-action-color: var(--main-color);
  --van-popup-background: #201D2B;
  --van-checkbox-checked-icon-color: var(--main-color);
  --van-checkbox-label-color: var(--text_color_L2);
  --van-field-input-text-color: var(--text_color_L1);
  --van-radio-checked-icon-color: var(--main-color);
  --van-grid-item-content-background: var(--bg_color_L1);
  --van-text-color: var(--text_color_L1);
  --van-dialog-background: var(--bg_color_L2);
  --van-circle-color: var(--main-color);
  --van-calendar-background: var(--bg_color_L1);
  --van-calendar-range-edge-background: var(--main-color);
  --van-radio-label-color: var(--text_color_L2);
  --van-cell-background: var(--bg_color_L2);
  --van-button-default-background: var(--main_gradient-color);
  --van-popover-light-background: var(--bg_color_L2);
  --van-circle-layer-color: var(--bg_color_L3);
  --van-button-primary-background: var(--main_gradient-color);
  --van-button-primary-border-color: var(--main-color);
  --van-slider-active-background: var(--main-color);
  --van-slider-inactive-background: var(--bg_color_L1);
  --van-collapse-item-content-background: var(--bg_color_L1);
  --van-action-sheet-item-background: var(--bg_color_L2);
  --van-action-sheet-item-text-color: var(--text_color_L1);
  --van-button-primary-color: var(--text_color_L4);
  --van-dialog-has-title-message-text-color: var(--text_color_L2);
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100%;
  width: 100%;    
  background-color: #9195a3;   
  font-family: var(--van-base-font);
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
.container {
  max-width: 480px;
  margin: auto;
  width: 100%;
  background-color: #262626;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Top Bar */
.top-bar {
  display: flex;
  justify-content: space-around; /* Adds space evenly around child elements */
  align-items: center; /* Centers items vertically */
  padding: 10px 15px;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 480px;
  z-index: 1000;
}

.top-bar > div {
  flex: 1; /* Each child div takes an equal share of the parent container's width */
  display: flex;
  justify-content: center; /* Centers content within each child div */
  align-items: center; /* Vertically centers content */
}

.back-button i,
.language i {
  color: #ffcc00;
}

.logo img {
  max-width: 70%; /* Ensures the image scales down with the container */
  height: auto; /* Maintains the aspect ratio */
}


/* Login Form */
.login-form {
  padding: 60px 20px 20px;
  min-height:100vh;
}

.login-form h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
  color: #ffcc00;
}

.login-form p {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.tab-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  width: 50%;
  text-align: center;
  padding: 10px;
  color: #999;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 16px;
}

.tab.active {
  color: #ffcc00;
  border-bottom: 2px solid #ffcc00;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.input-group i {
  margin-right: 10px;
  color: #ffcc00;
}

.input-group input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  flex: 1;
}

.input-group .toggle-password {
  cursor: pointer;
}

.remember-password {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: #999;
}

.remember-password input {
  margin-right: 10px;
}

.login-btn,
.register-btn {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.login-btn {
  background-color: #666;
  color: #fff;
}

.register-btn {
  background-color: transparent;
  border: 1px solid #ffcc00;
  color: #ffcc00;
}

.links {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.links a {
  color: #ffcc00;
  text-decoration: none;
}