:root {
  --royal-bg-0: #f5efe2;
  --royal-bg-1: #fcf8ef;
  --royal-ink: #2f2417;
  --royal-navy: #1f2f49;
  --royal-gold: #8d6a2e;
  --royal-gold-2: #b38a45;
  --royal-line: #d8c7a2;
  --royal-panel: #fffaf0;
}

body {
  color: var(--royal-ink) !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(179, 138, 69, 0.16), transparent 40%),
    radial-gradient(circle at 86% 0%, rgba(31, 47, 73, 0.1), transparent 38%),
    linear-gradient(180deg, var(--royal-bg-1), var(--royal-bg-0)) !important;
}

.topbar,
header,
.b2c-nav,
nav[role="navigation"] {
  background: linear-gradient(135deg, #13233e, #1f2f49) !important;
  border-bottom: 1px solid rgba(216, 199, 162, 0.45) !important;
}

.topbar .brand span,
header h1,
nav a {
  color: #f9ecd2 !important;
}

.wrap,
main {
  max-width: 1240px !important;
}

.panel,
.card,
.form-card,
.summary,
#cc_gate,
.glb-panel {
  background: var(--royal-panel) !important;
  border: 1px solid var(--royal-line) !important;
  box-shadow: 0 12px 28px rgba(57, 41, 14, 0.12) !important;
}

.tabs button,
.btn-outline,
button.gray,
.btns button.gray {
  background: #223655 !important;
  border-color: #223655 !important;
  color: #f6ead1 !important;
}

.tabs button.active,
button.act,
button.auto,
button.ok,
.btn-primary,
.btn,
.btns button,
#cc_gate a.btn-gate {
  background: linear-gradient(135deg, var(--royal-gold), var(--royal-gold-2)) !important;
  border-color: var(--royal-gold) !important;
  color: #fff !important;
}

h1, h2, h3 {
  letter-spacing: 0.01em;
}

a:hover {
  color: var(--royal-gold) !important;
}