:root {
  --bg: #f6f7f8 !important;
  --surface: #ffffff !important;
  --line: #e1e6ea !important;
  --text: #182330 !important;
  --muted: #65717f !important;
  --accent: #193247 !important;
  --accent-dark: #102839 !important;
  --accent-soft: #e9eff3 !important;
  --bad: #c75a55 !important;
  --soft: #f0f3f5 !important;
  --shadow: 0 2px 6px rgba(22, 34, 46, .04), 0 10px 28px rgba(22, 34, 46, .035) !important;
}

html,
body {
  background:
    linear-gradient(148deg, rgba(217, 104, 91, .12) 0 11%, transparent 11.5% 78%, rgba(108, 159, 142, .10) 78.5% 88%, transparent 88.5%),
    linear-gradient(22deg, transparent 0 57%, rgba(117, 107, 146, .08) 57.2% 60%, transparent 60.4%),
    var(--bg) !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}

body::before {
  background: none !important;
}

.panel {
  width: min(430px, 100%) !important;
  background: #fff !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

.panel::before {
  background: #193247 !important;
}

.brand {
  color: var(--accent) !important;
}

.brand-mark {
  background: linear-gradient(90deg, #d9685b 0 43%, #fff 43% 50%, #193247 50%) !important;
  box-shadow: none !important;
}

h1 {
  color: #09101d !important;
}

input {
  border-color: var(--line) !important;
}

input:focus {
  border-color: #b9c7d1 !important;
  box-shadow: 0 0 0 3px rgba(25, 50, 71, .08) !important;
}

.btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

.btn:hover {
  background: var(--accent-dark) !important;
}