[hidden] {
  display: none !important;
}

nav {
  overflow-y: auto;
  padding-bottom: 16px;
}

.nav-group {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.nav-group > span {
  padding: 8px 12px 3px;
  color: #999;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
}

.nav-group:not(:first-child) {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.settings-intro {
  margin: 0 0 22px;
}

.settings-section + .settings-section {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 28px;
}

.usage-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.branch-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
  margin-bottom: 24px;
}

.status-choice {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 42px;
}

.status-choice label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-choice input,
.hours-row input[type="checkbox"],
.repeat input[type="checkbox"] {
  width: auto;
}

.badge.usage-warning {
  background: #fff5d6;
  color: #745812;
}

.badge.usage-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.usage-progress-warning span {
  background: var(--danger);
}

@media (max-width: 900px) {
  .nav-group > span {
    display: none;
  }

  .branch-summary,
  .usage-line {
    grid-template-columns: 1fr;
    display: grid;
  }
}