* { box-sizing: border-box; }

:root { color-scheme: dark; }

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(8,5,3,.78), rgba(18,10,5,.38) 38%, rgba(8,5,3,.72)),
    linear-gradient(180deg, rgba(9,6,4,.62), rgba(16,8,3,.66)),
    url('/russian-forest-wallpaper.png?v=forest1') center center / cover fixed no-repeat,
    #140b06 !important;
  color: #f8ddb0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 190, 94, .14), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.34));
}

main {
  max-width: 960px !important;
}

a {
  color: #ffd08d !important;
}

h1,
h2,
h3 {
  color: #ffe5ba !important;
  text-shadow: 0 2px 0 rgba(48,20,6,.42), 0 12px 24px rgba(0,0,0,.24);
}

p,
li,
.muted {
  color: rgba(239, 198, 139, .78) !important;
}

.card,
.req,
#existing > div {
  border: 1px solid rgba(218,145,67,.36) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,190,94,.12), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(72,43,22,.96), rgba(29,18,11,.98)) !important;
  color: #f8ddb0 !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

input,
select,
textarea {
  border: 1px solid rgba(218,145,67,.28) !important;
  background: rgba(22,13,8,.62) !important;
  color: #f8ddb0 !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(239,202,149,.54) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(249,178,87,.58) !important;
  box-shadow: 0 0 0 3px rgba(214,107,31,.16), inset 0 1px 5px rgba(0,0,0,.26) !important;
}

.btn,
.cta,
button,
.lang-switch button {
  border: 1px solid rgba(214,143,69,.28) !important;
  background: linear-gradient(180deg, rgba(91,53,25,.90), rgba(35,22,13,.96)) !important;
  color: #f0c991 !important;
}

.btn.primary,
.cta,
.lang-switch button.active,
button.active {
  border-color: rgba(255,188,99,.48) !important;
  background: linear-gradient(180deg, #dc7824 0%, #b84a15 58%, #76270f 100%) !important;
  color: #fff0cf !important;
  text-shadow: 0 2px 0 rgba(92,31,8,.42);
  box-shadow: 0 13px 24px rgba(65,19,5,.26), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.btn.danger {
  background: linear-gradient(180deg, #a53d21, #6f2015) !important;
  border-color: rgba(255,139,102,.42) !important;
}

.token {
  border-color: rgba(255,188,99,.48) !important;
  background: rgba(109,55,20,.56) !important;
  color: #ffe5ba !important;
}

.status.pending {
  background: rgba(146,71,25,.40) !important;
  color: #ffd08d !important;
  border-color: rgba(255,200,87,.42) !important;
}

.status.approved {
  background: rgba(85,105,39,.34) !important;
  color: #cce68f !important;
}

.status.rejected,
.err {
  color: #ffbf9c !important;
}

.ok {
  color: #f6d08d !important;
}

html.is-embed body {
  background:
    linear-gradient(180deg, rgba(29,18,11,.98), rgba(16,10,6,.98)),
    #140b06 !important;
}

html.is-embed body::before {
  opacity: .18;
}

html.is-embed {
  color-scheme: light !important;
  min-height: 100% !important;
}

html.is-embed body {
  background:
    linear-gradient(180deg, rgba(255,250,241,.88), rgba(250,235,213,.78)),
    url('/russian-forest-wallpaper-light-v1.png?v=1') center center / cover fixed no-repeat,
    #fff7e8 !important;
  color: #4b2d18 !important;
  min-height: 100vh !important;
}

html.is-embed body::before {
  opacity: .12 !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 214, 144, .52), transparent 34%),
    radial-gradient(circle at 85% 16%, rgba(216, 160, 89, .22), transparent 32%) !important;
}

html.is-embed main {
  max-width: 900px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  min-height: 100vh !important;
}

html.is-embed a {
  color: #9a5a12 !important;
}

html.is-embed h1,
html.is-embed h2,
html.is-embed h3 {
  color: #332013 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.88), 0 8px 18px rgba(121, 76, 28, .12) !important;
}

html.is-embed p,
html.is-embed li,
html.is-embed label,
html.is-embed .muted {
  color: #6f4a26 !important;
}

html.is-embed label {
  font-weight: 900 !important;
}

html.is-embed .card,
html.is-embed .req,
html.is-embed #existing > div {
  border: 1px solid rgba(216, 160, 89, .46) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 241, .96), rgba(250, 235, 213, .92)) !important;
  color: #4b2d18 !important;
  box-shadow: 0 12px 24px rgba(143, 95, 40, .10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html.is-embed input,
html.is-embed select,
html.is-embed textarea {
  border: 1px solid rgba(216, 160, 89, .48) !important;
  background: rgba(255, 251, 243, .94) !important;
  color: #4b2d18 !important;
  -webkit-text-fill-color: #4b2d18 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
}

html.is-embed input::placeholder,
html.is-embed textarea::placeholder {
  color: rgba(121, 83, 44, .62) !important;
  -webkit-text-fill-color: rgba(121, 83, 44, .62) !important;
}

html.is-embed .btn,
html.is-embed .cta,
html.is-embed button,
html.is-embed .lang-switch button {
  border: 1px solid rgba(216, 160, 89, .46) !important;
  background: linear-gradient(180deg, rgba(255, 250, 241, .96), rgba(250, 235, 213, .92)) !important;
  color: #704315 !important;
  -webkit-text-fill-color: #704315 !important;
  box-shadow: 0 8px 16px rgba(143, 95, 40, .10), inset 0 1px 0 rgba(255,255,255,.88) !important;
  text-shadow: none !important;
}

html.is-embed .btn.primary,
html.is-embed .cta,
html.is-embed .lang-switch button.active,
html.is-embed button.active {
  border-color: rgba(255, 190, 80, .78) !important;
  background: linear-gradient(180deg, #ff9e25, #f1790e) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 0 rgba(111, 49, 6, .32) !important;
  box-shadow: 0 13px 24px rgba(222, 109, 10, .23), inset 0 2px 0 rgba(255,255,255,.30) !important;
}

html.is-embed .token {
  border-color: rgba(216, 160, 89, .56) !important;
  background: rgba(255, 239, 205, .86) !important;
  color: #5b3218 !important;
}

html.is-embed .status.pending {
  background: rgba(255, 239, 205, .92) !important;
  color: #8a541a !important;
}

html.is-embed .status.approved,
html.is-embed .ok {
  color: #3a7a30 !important;
}

html.is-embed .status.rejected,
html.is-embed .err {
  color: #9a3e20 !important;
}