:root {
  --app-primary: #3157d5;
  --app-primary-dark: #213b9f;
  --app-ink: #1f2937;
  --app-muted: #64748b;
  --app-border: #e5eaf2;
  --app-surface: #ffffff;
  --app-background: #f4f7fb;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--app-ink);
  background: var(--app-background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

a {
  color: var(--app-primary);
}

a:hover {
  color: var(--app-primary-dark);
}

.app-public .navbar {
  min-height: 64px;
}

.app-public .navbar-brand {
  color: var(--app-ink);
  font-weight: 700;
}

.app-public .navbar .nav-link {
  color: #475569;
}

.app-public .header.bg-gradient-primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(130deg, #3157d5 0%, #5949c8 55%, #7847b9 100%);
  padding-bottom: 4rem !important;
}

.app-public .header.bg-gradient-primary::after {
  position: absolute;
  right: -10%;
  bottom: -170px;
  width: 55%;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  content: "";
}

.app-public .header-body {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem !important;
}

.app-public .header h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.separator {
  display: none;
}

.app-public .main-content > .container.mt--8 {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem !important;
}

.app-public .card,
.app-user-content .card {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 0.85rem;
  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.055);
}

.app-public .card-body,
.app-user-content .card-body {
  overflow-wrap: anywhere;
}

.app-public .card-body h3,
.app-user-content .card-header h3,
.app-user-content .card-header h5 {
  color: var(--app-ink);
  font-weight: 650;
  font-size: 1.1rem;
}

.app-knowledge-title {
  font-size: 1.15rem;
}

.app-flow-chart {
  position: relative;
  height: 280px;
  margin-bottom: 1.5rem;
}

.app-dashboard-plan-name {
  font-size: 1.25rem;
  font-weight: 600;
}

.app-dashboard-plan-heading {
  font-size: 1rem;
  font-weight: 600;
}

.app-wallet-label {
  font-size: 0.8rem;
}

.app-wallet-amount {
  font-size: 1.25rem;
}

.app-wallet-page {
  position: relative;
}

.app-wallet-page .wallet-overview {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-wallet-page .wallet-overview > .card-header {
  padding: 1.1rem 1.4rem;
  border: 0;
  border-radius: 0.85rem 0.85rem 0 0;
  background: linear-gradient(110deg, #edf3ff, #f4f0ff);
}

.app-wallet-page .wallet-overview > .card-body {
  padding: 1.25rem 0 0;
}

.app-wallet-page .wallet-notice {
  border: 1px solid #dce8ff;
  background: linear-gradient(115deg, #f1f6ff, #f8f5ff);
  box-shadow: none;
}

.app-wallet-page .wallet-notice .card-body {
  color: #475569;
}

.app-wallet-page .wallet-summary-row {
  margin-top: 0.25rem;
}

.app-wallet-page .app-wallet-summary {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.07);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.app-wallet-page .app-wallet-summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.1);
}

.app-wallet-page .app-wallet-summary::after {
  position: absolute;
  top: -42px;
  right: -28px;
  width: 130px;
  height: 130px;
  border: 18px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.app-wallet-page .app-wallet-summary .card-body {
  position: relative;
  z-index: 1;
  padding: 1.35rem;
}

.app-wallet-page .app-wallet-balance {
  background: linear-gradient(125deg, #e8f1ff, #dce8ff);
}

.app-wallet-page .app-wallet-balance .app-wallet-label {
  color: #526b9c !important;
}

.app-wallet-page .app-wallet-balance .app-wallet-amount {
  color: #3157b7;
}

.app-wallet-page .app-wallet-balance .btn {
  border-color: rgba(49, 87, 183, 0.35);
  color: #3157b7;
}

.app-wallet-page .app-wallet-balance .btn:hover {
  background: #3157b7;
  color: #fff;
}

.app-wallet-page .app-wallet-commission {
  background: linear-gradient(125deg, #e6f8f3, #d5f2ea);
}

.app-wallet-page .app-wallet-commission .app-wallet-label {
  color: #397d70 !important;
}

.app-wallet-page .app-wallet-commission .app-wallet-amount {
  color: #13836f;
}

.app-wallet-page .app-wallet-commission .btn {
  border-color: rgba(19, 131, 111, 0.3);
  color: #117c6a;
}

.app-wallet-page .app-wallet-commission .btn:hover {
  background: #13836f;
  color: #fff;
}

.app-wallet-page .app-wallet-section .card-header {
  background: linear-gradient(110deg, #f0f5ff, #f6f3ff);
}

.app-wallet-page .app-wallet-section .card-header h3 {
  color: #34466d;
}

.app-wallet-page .app-wallet-invitation .card-body {
  background: linear-gradient(145deg, #fff, #fbfaff);
}

.app-wallet-page .app-wallet-invitation .card-body > .row {
  margin: 0;
  padding: 0.85rem 0.25rem !important;
  border-bottom: 1px solid #edf0f6;
}

.app-wallet-page .app-wallet-invitation .card-body > .row:last-child {
  border-bottom: 0;
}

.app-wallet-page .app-wallet-invitation .card-body p {
  color: #334155;
}

.app-wallet-page #commission_code {
  overflow-wrap: anywhere;
  color: #4c5f9d;
}

.app-wallet-page .fixed-table-container {
  border-color: #e8edf5;
  border-radius: 0.55rem;
}

.app-wallet-page .fixed-table-container thead th {
  background: #f3f6fc;
}

@media (max-width: 767.98px) {
  .app-wallet-page .app-wallet-summary .card-body {
    padding: 1.1rem;
  }

  .app-wallet-page .app-wallet-commission .card-body > .row {
    row-gap: 0.75rem;
  }
}

.app-public .app-footer {
  border-top: 1px solid var(--app-border);
  background: #fff;
}

.app-public .app-footer .nav-link {
  color: var(--app-muted);
}

.app-public .input-group-alternative {
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: #fff;
}

.app-public .input-group-alternative:focus-within {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.2rem rgba(49, 87, 213, 0.12);
}

.app-public .input-group-alternative .form-control,
.app-public .input-group-alternative .input-group-text {
  border: 0;
  background: transparent;
}

.app-public .input-group-alternative .form-control:focus {
  box-shadow: none;
}

.app-user-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #182747;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.14);
}

.app-user-nav .navbar-brand {
  color: #fff;
  white-space: nowrap;
}

.app-user-nav .navbar-brand span {
  margin-left: 0.35rem;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.app-user-nav .nav-link,
.app-user-nav .navbar-text,
.app-user-nav .navbar-text a {
  color: #dbe5f3;
}

.app-user-nav .nav-link {
  padding-right: 0.65rem;
  padding-left: 0.65rem;
}

.app-user-nav .nav-link:hover,
.app-user-nav .nav-link.active,
.app-user-nav .navbar-text a:hover {
  color: #fff;
}

.app-user-account {
  white-space: nowrap;
}

.app-user-content {
  min-height: calc(100vh - 64px);
  padding: 1.5rem 1.25rem 3rem;
}

.app-user-content .container-fluid.mt--6,
.app-user-content .container-fluid.mt--8 {
  margin-top: 0 !important;
}

.app-user-content .card {
  margin-bottom: 1.25rem;
}

.app-user-content .card-header {
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(110deg, #f4f7ff, #faf9ff);
}

.app-user-content .card-header h3,
.app-user-content .card-header h4,
.app-user-content .card-header h5 {
  margin-bottom: 0;
  color: #34466d;
  font-size: 1.05rem;
  font-weight: 650;
}

.app-user-content .card-body > .row.py-3 {
  border-bottom: 1px solid #edf0f6;
}

.app-user-content .card-body > .row.py-3:last-child {
  border-bottom: 0;
}

.app-user-content .card-body h3.heading {
  color: #334155;
  font-size: 1rem;
  font-weight: 600;
}

.app-user-content .card-body .heading-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.app-user-content .table-responsive {
  border-radius: 0 0 0.85rem 0.85rem;
}

.app-user-content .table {
  color: #334155;
}

.app-user-content .table tbody tr {
  transition: background-color 140ms ease;
}

.app-user-content .table tbody tr:hover {
  background-color: #f6f8fd;
}

.app-user-content .table td,
.app-user-content .table th {
  border-color: #edf0f6;
}

.app-user-content .table thead th {
  color: #52627f;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.app-user-content .fixed-table-toolbar {
  padding: 0.75rem 1rem;
}

.app-user-content .fixed-table-pagination {
  padding: 0 1rem 0.75rem;
  color: var(--app-muted);
}

.app-user-content .fixed-table-pagination .pagination a {
  color: var(--app-primary);
}

.app-user-content .pagination .page-item.active .page-link {
  border-color: var(--app-primary);
  background: var(--app-primary);
}

.app-user-content .badge {
  border-radius: 999px;
}

.app-user-content .alert {
  border: 0;
  border-radius: 0.65rem;
}

.app-user-content .modal-content {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 0.85rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.app-user-content .modal-header {
  border-bottom-color: var(--app-border);
  background: linear-gradient(110deg, #f4f7ff, #faf9ff);
}

.app-user-content .list-group-item {
  border-color: #edf0f6;
}

.app-user-content .card-pricing {
  border: 1px solid var(--app-border) !important;
  background: linear-gradient(160deg, #fff 35%, #f7f8ff);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.app-user-content .card-pricing:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(31, 41, 55, 0.1);
}

.app-user-content .card-pricing .card-header {
  border-bottom: 0;
  background: transparent;
}

.app-user-content .card-pricing .card-header h4 {
  color: #4c5f9d;
  font-size: 1rem;
}

.app-user-content .card-pricing .display-2 {
  color: var(--app-primary);
  font-size: 2.1rem;
  font-weight: 700;
}

.app-user-content .card-pricing .card-footer {
  border-top: 1px solid #edf0f6;
  background: rgba(244, 247, 255, 0.8);
}

.app-user-content .card-pricing .card-footer a {
  white-space: normal;
}

.app-dashboard-header > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.app-dashboard-header .row > [class*="col-"] {
  margin-bottom: 1rem;
}

.app-dashboard-header .card {
  height: calc(100% - 1.25rem);
}

.app-dashboard-header .progress {
  height: 0.6rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}

.app-dashboard-header .progress-bar {
  border-radius: inherit;
}

.app-user-content .app-subscription-list td.budget {
  max-width: 1px;
  overflow-wrap: anywhere;
  color: #52627f;
  font-size: 0.86rem;
}

.app-user-content .app-subscription-list td[onclick],
.app-user-content .app-subscription-list td a {
  color: var(--app-primary);
  font-weight: 600;
}

.app-user-content .loader-container {
  color: var(--app-muted);
}

.app-ticket-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  vertical-align: middle;
}

.app-ticket-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-user-content .app-ticket-message {
  font-size: 0.9rem;
}

.app-user-content .app-ticket-sender {
  color: #34466d;
  font-size: 0.88rem;
  font-weight: 650;
}

.app-user-content .app-ticket-time {
  color: var(--app-muted);
  font-size: 0.75rem;
}

.app-user-content .app-ticket-message-text {
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.app-user-content .card-pricing {
  height: calc(100% - 1.25rem);
}

.app-user-content .card-pricing .display-2 {
  color: var(--app-primary);
  font-size: 2.1rem;
  font-weight: 700;
}

.app-user-content .table {
  margin-bottom: 0;
}

.app-user-content .table th,
.app-user-content .table td {
  vertical-align: middle;
}

.app-subscription-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.app-subscription-icon img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.app-node-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 500;
  vertical-align: middle;
}

.app-node-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  border-radius: 50%;
}

.app-wallet-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.app-wallet-state-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  border-radius: 50%;
}

.app-user-content .thead-light th {
  color: #475569;
  background: #f3f6fa;
  border-color: var(--app-border);
}

.app-user-content .form-control {
  border-color: #d8e0eb;
  border-radius: 0.45rem;
}

.app-user-content .form-control:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.2rem rgba(49, 87, 213, 0.12);
}

.btn {
  border-radius: 0.45rem;
}

.btn-primary {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--app-primary-dark);
  background-color: var(--app-primary-dark);
}

.app-auth-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f5f7fc;
}

.app-auth-layout {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(100vh - 190px);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.app-auth-layout > .row {
  align-items: stretch;
}

.app-auth-layout > .row > [class*="col-"]:not(.app-auth-intro) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2.5rem 3.5rem 2.5rem 1.5rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.16), transparent 23rem),
    linear-gradient(145deg, #263fa8 0%, #4657d0 52%, #724bc2 100%);
  color: #fff;
}

.app-auth-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.app-auth-kicker-dot {
  width: 7px;
  height: 7px;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: #a5f3d0;
  box-shadow: 0 0 0 4px rgba(165, 243, 208, 0.16);
}

.app-auth-intro h1 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(2.25rem, 4vw, 3.2rem);
  font-weight: 750;
  letter-spacing: -0.045em;
}

.app-auth-lead {
  max-width: 28rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.8;
}

.app-auth-custom-copy {
  margin-bottom: 1.6rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.app-auth-custom-copy p {
  margin-bottom: 0.5rem;
}

.app-auth-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
}

.app-auth-benefits span {
  display: inline-flex;
  align-items: center;
}

.app-auth-benefits i {
  margin-right: 0.45rem;
  color: #a5f3d0;
  font-size: 0.8rem;
}

.app-auth-card {
  padding: 2.5rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 22px 65px rgba(31, 41, 75, 0.14);
}

.app-auth-card-heading {
  position: relative;
  padding-left: 3.8rem;
  margin-bottom: 1.8rem;
}

.app-auth-card-icon {
  position: absolute;
  top: 0.15rem;
  left: 0;
  display: inline-flex;
  width: 2.9rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: #edf1ff;
  color: var(--app-primary);
  font-size: 1.15rem;
}

.app-auth-card-eyebrow {
  margin-bottom: 0.3rem;
  color: var(--app-primary);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.app-auth-card-heading h2 {
  margin-bottom: 0.25rem;
  color: #172554;
  font-size: 1.55rem;
  font-weight: 700;
}

.app-auth-card-heading p {
  margin-bottom: 0;
  color: #7b879b;
  font-size: 0.9rem;
}

.app-auth-form-group {
  margin-bottom: 1.15rem;
}

.app-auth-form-group > label {
  margin-bottom: 0.5rem;
  color: #344054;
  font-size: 0.84rem;
  font-weight: 600;
}

.app-auth-page .input-group-alternative {
  min-height: 3.15rem;
  border: 1px solid #e5eaf2;
  border-radius: 0.65rem;
  background: #f8faff;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.app-auth-page .input-group-alternative:focus-within {
  border-color: #8195f0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(49, 87, 213, 0.1);
}

.app-auth-page .input-group-alternative .input-group-text {
  border: 0;
  background: transparent;
  color: #8995aa;
}

.app-auth-page .input-group-alternative .form-control {
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #1f2937;
}

.app-auth-page .input-group-alternative .form-control::placeholder {
  color: #a0aabc;
}

.app-auth-submit {
  min-height: 3.1rem;
  margin-top: 0.55rem;
  border-radius: 0.65rem;
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.2);
  font-size: 0.98rem;
  font-weight: 650;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.app-auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(49, 87, 213, 0.25);
}

.app-auth-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.35rem;
  margin-top: 1.5rem;
  border-top: 1px solid #edf0f5;
  color: #748096;
  font-size: 0.84rem;
}

.app-auth-card-footer a,
.app-auth-agreement a {
  color: var(--app-primary);
  font-weight: 600;
}

.app-auth-captcha-group #captchaImg {
  width: 112px;
  height: 48px;
  padding: 0.25rem;
  object-fit: contain;
  cursor: pointer;
}

