* { box-sizing:border-box; margin:0; padding:0; }
body {
background:#4f1f02;
color:#f5e6d3;
font-family:'PT Mono',monospace;
font-size:20px;
padding:30px 20px;
}

.bg-image-html{ 
	filter: hue-rotate(145deg)brightness(1.5);
  background-image: url("/images/qr/html.png");
  background-repeat: no-repeat;
  background-size: 50px;
  height: 50px;
  padding-left: 70px;
  margin: 0.5em 1em 0;
}
.bg-image-html h1{
	filter: hue-rotate(215deg);
}


.tox-tinymce{filter: hue-rotate(152deg);}
.tox-tinymce iframe{filter: hue-rotate(208deg);}

html .tox .tox-promotion-link{filter: invert(1);}


h1, h2, h3, h4, h5, h6 {
	filter:  brightness(1.5);
  font-weight: 700;
  display: table;
  background: linear-gradient(90deg, #bd2c00 0%, #EF6C00 62%, #FFC107 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3em;
  text-transform: uppercase;
}

h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
h6 { font-size: 20px; }

/* Forces the text in the TinyMCE dropdown to be white/light */
.tox .tox-collection__item-label h1,
.tox .tox-collection__item-label h2,
.tox .tox-collection__item-label h3,
.tox .tox-collection__item-label h4,
.tox .tox-collection__item-label h5,
.tox .tox-collection__item-label h6 {
    color: #ffffff !important;
    margin: 0 !important; /* Prevents weird spacing in the menu */
 
	filter:  initial;
  font-weight: 700;
  display: inline-block;
  background: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  line-height: 1.3em;
  text-transform: initial;
}

body{
	margin-bottom:3em;
}


.editor-wrap {
display:flex;
flex-direction:column;
gap:20px;
width:100%;
}

.panel-label {
font-size:20px;
color:#e79158;
letter-spacing:0.1em;
text-transform:uppercase;
margin-bottom:8px;
border-left:3px solid #e79158;
padding-left:10px;
}

#htmlSource {
width:100%;
height:320px; 
border:1px solid #7a3a10;
color:#ffb870;
font-family:'PT Mono',monospace;
font-size:20px;
padding:14px;
border-radius:4px;
resize:vertical;
outline:none;
line-height:1.6;
background-color: #2a0e00;
  background-image: url("/images/qr/html.png");
  background-repeat: no-repeat;
  background-size: 150px;
  background-position: right 20px top 20px;
  background-blend-mode: luminosity;
}
#htmlSource:focus { border-color:#e79158; }

.btn-row {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:4px;
}

.btn {
background:#7a3a10;
border:none;
color:#f5e6d3;
font-family:'PT Mono',monospace;
font-size:20px;
padding:10px 18px;
border-radius:4px;
cursor:pointer;
letter-spacing:0.04em;
transition:background 0.15s;
white-space:nowrap;
}
.btn:hover { background:#a04a18; }
.btn.active { background:#e79158; color:#2a0e00; }

#toast {
position:fixed;
bottom:28px; left:50%;
transform:translateX(-50%) translateY(16px);
background:#e79158;
color:#2a0e00;
font-family:'PT Mono',monospace;
font-size:20px;
font-weight:700;
letter-spacing:0.08em;
padding:10px 24px;
border-radius:4px;
opacity:0;
pointer-events:none;
transition:opacity 0.2s, transform 0.2s;
z-index:1000;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }