.layer-switch,
.layer-vis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.layer-vis[hidden] {
  display: none !important;
}

.layer-switch button,
.layer-vis button,
.layer-board-actions button,
.layer-manage button,
.layer-form button,
.layer-link,
.layer-pending button,
.counselor-desk-login button {
  border: 1px solid var(--qq-border);
  background: var(--qq-bg-white);
  color: var(--qq-text);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.layer-switch button.is-on,
.layer-vis button.is-on,
.layer-circle.is-on {
  background: var(--qq-btn);
  color: #f7f8f7;
  border-color: var(--qq-btn);
}

.layer-note,
.layer-form-note,
.layer-empty,
.layer-code {
  margin: 0 0 8px;
  color: var(--qq-text-sub);
  font-size: 12px;
  line-height: 1.5;
}

.layer-name-row[hidden],
.layer-check[hidden],
.layer-pick[hidden] {
  display: none !important;
}

.layer-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--qq-text-sub);
}

.layer-name-row input,
.layer-form input,
.layer-form textarea,
.layer-form select,
.layer-manage input,
.layer-reply-form textarea,
.counselor-desk-login input,
.counselor-desk-login select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--qq-border);
  background: var(--qq-bg-white);
  color: var(--qq-text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.layer-board {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--qq-border);
  border-radius: var(--qq-radius);
  background: var(--qq-surface-warm);
}

.layer-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.layer-circle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--qq-border);
  background: var(--qq-bg-white);
  color: var(--qq-text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.layer-circle span,
.layer-flag {
  color: var(--qq-text-sub);
  font-size: 11px;
}

.layer-circle.is-on span {
  color: rgba(247, 248, 247, 0.8);
}

.layer-board-actions,
.layer-manage,
.layer-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.layer-manage {
  margin-top: 8px;
}

.layer-manage p,
.layer-pending p {
  width: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--qq-text-sub);
}

.layer-manage input {
  max-width: 180px;
}

.layer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.layer-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.layer-check input {
  width: auto;
}

.layer-modal-box {
  max-width: 460px;
}

.layer-admins {
  margin: 8px 0;
}

.layer-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0;
  font-size: 13px;
}

.layer-rail-community {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--qq-border);
  border-radius: 10px;
  background: var(--qq-bg-white);
  color: var(--qq-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.layer-dissolve {
  margin-top: 8px;
  border: 1px solid #b42318;
  background: transparent;
  color: #b42318;
  border-radius: 10px;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}

.school-city-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.school-city-filter select {
  border: 1px solid var(--qq-border);
  background: var(--qq-bg-white);
  color: var(--qq-text);
  border-radius: 10px;
  padding: 6px 8px;
  font: inherit;
}

.school-city h4 {
  margin: 8px 0;
  font-size: 14px;
}

.school-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.school-level-title {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--qq-text-sub);
}

@media (max-width: 640px) {
  .school-levels {
    grid-template-columns: 1fr;
  }
}

.layer-replies {
  margin: 8px 0 0;
}

.layer-replies-body {
  width: 100%;
  margin-top: 6px;
}

.layer-reply {
  padding: 6px 0;
  border-top: 1px solid var(--qq-border-light);
  font-size: 13px;
}

.layer-reply strong {
  display: block;
  font-size: 12px;
  color: var(--qq-text-sub);
}

.layer-reply p {
  margin: 2px 0 0;
}

.layer-reply-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.post-card.is-sunk {
  opacity: 0.72;
}

.layer-flags {
  margin-left: 6px;
  font-size: 11px;
  color: var(--qq-text-sub);
}

.counselor-desk-box {
  max-width: 640px;
}

.counselor-card {
  padding: 10px 0;
  border-top: 1px solid var(--qq-border-light);
}

.counselor-card header,
.counselor-identity {
  font-size: 12px;
  color: var(--qq-text-sub);
}

.counselor-card p {
  margin: 4px 0;
  white-space: pre-wrap;
}

.counselor-class-list {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 13px;
}

#pageTreehole.treehole-tab-square #layerCompose,
#pageTreehole.treehole-tab-mine #layerCompose,
#pageTreehole.treehole-tab-daily #layerBoard {
  display: none;
}