:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --vz-input-bg-custom: #fff;
  --input-bg: #f8f9fa;
  --input-border: #ced4da;
  --btn-bg: #e9ecef;
  --btn-hover: #dee2e6;
  --highlight-color: #007bff;
  --table-border: #dee2e6;
  --table-header-bg: #e9ecef;
  --table-cell-bg: #f1f6f9;
  --table-text-color: #212529;
  --bg: transparent;
  --fg: #212529;
  --box-bg: #f7f7f7;
  --box-border: #dee2e6;
}
html.dark-theme {
  --bg-color: #000;
  --text-color: #d0d0d0;
  --input-bg: #222;
  --input-border: #444;
  --btn-bg: #333;
  --btn-hover: #555;
  --highlight-color: #5bc0de;
  --table-border: #444;
  --table-header-bg: #1a1a1a;
  --table-cell-bg: #111;
  --table-text-color: #e0e0e0;
  --bg: transparent;
  --fg: #e0e0e0;
  --box-bg: #2c2c45;
  --box-border: #444;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
body .input-group .btn.btn-primary {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  filter: saturate(1.1) brightness(1.05);
  transform: translateY(0);
  transition: all 0.2s ease;
}
body .modal-extra button.btn-close {
  background: #aaa;
}
body .modal-extra .form-control {
  background: var(--vz-primary-bg-subtle);
}
body .modal-container {
  background: var(--box-bg);
}
body .form-check.form-switch-lg {
  position: relative;
  top: 0.25rem;
}
body .modal-footer {
  padding-top: 0.5rem;
  gap: 0.5rem;
}
body a.btn.btn-link {
  padding: 0.25rem 0.5rem;
  text-decoration: none;
}
body .toggle-icon {
  display: none;
}
body .top-header {
  height: 3rem;
}
@media (max-width: 768px) {
  body td.album_path a {
    max-width: 72vw;
    display: inline-block;
  }
  body .toggle-icon.on {
    position: absolute;
    left: 75vw;
  }
  body .sidebar-wrapper.on {
    left: 0;
  }
  body .toggle-icon {
    display: block;
  }
  body .wrapper .page-content {
    padding: 0;
  }
  body .search-wrap .col-3 {
    width: 50%;
  }
  body .search-panel .btn-wrap {
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
  }
  body .list-btn-wrap {
    width: 100%;
  }
}
body .wrapper .page-content-wrapper {
  margin-top: 2.5rem;
}
body .search-panel, body .list-wrap {
  background: var(--bg-color);
  padding: 1rem;
  border-radius: 8px;
}
body .search-panel {
  margin-bottom: 1rem;
}
body .search-box input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
}
body .btn {
  background: var(--btn-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}
body .btn:hover {
  background: var(--btn-hover);
}
body .pagination a {
  background: var(--btn-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}
body .pagination a:hover, body .pagination a.active {
  background: var(--highlight-color);
  color: #fff;
}
body .table {
  background: var(--bg-color);
  color: var(--table-text-color);
  border-collapse: collapse;
  width: 100%;
}
body .table th {
  background: var(--table-header-bg);
  color: var(--text-color);
  border: 1px solid var(--table-border);
  padding: 8px;
}
body .table td {
  background: var(--table-cell-bg);
  color: var(--table-text-color);
  border: 1px solid var(--table-border);
  padding: 8px;
}
body .number, body .real_total {
  color: var(--highlight-color);
}
body .list-wrap .edit-btn-wrap {
  right: 1rem;
}
body .edit-btn-wrap .btn-add {
  background: var(--highlight-color);
  color: #fff;
}
body .separator {
  display: none;
}
body ul.pagination {
  gap: 0.5rem;
}
body ul.pagination a {
  padding: 0.5rem 0.8rem;
  border-radius: 0.35rem;
}
body.index .field-wrap [class$="-label"] {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
body.index .field-wrap ul:first-of-type {
  border-bottom: 1px solid var(--box-border);
  padding-bottom: 0.15rem;
  font-weight: bold;
}
body.index .container ul {
  margin-bottom: 0.15rem;
  margin-top: 0.2rem;
}
body.index .daily_statics-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
body.index .current_algo-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body.index .user_algo-wrap ul {
  display: grid;
  grid-template-columns: 20% 80%;
}
body.index .user_profit-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
body.index .api_key-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body.index .api_key-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body.index .bet_log-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
body.index #group_1 .field-wrap {
  align-items: flex-start;
  height: 100%;
  gap: 0.5rem;
}
body.index #group_1 .ext-group {
  row-gap: 1.5rem;
  column-gap: 3rem;
}
body.index .ext-group {
  background-color: var(--bg);
  color: var(--fg);
}
body.index .ext-group .field-wrap {
  background-color: var(--box-bg);
  color: var(--fg);
  border: 1px solid var(--box-border);
  flex: 1 1 calc(50% - 1rem);
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
body.index .ext-group .field-wrap:hover {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
}
.user-notice-wrap {
  margin: 0 auto;
  width: 80%;
  background: linear-gradient(135deg, #f7f7f7, #e9ecef);
  padding: 2rem 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-bottom: 1.5rem;
}
.user-notice-wrap .notice-header {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.user-notice-wrap .notice-content {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
}
.user-notice-wrap .notice-highlight {
  background: #60b7cc22;
  border-left: 4px solid #60b7cc;
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  border-radius: 0.5rem;
  color: #333;
}
.user-notice-wrap .notice-footer {
  margin-top: 2rem;
  text-align: right;
}
.user-notice-wrap .notice-footer button {
  background: #60b7cc;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.3s;
}
.user-notice-wrap .notice-footer button:hover {
  background: #3ca4bd;
}
.dark-theme .user-notice-wrap {
  background: linear-gradient(135deg, #1f1f1f, #2b2b2b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.dark-theme .user-notice-wrap .notice-header {
  color: #e0e0e0;
}
.dark-theme .user-notice-wrap .notice-header i {
  color: #60b7cc;
}
.dark-theme .user-notice-wrap .notice-content {
  color: #cccccc;
}
.dark-theme .user-notice-wrap .notice-highlight {
  background: #264f56;
  border-left: 4px solid #60b7cc;
  color: #e0e0e0;
}
.dark-theme .user-notice-wrap .notice-footer button {
  background: #60b7cc;
  color: #fff;
}
.dark-theme .user-notice-wrap .notice-footer button:hover {
  background: #73c0d2;
}
body.user_manage .edit-btn-wrap .btn-add {
  display: none;
}
body.user_manage .add-wrap {
  display: grid;
  grid-template-columns: 30% 50% 20%;
  max-width: 18rem;
  gap: 0.5rem;
  transform: scale(0.9);
}
body.user_manage td.sym_algo {
  width: 20rem;
}
body.user_manage .user_algo_info-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 5rem 5rem;
}
body.user_manage .user_algo_info-wrap ul button {
  padding: 0.15rem;
}
body.user_manage ul.user_algo_info, body.user_manage ul.user_api_key_info {
  margin-bottom: 0.25rem;
}
body.user_manage .user_api_key_info-wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 5rem 5rem 5rem 5rem;
  gap: 0.5rem;
}
body.user_manage .user_api_key_info-wrap ul button {
  padding: 0.15rem;
}
body.user_manage .modal-footer.group_1 .btn-primary {
  display: none;
}
body.user_manage .table td {
  text-align: center;
  vertical-align: middle;
}
body.login {
  background: #222240;
}
body.login .logo-txt {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #ff5733, #33c1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span {
  display: flex;
}
body.login .logo-txt span::nth-child(1) {
  background: linear-gradient(45deg, #ff6c4d, #1ab9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(2) {
  background: linear-gradient(45deg, #ff8166, #00b2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(3) {
  background: linear-gradient(45deg, #ff9680, #00a0e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(4) {
  background: linear-gradient(45deg, #ffab99, #008ecc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(5) {
  background: linear-gradient(45deg, #ffc0b3, #007cb3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(6) {
  background: linear-gradient(45deg, #ffd5cc, #006b99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(7) {
  background: linear-gradient(45deg, #ffeae6, #005980);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(8) {
  background: linear-gradient(45deg, white, #004766);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(9) {
  background: linear-gradient(45deg, white, #00354d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .logo-txt span::nth-child(10) {
  background: linear-gradient(45deg, white, #002433);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.login .wrapper .page-content-wrapper {
  margin-left: 0;
  margin-top: 18vh;
}
body.login .sidebar-wrapper {
  display: none;
}
body.login .container-wrap {
  display: flex;
  justify-content: center;
}
body.login .container-wrap form#editor_form {
  width: 32rem;
  padding-top: 3.2rem;
}
body.login #editor_form {
  margin: auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
body.login #editor_form .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body.login #editor_form .field-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
body.login #editor_form .field-wrap .label {
  font-weight: bold;
  color: #333;
}
body.login #editor_form .col-4 {
  text-align: right;
  padding-right: 0.5rem;
}
body.login #editor_form .col-8 input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}
body.login #editor_form .col-8 input:focus {
  border-color: #5bc0de;
  outline: none;
}
body.login #editor_form .password-wrap input {
  font-size: 1rem;
}
body.login #editor_form .submit_button-wrap {
  text-align: center;
}
body.login #editor_form .submit_button-wrap button {
  background: #5bc0de;
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
body.login #editor_form .submit_button-wrap button:hover {
  background: #31b0d5;
}
body.api_manage:not(.lv-10) table .user_name, body.algo_manage:not(.lv-10) table .user_name {
  display: none;
}
body.api_manage:not(.lv-10) .user_id-wrap, body.api_manage:not(.lv-10) .user_id-label-wrap, body.algo_manage:not(.lv-10) .user_id-wrap, body.algo_manage:not(.lv-10) .user_id-label-wrap {
  display: none;
}
body.api_manage:not(.lv-10) .search-panel, body.algo_manage:not(.lv-10) .search-panel {
  display: none;
}
body.api_manage .noUi-tooltip, body.algo_manage .noUi-tooltip {
  bottom: auto;
  top: 120%;
  transform: translateY(0);
  min-height: 2rem;
  left: -3.2rem;
}
body.api_manage .time_range_info-wrap, body.algo_manage .time_range_info-wrap {
  padding-top: 2.8rem;
}
body.album .pic-wrap img {
  max-height: 100%;
  max-width: 100%;
}
body.album .group.pos-0.col-12 {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 25% 76%;
}
body.album .track_list {
  grid-row: 1/3;
}
body.album .track_list {
  background: #1e1e1e;
  color: #e0e0e0;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.album .track_list .title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e0e0e0;
  background: #2a2a2a;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: background 0.3s, color 0.3s;
  margin-bottom: 1rem;
}
body.album .track_list .title:hover {
  background: #3a3a3a;
  color: #ffffff;
}
body.album .track_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.album .track_list ul li {
  display: grid;
  grid-template-columns: 6% 50% 14% 18% 6%;
  gap: 1%;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #2a2a2a;
  border: 1px solid #333;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  transition: background 0.3s;
}
body.album .track_list ul li:hover {
  background: #343434;
}
body.album .track_list ul li .track-name {
  font-size: 1rem;
  font-weight: bold;
  color: #e0e0e0;
}
body.album .track_list ul li .track-duration {
  font-size: 0.9rem;
  color: #b0b0b0;
}
body.album .track_list ul li.active {
  background: #5bc0de;
  color: #fff;
  border-color: #5bc0de;
}
body.album .nfo-wrap {
  padding-left: 1rem;
}
@media (max-width: 768px) {
  body.album .wrapper .page-content {
    padding: 0;
  }
  body.album .group.pos-0.col-12, body.album .item.track_list.col-12 {
    display: flex;
    grid-row: unset;
    flex-direction: column;
  }
  body.album .track_list ul li {
    grid-template-columns: 7% 77% 21%;
    display: grid;
  }
  body.album .track_list ul li .album, body.album .track_list ul li .artist {
    display: none;
  }
}
body.bet_log:not(.lv-10) table .user_id {
  display: none;
}
body.bet_log .modal-footer button {
  display: none;
}
body.bet_log .panel-mode-wrap i {
  display: none;
}
body.bet_log .ext-group {
  row-gap: 1.5rem;
}
body.grid_manage div#group_3 {
  height: 600px;
  width: 50px;
  position: absolute;
  top: 11rem;
  margin-left: 6rem;
}
body.grid_manage div#group_3 .slider-y {
  height: 600px;
}
body.grid_manage div#group_4 {
  height: 600px;
  width: 50px;
  position: absolute;
  top: 11rem;
  right: 10rem;
}
body.grid_manage div#group_4 .slider-z {
  height: 600px;
}
body.grid_manage div#group_5 {
  position: absolute;
  top: 26rem;
  margin-left: 6.5rem;
}
body.grid_manage div#group_5 .field-svg_overlay svg {
  transform: scale(7.5, 6);
  transform-origin: left;
}
body.grid_manage iframe.ifr {
  width: 100%;
  height: 80vh;
}
body.daily_statics:not(.lv-10) table .user_id {
  display: none;
}
body.daily_statics .input-group.bet_date.has-range {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
body.daily_statics .ext-group {
  row-gap: 1.5rem;
}
body.daily_statics .modal-footer button {
  display: none;
}
body.daily_statics .panel-mode-wrap i {
  display: none;
}
body.settings div#group_1 {
  max-width: 80%;
}
body.settings .contact_info-wrap {
  margin-bottom: 2rem;
}
body.settings div#group_4 {
  margin-top: 1rem;
}
body.daily td {
  text-align: center;
}
body.genres .list-btn-wrap, body.genres .p-top.pagination-wrap, body.groups .list-btn-wrap, body.groups .p-top.pagination-wrap {
  display: none;
}
body.genres li.mon, body.groups li.mon {
  display: none;
}
body.genres ul.grid, body.groups ul.grid {
  display: grid;
  grid-template-columns: 3rem calc(100% - 3rem);
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}
body.genres li.genre, body.genres li.group_name, body.groups li.genre, body.groups li.group_name {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.genres li.genre span a, body.genres li.group_name span a, body.groups li.genre span a, body.groups li.group_name span a {
  position: relative;
  top: 1px;
}
@media (max-width: 768px) {
  body.genres .list-wrap, body.groups .list-wrap {
    overflow: hidden;
    margin-top: 1rem;
  }
  body.genres li.genre, body.genres li.group_name, body.groups li.genre, body.groups li.group_name {
    flex-wrap: wrap;
  }
}