.portal-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid #ffcc00;
  border-radius: 16px;
  background: #ffcc00;
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.portal-mark {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #000000;
  color: #ffcc00;
}

.portal-mark svg,
.portal-link > svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.portal-link > span {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.portal-link:hover,
.portal-link:focus-visible {
  background: #ffe14a;
  border-color: #ffe14a;
}

.portal-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.account-bar:hover,
.account-bar:focus-visible {
  border-color: #ffcc00;
  color: #ffcc00;
}

.account-bar.is-danger {
  color: #ff5c5c;
}

.account-bar.is-danger:hover,
.account-bar.is-danger:focus-visible {
  border-color: #ff5c5c;
  background: #ff5c5c;
  color: #000000;
}

.switch {
  width: 44px;
  height: 26px;
  flex: none;
  position: relative;
  border: 0;
  border-radius: 999px;
  background: #2a2a2a;
  cursor: pointer;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 180ms ease;
}

.switch[aria-checked="true"] {
  background: #ffcc00;
}

.switch[aria-checked="true"]::after {
  transform: translateX(18px);
  background: #000000;
}

.filter-menu .menu-list,
.lang-menu .menu-list {
  position: fixed;
  z-index: 20;
  top: auto;
  right: auto;
  left: auto;
  width: 220px;
}

.head-lead,
.head-tools {
  display: flex;
  align-items: center;
  min-width: 0;
}

.head-lead {
  flex: 1;
  gap: 14px;
}

.head-tools {
  flex: none;
  gap: 8px;
  padding: 6px;
  border: 1px solid #242424;
  border-radius: 16px;
  background: #111111;
}

.back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
}

.back svg {
  width: 18px;
  height: 18px;
}

.back:hover,
.back:focus-visible {
  border-color: #ffcc00;
  color: #ffcc00;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  flex: none;
  font: inherit;
  padding: 0 14px;
  border: 1px solid #242424;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pill.is-editable {
  cursor: pointer;
}

.pill.is-static {
  cursor: default;
}

.pill-caret {
  width: 14px;
  height: 14px;
  flex: none;
}

.status-menu {
  position: relative;
  flex: none;
}

.status-menu .menu-list {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 220px;
}

.pill.is-open {
  color: #3dcc6e;
  border-color: #1e3d2a;
  background: #102418;
}

.pill.is-review {
  color: #ffcc00;
  border-color: #3d3300;
  background: #241c00;
}

.pill.is-problem {
  color: #ff5c5c;
  border-color: #3d1c1c;
  background: #241010;
}

.pill.is-done {
  color: #4da3ff;
  border-color: #1a2e45;
  background: #101824;
}

.trash {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid #3d1c1c;
  border-radius: 10px;
  background: #241010;
  color: #ff5c5c;
  cursor: pointer;
}

.trash svg {
  width: 16px;
  height: 16px;
}

.trash:hover,
.trash:focus-visible {
  background: #ff5c5c;
  color: #000000;
}

.trash:disabled {
  border-color: #242424;
  background: #000000;
  color: #6a6a6a;
  cursor: default;
}