.app-auth-agreement {
  margin: 0.45rem 0 0.6rem;
  color: #64748b;
  font-size: 0.85rem;
}

.app-auth-register-footer {
  justify-content: center;
}

.app-home {
  overflow: hidden;
  background: #f7f8fc;
}

.app-home-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(133, 116, 255, 0.2), transparent 33rem),
    linear-gradient(130deg, #182b6b 0%, #263c91 48%, #463c96 100%);
  color: #fff;
}

.app-home-hero::before,
.app-home-hero::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.app-home-hero::before {
  top: -28rem;
  right: -12rem;
  width: 64rem;
  height: 64rem;
}

.app-home-hero::after {
  right: -5rem;
  bottom: -35rem;
  width: 58rem;
  height: 58rem;
}

.app-home-hero .container {
  position: relative;
  z-index: 1;
}

.app-home-copy {
  position: relative;
  z-index: 2;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.app-home-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.app-home-eyebrow span {
  width: 7px;
  height: 7px;
  margin-right: 0.65rem;
  border-radius: 50%;
  background: #8ff0ca;
  box-shadow: 0 0 0 5px rgba(143, 240, 202, 0.13);
}

.app-home-copy h1 {
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: clamp(2.7rem, 5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.17;
}

.app-home-copy h1 strong {
  color: #c8d3ff;
  font-weight: 750;
}

.app-home-lead {
  max-width: 29rem;
  margin-bottom: 1.9rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  line-height: 1.8;
}

.app-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.app-home-primary {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid #fff;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(11, 20, 56, 0.18);
  color: #263c91;
  font-size: 0.95rem;
  font-weight: 650;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.app-home-primary:hover,
.app-home-primary:focus {
  transform: translateY(-2px);
  border-color: #f1f4ff;
  background: #f1f4ff;
  color: #213b9f;
  box-shadow: 0 12px 25px rgba(11, 20, 56, 0.24);
}

.app-home-primary i,
.app-home-feature-card a i {
  font-size: 0.7rem;
}

.app-home-secondary {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.65rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease;
}

.app-home-secondary:hover,
.app-home-secondary:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.app-home-announcement {
  display: flex;
  max-width: 27rem;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  margin-top: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.app-home-announcement-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.12);
  color: #c8d3ff;
}

.app-home-announcement-label {
  display: block;
  margin-bottom: 0.15rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
}

.app-home-announcement p {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 550;
}

.app-home-visual-wrap {
  position: relative;
  display: flex;
  min-height: 400px;
  align-items: center;
  justify-content: center;
}

.app-home-visual {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(9, 17, 51, 0.28);
  color: #172554;
}

.app-home-visual-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.app-home-visual-mark {
  display: inline-flex;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: linear-gradient(140deg, #e7edff, #f0eaff);
  color: #4258c4;
  font-size: 1.1rem;
}

.app-home-visual-caption {
  display: block;
  margin-bottom: 0.2rem;
  color: #8995aa;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.app-home-visual-top h2 {
  margin: 0;
  color: #172554;
  font-size: 1.1rem;
  font-weight: 700;
}

.app-home-visual-menu {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 50%;
  background: #f4f6fb;
  color: #75819a;
}

.app-home-visual-line {
  height: 1px;
  margin: 1.3rem 0 0.55rem;
  background: #edf0f6;
}

.app-home-visual-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0.15rem;
  border-bottom: 1px solid #f0f2f7;
}

.app-home-visual-row:last-of-type {
  border-bottom: 0;
}

.app-home-visual-row-icon {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 0.95rem;
}

.app-home-visual-account {
  background: #edf2ff;
  color: #4561ce;
}

.app-home-visual-plan {
  background: #f2edff;
  color: #8057c7;
}

.app-home-visual-usage {
  background: #e8f8f3;
  color: #258d70;
}

.app-home-visual-row strong,
.app-home-visual-row small {
  display: block;
}

.app-home-visual-row strong {
  color: #27334e;
  font-size: 0.86rem;
  font-weight: 650;
}

.app-home-visual-row small {
  margin-top: 0.18rem;
  color: #8a95a8;
  font-size: 0.72rem;
}

.app-home-visual-arrow {
  margin-left: auto;
  color: #a3adbd;
  font-size: 0.65rem;
}

.app-home-visual-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  color: #748096;
  font-size: 0.72rem;
}

.app-home-visual-foot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4bb58c;
}

