/* Lingjing unified visual system. */
:root {
  --lj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --lj-ink: #073240;
  --lj-ink-2: #123d48;
  --lj-muted: rgba(7, 50, 64, .68);
  --lj-muted-strong: rgba(7, 50, 64, .82);
  --lj-light: rgba(247, 253, 255, .96);
  --lj-light-muted: rgba(240, 252, 255, .78);
  --lj-green: #65e7c8;
  --lj-blue: #64b7ff;
  --lj-gold: #ffc65a;
  --lj-panel: rgba(92, 170, 184, .34);
  --lj-panel-strong: rgba(54, 112, 124, .46);
  --lj-input: rgba(232, 252, 255, .3);
  --lj-line: rgba(112, 215, 224, .34);
  --lj-line-strong: rgba(158, 238, 242, .5);
  --lj-shadow: 0 24px 66px rgba(14, 61, 74, .18);
  --lj-radius: 18px;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--lj-font) !important;
  letter-spacing: 0 !important;
}

body {
  color: var(--lj-ink) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.brand-title,
.brand h1,
.brand strong,
.auth-heading h1,
.sidebar-brand h2,
.view-head h3,
.panel-heading h2,
.section-title h3,
.table-card strong,
.modal-box h3,
.dialog-card h3 {
  color: var(--lj-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

p,
label,
.page-meta,
.brand-sub,
.brand p,
.brand span,
.auth-heading p,
.sidebar-brand p,
.view-head p,
.field span,
.field label,
.control span,
.side-label,
.side-help,
.metric span,
.table-summary span,
.section-title span,
.helper-text,
.hint,
.brief-row span,
.notice-card p {
  color: var(--lj-muted) !important;
  text-shadow: none !important;
}

.navbar.header-transparent,
.navbar.header-demo,
.navbar.header-light,
.navbar.header-dark,
.topbar,
.top-bar,
.auth-card,
.card,
.shell,
.hero-panel,
.pay-panel,
.form-section,
.notice-card,
.sidebar,
.side,
.panel,
.filters,
.side-section,
.table-card,
.table-toolbar,
.table-wrap,
.result-table,
.pager-bar,
.detail-head,
.detail-msg,
.modal-box,
.dialog-card,
.brief-card,
.info-grid > div,
.code-panel,
.captcha-dialog,
.toast,
.toast-box {
  border-color: var(--lj-line) !important;
  background:
    linear-gradient(145deg, var(--lj-panel-strong), rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.5) !important;
  backdrop-filter: blur(30px) saturate(1.5) !important;
  box-shadow: var(--lj-shadow), inset 0 1px rgba(255, 255, 255, .28) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.amount-option span,
.choice-option span,
.choice-grid label,
.choice-row label,
.switch-line,
.check-pill,
.page-size-wrap,
.pager button,
.pager-bar button,
.copy-link-btn,
.name-filter-item {
  border-color: var(--lj-line) !important;
  background: var(--lj-input) !important;
  color: var(--lj-ink) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .24),
    inset 0 -1px rgba(92, 186, 199, .08) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(7, 50, 64, .48) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(86, 204, 214, .58) !important;
  box-shadow:
    0 0 0 3px rgba(101, 231, 200, .12),
    inset 0 1px rgba(255, 255, 255, .26) !important;
}

.btn-primary,
.primary,
.pay-button,
.btn-refresh,
.btn-save,
.btn-dialog-confirm,
.query-submit,
.tabs button.active,
.nav-btn.active,
.amount-option input:checked + span,
.choice-option input:checked + span,
.choice-grid input:checked + span,
.choice-row input:checked + span {
  border-color: rgba(170, 242, 240, .62) !important;
  background: linear-gradient(135deg, var(--lj-green), var(--lj-blue)) !important;
  color: #061318 !important;
  font-weight: 780 !important;
  text-shadow: none !important;
  box-shadow: 0 14px 34px rgba(44, 147, 181, .18), inset 0 1px rgba(255, 255, 255, .34) !important;
}

button,
.btn,
.nav-btn,
.secondary,
.ghost,
.btn-light,
.btn-reset,
.btn-dialog-cancel {
  color: var(--lj-ink) !important;
  font-weight: 720 !important;
  text-shadow: none !important;
}

a {
  color: #00877c !important;
}

thead,
thead th,
th {
  color: var(--lj-ink) !important;
  background: linear-gradient(180deg, rgba(232, 252, 255, .34), rgba(92, 170, 184, .22)) !important;
  text-shadow: none !important;
}

td,
table td {
  color: var(--lj-ink-2) !important;
}

.brand-badge,
.brand-mark,
.seal,
.lingjing-brand-icon {
  border-color: var(--lj-line-strong) !important;
  box-shadow: 0 12px 28px rgba(14, 61, 74, .2), inset 0 1px rgba(255, 255, 255, .3) !important;
}

.checks .check-pill {
  color: var(--lj-muted-strong) !important;
  background: rgba(232, 252, 255, .26) !important;
}

.checks .check-pill input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  border: 1px solid rgba(90, 195, 205, .46) !important;
  border-radius: 5px !important;
  background: rgba(232, 252, 255, .34) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28) !important;
}

.checks .check-pill input[type="checkbox"]:checked {
  border-color: rgba(101, 231, 200, .72) !important;
  background: linear-gradient(135deg, var(--lj-green), var(--lj-blue)) !important;
}

body.custom-cursor {
  color: var(--lj-light-muted) !important;
}

body.custom-cursor .lingjing-brand-name,
body.custom-cursor .home-brand-title span,
body.custom-cursor .home-brand-title small,
body.custom-cursor .navbar .navbar-nav .nav-link,
body.custom-cursor .footer-logo.lingjing-footer-brand {
  color: var(--lj-light) !important;
  text-shadow: none !important;
}

body.custom-cursor #home .col-md-6.border-radius-15px,
body.custom-cursor #home .col-md-3.border-radius-15px,
body.custom-cursor .interactive-banner-style-05,
body.custom-cursor .notice-list-panel,
body.custom-cursor .benefit-card,
body.custom-cursor .download-card,
body.custom-cursor .blog-details,
body.custom-cursor .tab-content {
  color: var(--lj-light) !important;
}

body.custom-cursor #noticeList,
body.custom-cursor #noticeList a,
body.custom-cursor .interactive-banner-style-05 p,
body.custom-cursor .benefit-card p,
body.custom-cursor .download-card p {
  color: var(--lj-light-muted) !important;
}

body.custom-cursor .text-yellow,
body.custom-cursor .text-orange,
.type-badge,
.status-dot.warn {
  color: var(--lj-gold) !important;
}