:root {
  --yl-bg: #030712;
  --yl-panel: rgba(15, 23, 42, 0.82);
  --yl-panel-strong: rgba(8, 47, 73, 0.38);
  --yl-line: rgba(125, 211, 252, 0.2);
  --yl-line-strong: rgba(34, 211, 238, 0.42);
  --yl-text: #e5f7ff;
  --yl-muted: #8fb5c8;
  --yl-cyan: #22d3ee;
  --yl-green: #10b981;
}

.ant-dropdown .ant-dropdown-menu,
.ant-dropdown-menu {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 47, 73, 0.88)) !important;
  border: 1px solid var(--yl-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34), 0 0 24px rgba(34, 211, 238, 0.12) !important;
  padding: 8px !important;
  backdrop-filter: blur(16px);
}

.ant-dropdown .ant-dropdown-menu-item,
.ant-dropdown-menu .ant-dropdown-menu-item {
  color: #d8e8f4 !important;
  border-radius: 7px !important;
  margin: 2px 0 !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
}

.ant-dropdown .ant-dropdown-menu-item:hover,
.ant-dropdown-menu .ant-dropdown-menu-item:hover {
  color: #e0faff !important;
  background: rgba(34, 211, 238, 0.14) !important;
}

.ant-dropdown .ant-dropdown-menu-item-danger,
.ant-dropdown-menu .ant-dropdown-menu-item-danger {
  color: #fca5a5 !important;
}

.profile-layout,
.billing-page,
.team-page,
.invoices-page,
.tickets-page,
.order-page {
  color: var(--yl-text) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 24%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 78%, rgba(16, 185, 129, 0.12) 0 1px, transparent 2px),
    linear-gradient(180deg, #030712 0%, #06111f 48%, #020617 100%) !important;
  background-size: 180px 180px, 260px 260px, 320px 320px, 100% 100% !important;
  min-height: 100vh !important;
  position: relative;
  overflow-x: hidden;
}

.profile-layout::before,
.billing-page::before,
.team-page::before,
.invoices-page::before,
.tickets-page::before,
.order-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(34, 211, 238, 0.08), transparent 28%, rgba(16, 185, 129, 0.08) 74%, transparent),
    radial-gradient(circle at 70% 18%, rgba(34, 211, 238, 0.18), transparent 30%),
    radial-gradient(circle at 16% 82%, rgba(16, 185, 129, 0.1), transparent 32%);
  opacity: 0.84;
}

.profile-content,
.billing-container,
.team-container,
.invoices-container,
.tickets-container,
.order-page {
  position: relative;
  z-index: 1;
}

.billing-container,
.team-container,
.invoices-container,
.tickets-container {
  max-width: 1320px !important;
  padding: 44px 24px 72px !important;
}

.tickets-container {
  max-width: 1080px !important;
}

.order-page {
  max-width: 760px !important;
  padding: 72px 24px !important;
}

.billing-head,
.team-page-head,
.invoices-head,
.tickets-head {
  margin-bottom: 28px !important;
}

.billing-head h1,
.team-page-head h1,
.invoices-head h1,
.tickets-head h1,
.profile-page-head h1 {
  color: #f8fafc !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
  margin: 0 !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 26px rgba(34, 211, 238, 0.24);
}

.billing-head h1::before,
.team-page-head h1::before,
.invoices-head h1::before,
.tickets-head h1::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--yl-cyan), var(--yl-green));
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.48);
  vertical-align: 6px;
}

.billing-head p,
.team-page-head p,
.invoices-head p,
.tickets-head p,
.profile-page-head p {
  color: var(--yl-muted) !important;
  font-size: 15px;
  line-height: 1.8;
}

.billing-stat-card,
.billing-card,
.team-card,
.team-head-card,
.team-stat-card,
.team-empty-card,
.inv-card,
.inv-title-card,
.ticket-row,
.tickets-empty,
.order-card,
.profile-card,
.profile-stat-card,
.profile-course-card,
.profile-sider-head {
  background: linear-gradient(145deg, var(--yl-panel), var(--yl-panel-strong)) !important;
  border: 1px solid var(--yl-line) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px);
}

.billing-stat-card:hover,
.team-stat-card:hover,
.inv-title-card:hover,
.ticket-row:hover {
  border-color: var(--yl-line-strong) !important;
  transform: translateY(-2px);
}

.billing-section-head h2,
.team-card-head h3,
.inv-section-head h2,
.inv-apply-form h2,
.ticket-title-text,
.profile-card .ant-card-head-title,
.profile-card .ant-card-meta-title,
.order-card .ant-card-head-title {
  color: #f8fafc !important;
  font-weight: 900 !important;
}

.billing-stat-value,
.team-stat-value,
.billing-stat-value.highlight,
.inv-amount,
.team-meta-item b,
.billing-page a,
.invoices-page a,
.tickets-page .ant-empty-description a {
  color: var(--yl-cyan) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.billing-stat-label,
.team-stat-label,
.inv-field > label,
.ticket-row-meta,
.team-card-sub,
.inv-selected-info,
.inv-title-tax,
.inv-title-meta,
.profile-kicker {
  color: var(--yl-muted) !important;
}

.profile-sider {
  background: rgba(3, 7, 18, 0.86) !important;
  border-right: 1px solid var(--yl-line) !important;
  box-shadow: 18px 0 46px rgba(0, 0, 0, 0.24);
}

.profile-menu .ant-menu-item-selected,
.help-toc-item.active {
  color: #67e8f9 !important;
  background: rgba(8, 145, 178, 0.24) !important;
  border-color: rgba(34, 211, 238, 0.28) !important;
}

.profile-menu .ant-menu-item:hover {
  color: #e0faff !important;
  background: rgba(34, 211, 238, 0.1) !important;
}

.billing-page .ant-table,
.team-page .ant-table,
.invoices-page .ant-table,
.tickets-page .ant-table {
  color: #d8e8f4 !important;
  background: transparent !important;
}

.billing-page .ant-table-thead > tr > th,
.team-page .ant-table-thead > tr > th,
.invoices-page .ant-table-thead > tr > th,
.tickets-page .ant-table-thead > tr > th {
  color: #dff8ff !important;
  background: rgba(8, 47, 73, 0.44) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18) !important;
}

