.is-hidden { display:none; }

.richtext {
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#0d2445;
}

.richtext__mode {
  display:flex;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:#10284b;
}

.richtext__mode-btn {
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#163766;
  color:var(--text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.richtext__mode-btn:hover {
  border-color:#3b6191;
  background:#1a3f72;
}

.richtext__mode-btn.is-active {
  border-color:var(--primary);
  background:rgba(241,197,108,.16);
  color:var(--primary);
}

.richtext__mode-hint {
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  background:#10284b;
}

.richtext__toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:#10284b;
}

.richtext__toolbar button,
.richtext__toolbar select {
  min-height:36px;
}

.richtext__toolbar button {
  min-width:36px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#163766;
  color:var(--text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.richtext__toolbar button:hover,
.richtext__toolbar select:hover {
  border-color:#3b6191;
  background:#1a3f72;
}

.richtext__toolbar select {
  width:auto;
  min-width:150px;
  padding:0 10px;
  background:#163766;
}

.richtext__editor,
.richtext__html {
  min-height:280px;
  padding:14px;
  outline:none;
  line-height:1.6;
}

.richtext__editor:empty::before {
  content:attr(data-placeholder);
  color:var(--muted);
}

.richtext__html {
  width:100%;
  border:0;
  border-radius:0;
  resize:vertical;
  font-family:Consolas, Menlo, Monaco, "Courier New", monospace;
  background:#0d2445;
  color:var(--text);
}

.richtext__editor a {
  color:#9ac7ff;
  text-decoration:underline;
}

.richtext__editor ul,
.richtext__editor ol {
  padding-left:22px;
}