:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #1f1f1f;
  --muted: #666666;
  --link: #0b57d0;
  --link-hover: #0a47ad;
  --border: #d8d8d8;
  --input-bg: #ffffff;
  --chip: #d6d6d6;
  --row-hover: #efefef;
}

:root[data-theme="dark"] {
  --bg: #1f1f1f;
  --panel: #1f1f1f;
  --text: #efefef;
  --muted: #b9b9b9;
  --link: #8ab4ff;
  --link-hover: #b8d1ff;
  --border: #3a3a3a;
  --input-bg: #262626;
  --chip: #3a3a3a;
  --row-hover: #2a2a2a;
}

body {
  background: var(--bg);
  color: var(--text);
}

.main,
.info {
  background: var(--panel);
  border: 0;
  box-shadow: none;
}

a,
a:link,
a:visited {
  color: var(--link);
}

a:hover,
a:active {
  color: var(--link-hover);
}

.comment,
.info-text p {
  color: var(--muted);
}

input[type="text"] {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

input[type="submit"] {
  background: var(--chip);
  color: var(--text);
  border: 1px solid var(--border);
}

.abbreviation-item {
  color: var(--text);
}

.abbreviation-ini,
.abbreviation-def {
  color: var(--text);
}

.abbreviation-item:hover {
  background: var(--row-hover);
}

.themeToggle {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  line-height: 1;
}

.themeIconSun {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-size: 15px;
}

.themeIconMoon {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-size: 11px;
}

.themeIconSep {
  font-size: 16px;
}