.billing-page .ant-table-tbody > tr > td,
.team-page .ant-table-tbody > tr > td,
.invoices-page .ant-table-tbody > tr > td,
.tickets-page .ant-table-tbody > tr > td {
  color: #cfeaf6 !important;
  background: rgba(15, 23, 42, 0.52) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.1) !important;
}

.billing-page .ant-table-tbody > tr:hover > td,
.team-page .ant-table-tbody > tr:hover > td,
.invoices-page .ant-table-tbody > tr:hover > td,
.tickets-page .ant-table-tbody > tr:hover > td {
  background: rgba(34, 211, 238, 0.1) !important;
}

.billing-page .ant-input,
.billing-page .ant-select-selector,
.billing-page .ant-picker,
.billing-page .ant-input-number,
.team-page .ant-input,
.team-page .ant-select-selector,
.team-page .ant-picker,
.team-page .ant-input-number,
.invoices-page .ant-input,
.invoices-page .ant-select-selector,
.invoices-page .ant-picker,
.invoices-page .ant-input-number,
.tickets-page .ant-input,
.tickets-page .ant-select-selector,
.tickets-page .ant-picker,
.tickets-page .ant-input-number,
.profile-layout .ant-input,
.profile-layout .ant-select-selector,
.profile-layout .ant-picker,
.profile-layout .ant-input-number,
.order-page .ant-radio-button-wrapper {
  color: #e5f7ff !important;
  background: rgba(2, 6, 23, 0.48) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
  border-radius: 8px !important;
}

.billing-page .ant-input::placeholder,
.team-page .ant-input::placeholder,
.invoices-page .ant-input::placeholder,
.tickets-page .ant-input::placeholder,
.profile-layout .ant-input::placeholder {
  color: #6f8ea4 !important;
}

.billing-page .ant-btn-primary,
.team-page .ant-btn-primary,
.invoices-page .ant-btn-primary,
.tickets-page .ant-btn-primary,
.profile-layout .ant-btn-primary,
.order-page .ant-btn-primary {
  color: #042f2e !important;
  background: linear-gradient(135deg, #22d3ee, #10b981) !important;
  border: 1px solid rgba(34, 211, 238, 0.42) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.22) !important;
  font-weight: 900 !important;
}

.billing-page .ant-btn-default,
.team-page .ant-btn-default,
.invoices-page .ant-btn-default,
.tickets-page .ant-btn-default,
.profile-layout .ant-btn-default,
.order-page .ant-btn-default {
  color: #d8e8f4 !important;
  background: rgba(15, 23, 42, 0.46) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
  border-radius: 8px !important;
}

.billing-page .ant-tabs-tab,
.team-page .ant-tabs-tab,
.invoices-page .ant-tabs-tab,
.tickets-page .ant-tabs-tab,
.profile-layout .ant-tabs-tab {
  color: #8fb5c8 !important;
}

.billing-page .ant-tabs-tab-active .ant-tabs-tab-btn,
.team-page .ant-tabs-tab-active .ant-tabs-tab-btn,
.invoices-page .ant-tabs-tab-active .ant-tabs-tab-btn,
.tickets-page .ant-tabs-tab-active .ant-tabs-tab-btn,
.profile-layout .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #67e8f9 !important;
  font-weight: 900 !important;
}

.billing-page .ant-pagination-item,
.tickets-page .ant-pagination-item,
.invoices-page .ant-pagination-item {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(125, 211, 252, 0.18) !important;
  border-radius: 7px !important;
}

.billing-page .ant-pagination-item a,
.tickets-page .ant-pagination-item a,
.invoices-page .ant-pagination-item a {
  color: #cfeaf6 !important;
}

.billing-page .ant-pagination-item-active,
.tickets-page .ant-pagination-item-active,
.invoices-page .ant-pagination-item-active {
  border-color: rgba(34, 211, 238, 0.62) !important;
  background: rgba(34, 211, 238, 0.14) !important;
}

.order-card {
  overflow: hidden;
}

.order-info {
  border-bottom-color: rgba(125, 211, 252, 0.16) !important;
}

.order-info h3 {
  color: #f8fafc !important;
  font-weight: 900;
}

.order-amount span {
  color: #22d3ee !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.22);
}

@media (max-width: 900px) {
  .billing-container,
  .team-container,
  .invoices-container,
  .tickets-container,
  .order-page {
    padding: 30px 16px 54px !important;
  }

  .billing-head,
  .invoices-head,
  .tickets-head,
  .team-head-card {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .billing-stats,
  .team-stats-grid,
  .inv-apply-grid {
    grid-template-columns: 1fr !important;
  }

  .billing-head h1,
  .team-page-head h1,
  .invoices-head h1,
  .tickets-head h1,
  .profile-page-head h1 {
    font-size: 28px !important;
  }
}