.app-home-hero-glow {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: min(100%, 1440px);
  height: 3rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #f7f8fc;
  transform: translateX(-50%);
}

.app-home-features {
  position: relative;
  padding: 4.5rem 0 5rem;
}

.app-home-section-heading {
  margin-bottom: 2.25rem;
  text-align: center;
}

.app-home-section-heading > span {
  color: #596bd0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.app-home-section-heading h2 {
  margin: 0.65rem 0 0.55rem;
  color: #172554;
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.app-home-section-heading p {
  margin: 0;
  color: #77839a;
}

.app-home-feature-card {
  height: 100%;
  padding: 1.65rem;
  border: 1px solid #e8ecf4;
  border-radius: 0.95rem;
  background: #fff;
  box-shadow: 0 8px 26px rgba(31, 41, 55, 0.035);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.app-home-feature-card:hover {
  transform: translateY(-4px);
  border-color: #d8def5;
  box-shadow: 0 16px 32px rgba(31, 41, 75, 0.08);
}

.app-home-feature-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border-radius: 0.85rem;
  font-size: 1.15rem;
}

.app-home-feature-blue {
  background: #edf2ff;
  color: #4561ce;
}

.app-home-feature-purple {
  background: #f2edff;
  color: #8057c7;
}

.app-home-feature-teal {
  background: #e8f8f3;
  color: #258d70;
}

.app-home-feature-card h3 {
  margin-bottom: 0.55rem;
  color: #24304a;
  font-size: 1.05rem;
  font-weight: 700;
}

.app-home-feature-card p {
  min-height: 3.2rem;
  margin-bottom: 1.15rem;
  color: #77839a;
  font-size: 0.87rem;
  line-height: 1.75;
}

.app-home-feature-card a {
  color: #435bc4;
  font-size: 0.82rem;
  font-weight: 650;
}

.app-home-feature-card a i {
  margin-left: 0.25rem;
  transition: transform 160ms ease;
}

.app-home-feature-card a:hover i {
  transform: translateX(3px);
}

.app-home-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.7rem 2rem;
  margin-top: 2.25rem;
  border: 1px solid #e5e9f5;
  border-radius: 1rem;
  background: linear-gradient(110deg, #edf2ff, #f2efff);
}

.app-home-bottom-cta h2 {
  margin-bottom: 0.35rem;
  color: #24304a;
  font-size: 1.15rem;
  font-weight: 700;
}

.app-home-bottom-cta p {
  margin: 0;
  color: #77839a;
  font-size: 0.86rem;
}

.app-home-bottom-cta .app-home-primary {
  flex: 0 0 auto;
  min-height: 2.9rem;
  border-color: #3157d5;
  background: #3157d5;
  color: #fff;
  box-shadow: none;
}

.app-home-bottom-cta .app-home-primary:hover,
.app-home-bottom-cta .app-home-primary:focus {
  border-color: #213b9f;
  background: #213b9f;
  color: #fff;
}

.alert-notify {
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
}

@media (max-width: 991.98px) {
  .app-home-hero {
    padding: 4rem 0 5rem;
  }

  .app-home-copy {
    padding-right: 2rem;
  }

  .app-home-visual-wrap {
    min-height: 370px;
  }

  .app-home-visual {
    max-width: 360px;
  }

  .app-home-feature-card {
    padding: 1.35rem;
  }
}

@media (max-width: 767.98px) {
  .app-home-hero {
    padding: 3rem 0 4rem;
  }

  .app-home-copy {
    padding: 0.5rem 0.75rem 1rem;
  }

  .app-home-copy h1 {
    font-size: 3rem;
  }

  .app-home-lead {
    font-size: 1rem;
  }

  .app-home-announcement {
    margin-top: 1.75rem;
  }

  .app-home-visual-wrap {
    min-height: 370px;
    margin-top: 1rem;
  }

  .app-home-visual {
    max-width: 390px;
  }

  .app-home-features {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  .app-home-section-heading h2 {
    font-size: 1.7rem;
  }

  .app-home-feature-card {
    height: auto;
    margin-bottom: 1rem;
  }

  .app-home-feature-card p {
    min-height: 0;
  }

  .app-home-bottom-cta {
    margin-top: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .app-home-copy {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
  }

  .app-home-copy h1 {
    font-size: 2.55rem;
  }

  .app-home-lead {
    font-size: 0.95rem;
  }

  .app-home-visual-wrap {
    min-height: 335px;
  }

  .app-home-visual {
    padding: 1.1rem;
  }

  .app-home-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.4rem;
  }
}

@media (max-width: 991.98px) {
  .app-auth-intro {
    padding-right: 1.5rem;
  }

  .app-auth-card {
    padding: 2rem;
  }
}

@media (max-width: 767.98px) {
  .app-auth-layout {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .app-auth-layout > .row {
    align-items: flex-start;
    min-height: 0;
  }

  .app-auth-intro {
    position: relative;
    padding: 0.5rem 15px 1.75rem;
    border-radius: 0;
    background: none;
  }

  .app-auth-intro::before {
    position: absolute;
    top: 0.5rem;
    right: 15px;
    bottom: 1rem;
    left: 15px;
    border-radius: 1rem;
    background:
      radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.16), transparent 23rem),
      linear-gradient(145deg, #263fa8 0%, #4657d0 52%, #724bc2 100%);
    content: "";
  }

  .app-auth-intro-content {
    position: relative;
    z-index: 1;
    padding: 0 12px 12px;
  }

  .app-auth-intro h1 {
    font-size: 2.25rem;
  }

  .app-auth-lead {
    margin-bottom: 1rem;
    font-size: 0.98rem;
  }

  .app-auth-custom-copy {
    margin-bottom: 1rem;
  }

  .app-auth-benefits {
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .app-auth-card {
    padding: 1.6rem;
    border-radius: 1rem;
  }
}

@media (max-width: 575.98px) {
  .app-auth-layout {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }

  .app-auth-intro {
    padding-right: 15px;
    padding-left: 15px;
  }

  .app-auth-kicker {
    margin-bottom: 0.85rem;
  }

  .app-auth-intro h1 {
    font-size: 1.95rem;
  }

  .app-auth-card {
    padding: 1.35rem 1.2rem;
  }

  .app-auth-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-auth-captcha-group #captchaImg {
    width: 92px;
  }
}

@media (max-width: 991.98px) {
  .app-user-nav .navbar-collapse {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .app-user-nav .navbar-nav {
    padding-top: 0.5rem;
  }

  .app-user-account {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .app-user-content {
    padding: 1rem 1rem 2rem;
  }

  .app-user-content .card-body > .row.py-3 {
    row-gap: 0.35rem;
  }
}

@media (max-width: 575.98px) {
  .app-user-nav .navbar-brand {
    max-width: calc(100vw - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-user-content .card-body {
    padding: 1rem;
  }

  .app-user-content .table {
    font-size: 0.875rem;
  }

  .app-user-content .app-subscription-list td.budget {
    min-width: 12rem;
  }

  .app-user-content .card-pricing .display-2 {
    font-size: 1.8rem;
  }
}